@extends('client.pages.user.tabs')

@section('title', 'History payment')

@section('tab-content')
    <div class="relative flex flex-col min-w-0 break-words bg-white border-0 shadow-soft-xl ">
        <div class="table-responsive ">
            <table class="border-collapse float-right my-[0.2rem]">
                <tbody>
                    <tr>
                        <td class="p-1 float-right text-gray-700 font-bold">From date:</td>
                        <td>
                            <input type="search" id="min" name="min" class="border p-[2px]">
                        </td>
                    </tr>
                    <tr class="bg-white">
                        <td class="p-1 float-right text-gray-700 font-bold">To date:</td>
                        <td><input type="search" id="max" name="max" class="border p-[2px]"></td>
                    </tr>
                </tbody>
            </table>
            <table id="table-data"
                class="table table-flush text-slate-500 cell-border compact dt-responsive table-bordered">
                <thead class="thead-light">
                    <tr>
                        <th class="border-[1px]">#</th>
                        <th class="border-t-[1px] border-r-[1px]">ID PAYMENT</th>
                        <th class="border-t-[1px] border-r-[1px]">POINT</th>
                        <th class="border-t-[1px] border-r-[1px]">PACKAGE</th>
                        <th class="border-t-[1px] border-r-[1px]">PACKAGE PRICE</th>
                        <th class="border-t-[1px] border-r-[1px]">DISCOUNT</th>
                        <th class="border-t-[1px] border-r-[1px]">DISCOUNT PRICE</th>
                        <th class="border-t-[1px] border-r-[1px]">TOTAL PRICE</th>
                        <th class="border-t-[1px] border-r-[1px]">DATE</th>
                        <th class="border-t-[1px] border-r-[1px]">STATUS</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@include('components.datatable')
@push('script')
    <script>
        window.addEventListener("load", (event) => {
            let minDate, maxDate;

            // Create date inputs
            minDate = new DateTime('#min');
            maxDate = new DateTime('#max');

            // Refilter the table when date input change
            document.querySelectorAll('#min, #max').forEach((el) => {
                el.addEventListener('change', () => table.draw());
            });

            // Create data table
            let table = new DataTable('#table-data', Object.assign(DEFAULT_CONFIG_DT, {
                language: {
                    searchPlaceholder: 'ID, discount, status', // Set your custom placeholder text
                    // You can customize other language options here
                },
                ajax: {
                    url: "{{ route('history-payment.get') }}",
                    // Update the data object dynamically with the current min and max values
                    data: function(d) {

                        var minDateInput = document.getElementById("min");
                        var maxDateInput = document.getElementById("max");

                        if (!isNaN(new Date(minDateInput.value).getTime() / 1000)) {
                            d.from_date = new Date(minDateInput.value).getTime() / 1000;
                        }

                        if (!isNaN(new Date(maxDateInput.value).getTime() / 1000)) {
                            d.to_date = (new Date(maxDateInput.value).getTime() / 1000) + 86399;
                        }
                    }
                },
                // Custom data column
                columnDefs: [{
                        // define position column, can be string || number
                        className: "dt-head-center ",
                        targets: [1, 2, 3, 4, 5, 6, 7, 8, 9]
                    },
                    {
                        render: (data, type, row) => {
                            switch (data) {
                                case 'COMPLETED':
                                    return "<b class='rounded-xl bg-[#02e502] text-white px-2 text-[0.8rem] m-[auto]'>" +
                                        data + "</b>"
                                case 'CANCELED':
                                    return "<b class='rounded-xl bg-[#ff2f00] text-white px-2 text-[0.8rem]'>" +
                                        data + "</b>"
                                case 'PENDING':
                                    return "<b class='rounded-xl bg-[#6262a7] text-white px-2 text-[0.8rem]'>" +
                                        data + "</b>"
                            }
                        },
                        targets: 9
                    },
                    {
                        targets: 8,
                        render: function(data, type, full, meta) {
                            return moment(data).format('YYYY/MM/DD HH:mm:ss');
                        }
                    },
                    {
                        searchable: false,
                        orderable: false,
                        targets: 0,
                        render: function(data, type, full, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        visible: false
                    }
                ]
            }));
        })
    </script>
@endpush
