@extends("layouts.main")
@section("title", "Demand Notice")
@section("content")
    <!-- push external head elements to head -->
    @push("head")
        @livewireStyles
        <link rel="stylesheet" href="{{ asset("plugins/DataTables/datatables.min.css") }}">
        <style>
            .card-body table {
                width: 100% !Important;
            }

            .table-actions a {
                font-size: 5px !important;
            }
        </style>
    @endpush

    <div class="container-fluid">
        <x-breadcrumb desc="Listing all Demand Notices" pageTitle="Demand Notices" iconName="ik-bell" />

        <div>
            @include("include.message")
            <livewire:wire-demand-notices />
            <!-- end message area-->
        </div>
    </div>
    <!-- push external js -->
    @push("script")
        @livewireScripts
        <script src="{{ asset("plugins/DataTables/datatables.min.js") }}"></script>
        <script src="{{ asset("plugins/select2/dist/js/select2.min.js") }}"></script>
        <script src="{{ asset("plugins/datedropper/datedropper.min.js") }}"></script>
        <script src="{{ asset("js/form-picker.js") }}"></script>
        <!--server side users table script-->
        <script src="{{ asset("js/custom.js") }}"></script>
        <script>
            function initializeDemandNoticeDataTable() {
                const columns = [{
                        data: "id",
                        name: "id",
                        orderable: false,
                        searchable: true,
                    },
                    {
                        data: "business_name",
                        name: "business_name",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "reference_number",
                        name: "reference_number",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "total_amount",
                        name: "",
                        orderable: true,
                        searchable: false,
                    },
                    {
                        data: "paid_amount",
                        name: "",
                        orderable: true,
                        searchable: false,
                    },
                    {
                        data: "unpaid_amount",
                        name: "",
                        orderable: true,
                        searchable: false,
                    },
                    {
                        data: "invoices_count",
                        name: "",
                        orderable: true,
                        searchable: false,
                    },
                    {
                        data: "paid_invoices_count",
                        name: "",
                        orderable: true,
                        searchable: false,
                    },
                    {
                        data: "unpaid_invoice_count",
                        name: "",
                        orderable: true,
                        searchable: false,
                    },
                    {
                        data: "created_at",
                        name: "created_at",
                        orderable: true,
                    },
                    {
                        data: "actions",
                        name: "actions",
                        orderable: false,
                        searchable: false,
                    },
                ];
                $("#demand_notice_table").DataTable({
                    ...dataTableConfig(true),
                    order: [
                        [9, 'desc']
                    ],
                    ajax: {
                        url: "{{ route("demand-notice.index") }}",
                        type: "get",
                        data: function (request) {
                            request.from_date = $("#from-date").val() != '' ? $("#from-date").val(): null;
                            request.to_date = $("#to-date").val() != '' ?  $("#to-date").val(): null;
                            request.status = $('#status').val() != '' ? $('#status').val():  null
                        }
                    },
                    columns,
                    ...generateSerialNumber
                });
            }
            document.addEventListener('DOMContentLoaded', function() {
                document.body.classList.add("sidebar-mini");

                initializeSelect2();
                initializeDemandNoticeDataTable();

                alertSuccessMsg(() => {
                    redrawTable('demand_notice_table')
                });

                alertErrorMsg(() => {
                    redrawTable('demand_notice_table')
                });

                Livewire.on('initSelect', (index) => {
                    let elName = `#select-${index}`;
                    initializeSelect2(elName);
                });

                onCustomEvent('change', "#from-date", function (element) {
                    Livewire.emit('fromDatePicked', $("#from-date").val());
                    redrawTable('demand_notice_table');
                });
                onCustomEvent('change', "#to-date", function (element) {
                    Livewire.emit('toDatePicked', $("#to-date").val());
                    redrawTable('demand_notice_table');
                });
                onCustomEvent('change', "#status", function (element) {
                    redrawTable('demand_notice_table');
                });

                onCustomEvent('click', "#reset-btn", function (element) {
                    $("#to-date").val("");
                    $("#from-date").val("");
                    $('#status').val('').trigger('change'); // Select the option with a value of '1'
                    redrawTable('demand_notice_table');
                });
            });
        </script>
    @endpush
@endsection