@extends('layouts.app')

@section('content')
    <div class="p-4 sm:p-6 lg:p-8">
        <!-- Header -->
        <div class="mb-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">📦 Cetak Resi</h1>
                    <p class="text-gray-600 mt-1">Kelola dan cetak resi pengiriman untuk transaksi Online Store</p>
                </div>
                <div class="mt-4 sm:mt-0 flex gap-2">
                    <button onclick="archiveSelectedWithConfirmation()"
                        class="inline-flex items-center px-4 py-2.5 bg-red-50 text-red-600 font-semibold rounded-xl hover:bg-red-100 transition-all duration-200 shadow-sm border border-red-200 disabled:opacity-50"
                        id="btn-archive-selected">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                            </path>
                        </svg>
                        Hapus (Arsip)
                    </button>
                    <button onclick="printSelectedLabels()"
                        class="inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all duration-200 shadow-sm hover:shadow-md disabled:opacity-50"
                        id="btn-print-selected">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z">
                            </path>
                        </svg>
                        Cetak Resi Terpilih (<span id="selected-count">0</span>)
                    </button>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
            <form method="GET" action="{{ route('shipping-labels.index') }}"
                class="grid grid-cols-1 sm:grid-cols-5 gap-4 items-end">
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Cari</label>
                    <input type="text" name="search" placeholder="Kode, nama, HP, resi..." value="{{ request('search') }}"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Status</label>
                    <select name="status"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                        <option value="">Semua</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>⏳ Pending</option>
                        <option value="shipped" {{ request('status') == 'shipped' ? 'selected' : '' }}>📦 Dikirim</option>
                        <option value="delivered" {{ request('status') == 'delivered' ? 'selected' : '' }}>✅ Terkirim</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Dari</label>
                    <input type="date" name="from" value="{{ request('from') }}"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Sampai</label>
                    <input type="date" name="to" value="{{ request('to') }}"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                </div>
                <div>
                    <button type="submit"
                        class="w-full px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition text-sm font-medium">
                        🔍 Filter
                    </button>
                </div>
            </form>
        </div>

        <!-- Table -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            @if($transactions->count() > 0)
                <div class="space-y-4 p-4 md:hidden">
                    @foreach($transactions as $tx)
                        <div class="rounded-2xl border border-gray-200 p-4 shadow-sm" id="row-mobile-{{ $tx->id }}">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <label class="flex items-start gap-3">
                                        <input type="checkbox" class="label-checkbox form-checkbox mt-1 h-4 w-4 rounded text-blue-600"
                                            value="{{ $tx->id }}" onchange="updateSelectedCount()">
                                        <div>
                                            <p class="text-sm font-semibold text-gray-900">{{ $tx->transaction_code }}</p>
                                            <p class="text-xs text-gray-500">{{ $tx->created_at->format('d M Y H:i') }}</p>
                                            <p class="mt-1 text-xs text-gray-500">Rp {{ number_format($tx->total_amount, 0, ',', '.') }}</p>
                                        </div>
                                    </label>
                                </div>
                                <select
                                    class="status-select rounded-lg border px-2 py-1 text-xs font-semibold {{ $tx->shipping_status === 'delivered' ? 'bg-green-100 text-green-700 border-green-200' : ($tx->shipping_status === 'shipped' ? 'bg-blue-100 text-blue-700 border-blue-200' : 'bg-yellow-100 text-yellow-700 border-yellow-200') }}"
                                    data-id="{{ $tx->id }}" onchange="updateShippingStatus(this, {{ $tx->id }})">
                                    <option value="pending" {{ $tx->shipping_status === 'pending' ? 'selected' : '' }}>⏳ Pending</option>
                                    <option value="shipped" {{ $tx->shipping_status === 'shipped' ? 'selected' : '' }}>📦 Dikirim</option>
                                    <option value="delivered" {{ $tx->shipping_status === 'delivered' ? 'selected' : '' }}>✅ Terkirim</option>
                                </select>
                            </div>

                            <div class="mt-4 grid grid-cols-1 gap-3 text-sm">
                                <div>
                                    <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">Penerima</p>
                                    <p class="mt-1 text-gray-900">{{ $tx->recipient_name ?? '-' }}</p>
                                    <p class="text-xs text-gray-500">{{ $tx->recipient_phone ?? '-' }}</p>
                                </div>
                                <div>
                                    <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">Alamat</p>
                                    <p class="mt-1 break-words text-gray-900">{{ $tx->recipient_address ?: '-' }}</p>
                                </div>
                                <div class="grid grid-cols-2 gap-3">
                                    <div>
                                        <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">Ekspedisi</p>
                                        <p class="mt-1 text-gray-900">{{ $tx->shipping_courier ?? '-' }}</p>
                                    </div>
                                    <div>
                                        <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">No. Resi</p>
                                        <input type="text" value="{{ $tx->shipping_tracking_number }}"
                                            class="tracking-input mt-1 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500"
                                            placeholder="Masukkan resi..." data-id="{{ $tx->id }}"
                                            onchange="saveTracking(this, {{ $tx->id }})">
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 flex flex-wrap items-center gap-2">
                                <button onclick="printSingleLabel({{ $tx->id }})"
                                    class="inline-flex items-center rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm font-medium text-gray-700">
                                    Lihat Resi
                                </button>
                                <button onclick="printSingleLabel({{ $tx->id }})"
                                    class="inline-flex items-center rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm font-medium text-blue-700">
                                    Cetak
                                </button>
                                <button onclick="clearResiData({{ $tx->id }})"
                                    class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700">
                                    Hapus Data Resi
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="hidden md:block overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left">
                                    <input type="checkbox" id="select-all" onclick="toggleSelectAll()"
                                        class="form-checkbox h-4 w-4 text-blue-600 rounded">
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Kode Transaksi
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Tanggal</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Penerima</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Alamat</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Ekspedisi</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">No. Resi</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
                                <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($transactions as $tx)
                                <tr class="hover:bg-gray-50 transition" id="row-{{ $tx->id }}">
                                    <td class="px-4 py-3">
                                        <input type="checkbox" class="label-checkbox form-checkbox h-4 w-4 text-blue-600 rounded"
                                            value="{{ $tx->id }}" onchange="updateSelectedCount()">
                                    </td>
                                    <td class="px-4 py-3">
                                        <span
                                            class="text-sm font-mono font-semibold text-gray-800">{{ $tx->transaction_code }}</span>
                                        <p class="text-xs text-gray-400">Rp {{ number_format($tx->total_amount, 0, ',', '.') }}</p>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-600">
                                        {{ $tx->created_at->format('d M Y') }}
                                        <br><span class="text-xs text-gray-400">{{ $tx->created_at->format('H:i') }}</span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <p class="text-sm font-semibold text-gray-800">{{ $tx->recipient_name ?? '-' }}</p>
                                        <p class="text-xs text-gray-500">{{ $tx->recipient_phone ?? '-' }}</p>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-xs text-gray-500 max-w-[100px] truncate"
                                            title="{{ $tx->recipient_address }}">
                                            {{ \Illuminate\Support\Str::limit($tx->recipient_address, 15) }}...
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 text-sm font-medium text-gray-700">{{ $tx->shipping_courier ?? '-' }}</td>
                                    <td class="px-4 py-3">
                                        <input type="text" value="{{ $tx->shipping_tracking_number }}"
                                            class="tracking-input w-32 px-2 py-1 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500"
                                            placeholder="Masukkan resi..." data-id="{{ $tx->id }}"
                                            onchange="saveTracking(this, {{ $tx->id }})">
                                    </td>
                                    <td class="px-4 py-3">
                                        <select
                                            class="status-select px-2 py-1 text-xs border rounded-lg font-semibold
                                                                                            {{ $tx->shipping_status === 'delivered' ? 'bg-green-100 text-green-700 border-green-200' : ($tx->shipping_status === 'shipped' ? 'bg-blue-100 text-blue-700 border-blue-200' : 'bg-yellow-100 text-yellow-700 border-yellow-200') }}"
                                            data-id="{{ $tx->id }}" onchange="updateShippingStatus(this, {{ $tx->id }})">
                                            <option value="pending" {{ $tx->shipping_status === 'pending' ? 'selected' : '' }}>⏳
                                                Pending</option>
                                            <option value="shipped" {{ $tx->shipping_status === 'shipped' ? 'selected' : '' }}>📦
                                                Dikirim</option>
                                            <option value="delivered" {{ $tx->shipping_status === 'delivered' ? 'selected' : '' }}>✅
                                                Terkirim</option>
                                        </select>
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        <div class="flex items-center justify-center space-x-2">
                                            <div class="flex items-center justify-center space-x-2">
                                                <button onclick="printSingleLabel({{ $tx->id }})"
                                                    class="p-1.5 bg-gray-50 text-gray-600 rounded-lg hover:bg-gray-100 transition"
                                                    title="Lihat Resi">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                                        </path>
                                                    </svg>
                                                </button>
                                                <button onclick="printSingleLabel({{ $tx->id }})"
                                                    class="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition"
                                                    title="Cetak Resi">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z">
                                                        </path>
                                                    </svg>
                                                </button>
                                                <button onclick="clearResiData({{ $tx->id }})"
                                                    class="p-1.5 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition"
                                                    title="Hapus Data Resi">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                                        </path>
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="px-4 py-3 border-t border-gray-200">
                    {{ $transactions->appends(request()->query())->links() }}
                </div>
            @else
                <div class="py-16 text-center">
                    <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4">
                        </path>
                    </svg>
                    <p class="text-gray-500 text-lg font-medium">Belum ada transaksi Online Store</p>
                    <p class="text-gray-400 mt-1">Gunakan mode <strong class="text-blue-600">🌐 Online</strong> saat checkout di
                        POS</p>
                </div>
            @endif
        </div>
    </div>

    <script>
        function toggleSelectAll() {
            const selectAll = document.getElementById('select-all');
            document.querySelectorAll('.label-checkbox').forEach(cb => {
                cb.checked = selectAll.checked;
            });
            updateSelectedCount();
        }

        function updateSelectedCount() {
            const count = document.querySelectorAll('.label-checkbox:checked').length;
            document.getElementById('selected-count').textContent = count;
        }

        function getSelectedIds() {
            return Array.from(document.querySelectorAll('.label-checkbox:checked')).map(cb => parseInt(cb.value));
        }

        function printSelectedLabels() {
            const ids = getSelectedIds();
            if (ids.length === 0) return alert('Pilih minimal 1 transaksi untuk dicetak!');

            // Create form and submit to get print view
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("shipping-labels.print") }}';
            form.target = '_blank';

            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';
            form.appendChild(csrfInput);

            ids.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'ids[]';
                input.value = id;
                form.appendChild(input);
            });

            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        }

        function archiveSelectedWithConfirmation() {
            const ids = getSelectedIds();
            if (ids.length === 0) return alert('Pilih minimal 1 transaksi untuk dihapus/diarsipkan!');

            if (!confirm('Apakah Anda yakin ingin menghapus ' + ids.length + ' resi terpilih dari daftar ini? (Data transaksi tetap aman di Riwayat Transaksi)')) {
                return;
            }

            // Create form and submit
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("shipping-labels.archive") }}';

            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';
            form.appendChild(csrfInput);

            ids.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'ids[]';
                input.value = id;
                form.appendChild(input);
            });

            document.body.appendChild(form);
            form.submit();
        }

        function printSingleLabel(id) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("shipping-labels.print") }}';
            form.target = '_blank';

            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';
            form.appendChild(csrfInput);

            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'ids[]';
            input.value = id;
            form.appendChild(input);

            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        }

        async function saveTracking(el, transactionId) {
            try {
                const response = await fetch(`/shipping-labels/${transactionId}/tracking`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        shipping_tracking_number: el.value
                    })
                });
                const result = await response.json();
                if (result.success) {
                    el.classList.add('border-green-400');
                    setTimeout(() => el.classList.remove('border-green-400'), 2000);
                }
            } catch (error) {
                console.error('Error saving tracking:', error);
                alert('Gagal menyimpan nomor resi.');
            }
        }

        async function updateShippingStatus(el, transactionId) {
            try {
                const response = await fetch(`/shipping-labels/${transactionId}/tracking`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        shipping_status: el.value
                    })
                });
                const result = await response.json();
                if (result.success) {
                    // Update color classes
                    el.classList.remove('bg-green-100', 'text-green-700', 'border-green-200',
                        'bg-blue-100', 'text-blue-700', 'border-blue-200',
                        'bg-yellow-100', 'text-yellow-700', 'border-yellow-200');
                    if (el.value === 'delivered') {
                        el.classList.add('bg-green-100', 'text-green-700', 'border-green-200');
                    } else if (el.value === 'shipped') {
                        el.classList.add('bg-blue-100', 'text-blue-700', 'border-blue-200');
                    } else {
                        el.classList.add('bg-yellow-100', 'text-yellow-700', 'border-yellow-200');
                    }
                }
            } catch (error) {
                console.error('Error updating status:', error);
                alert('Gagal memperbarui status pengiriman.');
            }
        }
        async function clearResiData(transactionId) {
            if (!confirm('Apakah Anda yakin ingin menghapus data resi ini? (Nomor Resi akan dikosongkan)')) return;

            try {
                const response = await fetch(`/shipping-labels/${transactionId}/tracking`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        shipping_tracking_number: '' // Clear number
                    })
                });
                const result = await response.json();
                if (result.success) {
                    // Update input value
                    const input = document.querySelector(`.tracking-input[data-id="${transactionId}"]`);
                    if (input) input.value = '';
                    alert('Data resi berhasil dihapus.');
                }
            } catch (error) {
                console.error('Error clearing resi:', error);
                alert('Gagal menghapus data resi.');
            }
        }
    </script>
@endsection