@extends ('layouts.indexfirst')
@section('content')
    <title>Home | Portal Pelanggan</title>

    <div class="row mt-n9 top-0">
        <x-dashboard-card 
            title="Jum. Pembiayaan Semasa" 
            :subtitle=$total 
            icon="fas fa-chart-pie" 
            icon-state='warning'
            :link="route('home')" 
        />

        <x-dashboard-card 
            title="Bil Pembiayaan Semasa" 
            :subtitle=$bilangan 
            icon="fas fa-users" 
            icon-state='success'
            :link="route('home')" 
        />

        <x-dashboard-card 
            title="Bil Pembiayaan 6 Bulan Ke Atas" 
            :subtitle=$sixMonths 
            icon="fas fa-chart-bar"
            :link="route('home', ['filter' => 'pembiayaan-6-bulan'])" 
        />

        <x-dashboard-card 
            title="Bil Pembiayaan Akan Dilelong" 
            :subtitle=$bilanganLelong 
            icon="fas fa-gavel"
            icon-state='info' 
            card-background-state="{{ $bilanganLelong > 0 ? 'crimson' : '' }}" 
            :link="route('home', ['filter' => 'pembiayaan-akan-dilelong'])" 
        />
    </div>

    <form method="post" id="formtable" action="{{ route('payment.action') }}">
        @csrf
        
        @error('chkboxsag')
            <script>
                $.notify({
                    icon: 'fas fa-exclamation-triangle fa-2x',
                    newest_on_top: true,
                    message: "<strong style='font-size:15px;'>Sila pilih salah satu checkbox di atas terlebih dahulu!</strong>"
                }, {
                    type: 'danger',
                    allow_dismiss: false,
                    placement: {
                        align: 'center',
                        from: 'bottom'
                    },
                    animate: {
                        enter: 'animate__animated animate__bounce',
    
                        exit: 'animate__animated animate__bounceOutDown'
                    }
                });
            </script>
        @enderror
        
        @if (\Session::has('error'))
            <script>
                Swal.fire(
                    // "Melebihi tempoh 12 Bulan.",
                    "Akan/Telah Tamat Kontrak 12 Bulan.",
                    "{{ \Session::get('error') }}",
                    'warning'
                )
            </script>
        @endif

        @if (\Session::has('errorsagonline'))
            <script>
                Swal.fire(
                    "Pembayaran Terdahulu Dalam Proses.",
                    "{{ \Session::get('errorsagonline') }}",
                    'warning'
                )
            </script>
        @endif
        <br>

        @if (request()->get('filter') == 'pembiayaan-akan-dilelong')
            <x-dashboard-notification>
                <x-dashboard-notification.item content="1. Sekiranya Lelongan Anda Dalam Tempoh Kontrak Lanjutan (Mencapai 12 Bulan), Urusan Penebusan Hanya Dibenarkan Di Kaunter Cawangan Selewatnya-lewatnya 3 Hari Sebelum Tarikh Lelong." />
                <x-dashboard-notification.item content="2. Transaksi Pembayaran Hanya Dibenarkan Selewat-lewatnya 3 Hari Sebelum Lelongan." />
                <x-dashboard-notification.item content="(Contoh: Tarikh Lelong: 21-02-2023, Pembayaran/Penebusan Hanya dibenarkan Sehingga Tarikh 18-02-2023 Sahaja)" />
            </x-dashboard-notification>
        @else
            <x-dashboard-notification>
                <x-dashboard-notification.item content="1. Sila Buat Penebusan Di Kaunter Jika Tempoh Telah Mencapai 12 Bulan!" />
                <x-dashboard-notification.item content="2. Sila 'Tick' Kotak No Rujukan Yang Hendak Dibayar." />
            </x-dashboard-notification>
        @endif


        <div class="card shadow">
            <div class="card-body">

                @if (request()->get('filter') == 'pembiayaan-akan-dilelong')
                    @include('includes.partials.table-pembiayaan-akan-dilelong')
                @else
                    @include('includes.partials.table-pembiayaan')
                @endif

            </div>

        </div>
        <div class="d-flex justify-content-end mt-4">
            <button type="submit" class="btn btn-primary"><span class="mr-3">Seterusnya</span>
                <span class="badge alert-warning text-dark font-weight-bold" style="font-size:12px;" id="totalsag">0</span>
            </button>
        </div>
    </form>
    
    @include('modal.marhun')


    <script>
        $('#main-table').DataTable().destroy();
        $('#main-table').DataTable({
            "columnDefs": [{
                "orderable": false,
                "targets": 0
            }],
            language: {
                'paginate': {
                    'previous': '<span class="fas fa-backward"></span>',
                    'next': '<span class="fas fa-forward"></span>'
                }
            },
            "pageLength": 10,
            "scrollX": true
        });

        // Add event listener to checkboxes to update total count customer wants to pay
        document.querySelectorAll('input[type="checkbox"][name="chkboxsag[]"]').forEach(function(el) {
            el.addEventListener('change', function(event) {
                var total = document.querySelectorAll('input[type="checkbox"][name="chkboxsag[]"]:checked').length;
                document.getElementById('totalsag').innerHTML = total;
            });
        });
    </script>
@endsection