@extends('layouts.app')

<style>
    #start {
        min-height: 100vh;
        background: #020b11;
    }

    #creasyLoader {
        position: fixed;
        inset: 0;
        z-index: 99999;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #020b11;

        transition: opacity .5s ease;
    }

    #creasyLoader.hide {
        opacity: 0;
        pointer-events: none;
    }

    .creasy-loader-logo {
        width: 85px;
        height: 85px;
        object-fit: contain;

        animation: creasyPulse 1.2s ease-in-out infinite;

        filter:
            drop-shadow(0 0 12px rgba(34, 207, 228, .35))
            drop-shadow(0 0 25px rgba(184, 90, 233, .20));
    }

    @keyframes creasyPulse {
        0%, 100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.12);
        }
    }
</style>






{{-- LOADING AWAL --}}

<div id="creasyLoader">
    <img
        src="{{ asset('ikon.png') }}"
        alt="Creasy"
        class="creasy-loader-logo"
    >
</div>


{{-- CREA AKAN DIMUAT DI SINI --}}

<div id="start"></div>
@section('scripts')

<script>
$(function () {

    const loader = $('#creasyLoader');
    const start = $('#start');

    start.load('{{ route("crea.content") }}', function (response, status, xhr) {

        if (status === 'error') {

            console.error('Creasy content gagal dimuat:', xhr.status, xhr.statusText);

            start.html(`
                <div style="
                    min-height:100vh;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    color:#fff;
                    text-align:center;
                    padding:30px;
                ">
                    <div>
                        <h4 style="color:#22cfe4;">
                            Creasy sedang mengalami kendala
                        </h4>

                        <p style="color:#9aa7ad;">
                            Silakan refresh halaman beberapa saat lagi.
                        </p>

                        <button
                            onclick="location.reload()"
                            style="
                                border:0;
                                border-radius:10px;
                                padding:10px 20px;
                                background:#22cfe4;
                                color:#020b11;
                                font-weight:600;
                            "
                        >
                            Refresh
                        </button>
                    </div>
                </div>
            `);
        }

        // Apa pun hasil request-nya, loader jangan sampai menggantung.
        loader.addClass('hide');

        setTimeout(function () {
            loader.remove();
        }, 500);

    });

    // Safety net.
    // Kalau request macet terlalu lama, loader tetap dilepas.
    setTimeout(function () {

        if (loader.length) {

            console.warn('Creasy loader timeout.');

            loader.addClass('hide');

            setTimeout(function () {
                loader.remove();
            }, 500);
        }

    }, 10000);

});
</script>

@endsection