@extends("main")
@section("title", "Lacak Kiriman - Dino Logistics")

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/tracking.css') }}">
    <link rel="stylesheet" href="{{ asset('css/result_tracking.css') }}">
    <style>
        /* CSS Khusus Anti-Bentrok untuk Kartu Lacak */
        .dino-card-wrapper {
            background: #ffffff;
            border-radius: 20px;
            /* Padding atas-bawah 40px, Kiri-kanan 60px biar simetris dan lega */
            padding: 40px 60px; 
            box-shadow: 0 20px 40px -10px rgba(5, 84, 198, 0.15);
            max-width: 800px;
            margin: 0 auto;
            border: 1px solid rgba(0,0,0,0.03);
            position: relative;
            z-index: 10;
        }

        /* Penyesuaian untuk layar HP biar nggak kepotong */
        @media (max-width: 768px) {
            .dino-card-wrapper {
                padding: 30px 20px;
                border-radius: 16px;
            }
        }
    </style>
@endpush

@section("content")

    <!-- HEADER PAGE - BLUE GRADIENT -->
    <div class="page-title">
      <div class="container" style="margin-top: 50px;">
        <h1>Lacak Kiriman</h1>
        <p>Pantau status pengiriman paket Anda secara real-time dengan mudah dan akurat.</p>
      </div>
    </div>

    <!-- TRACKING FORM SECTION (FLOATING CARD) -->
    <section class="tracking-section container">
      
      <!-- Ubah nama class di sini biar nggak bentrok dengan CSS lain -->
      <div class="dino-card-wrapper">
        <div class="tracking-header">
          <h2><i class="fas fa-search" style="color: var(--accent-red);"></i> Cek Resi</h2>
          <p>Masukkan nomor resi (AWB) atau referensi. Mendukung multiple resi.</p>
        </div>

        <form id="trackingForm">
          @csrf
          
          <!-- TIPE & CUSTOMER CODE (Dihilangkan tag .row dan .col-md-12 yang bikin mepet) -->
          <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" {{ request('type') == 'dn' ? 'selected' : '' }}>Delivery Note (Ref)</option>
            </select>
          </div>
          
          <div class="form-group-custom" id="customerCodeGroup" style="display: none;">
             <label>Kode Pelanggan</label>
             <input type="text" name="customer_code" class="form-control-clean" placeholder="Contoh: CUST-001">
          </div>

          <!-- INPUT RESI (TEXTAREA) -->
          <div class="form-group-custom">
            <div class="input-header-wrapper">
                <label>Nomor Resi / AWB</label>
                <div class="input-tools">
                   <button id="btnClearStandard" type="button" class="btn-clear"><i class="fas fa-eraser"></i> Bersihkan</button>
                   <span id="countStandard" class="count-pill">0 / 20 Baris</span>
                </div>
            </div>

            <textarea name="tracking_numbers" id="trackingNumbers" 
                      class="form-control-clean" 
                      placeholder="Masukkan nomor resi di sini...&#10;Contoh:&#10;10002838192&#10;10002838193">{{ request('resi') }}</textarea>
            
            <div style="text-align: right; margin-top: 8px; font-size: 0.8rem; color: #94a3b8;">
               *Satu nomor per baris. Maksimal 20 nomor.
            </div>
          </div>

          <!-- CAPTCHA -->
          <div class="captcha-container">
            <div style="flex: 1;">
              <label style="color: #64748b; font-size: 11px; font-weight: 700; margin-bottom: 8px; display: block;">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: 8px; display: block;">KETIK KODE</label>
              <input type="text" name="captcha" id="captchaInput" class="form-control-clean" placeholder="ABCD" style="text-align: center; letter-spacing: 2px; font-weight: bold; text-transform: uppercase;">
            </div>
          </div>

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

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

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // --- VARIABLES ---
        const trackingInput = document.getElementById('trackingNumbers');
        const countDisplay = document.getElementById('countStandard');
        const btnClear = document.getElementById('btnClearStandard');
        const optionSelect = document.getElementById('optionData');
        const customerCodeGroup = document.getElementById('customerCodeGroup');
        const form = document.getElementById('trackingForm');
        const resultsContainer = document.getElementById('search-results-container');
        const captchaText = document.getElementById('captchaText');
        const captchaInput = document.getElementById('captchaInput');
        const MAX_LINES = 20;

        // --- AUTO-FILL FROM HOME ---
        if (trackingInput.value.trim() !== '') {
            if (trackingInput.value.includes(',')) {
                const resiNumbers = trackingInput.value.split(',').map(r => r.trim()).filter(r => r !== '').join('\n');
                trackingInput.value = resiNumbers;
            }
            const lines = trackingInput.value.split('\n').filter(l => l.trim() !== '').length;
            countDisplay.innerText = `${lines} / ${MAX_LINES} Baris`;
        }

        // --- LINE COUNTER LOGIC ---
        trackingInput.addEventListener('input', function() {
            const lines = this.value.split('\n').filter(l => l.trim() !== '').length;
            countDisplay.innerText = `${lines} / ${MAX_LINES} Baris`;
            
            if (lines > MAX_LINES) {
                countDisplay.style.color = '#ef4444';
                countDisplay.style.background = '#fee2e2';
            } else {
                countDisplay.style.color = '';
                countDisplay.style.background = '';
            }
        });

        // --- CLEAR BUTTON ---
        btnClear.addEventListener('click', () => {
            trackingInput.value = '';
            countDisplay.innerText = `0 / ${MAX_LINES} Baris`;
            trackingInput.focus();
        });

        // --- TOGGLE CUSTOMER CODE ---
        optionSelect.addEventListener('change', function() {
            customerCodeGroup.style.display = (this.value === 'dn') ? 'block' : 'none';
        });

        // --- AJAX SUBMIT ---
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            if (trackingInput.value.trim() === '') {
                Swal.fire({ icon: 'warning', title: 'Oops', text: 'Masukkan minimal satu nomor resi!', confirmButtonColor: '#0554c6' });
                return;
            }
            if (captchaInput.value.trim() === '') {
                Swal.fire({ icon: 'warning', title: 'Oops', text: 'Isi kode keamanan dulu!', confirmButtonColor: '#0554c6' });
                return;
            }

            Swal.fire({
                title: 'Sedang Mencari...',
                text: 'Mohon tunggu sebentar',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            const formData = new FormData(form);

            fetch("{{ route('tracking.standard.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: 'Tidak Ditemukan',
                        text: data.message || 'Data tidak ditemukan.',
                        confirmButtonColor: '#ef4444'
                    });
                }
            })
            .catch(err => {
                console.error(err);
                Swal.fire({ icon: 'error', title: 'Error', text: 'Terjadi kesalahan server.' });
            });
        });

        // --- ACCORDION LOGIC ---
        resultsContainer.addEventListener('click', function(e) {
            const row = e.target.closest('tr.main-row');
            if (row) {
                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