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

        button:disabled {
            cursor: not-allowed;
            pointer-events: all !important;
        }
    </style>
    @livewireStyles
@endpush
@section('content')
    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end mt-2">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-folder bg-blue"></i>
                        <div class="d-inline">
                            <h5>{{ __('Demand Notice Invoices') }}</h5>
                            <span>{{ __('Showing all Invoices for the Demand Notice') }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('demand-notice.index') }}">{{ __('Demand Notice') }}</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <livewire:wire-show-demand-notice :demandNotice="$demandNotice">
    </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>
        <!--server side users table script-->
        <script src="{{ asset('js/custom.js') }}"></script>
        <script>
            function initializeDemandNoticeInvoicesDatatable(url, isAuthorized = false) {
                const columns = [{
                        data: "id",
                        name: "id",
                        orderable: true,
                        searchable: false,
                    },
                    {
                        data: "transaction_reference",
                        name: "transaction_reference",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "fname",
                        name: "fname",
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: "service.name",
                        name: "service.name",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "mda.name",
                        name: "mda.name",
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: "amount",
                        name: "amount",
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: "paid_at",
                        name: "paid_at",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "paychannel",
                        name: "paychannel",
                        orderable: true,
                        searchable: true,
                    },
                    {
                        data: "invoice_no",
                        name: "invoice_no",
                        orderable: true,
                        searchable: true,
                    },

                    {
                        data: "created_at",
                        name: "created_at",
                        orderable: true,
                        searchable: false,
                    },

                    {
                        data: "payment_status",
                        name: "payment_status",
                        orderable: true,
                        searchable: false,
                    },
                ];

                if (isAuthorized) {
                    columns.push({
                        data: "actions",
                        name: "actions",
                        orderable: false,
                        searchable: false,
                    });
                }
                console.log(url);
                $("#demand_notice_invoices").DataTable({
                    ...dataTableConfig(true),
                    order: [
                        [9, 'desc']
                    ],
                    ajax: {
                        url: url,
                        type: "get",
                    },
                    columns,
                    ...generateSerialNumber,
                });
            }
            document.addEventListener('DOMContentLoaded', function() {
                document.body.classList.add("sidebar-mini");
                initializeSelect2();

                // Initialize MDASERVICETABLE
                initializeDemandNoticeInvoicesDatatable(
                    '{{ request()->url() }}',
                    @can('manage_demand_notice')
                        true
                    @endcan );

                onCustomEvent('click', '.delete-demand-notice-btn', (e) => {
                    const demandNoticeId = e.target.getAttribute('data-id');
                    const text =
                        "Are you sure you want to delete this Demand notice? The action is irreversible";
                    const btnText = "Continue!";
                    fireSweetAlert(text, btnText, (demandNotice) => {
                        showLoading();
                        Livewire.emit('deleteDemandNotice', demandNotice);
                    }, demandNoticeId);
                });

                onCustomEvent('click', '.invoice-del-btn', (e) => {
                    const invoiceId = e.target.getAttribute('data-invoice-id');
                    const text = "Are you sure you want to delete this Invoice? The action is irreversible";
                    const btnText = "Continue!";
                    fireSweetAlert(text, btnText, (invoice) => {
                        showLoading();
                        Livewire.emit('deleteDemandNoticeInvoice', invoice);
                    }, invoiceId);
                });

                onCustomEvent('click', '#editDemandNoticeInvoiceButton', function(e) {
                    const invoiceId = e.target.getAttribute('data-invoice-id');
                    Livewire.emit('showEditDemandNoticeInvoiceModal', invoiceId);
                });

                onCustomEvent('click', '#addService', function(e) {
                    Livewire.emit('showAddServiceModal');
                });

                // When Edit Demand Notice Invoice modal is closed
                onCustomEvent("hidden.bs.modal", "#editDemandNoticeInvoice", function(e) {
                    Livewire.emit('toggleLoading', true);
                    redrawTable('demand_notice_invoices');
                });

                onCustomEvent("hidden.bs.modal", "#addDemandNoticeService", function(e) {
                    Livewire.emit('toggleLoading', true);
                    redrawTable('demand_notice_invoices');
                });

                onCustomEvent('click', '#updateInvoice', () => {
                    showLoading();
                    Livewire.emit("updateDemandNoticeInvoice");
                });

                onCustomEvent('click', '#addInvoice', () => {
                    showLoading();
                    Livewire.emit("addDemandNoticeServices");
                });

                Livewire.on('errorReload', (msg)=> {
                    fireSwalErrorAlert(msg);
                    setTimeout(() => window.location.reload(true), 3000);
                });

                Livewire.on('successReload', (msg)=> {
                    fireSwalSuccessAlert(msg);
                    setTimeout(() => window.location.reload(true), 3000);
                });

                Livewire.on('redrawDataTable', (msg)=> {
                    redrawTable('demand_notice_invoices');
                });

                alertSuccessMsg();

                alertErrorMsg();

                // document.addEventListener('show-form', event => {
                //     $('#addDemandNoticeInvoice').modal('show');
                // });
            });
        </script>
    @endpush
@endsection