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

    <style>
        @keyframes marquee {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
        

        .marquee-div-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            background: linear-gradient(90deg, #dc3545, #fd7e14);
            padding: 10px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        .marquee-text-display {
            display: inline-block;
            padding-left: 100%;
            animation: marquee 30s linear infinite;
            color: white;
            font-weight: 500;
            font-size: 16px;
        }
        /* Add padding to body to prevent content from hiding under marquee */
        body {
            padding-top: 30px;
        }
    </style>

    <div class="marquee-div-container">
        <div class="marquee-container" style="overflow: hidden; white-space: nowrap;">
            <div class="marquee-text marquee-text-display">
                ⚠️ Tuan/Puan diminta hadir ke cawangan Ar-Rahn bagi pembayaran keuntungan SAG terpilih kerana transaksi tidak dapat dilakukan melalui ArRahnPay buat sementara waktu susulan kerja penaiktarafan sistem ⚠️
            </div>
        </div>
    </div>

    <div id="load-arrahn" class="d-none">
        <div class="overlay-arrahn"></div>
        <div class="loader-arrahn text-center">
            <img src="{{ asset('argon/img/brand/ar-rahn-take-2.gif') }}">
        </div>
    </div>

    <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('errorvalidate'))
            <script>
                Swal.fire(
                    "Pembayaran Gagal.",
                    "{{ session('errorvalidate') }}",
                    'error'
                )
            </script>
        @endif


        @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>

        <div class="d-flex justify-content-center mb-4">
            <x-dashboard-card-small
                title="Baki Lelong" 
                :subtitle="number_format($customerLelong['bakilelong'] ?? 0, 2)"
                icon="fas fa-chart-bar"
                iconState="danger"
            />
            <x-dashboard-card-small
                title="Rugi Lelong" 
                :subtitle="number_format($customerLelong['rugilelong'] ?? 0, 2)"
                icon="fas fa-chart-bar"
                iconState="warning"
            />
        </div>

        @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){
	    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);
	    }
	};

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

        (async () => {
            const cartsAvailable = await checkCarts();
            if (!cartsAvailable || (typeof cartsAvailable === 'object' && Object.keys(cartsAvailable).length === 0)) {
                // console.log('No carts available or an error occurred.');
                const loader = document.getElementById('load-arrahn');
                loader.classList.remove('d-none');
                event.target.submit();
                return;
            }

            Swal.fire({
                title: "Troli Anda Masih Ada Lagi?",
                showDenyButton: true,
                showCancelButton: false,
                confirmButtonText: "Pergi Ke Troli",
                denyButtonText: `Buang Troli`,
                allowOutsideClick: false,
                allowEscapeKey: false,
            }).then((result) => {
                const loader = document.getElementById('load-arrahn');
                loader.classList.remove('d-none');
                if (result.isDenied) {
                    let remove_carts = fetch('/deletecarts', {method: 'GET', headers: {'Content-Type': 'application/json','Accept': 'application/json'}})
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('HTTP error ' + response.status);
                        }
                        return response.json();
                    })
                    .catch(error => console.error(error));

                }
                event.target.submit();
            });

        })();
	 });

     const checkCarts = async () => {
        try {
            const response = await fetch('/showcarts-available', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
            });

            if (!response.ok) {
                throw new Error('HTTP error ' + response.status);
            }

            const data = await response.json();
            return data;
        } catch (error) {
            console.error('Error fetching carts:', error);
            return null;
        }
    };

    window.addEventListener('pageshow', (event) => {
        const loader = document.getElementById('load-arrahn');
        if (loader) {
            loader.classList.add('d-none');
        }
    });
    </script>
@endsection