@extends('Branch.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

    {{-- Top Heading & Action Buttons --}}
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5 class="mb-0 fw-bold"><i class="ti tabler-receipt me-2"></i>Bulk Sales Bills</h5>
        </div>
        <div class="col-auto d-flex gap-2">
            <button type="button" id="printBtn" class="btn btn-label-secondary">
                Print
            </button>
            <button type="button" id="exportBtn" class="btn btn-label-secondary">
                Export
            </button>
        </div>
    </div>

    {{-- Summary Metric Cards --}}
    {{-- <div class="row g-3 m-2 mb-3">
        <div class="col-sm-6 col-xl-3">
            <div class="card card-border-shadow-primary h-100 shadow-sm border">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2 pb-1">
                        <div class="avatar me-2">
                            <span class="avatar-initial rounded bg-label-primary p-2">
                                <i class="ti ti-file-invoice fs-4"></i>
                            </span>
                        </div>
                        <h4 class="ms-1 mb-0 fw-bold">{{ number_format($totalOrders) }}</h4>
                    </div>
                    <p class="mb-0 text-muted small fw-medium">Total Bulk Orders</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card card-border-shadow-info h-100 shadow-sm border">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2 pb-1">
                        <div class="avatar me-2">
                            <span class="avatar-initial rounded bg-label-info p-2">
                                <i class="ti ti-currency-rupee fs-4"></i>
                            </span>
                        </div>
                        <h4 class="ms-1 mb-0 fw-bold">₹ {{ number_format($totalSales, 2) }}</h4>
                    </div>
                    <p class="mb-0 text-muted small fw-medium">Total Sales Amount</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card card-border-shadow-success h-100 shadow-sm border">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2 pb-1">
                        <div class="avatar me-2">
                            <span class="avatar-initial rounded bg-label-success p-2">
                                <i class="ti ti-wallet fs-4"></i>
                            </span>
                        </div>
                        <h4 class="ms-1 mb-0 fw-bold text-success">₹ {{ number_format($totalAdvance, 2) }}</h4>
                    </div>
                    <p class="mb-0 text-muted small fw-medium">Advance Received</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card card-border-shadow-danger h-100 shadow-sm border">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2 pb-1">
                        <div class="avatar me-2">
                            <span class="avatar-initial rounded bg-label-danger p-2">
                                <i class="ti ti-alert-circle fs-4"></i>
                            </span>
                        </div>
                        <h4 class="ms-1 mb-0 fw-bold text-danger">₹ {{ number_format($totalPendingBalance, 2) }}</h4>
                    </div>
                    <p class="mb-0 text-muted small fw-medium">Pending Balance Due</p>
                </div>
            </div>
        </div>
    </div> --}}

    {{-- Main Filter & Table Card --}}
    <div class="card p-0 m-2 shadow-sm border">
        {{-- Filters Row --}}
        <div class="row mb-3 align-items-end p-3 g-2">
            <div class="col-md-2">
                <label class="form-label fw-semibold">From Date</label>
                <input type="text" class="form-control" id="fromDate" placeholder="DD/MM/YYYY">
            </div>

            <div class="col-md-2">
                <label class="form-label fw-semibold">To Date</label>
                <input type="text" class="form-control" id="toDate" placeholder="DD/MM/YYYY">
            </div>

            <div class="col-md-2">
                <label class="form-label fw-semibold">Order ID</label>
                <input type="text" id="orderIdSearch" class="form-control" placeholder="Search Order ID" autocomplete="off">
            </div>

            <div class="col-md-2">
                <label class="form-label fw-semibold">Staff (Sold By)</label>
                <select id="staffFilter">
                    <option value="">All Staff</option>
                    @foreach($staffList as $staff)
                        <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-semibold">Status</label>
                <select id="statusFilter" class="form-select">
                    <option value="">All Statuses</option>
                    <option value="advance_paid">Pending (Advance Paid)</option>
                    <option value="completed">Completed (Fully Paid)</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>

            <div class="col-md-2 d-flex gap-2">
                <div class="flex-grow-1">
                    <label class="form-label fw-semibold">Search</label>
                    <input type="text" id="customSearch" class="form-control" placeholder="Search Bills..."
                        autocomplete="off">
                </div>
                <div>
                    <label class="form-label fw-semibold">&nbsp;</label>
                    <button type="button" id="resetBtn" class="btn btn-outline-secondary" title="Reset Filters">
                        reset
                    </button>
                </div>
            </div>

            <script>
                new TomSelect("#staffFilter", { sortField: { field: "text", direction: "asc" } });
            </script>
        </div>

        {{-- Table --}}
        <div class="table-responsive pb-3">
            <table class="table table-bordered table-hover w-100" id="bulkOrdersTable">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Booked Date</th>
                        <th class="text-nowrap">Customer Name</th>
                        <th class="text-nowrap">Phone</th>
                        <th class="text-nowrap">Delivery Date &amp; Time</th>
                        <th class="text-nowrap">Order ID</th>
                        <th>Serial No</th>
                        <th class="text-nowrap">Sold By</th>
                        <th>Total (₹)</th>
                        <th>Advance Paid (₹)</th>
                        <th>Balance Due (₹)</th>
                        <th>Payment Mode</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- Cancel Bulk Order Modal --}}
    <div class="modal fade" id="cancelBulkBillModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 p-4 py-4">
                <form action="{{ route('branch.cancel_bulk_bill') }}" method="POST">
                    @csrf
                    <div class="text-center mb-3">
                        <div class="avatar avatar-lg bg-label-danger mx-auto mb-2">
                            <i class="ti ti-alert-triangle fs-2 text-danger"></i>
                        </div>
                        <h5 class="fw-bold mb-1">Cancel Bulk Order</h5>
                        <p class="text-muted small mb-0">Are you sure you want to cancel this bulk order?</p>
                    </div>

                    <input type="hidden" name="id" id="cancelOrderId">

                    <div class="mb-3 text-start">
                        <label class="form-label fw-semibold">Cancellation Reason <span class="text-danger">*</span></label>
                        <textarea name="remark" id="cancelRemark" class="form-control" rows="3"
                            placeholder="Enter reason for cancelling order..." required></textarea>
                    </div>

                    <div class="d-flex justify-content-center gap-2">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Keep Order</button>
                        <button type="submit" class="btn btn-danger">Confirm Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Assets & Scripts --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        $(document).ready(function () {

            flatpickr("#fromDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                onChange: function () {
                    table.ajax.reload();
                }
            });

            flatpickr("#toDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                defaultDate: new Date(),
                onChange: function () {
                    table.ajax.reload();
                }
            });

            let table = $('#bulkOrdersTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: false,
                autoWidth: false,
                searching: false,
                ordering: true,
                info: true,
                lengthChange: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                pageLength: 10,
                order: [[1, 'desc']],

                ajax: {
                    url: "{{ route('branch.bulk_sales_bill_data') }}",
                    type: 'GET',
                    data: function (d) {
                        d.from_date = $('#fromDate').val();
                        d.to_date = $('#toDate').val();
                        d.order_id = $('#orderIdSearch').val();
                        d.staff_id = $('#staffFilter').val();
                        d.status = $('#statusFilter').val();
                        d.search = $('#customSearch').val();
                    },
                    error: function (xhr) {
                        console.error('Bulk sales bill error:', xhr.responseText);
                    }
                },
                columnDefs: [
                    { targets: '_all', className: 'text-nowrap' }
                ],
                columns: [
                    { data: 'DT_RowIndex', searchable: false, orderable: false, defaultContent: '' },
                    { data: 'created_at', name: 'created_at', defaultContent: '-' },
                    { data: 'customer_name', name: 'customer_name', defaultContent: '-' },
                    { data: 'customer_phone', name: 'customer_phone', defaultContent: '-' },
                    { data: 'delivery_date', name: 'delivery_date', defaultContent: '-' },
                    { data: 'order_id', name: 'order_id', defaultContent: '-' },
                    { data: 'daily_serial_number', name: 'daily_serial_number', defaultContent: '-' },
                    { data: 'staff_name', name: 'staff_name', orderable: false, searchable: false, defaultContent: '-' },
                    { data: 'total', name: 'total', defaultContent: '₹ 0.00' },
                    { data: 'advance_amt', name: 'advance_amt', defaultContent: '₹ 0.00' },
                    { data: 'balance_amt', name: 'balance_amt', defaultContent: '₹ 0.00' },
                    { data: 'payment_mode', name: 'payment_mode', defaultContent: '-' },
                    { data: 'status', name: 'status', orderable: false, searchable: false, defaultContent: '-' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });

            // Debounced Search Inputs
            let billSearchTimer;
            $('#customSearch, #orderIdSearch').on('input', function () {
                clearTimeout(billSearchTimer);
                billSearchTimer = setTimeout(() => table.ajax.reload(), 400);
            });

            $('#staffFilter, #statusFilter').on('change', function () {
                table.ajax.reload();
            });

            $('#resetBtn').on('click', function () {
                $('#fromDate')[0]._flatpickr.clear();
                $('#toDate')[0]._flatpickr.setDate(new Date());
                $('#orderIdSearch').val('');
                $('#customSearch').val('');
                if ($('#staffFilter')[0].tomselect) {
                    $('#staffFilter')[0].tomselect.clear();
                }
                $('#statusFilter').val('');
                table.ajax.reload();
            });

            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#fromDate').val() || '',
                    to_date: $('#toDate').val() || '',
                    order_id: $('#orderIdSearch').val() || '',
                    staff_id: $('#staffFilter').val() || '',
                    status: $('#statusFilter').val() || '',
                    search: $('#customSearch').val() || ''
                });
                window.location.href = "{{ route('branch.bulk_sales_bill_export') }}?" + params.toString();
            });

            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#fromDate').val() || '',
                    to_date: $('#toDate').val() || '',
                    order_id: $('#orderIdSearch').val() || '',
                    staff_id: $('#staffFilter').val() || '',
                    status: $('#statusFilter').val() || '',
                    search: $('#customSearch').val() || ''
                });
                window.open("{{ route('branch.bulk_sales_bill_print') }}?" + params.toString(), '_blank');
            });

            $(document).on('click', '.cancelBulkBillBtn', function () {
                $('#cancelOrderId').val($(this).data('id'));
                $('#cancelRemark').val('');
                $('#cancelBulkBillModal').modal('show');
            });
        });
    </script>
@endsection