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' : 'white' }}" 
            :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 totaltagSyarikat = [];
	let updateSagInCart = function(norujukan,syarikat){
        console.log(norujukan,syarikat);
	    let isNorujukanIsAlreadyInCart = totalSagInCart.includes(norujukan);

	    if(isNorujukanIsAlreadyInCart){
            let index = totalSagInCart.indexOf(norujukan);
            totalSagInCart = totalSagInCart.filter(x => x != norujukan);
            totaltagSyarikat.splice(index, 1);
        }

	    if(! isNorujukanIsAlreadyInCart){
	        totalSagInCart.push(norujukan);
            totaltagSyarikat.push(syarikat);
	    }
        console.log("total:" + totalSagInCart);
        console.log("totalsyarikat:" + totaltagSyarikat);

	};

	// 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 tagsyarikat = el.target.dataset.syarikat;
		let isNorujukanIsChecked = el.target.checked;

		updateSagInCart(norujukan,tagsyarikat);

		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);

        let listSyarikatinCartInput = document.createElement('input');
        listSyarikatinCartInput.type = 'hidden';
        listSyarikatinCartInput.name = 'listSyarikatinCartInput';
        listSyarikatinCartInput.value = JSON.stringify(totaltagSyarikat);
		event.target.appendChild(listSyarikatinCartInput);

        let check_carts = fetch('/showcarts-available')
        .then(response => {
            console.log(response);
            if (!response.ok) {
                throw new Error('HTTP error ' + response.status);
            }
            return response.json();
        })
        .then(data => console.log(data))
        .catch(error => console.error(error));

        if(check_carts){
            Swal.fire({
                title: "Troli Anda Masih Ada Lagi?",
                showDenyButton: true,
                showCancelButton: false,
                confirmButtonText: "Pergi Ke Troli",
                denyButtonText: `Buang Troli`
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isDenied) {
                    let remove_carts = fetch('/deletecarts')
                    .then(response => {
                        console.log(response);
                        if (!response.ok) {
                            throw new Error('HTTP error ' + response.status);
                        }
                        return response.json();
                    })
                    .then(data => console.log(data))
                    .catch(error => console.error(error));

                }
                event.target.submit();
            });
            console.log(check_carts);
        }else{
            event.target.submit();
        }

	 });
    </script>
@endsection