@extends("main")
@section("title", "Bulk Tracking - Dino Logistics")

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/tracking.css') }}">
    <link rel="stylesheet" href="{{ asset('css/result_tracking.css') }}">
@endpush

@section("content")

    <!-- HEADER PAGE - BLUE GRADIENT -->
    <div class="page-title" style="background: linear-gradient(135deg, #0554c6 0%, #0442a0 100%) !important;">
      <div class="container" style="margin-top: 50px;">
        <h1>Bulk Tracking</h1>
        <p>Solusi bisnis untuk melacak hingga 300 resi sekaligus</p>
      </div>
    </div>

    <!-- TRACKING SECTION (Clean White Layout) -->
    <section class="tracking-section container">
      
      <div class="tracking-card">
        <div class="tracking-header">
          <h2><i class="fas fa-layer-group" style="color: var(--accent-red);"></i> Multi Lacak</h2>
          <p>Paste daftar nomor resi Anda di sini (satu nomor per baris).</p>
        </div>

        <form id="bulkForm">
          @csrf
          <div class="row">
              <div class="col-md-12">
                  <div class="form-group-custom">
                    <label>Tipe Dokumen</label>
                    <select name="optionData" id="optionData" class="form-control-clean">
                      <option value="awb">Air Way Bills (AWB)</option>
                      <option value="dn">Ref Number</option>
                    </select>
                  </div>
              </div>
              <div class="col-md-12" id="customerCodeGroup" style="display: none;">
                  <div class="form-group-custom">
                     <label>Kode Pelanggan</label>
                     <input type="text" name="customer_code" class="form-control-clean" placeholder="Masukkan Kode">
                  </div>
              </div>
          </div>

          <div class="form-group-custom">
            <div class="input-header-wrapper">
                <label>Daftar Nomor Resi</label>
                <div class="input-tools">
                   <button id="btnClearBulk" type="button" class="btn-clear">Bersihkan</button>
                   <span id="countBulk" class="count-pill">0 / 300 Baris</span>
                </div>
            </div>
            
            <textarea name="tracking_numbers" id="trackingNumbers" 
                      class="form-control-clean" 
                      placeholder="Paste nomor resi di sini...&#10;10002838192&#10;10002838193"></textarea>
          </div>

          <div class="captcha-container">
            <div style="flex: 1;">
              <label style="color: #64748b; font-size: 11px; font-weight: 700; margin-bottom: 5px;">KODE KEAMANAN</label>
              <div class="captcha-display" id="captchaText">{{ session('captcha_code', '----') }}</div>
            </div>
            <div style="flex: 1;">
              <label style="color: #64748b; font-size: 11px; font-weight: 700; margin-bottom: 5px;">KETIK KODE</label>
              <input type="text" name="captcha" id="captchaInput" class="form-control-clean" style="text-align: center; letter-spacing: 2px; text-transform: uppercase;">
            </div>
          </div>

          <button type="submit" class="btn-track">
            <i class="fas fa-search"></i> PROSES DATA
          </button>
        </form>
      </div>
    </section>

    <!-- CONTAINER HASIL -->
    <div class="container" id="bulk-results-container" style="padding-bottom: 80px;"></div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('bulkForm');
        const trackingInput = document.getElementById('trackingNumbers');
        const countDisplay = document.getElementById('countBulk');
        const btnClear = document.getElementById('btnClearBulk');
        const resultsContainer = document.getElementById('bulk-results-container');
        const captchaText = document.getElementById('captchaText');
        const captchaInput = document.getElementById('captchaInput');

        document.getElementById('optionData').addEventListener('change', function() {
             document.getElementById('customerCodeGroup').style.display = (this.value === 'dn') ? 'block' : 'none';
        });

        trackingInput.addEventListener('input', function() {
            const lines = this.value.split('\n').filter(l => l.trim() !== '').length;
            countDisplay.innerText = `${lines} / 300 Baris`;
            countDisplay.style.color = lines > 300 ? '#ef4444' : '#64748b';
        });

        btnClear.addEventListener('click', () => {
            trackingInput.value = '';
            countDisplay.innerText = '0 / 300 Baris';
        });

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            if(trackingInput.value.trim() === '') {
                 Swal.fire({ icon: 'warning', title: 'Kosong', text: 'Masukkan nomor resi terlebih dahulu!', confirmButtonColor: '#ef4444' });
                 return;
            }

            Swal.fire({
                title: 'Memproses Data...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            const formData = new FormData(form);

            fetch("{{ route('tracking.bulk.search') }}", {
                method: 'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if(data.new_captcha) captchaText.innerText = data.new_captcha;
                captchaInput.value = '';

                if(data.status === 'success') {
                    Swal.close();
                    resultsContainer.innerHTML = data.html;
                    resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                } else {
                    Swal.fire({ icon: 'error', title: 'Gagal', text: data.message, confirmButtonColor: '#ef4444' });
                }
            })
            .catch(() => {
                Swal.fire({ icon: 'error', title: 'Error', text: 'Koneksi Server Gagal' });
            });
        });

        resultsContainer.addEventListener('click', function(e) {
            const row = e.target.closest('tr.main-row');
            if (row && !e.target.closest('a')) {
                const detailRow = row.nextElementSibling;
                const icon = row.querySelector('.toggle-icon');
                
                if (detailRow && detailRow.classList.contains('tracking-detail-row')) {
                    const isHidden = detailRow.style.display === 'none';
                    detailRow.style.display = isHidden ? 'table-row' : 'none';
                    if(icon) icon.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)';
                }
            }
        });
    });
</script>
@endpush
@endsection