@extends('backEnd.layouts.master')
@section('title', 'Packing')

@push('styles')
<style>
.packing-page { background:#eef0f2; min-height:calc(100vh - 120px); padding:16px 16px 40px; }
.packing-filter-card {
    background:#fff; border:1px solid #d1d5db; border-radius:6px;
    padding:14px 16px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.packing-filter-title { font-size:13px; font-weight:700; color:#374151; margin-bottom:10px; }
.packing-filter-row { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.packing-filter-summary { font-size:12px; color:#6b7280; margin-top:10px; }
.packing-filter-summary strong { color:#111827; }

.packing-multi-bar {
    background:#fff; border:1px solid #93c5fd; border-left:4px solid #2563eb;
    border-radius:6px; padding:14px 16px; margin-bottom:16px;
}
.packing-multi-bar.is-hidden { display:none; }
.packing-multi-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.packing-date-section { margin-bottom:24px; }
.packing-date-title {
    font-size:15px; font-weight:800; color:#111827;
    padding:8px 12px; background:#dbeafe; border-radius:6px; margin-bottom:12px;
}
.packing-courier-block {
    background:#fff; border:1px solid #d1d5db; border-radius:8px;
    margin-bottom:16px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.packing-courier-head {
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px;
    padding:12px 16px; background:#1e3a5f; color:#fff;
}
.packing-courier-name { font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.packing-courier-actions { display:flex; flex-wrap:wrap; gap:6px; }
.packing-courier-actions .btn { font-size:12px; padding:6px 10px; }

.packing-table { width:100%; border-collapse:collapse; font-size:13px; }
.packing-table th, .packing-table td { padding:10px 12px; border-bottom:1px solid #e5e7eb; vertical-align:middle; }
.packing-table th { background:#f9fafb; font-size:11px; text-transform:uppercase; color:#6b7280; font-weight:700; }
.packing-table tr:last-child td { border-bottom:none; }
.packing-table .cod-cell { font-weight:700; white-space:nowrap; }
.packing-table .select-cell { width:36px; text-align:center; }
.packing-table tbody tr.is-selected td {
    background:#dbeafe !important;
    color:#111827 !important;
}
.packing-table tbody tr.is-selected td a { color:#1d4ed8 !important; }
.packing-table tbody tr.is-selected .text-muted { color:#475569 !important; }
.packing-table tbody tr.is-selected .badge {
    background:#fff !important;
    color:#111827 !important;
    border-color:#93c5fd !important;
}
.packing-table tbody tr.is-selected .consignment-text.text-warning { color:#b45309 !important; }

.packing-history-card {
    background:#fff;
    border:1px solid #d1d5db;
    border-left:4px solid #64748b;
    border-radius:6px;
    padding:14px 16px;
    margin-bottom:16px;
}
.packing-history-card.is-hidden { display:none; }
.packing-list-panel.is-hidden { display:none; }
.packing-history-title {
    font-size:14px;
    font-weight:700;
    color:#334155;
    margin-bottom:10px;
}
.packing-card-actions { display:flex; flex-wrap:wrap; gap:6px; }
.packing-btn { background:#2563eb; color:#fff !important; border:none; padding:6px 12px; border-radius:6px; font-weight:700; font-size:12px; }
.packing-btn:hover { background:#1d4ed8; color:#fff !important; }
.label-btn { background:#6b7280; color:#fff !important; border:none; padding:6px 12px; border-radius:6px; font-weight:600; font-size:12px; }
.label-btn:hover { color:#fff !important; }
.label-btn-thermal { background:#7c3aed !important; color:#fff !important; }
.label-btn-thermal:hover { background:#6d28d9 !important; color:#fff !important; }
.edit-courier-btn { background:#f59e0b; color:#fff !important; border:none; padding:6px 12px; border-radius:6px; font-weight:600; font-size:12px; }
.revert-booking-btn { background:#fff; color:#b45309 !important; border:1px solid #f59e0b; padding:6px 12px; border-radius:6px; font-weight:600; font-size:12px; }
.manifest-btn { background:#059669; color:#fff; border:none; padding:6px 12px; border-radius:6px; font-weight:600; font-size:12px; }

.packing-toolbar {
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
    gap:10px; margin-bottom:14px; padding:0 4px;
}
.packing-toolbar label { font-size:14px; font-weight:600; cursor:pointer; }

.packing-group-footer {
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px;
    padding:12px 16px; background:#f0fdf4; border-top:1px solid #bbf7d0;
    font-size:14px; font-weight:700; color:#14532d;
}
</style>
@endpush

@section('content')
<div class="container-fluid packing-page">
    <div class="packing-filter-card">
        <div class="packing-filter-title"><i class="fa fa-filter me-1"></i> Filter</div>
        <form method="GET" action="{{ route('admin.orders.packing') }}" class="packing-filter-row">
            <div>
                <label class="form-label fw-semibold small mb-1">Courier</label>
                <select name="courier_filter" class="form-select form-select-sm" style="min-width:180px;">
                    <option value="all" {{ ($courierFilter ?? 'all') === 'all' ? 'selected' : '' }}>All Couriers</option>
                    @foreach($courierOptions as $courier)
                    <option value="{{ $courier }}" {{ ($courierFilter ?? '') === $courier ? 'selected' : '' }}>
                        {{ \App\Models\CourierApi::displayName($courier) }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label fw-semibold small mb-1">Date</label>
                <select name="pack_date" class="form-select form-select-sm" style="min-width:160px;">
                    <option value="">All Dates</option>
                    @foreach($dateOptions as $day)
                    <option value="{{ $day }}" {{ ($dateFilter ?? '') === $day ? 'selected' : '' }}>
                        {{ \Carbon\Carbon::parse($day)->format('d M Y') }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div>
                <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Apply</button>
                <a href="{{ route('admin.orders.packing') }}" class="btn btn-outline-secondary btn-sm">Reset</a>
            </div>
        </form>
        <div class="packing-filter-summary">
            Showing <strong>{{ $filteredCount }}</strong> parcel(s)
            @if($filteredCount)
            | Total COD: <strong>৳{{ number_format($filteredAmount, 2) }}</strong>
            @endif
        </div>
    </div>

    <div class="packing-toolbar">
        <label>
            <input type="checkbox" id="selectAllPacking"> Select all visible
        </label>
        <span class="text-muted small" id="packingSelectedCount">0 selected</span>
        <button type="button" class="btn btn-outline-secondary btn-sm ms-auto" id="togglePackedHistoryBtn">
            <i class="fa fa-history"></i> Packed History
        </button>
    </div>

    <div id="packedHistoryPanel" class="packing-history-card is-hidden">
        <div class="packing-history-title">
            <i class="fa fa-history me-1"></i> Recently Packed (last 7 days)
        </div>
        @include('backEnd.order.partials.packing-order-groups', [
            'groupedOrders' => $groupedPackedHistory ?? collect(),
            'isHistory' => true,
            'emptyMessage' => 'No packed orders in the last 7 days.',
        ])
    </div>

    <div id="packingMultiBar" class="packing-multi-bar is-hidden">
        <div class="mb-2 fw-bold text-primary"><span id="multiSelectedCount">0</span> parcel(s) selected</div>
        <div class="packing-multi-actions">
            <button type="button" class="btn btn-sm label-btn-thermal text-white" id="bulkPackedThermalBtn">
                <i class="fa fa-box"></i> Bulk Packed &amp; Print 50×75
            </button>
            <button type="button" class="btn btn-primary btn-sm" id="bulkPackedA6Btn">
                <i class="fa fa-box"></i> Bulk Packed &amp; Print A6
            </button>
            <button type="button" class="btn btn-success btn-sm" id="bulkManifestBtn">
                <i class="fa fa-file-alt"></i> Print Manifest (Signature)
            </button>
            <button type="button" class="btn btn-sm label-btn-thermal text-white" id="bulkThermalLabelBtn">
                <i class="fa fa-print"></i> Bulk Thermal (50×75mm)
            </button>
            <button type="button" class="btn btn-secondary btn-sm" id="bulkA6LabelBtn">
                <i class="fa fa-print"></i> Bulk A6 Labels (A4)
            </button>
            <button type="button" class="btn btn-outline-warning btn-sm" id="bulkRevertBookingBtn">
                <i class="fa fa-undo"></i> Back to Booking
            </button>
        </div>
    </div>

    <div id="packingList" class="packing-list-panel">
        @include('backEnd.order.partials.packing-order-groups', [
            'groupedOrders' => $groupedPacking,
            'isHistory' => false,
            'emptyMessage' => 'No orders waiting for packing.',
        ])
    </div>
</div>

<div class="modal fade" id="editCourierModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-pen me-2"></i>Edit Courier Info</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editCourierOrderId" value="">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Courier Type</label>
                    <select id="editCourierType" class="form-select">
                        @include('backEnd.order.partials.courier-select-options', ['manualCouriers' => $manualCouriers])
                    </select>
                </div>
                <div class="mb-3" id="editCourierCustomWrap" style="display:none;">
                    <label class="form-label fw-semibold">New Courier Name</label>
                    <input type="text" id="editCourierCustom" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Consignment ID</label>
                    <input type="text" id="editConsignmentId" class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" id="saveEditCourierBtn">Update</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const base_url = @json(url('/admin'));
const allFilteredIds = @json($allFilteredIds->values());
const printBulkLabelUrl = @json(route('admin.print.bulk.label'));
const printManifestUrl = @json(route('admin.print.packing.manifest'));
const bulkPackedUrl = @json(route('admin.orders.packing.bulk'));
const printLabelBaseUrl = @json(url('/admin/print/label'));
const revertToBookingUrl = @json(route('admin.orders.revert.to-booking'));
function onSuccessMsg(msg) { toastr.success(msg); }
function onErrorMsg(msg) { toastr.error(msg); }
</script>
<script src="{{ asset('backEnd/js/packing.js') }}"></script>
@endpush