@extends ('layouts.indexfirst')

@push('additional_styles')
    <style>
        .card.shadow {
            background-color: #ffffff;
            /* Lighter background */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
            /* Increased shadow */
            border: none;
            /* Remove border if present */
        }

        .card-body.disabled {
            background-color: rgba(0, 0, 0, 0.03);
            /* Lighter disabled background */
            pointer-events: none;
            height: 300px;
            position: relative;
            border-radius: 0.25rem;
            /* Match card border-radius if needed */
        }

        .loader {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .pulsating-dot {
            width: 40px;
            height: 40px;
            background-color: #006400;
            border-radius: 50%;
            box-shadow: 0 0 0 0 rgba(255, 215, 0, 1);
            animation: pulse-green 2s infinite;
        }

        @keyframes pulse-green {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(0, 100, 0, 0.7);
            }

            70% {
                transform: scale(1.1);
                box-shadow: 0 0 0 20px rgba(0, 100, 0, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(0, 100, 0, 0);
            }
        }

        .loader p {
            margin-top: 15px;
            color: #333;
            font-size: 16px;
        }

        .fancy-text {
            font-family: 'Arial', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #2D7349;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            letter-spacing: 0.5px;
            margin-top: 20px;
            text-transform: uppercase;
        }

        .dots {
            display: inline-block;
        }

        .dots span {
            opacity: 0;
            display: inline-block;
            animation: dots 1.4s infinite;
        }

        .dots span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes dots {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    </style>
@endpush

@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 disabled">
                <div class="loader">
                    <div class="pulsating-dot"></div>
                    <p class="fancy-text">Data sedang dimuat<span
                            class="dots"><span>.</span><span>.</span><span>.</span></span></p>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-end mt-4">
            <button type="submit" class="btn btn-primary btn-disabled" disabled><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>

    <script>
        $(document).ready(function() {
            window.location.href = '{{ $homeUrl }}';
        });
    </script>
@endsection