erahn-click/resources/views/includes/home.blade.php

@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('totalSagInCartInput')
            <script>
                $.notify({
                    icon: 'fas fa-exclamation-triangle fa-2x',
                    newest_on_top: true,
                    message: "<strong style='font-size:15px;'>{{ $message }}</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
        });

	let totalSagInCart = [];

	let updateSagInCart = function(norujukan){

	    let isNorujukanIsAlreadyInCart = totalSagInCart.includes(norujukan);

	    if(isNorujukanIsAlreadyInCart){
		totalSagInCart = totalSagInCart.filter(x => x != norujukan);
	    }

	    if(! isNorujukanIsAlreadyInCart){
	        totalSagInCart.push(norujukan);
	    }

	};

	// Add event listener to checkboxes to update total count customer wants to pay
        $('#main-table').on('input', 'input[type="checkbox"][name="chkboxsag[]"]', function(el) {
		let norujukan = el.target.dataset.norujukan;
		let isNorujukanIsChecked = el.target.checked;

		updateSagInCart(norujukan);

		document.getElementById('totalsag').innerHTML = totalSagInCart.length;
        });

	 document.querySelector('form#formtable').addEventListener('submit', function(event){
	 	event.preventDefault();

		// create new input
	 	let totalSagInCartInput = document.createElement('input');
	 	totalSagInCartInput.type = 'hidden';
	 	totalSagInCartInput.name = 'totalSagInCartInput';
	 	totalSagInCartInput.value = JSON.stringify(totalSagInCart);
		event.target.appendChild(totalSagInCartInput);

		event.target.submit();

	 });
    </script>
@endsection