@extends('Billing.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 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>

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

        <div class="row m-2 mt-1 g-3">
            <div class="col-lg-3">
                <label class="form-label">From Date</label>
                {{-- <input type="date" id="fromDate" class="form-control"> --}}
                <input type="text" class="form-control" id="fromDate" placeholder="DD/MM/YYYY">

            </div>
            <div class="col-lg-3">
                <label class="form-label">To Date</label>
                {{-- <input type="date" id="toDate" class="form-control" value="{{ now()->format('Y-m-d') }}"> --}}
                <input type="text" class="form-control" id="toDate" placeholder="DD/MM/YYYY">

            </div>
            <div class="col-lg-3">
                <label class="form-label">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-lg-3">
                <label class="form-label">Billed By</label>
                <select id="billedByFilter" class="form-select">
                    <option value="">All Counters</option>
                    @foreach($counters ?? [] as $counter)
                    <option value="{{ $counter->id }}">{{ $counter->counter_name }}</option>
                    @endforeach
                </select>
            </div> --}}
            {{-- <div class="col-lg-3">
                <label class="form-label">Staff</label>
                <select id="staffFilter" class="form-select">
                    <option value="">All Staff</option>
                    @foreach($staffs ?? [] as $staff)
                    <option value="{{ $staff->id }}">{{ $staff->name }} ({{ $staff->user_id }})</option>
                    @endforeach
                </select>
            </div> --}}

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

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

                    <thead class="table-light">
                        <tr>
                            <th>S.No</th>
                            <th>Date</th>
                            <th>Order ID</th>
                            <th>serial number</th>
                            <th>Customer Name</th>
                            <th>Customer Phone</th>
                            <th>Billed By</th>
                            <th>Billed In</th>
                            <th>Staff</th>
                            <th>Payment</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th class="d-none">Status Raw</th>

                            <th>Action</th>
                        </tr>
                    </thead>

                </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('billing.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>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

        <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 = $('#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,

                    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):not(:nth-last-child(1))'
                        },
                        className: 'd-none'
                    }],

                    ajax: {
                        url: "{{ route('billing.sales_bill_data') }}",
                        data: function (d) {
                            d.billed_by = $('#billedByFilter').val();

                            d.from_date = $('#fromDate').val();
                            d.to_date = $('#toDate').val();
                            d.staff_id = $('#staffFilter').val();
                            d.status = $('#statusFilter').val();
                        }
                    },

                    columnDefs: [
                        {
                            targets: '_all',
                            className: 'text-nowrap'
                        }
                    ],

                    columns: [

                        {
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            searchable: false,
                            orderable: false
                        },
                        {
                            data: 'created_at',
                            name: 'created_at'
                        },

                        {
                            data: 'order_id',
                            name: 'order_id'
                        },
                        {
                            data: 'daily_serial_number',
                            name: 'daily_serial_number'
                        },


                        {
                            data: 'customer_name',
                            name: 'customer_name',
                            defaultContent: '-'
                        },
                        {
                            data: 'customer_phone',
                            name: 'customer_phone',
                            defaultContent: '-'
                        },


                        {
                            data: 'billed_by',
                            name: 'billed_by'
                        },
                        {
                            data: 'billed_in',
                            name: 'billed_in'
                        },
                        {
                            data: 'staff_name',
                            name: 'staff_name',
                            orderable: false,
                            searchable: false
                        },

                        {
                            data: 'payment_mode',
                            name: 'payment_mode'
                        },

                        {
                            data: 'total',
                            name: 'total'
                        },

                        {
                            data: 'status',
                            name: 'status',
                            orderable: false,
                            searchable: false
                        },

                        {
                            data: 'status_raw',                                // ← add this block
                            name: 'status_raw',
                            visible: false,
                            searchable: false,
                            orderable: false
                        },


                        {
                            data: 'action',
                            name: 'action',
                            searchable: false,
                            orderable: false,
                            render: function (data, type, row) {
                                const cancelBtn = row.status_raw !== 'cancelled'
                                    ? `<button type="button" class="btn btn-sm btn-outline-danger cancelBillBtn" data-id="${row.order_id}">
                                                                                                    Cancel
                                                                                               </button>`
                                    : '';

                                return `
                                                                                                <div class="d-flex gap-2 flex-nowrap">
                                                                                                    ${data}
                                                                                                    ${cancelBtn}
                                                                                                </div>
                                                                                            `;
                            }
                        }

                    ]

                });

                // Custom Search
                $('#customSearch').keyup(function () {
                    table.search($(this).val()).draw();
                });

                // Page Length
                $('#pageLength').change(function () {
                    table.page.len($(this).val()).draw();
                });

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

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

                // $('#exportBtn').on('click', function () {
                //     const params = new URLSearchParams({
                //         from_date: $('#fromDate').val() || '',
                //         to_date: $('#toDate').val() || '',
                //         staff_id: $('#staffFilter').val() || '',
                //         status: $('#statusFilter').val() || '',
                //         billed_by: $('#billedByFilter').val() || ''
                //     });
                //     window.location.href = "{{ route('billing.sales_bill_export') }}?" + params.toString();
                // });

                $('#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({
                        from_date: $('#fromDate').val() || '',
                        to_date: $('#toDate').val() || '',
                        staff_id: $('#staffFilter').val() || '',
                        status: $('#statusFilter').val() || '',
                        billed_by: $('#billedByFilter').val() || ''
                    });
                    window.open("{{ route('billing.sales_bill_print') }}?" + params.toString(), '_blank');
                });

                $('#resetBtn').on('click', function () {
                    $('#fromDate')[0]._flatpickr.clear();
                    $('#toDate')[0]._flatpickr.setDate(new Date());
                    $('#statusFilter, #billedByFilter').val('');
                    table.page.len(10).search('').ajax.reload();
                });

            });

        </script>

@endsection