@extends('Admin.layout')

@section('content')

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

<div class="row align-items-center
            justify-content-between
            mb-3 mt-3 mx-2">

    <div class="col-auto">
        <h5 class="mb-0">
            Daily Patient Bills
        </h5>

        <small class="text-muted">
            View and edit medicine sales bills
        </small>
    </div>
</div>

<div class="card border-0 shadow-sm m-2">
    <div class="card-body">

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

            <!-- Rows -->
            <div class="col-xl-1 col-md-2 col-4">
                <label class="form-label">
                    Rows
                </label>

                <select id="pageLength"
                        class="form-select">
                    <option value="10" selected>
                        10
                    </option>

                    <option value="25">
                        25
                    </option>

                    <option value="50">
                        50
                    </option>

                    <option value="100">
                        100
                    </option>
                </select>
            </div>

            <!-- From Date -->
            <div class="col-xl-2 col-md-3 col-6">
                <label class="form-label">
                    From Date
                </label>

                <input type="date"
                       id="fromDate"
                       class="form-control"
                       value="{{ now()->format('Y-m-d') }}">
            </div>

            <!-- To Date -->
            <div class="col-xl-2 col-md-3 col-6">
                <label class="form-label">
                    To Date
                </label>

                <input type="date"
                       id="toDate"
                       class="form-control"
                       value="{{ now()->format('Y-m-d') }}">
            </div>

            <!-- Search -->
            <div class="col-xl-3 col-md-4 ms-auto">
                <label class="form-label">
                    Search All Bills
                </label>

                <input type="text"
                       id="customSearch"
                       class="form-control"
                       autocomplete="off"
                       placeholder="Order ID / patient / phone">
            </div>

        </div>

        <div class="table-responsive">

            <table class="table table-bordered
                          table-hover align-middle w-100"
                   id="billsTable">

                <thead class="table-light">
                    <tr>
                        <th>S.No</th>
                        <th>Order ID</th>
                        <th>Patient</th>
                        <th>Phone</th>
                        <th>Payment</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody></tbody>
            </table>

        </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>
$(function () {

    const table = $('#billsTable').DataTable({
        processing: true,
        serverSide: true,
        // responsive: true,
        autoWidth: false,
        searching: true,
        ordering: true,
        info: true,
        lengthChange: false,
        pageLength: 10,

        /*
         * Date column descending order
         */
        order: [
            [7, 'desc']
        ],

        ajax: {
            url: "{{ route('sales_bill_data') }}",

            data: function (data) {
                data.from_date =
                    $('#fromDate').val();

                data.to_date =
                    $('#toDate').val();
            },

            error: function (xhr) {
                console.error(
                    'Bills loading error:',
                    xhr.responseText
                );
            }
        },
columnDefs: [
        {
            targets: '_all',
            className: 'text-nowrap'
        }
    ],
        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false,
                orderable: false
            },

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

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

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

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

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

            {
                data: 'status',
                name: 'status'
            },

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

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

        language: {
            processing:
                'Loading bills...',

            emptyTable:
                'No bills found',

            zeroRecords:
                'No matching bills found'
        }
    });

    /*
     * Search:
     * Order ID / patient / phone.
     *
     * Search இருந்தால் Controller
     * date filter ignore செய்யும்.
     */
    let searchTimer = null;

    $('#customSearch').on(
        'input',
        function () {
            const searchText =
                this.value.trim();

            clearTimeout(searchTimer);

            searchTimer = setTimeout(
                function () {
                    table
                        .search(searchText)
                        .draw();
                },
                300
            );
        }
    );

    /*
     * Page rows
     */
    $('#pageLength').on(
        'change',
        function () {
            table
                .page
                .len(
                    Number(this.value)
                )
                .draw();
        }
    );

    /*
     * From / To date filter
     */
    $('#fromDate, #toDate').on(
        'change',
        function () {
            const fromDate =
                $('#fromDate').val();

            const toDate =
                $('#toDate').val();

            if (
                fromDate &&
                toDate &&
                fromDate > toDate
            ) {
                alert(
                    'From Date cannot be greater than To Date.'
                );

                return;
            }

            /*
             * Date change செய்தால்
             * search clear செய்யும்.
             */
            $('#customSearch').val('');

            table
                .search('')
                .ajax
                .reload();
        }
    );

});
</script>

@endsection