@extends('Admin.layout')

@section('content')

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">


    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Sales Bills</h5>
        </div>
    </div>

    <div class="card p-0 m-2">


        <div class="row mb-3 align-items-end p-3 g-2">

            {{-- <div class="col-md-1">
                <label class="form-label fw-semibold">&nbsp;</label>
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div> --}}

            <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>

            <div class="col-md-2">
                <label class="form-label fw-semibold">From Date</label>
                {{-- <input type="date" id="fromDate" class="form-control"> --}}
                <input type="text" class="form-control" id="from_date" placeholder="DD/MM/YYYY">


            </div>

            <div class="col-md-2">
                <label class="form-label fw-semibold">To Date</label>
                {{-- <input type="date" id="toDate" class="form-control" value="{{ now()->format('Y-m-d') }}"> --}}
                <input type="text" class="form-control" id="to_date" 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">Branch</label>
                <select id="branchFilter">
                    <option value="">All Branches</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}">{{ $branch->branch_name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-semibold">Billed By</label>
                <select id="billedByFilter">
                    <option value="">All Counters</option>
                    @foreach($billingCounters as $counter)
                        <option value="{{ $counter->id }}">{{ $counter->counter_name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label fw-semibold">Staff</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 Status</option>
                    <option value="completed">Completed</option>
                    <option value="cancelled">Cancelled</option>
                    <option value="held">Held</option>
                </select>
            </div>

            {{-- <div class="col-md-2 ms-auto">
                <label class="form-label fw-semibold">Search</label>
                <input type="text" id="customSearch" class="form-control" placeholder="Search Bills">
            </div> --}}

            <div class="col-md-1">
                <label class="form-label fw-semibold">&nbsp;</label>
                <button type="button" id="resetBtn" class="btn btn-outline-secondary w-100">
                    Reset
                </button>
            </div>

            <div class="col-md-1">
                <label class="form-label fw-semibold">&nbsp;</label>
                <button type="button" id="printBtn" class="btn btn-label-secondary w-100">
                    Print
                </button>
            </div>

            <div class="col-md-1">
                <label class="form-label fw-semibold">&nbsp;</label>
                <button type="button" id="exportBtn" class="btn btn-label-secondary w-100">
                    Export
                </button>
            </div>

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

        </div>
        <div class="table-responsive pb-3">

            <table class="table table-bordered table-hover w-100" id="usersTable">

                <thead class="table-light">
                    <tr>
                        <th>S.No</th>
                        <th>Date</th>
                        <th>Serial No</th>
                        <th class="text-nowrap">Order ID</th>
                        <th class="text-nowrap">Customer Name</th>
                        <th class="text-nowrap">Customer Phone</th>
                        <th class="text-nowrap">Billed By</th>
                        <th class="text-nowrap">Billed In</th>
                        {{-- <th class="text-nowrap">Sold By</th> --}}
                        <th class="text-nowrap">Branch Name</th>
                        <th>Staff</th>
                        <th>Payment</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Action</th>

                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

    <div class="modal fade" id="cancelBillModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 p-4 py-5">

                <form action="{{ route('cancel_bill') }}" method="POST">
                    @csrf

                    <h5 class="fw-bold mb-2 text-center">Cancel Bill</h5>
                    <p class="text-muted text-center">Are you sure you want to cancel this bill?</p>

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

                    <div class="mb-2 text-start">
                        <label class="form-label fw-semibold">Remark</label>
                        <textarea name="remark" id="cancelRemark" class="form-control" rows="3"
                            placeholder="Reason for cancellation" required></textarea>
                    </div>

                    <div class="d-flex justify-content-center gap-3 mt-3">
                        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">No, Keep It</button>
                        <button type="submit" class="btn btn-danger">Yes, Cancel</button>
                    </div>
                </form>

            </div>
        </div>
    </div>



    <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("#from_date", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                onChange: function () {
                    table.ajax.reload();
                }
            });

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

            const salesBillUrl = @json(route('admin_sales_bill_data'));

            console.log('Sales bill URL:', salesBillUrl);

            let table = $('#usersTable').DataTable({

                processing: true,
                serverSide: true,
                responsive: false,
                autoWidth: false,
                searching: true,
                ordering: true,
                info: true,
                lengthChange: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], pageLength: 10,

                /*
                 * Important:
                 * DT_RowIndex database column illa.
                 * So first-column default ordering disable pannrom.
                 */
                order: [[1, 'desc']],

                ajax: {
                    url: salesBillUrl,
                    type: 'GET',
                    data: function (d) {
                        d.branch_id = $('#branchFilter').val();
                        d.billed_by = $('#billedByFilter').val();
                        d.staff_id = $('#staffFilter').val();
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        d.order_id = $('#orderIdSearch').val();
                        d.status = $('#statusFilter').val();
                    },

                    beforeSend: function (xhr, settings) {
                        console.log('Sending request:', settings.url);
                    },

                    dataSrc: function (response) {
                        console.log('Sales bills response:', response);

                        if (!response || !Array.isArray(response.data)) {
                            console.error('Invalid DataTables response:', response);
                            return [];
                        }

                        return response.data;
                    },

                    error: function (xhr, textStatus, errorThrown) {

                        console.error('Sales bill DataTable error');
                        console.error('HTTP Status:', xhr.status);
                        console.error('Text Status:', textStatus);
                        console.error('Error:', errorThrown);
                        console.error('Response Text:', xhr.responseText);
                        console.error('Response JSON:', xhr.responseJSON);

                        let message = 'Unable to load sales bills.';

                        if (xhr.responseJSON?.message) {
                            message = xhr.responseJSON.message;
                        }

                        alert(
                            message +
                            '\nStatus: ' + xhr.status +
                            '\nCheck browser console and Laravel log.'
                        );
                    }
                },
                columnDefs: [
                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }
                ],

                dom: 'Blfrtip',

                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Sales_Bill_Report',
                    filename: function () {
                        var now = new Date();
                        var date =
                            String(now.getDate()).padStart(2, '0') + '-' +
                            String(now.getMonth() + 1).padStart(2, '0') + '-' +
                            String(now.getFullYear()).slice(-2);
                        return 'Sales_Bill_Report_' + date;
                    },
                    exportOptions: {
                        columns: ':not(:last-child)'
                    },
                    className: 'd-none'
                }],



                columns: [
                    { data: 'DT_RowIndex', name: '', searchable: false, orderable: false, defaultContent: '' },
                    { data: 'created_at', name: 'created_at', defaultContent: '-' },
                    {
                        data: 'daily_serial_number',
                        name: 'daily_serial_number',
                        searchable: true,
                        defaultContent: '-'
                    },
                    { data: 'order_id', name: 'order_id', defaultContent: '-' },
                    { data: 'customer_name', name: 'customer_name', defaultContent: '-' },
                    { data: 'customer_phone', name: 'customer_phone', defaultContent: '-' },

                    { data: 'billed_by', name: 'billed_by', orderable: false, searchable: false, defaultContent: '-' },
                    { data: 'billed_in', name: 'billed_in', defaultContent: '-' },
                    // {data: 'sold_by',
                    //     name: 'sold_by',
                    //     defaultContent: '-'}, 
                    { data: 'branch_name', name: '', orderable: false, searchable: false, defaultContent: '-' },
                    { data: 'staff_name', name: '', orderable: false, searchable: false, defaultContent: '-' },
                    { data: 'payment_mode', name: 'payment_mode', defaultContent: '-' },
                    { data: 'total', name: 'total', defaultContent: '₹ 0.00' },
                    { data: 'status', name: 'status', orderable: false, searchable: false, defaultContent: '-' },
                    { data: 'status_raw', name: 'status_raw', visible: false, searchable: false, orderable: false, defaultContent: '' },
                    {
                        data: null, name: 'action', orderable: false, searchable: false,
                        render: function (data, type, row) {
                            if (row.status_raw === 'cancelled') {
                                return '';
                            }
                            return `<button type="button" class="btn btn-sm btn-outline-danger cancelBillBtn" data-id="${row.order_id}">Cancel</button>`;
                        }
                    },
                ],
                language: {
                    processing: 'Loading sales bills...',
                    emptyTable: 'No sales bills found',
                    zeroRecords: 'No matching sales bills found'
                }
            });

            // $('#customSearch').on('keyup input', function () {
            //     table.search(this.value).draw();
            // });

            $('#pageLength').on('change', function () {
                table.page.len(parseInt(this.value, 10)).draw();
            });
            $('#branchFilter, #billedByFilter, #staffFilter, #statusFilter').on('change', function () {
                table.ajax.reload();
            });
            $('#billedByFilter')[0].tomselect.on('change', function (val) {
                console.log('TomSelect changed to:', val);
            });

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

            let orderSearchTimer;
            $('#orderIdSearch').on('input', function () {
                clearTimeout(orderSearchTimer);
                orderSearchTimer = setTimeout(() => table.ajax.reload(), 400);
            });
            $('#resetBtn').on('click', function () {
                $('#from_date')[0]._flatpickr.clear();
                $('#to_date')[0]._flatpickr.clear();
                $('#orderIdSearch').val('');
                $('#branchFilter')[0].tomselect.clear();
                $('#billedByFilter')[0].tomselect.clear();
                $('#staffFilter')[0].tomselect.clear();
                $('#statusFilter').val('');
                table.search('').ajax.reload();
            });

            $('#exportBtn').on('click', function () {
                const originalLength = table.page.len();

                table.page.len(-1).draw();

                table.one('draw', function () {
                    table.button('.buttons-excel').trigger();
                    table.page.len(originalLength).draw();
                });
            });

            $('#printBtn').on('click', function () {

                const params = new URLSearchParams({

                    branch_id: $('#branchFilter').val() || '',
                    billed_by: $('#billedByFilter').val() || '',
                    staff_id: $('#staffFilter').val() || '',
                    from_date: $('#from_date').val() || '',
                    to_date: $('#to_date').val() || '',
                    order_id: $('#orderIdSearch').val() || '',
                    status: $('#statusFilter').val() || '',
                    // DataTables global search
                    search: table.search() || ''
                });

                console.log('Print params:', params.toString());

                window.open(
                    "{{ route('sales_bill_print') }}?" + params.toString(),
                    '_blank'
                );
            });

            $(document).on('click', '.cancelBillBtn', function () {
                $('#cancelOrderId').val($(this).data('id'));
                $('#cancelRemark').val('');
                $('#cancelBillModal').modal('show');
            });

        });
    </script>

@endsection