<!DOCTYPE html>
<html>
    <head>
        <title>{{ config('app.name', 'CMR Services') }}</title>

        @section('meta')
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
            <meta name="csrf-token" content="{{ csrf_token() }}">
            <meta name="robots" content="noindex">
            <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
            <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
            <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
            <link rel="manifest" href="/favicons/manifest.json">
            <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#bc6e3c">
            <link rel="shortcut icon" href="/favicons/favicon.ico">
            <meta name="msapplication-config" content="/favicons/browserconfig.xml">
            <meta name="theme-color" content="#0e4688">
        @show

        @section('user-data')
            @if(!is_null(Auth::user()))
                <script>
                    window.PterodactylUser = {!! json_encode(Auth::user()->toVueObject()) !!};
                </script>
            @endif
            @if(!empty($siteConfiguration))
                <script>
                    window.SiteConfiguration = {!! json_encode($siteConfiguration) !!};
                </script>
            @endif
        @show
        <style>
            @import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
            @import url('//fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:500&display=swap');

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body, html {
                width: 100%;
                height: 100%;
            }

            .loading {
                position: fixed;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                width: 100%;
                background: url('https://4kwallpapers.com/images/wallpapers/ipad-air-2022-stock-dark-background-dark-mode-3840x2160-7907.png') no-repeat center center/cover;
                animation: pulse2 1.5s infinite, moveLeft 1s 1.5s forwards; /* 1s para la animación de desaparecer después de 3 segundos */
                z-index: 9999;
            }

            .loading img {
                border-radius: 999px;
                width: 150px;
                height: 150px;
                animation: spinAndReturn 1.5s infinite;
            }

            @keyframes pulse2 {
                0% {
                    transform: scale(1);
                    opacity: 1;
                }
                50% {
                    transform: scale(1.01); 
                    opacity: 1;
                }
                100% {
                    transform: scale(1);
                    opacity: 1;
                }
            }

            @keyframes spinAndReturn {
                0% {
                    transform: rotate(0deg);
                    opacity: 1;
                }
                50% {
                    transform: rotate(360deg);
                    opacity: 1;
                }
                100% {
                    transform: rotate(0deg);
                    opacity: 1;
                }
            }

            @keyframes moveLeft {
                0% {
                    transform: translateX(0);
                    opacity: 1;
                }
                100% {
                    transform: translateX(-100%);
                    opacity: 0;
                }
            }

            .hidden {
                display: none;
            }
        </style>

        @yield('assets')

        @include('layouts.scripts')
    </head>
    <body class="{{ $css['body'] ?? 'bg-neutral-50' }}">
        <div class="loading">
            <img src="https://cesarmr.is-a.dev/assets/cesar.png" alt="Loading Icon">
        </div>

        <script>
        var style = document.createElement('style');
        style.innerHTML = 'body { overflow: hidden; }';
        document.head.appendChild(style);

        setTimeout(() => {
          document.head.removeChild(style);
          document.querySelector('.loading').classList.add('hidden');
        }, 2500); 
        </script>

        @section('content')
            @yield('above-container')
            @yield('container')
            @yield('below-container')
        @show

        @section('scripts')
            {!! $asset->js('main.js') !!}
        @show
    </body>
</html>
