@extends('layouts.main') 
@section('title', 'Payment Report')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
      @livewireStyles
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}">
        <style>
            .card-body table{
                width:100%!Important;
            }
            .table-actions a {
                font-size: 5px!important;
            }
        </style>
    @endpush

     <div id="loaderEl">
        <x-loader/>
    </div>
    <div class="container-fluid">
    	<div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-users bg-blue"></i>
                        <div class="d-inline">
                            <h5>{{__('Payment Report') }} {{ env('SHORTNAME') }}</h5>
                            <span>{{ __('Listing of all Non-cash Invoices and Remittances')}}</span>
                            {{-- <h2>{{ __('Listing of all Non-cash Invoices and Remittances')}}</h2> --}}
                        </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('dashboard') }}">{{ __('Dashboard')}}</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
       <livewire:wire-invoice-listing :special_role="$special_role" :type="'report'" :table_names="['Non Cash Invoices
','Remittances']"/>
    </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/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') }}"></script> --}}
        <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script>
        <script src="{{ asset('js/form-picker.js') }}"></script>
        <script src="{{ asset('js/currency.min.js') }}"></script>

        <!--server side users table script-->
        <script src="{{ asset('js/custom.js') }}"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Initialize select2
                initializeSelect2();
                
                initializeDatepicker();
                // initialize invoiceListingDataTable
                initializeinvoiceListingDataTable("invoice");
                // initialize RemittanceListingDataTable
                initializeRemittanceListingDataTable(true)

                // intialize remittance invoices table
                initializeRemittanceInvoiceDataTable();

                hideLoading();

                onCustomEvent('change', '#invoice-mda', (e)=> {
                    Livewire.emit('set_mda', e.target.value);
                });
                
                onCustomEvent('change', '#services', (e)=> {
                    Livewire.emit('set_service', e.target.value);
                });

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

                alertErrorMsg(()=> {
                    redrawTable('invoicelisting_table')
                });
           
                Livewire.on('initServices', (index)=> {
                    initializeSelect2('#services');
                });

                onCustomEvent('click', '#search-btn', ()=> {
                    showLoading();
                    redrawTable('invoicelisting_table');
                    redrawTable('remittance_table')
                })

                onCustomEvent('click', '.send-btn', (e)=> {
                    const invoiceNo = $(e.target).data("key");
                    Livewire.emit('display_modal', invoiceNo);
                })

                onCustomEvent('click','.view-invoice', async (e)=> {
                    const remittanceId = $(e.target).data("key");
                    showdataTableLoadingIcon('remittanceInvoice');
                    const url = `/payment_report/remittance_invoices/${remittanceId}`;
                    const data =  await getRequest(url);
                   if(data && data.length > 0){
                       hideDataTableLoadingIcon('remittanceInvoice');
                    //    reinitialize datable
                      return reInitializeDataTable('remittanceInvoice', data)
                   }
                    //    No data for reintialization of table
                    return hideDataTableLoadingIcon('remittanceInvoice');
                   
                });

                onCustomEvent('click','.verify-invoice', async (e)=> {
                    e.preventDefault();
                    showdataTableLoadingIcon('invoicelisting_table');
                    try {
                        const data = await getRequest(e.target.href);
                        if(data){
                            data = JSON.parse(data);
                            if (data['status'] == "success") {
                                //  par.closest('td').prev('td').html("<span class='label label-success'>&nbsp;Paid&nbsp;</span>");
                                // par.remove();
                                fireSwalSuccessAlert('Payment verified!')
                            } else {
                                fireSwalErrorAlert('Payment Unverified')
                            }
                        }
                    } catch (error) {
                        fireSwalErrorAlert(error.message);
                        hideDataTableLoadingIcon('invoicelisting_table');
                        console.error(error.message);
                    }
                });
            });
        </script>
    @endpush
@endsection