@extends('Branch.layout')

@section('content')

    <meta name="csrf-token" content="{{ csrf_token() }}">

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

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

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

            <div class="col-md-1">
                <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>

            <div class="col-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search Bills">
            </div>

        </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>Order ID</th>
                        <th>serial no</th>
                        <th>Phone</th>
                        <th>Staff</th>
                        <th>Payment</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>

            </table>

        </div>

    </div>
    <div class="modal fade" id="cancelBillModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <form action="{{ route('branch.cancel_bill') }}" method="POST">

                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title">Cancel Bill</h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

                    </div>

                    <div class="modal-body">

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

                        <div class="mb-3">

                            <label class="form-label">
                                Cancellation Remark
                            </label>

                            <textarea name="remark" id="cancelRemark" class="form-control" rows="4" required></textarea>

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Close
                        </button>

                        <button type="submit" class="btn btn-danger">
                            Cancel Bill
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.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>
        $(document).ready(function () {

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

                processing: true,
                serverSide: true,
                responsive: false,
                autoWidth: false,
                lengthChange: false,
                pageLength: 10,

                ajax: "{{ route('branch.today_bill_data') }}",

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

                columns: [

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

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

                    {
                        data: 'customer_phone',
                        name: 'customer_phone'
                    },

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

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

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

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

                    {
                        data: 'created_at',
                        name: 'created_at'
                    },

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

                ]

            });

            $('#customSearch').keyup(function () {

                table.search($(this).val()).draw();

            });

            $('#pageLength').change(function () {

                table.page.len($(this).val()).draw();

            });

        });
    </script>
    <script>
        $(document).on('click', '.cancelBillBtn', function () {

            let orderId = $(this).data('id');

            $('#cancelOrderId').val(orderId);

            $('#cancelRemark').val('');

            let modal = new bootstrap.Modal(document.getElementById('cancelBillModal'));

            modal.show();

        });
    </script>
@endsection