@extends('admin.layouts.layout')

@section('container_content')
    @include('admin.layouts.menu')


    <!-- ------------ top nav ------------- -->
        <section class="top-nav py-4">
            <div class="container">
                <div class="toggelmenu">
                    <span></span>
                    <span></span>
                    <span></span>
                    <i class="fas fa-arrow-right"></i>
                </div>
                <!-- <a href="#" class="butn">
                    <span> مشاهده الموقع </span>
                </a> -->
                <a href="{{ route('admin_logout') }}" class="butn butn_blue" onclick="event.preventDefault();document.getElementById('logout-form').submit();">
                    <div class="cont">
                        <span>  {{ __('dashboard.logout') }} </span>
                    </div>
                    <img src="{{ asset('assets/admin/images/butn_shap.png') }} " alt="" class="shape">
                </a>
            </div>
        </section>

    <!--<section class="top-nav">-->
    <!--    <div class="row">-->
    <!--        <div class="col-lg-5">-->
    <!--            <div class="title py-4">-->
    <!--                <h3>{{ $title ?? __('dashboard.title')}}</h3>-->

    <!--            </div>-->
    <!--        </div>-->
            <!-- <div class="col-lg-4">
    <!--            <div class="search-bar">-->
    <!--                <form>-->
    <!--                    <div class="form-group">-->
    <!--                        <input class="form-control" type="text" placeholder="search">-->
    <!--                        <button><i class="fas fa-search"></i></button>-->
    <!--                    </div>-->
    <!--                </form>-->
    <!--            </div>-->
    <!--        </div> -->-->
    <!--        <div class="col-lg-3">-->
                <!--<ul class="notivacations m-0">-->
                <!--    <li class="items notivacat">-->
                <!--        <div class="icon">-->
                <!--            <i class="far fa-bell"></i>-->
                <!--            <span class="num">-->
                <!--                1-->
                <!--            </span>-->
                <!--        </div>-->
                <!--    </li>-->
                <!--</ul>-->
    <!--        </div>-->
    <!--        <div class="col-lg-4">-->
                <!--<div class="profile-nav">-->
                <!--    <div class="info w-50">-->
                        <!--<h5>{{ $currentUserInfo->name ?? '' }}</h5>-->
                <!--    </div>-->
                <!--    <div class="user-img dropdown show mr-3">-->
                <!--        <a href="#" class="dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown">-->
                <!--            <img src="{{ asset($currentUserInfo->photo) }}" alt="">-->
                <!--        </a>-->
                <!--        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">-->
                <!--            <div class="pic text-center">-->
                <!--                <img src="{{ asset($currentUserInfo->photo) }}" alt="">-->
                <!--                <h5>{{ $currentUserInfo->name ?? '' }}</h5>-->
                <!--            </div>-->
                            <!-- <a class="dropdown-item" href="#"><i class="far fa-user"></i> my profile</a> -->
                <!--            {{--<a class="dropdown-item" href="{{ route('admin_settings') }}"> <i class="fas fa-sliders-h"></i>{{ __('dashboard.settings') }}</a>--}}-->
                <!--            <a class="dropdown-item" href="{{ route('admin_logout') }}"-->
                <!--               onclick="event.preventDefault();document.getElementById('logout-form').submit();"><i class="fas fa-sign-out-alt"></i> {{ __('dashboard.logout') }}-->
                <!--            </a>-->

                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->

    <!--        </div>-->
    <!--    </div>-->
    <!--    <div class="toggelmenu">-->
    <!--        <span></span>-->
    <!--        <span></span>-->
    <!--        <span></span>-->
    <!--        <i class="fas fa-arrow-right"></i>-->
    <!--    </div>-->
    <!--</section>-->

    <form id="logout-form" action="{{ route('admin_logout') }}" method="POST" style="display: none;">
        @csrf
    </form>
    <!--Contents-->
    <main class="main">
        <div id="errors">
            @if(count($errors))
                <div class="alert alert-danger">
                    @foreach($errors->all() as $error)
                        <li>
                            {{$error}}
                        </li>
                    @endforeach
                </div>
            @endif
        </div>

        @if (session('message'))
            <div class="alert alert-success message_alert">{{session('message')}}</div>
        @endif

        @if (session('error_message'))
            <div class="alert alert-danger message_alert">{{session('error_message')}}</div>
        @endif


    <!-- Response of ajax requests -->
        <div class="alert alert-danger ajaxErrorResponse" style="display: none"></div>
        <div class="alert alert-success ajaxResponse" style="display: none"></div>

        @yield('content')
    </main>

    <!--Footer-->
    <footer class="">
        <!-- Enhanced Loading Overlay -->
        <div class="admin-loading-overlay" id="adminLoadingOverlay" style="display: none;">
            <div class="admin-loading-content">
                <div class="admin-spinner">
                    <div class="spinner-ring"></div>
                </div>
                <div class="admin-loading-text">
                    <h4 id="loadingTitle">{{ __('dashboard.processing') }}</h4>
                    <p id="loadingMessage">{{ __('dashboard.please_wait') }}</p>
                    <div class="admin-progress-bar" id="adminProgressBar" style="display: none;">
                        <div class="admin-progress-fill" id="adminProgressFill"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Legacy loader for backward compatibility - DISABLED -->
        <!-- <div class="loading hide">
            <div class="loader"></div>
        </div> -->
    </footer>
    <!--End-Footer-->
    <!-- -------------- request ----------------- -->
    <!-- <a class="to-top" data-scroll href="#bazinga" id="scroll-btn">
        <i class="fa fa-arrow-up"></i>
    </a> -->
@endsection

@section('container_js')
    {{--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>--}}
    <script src="{{ asset('assets/admin/js/lib/axios.min.js') }}"></script>

    <!-- Enhanced Admin Loader Styles -->
    <style>
        /* Admin Loading Overlay */
        .admin-loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .admin-loading-content {
            text-align: center;
            color: white;
            background: rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            min-width: 300px;
        }

        /* Spinner Animation */
        .admin-spinner {
            position: relative;
            width: 80px;
            height: 80px;
            margin: 0 auto 30px;
        }

        .spinner-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid transparent;
            border-top: 3px solid #007bff;
            border-radius: 50%;
            animation: spin 1.2s linear infinite;
        }

        /* Single spinner ring - clean and simple */

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Loading Text */
        .admin-loading-text h4 {
            margin: 0 0 10px 0;
            font-size: 24px;
            font-weight: 600;
            color: #fff;
        }

        .admin-loading-text p {
            margin: 0 0 20px 0;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
        }

        /* Progress Bar */
        .admin-progress-bar {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            overflow: hidden;
            margin-top: 20px;
        }

        .admin-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #007bff, #28a745);
            border-radius: 3px;
            width: 0%;
            transition: width 0.3s ease;
            animation: progress-shine 2s infinite;
        }

        @keyframes progress-shine {
            0% { background-position: -200px 0; }
            100% { background-position: calc(200px + 100%) 0; }
        }

        /* File Upload Specific Styles */
        .admin-loading-overlay.file-upload .admin-loading-content {
            background: rgba(0, 123, 255, 0.1);
            border-color: rgba(0, 123, 255, 0.3);
        }

        .admin-loading-overlay.file-upload .spinner-ring {
            border-top-color: #007bff;
        }

        /* Success State */
        .admin-loading-overlay.success .admin-spinner {
            display: none;
        }

        .admin-loading-overlay.success .admin-loading-content {
            background: rgba(40, 167, 69, 0.1);
            border-color: rgba(40, 167, 69, 0.3);
        }

        .admin-loading-overlay.success .admin-loading-text h4 {
            color: #28a745;
        }

        .admin-loading-overlay.success::before {
            content: "✓";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 60px;
            color: #28a745;
            font-weight: bold;
            animation: success-pulse 0.6s ease-out;
        }

        @keyframes success-pulse {
            0% { transform: translate(-50%, -50%) scale(0); }
            50% { transform: translate(-50%, -50%) scale(1.2); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }

        /* Error State */
        .admin-loading-overlay.error .admin-spinner {
            display: none;
        }

        .admin-loading-overlay.error .admin-loading-content {
            background: rgba(220, 53, 69, 0.1);
            border-color: rgba(220, 53, 69, 0.3);
        }

        .admin-loading-overlay.error .admin-loading-text h4 {
            color: #dc3545;
        }

        .admin-loading-overlay.error::before {
            content: "✕";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 60px;
            color: #dc3545;
            font-weight: bold;
            animation: error-shake 0.6s ease-out;
        }

        @keyframes error-shake {
            0%, 100% { transform: translate(-50%, -50%); }
            25% { transform: translate(-52%, -50%); }
            75% { transform: translate(-48%, -50%); }
        }

        /* File Preview Styles */
        .file-preview-container {
            margin-top: 10px;
        }

        .file-preview-container .alert {
            margin-bottom: 10px;
            padding: 10px 15px;
            font-size: 14px;
        }

        .file-preview-container .preview-content {
            text-align: center;
        }

        .file-preview-container video,
        .file-preview-container img {
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .file-preview-container .alert-warning {
            background-color: #fff3cd;
            border-color: #ffeaa7;
            color: #856404;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .admin-loading-content {
                margin: 20px;
                padding: 30px 20px;
                min-width: auto;
            }

            .admin-spinner {
                width: 60px;
                height: 60px;
                margin-bottom: 20px;
            }

            .admin-loading-text h4 {
                font-size: 20px;
            }

            .admin-loading-text p {
                font-size: 14px;
            }

            .file-preview-container video,
            .file-preview-container img {
                width: 150px !important;
                max-height: 120px !important;
            }
        }
    </style>

    <script>
        axios.defaults.headers.common = {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        };
        var allOptionLabel= '{{ __("main.all") }}'
        var mainOptionLabel= '{{ __("main.main") }}'
        var allLabel= "---"

        // Loader translation keys
        window.loaderTranslations = {
            processing: '{{ __("dashboard.processing") }}',
            please_wait: '{{ __("dashboard.please_wait") }}',
            uploading: '{{ __("dashboard.uploading") }}',
            uploading_files: '{{ __("dashboard.uploading_files") }}',
            uploading_file: '{{ __("dashboard.uploading_file") }}',
            preparing: '{{ __("dashboard.preparing") }}',
            success: '{{ __("dashboard.success") }}',
            completed_successfully: '{{ __("dashboard.completed_successfully") }}',
            error_occurred: '{{ __("dashboard.error_occurred") }}',
            please_try_again: '{{ __("dashboard.please_try_again") }}',
            saved_successfully: '{{ __("dashboard.saved_successfully") }}',
            file_uploaded_successfully: '{{ __("dashboard.file_uploaded_successfully") }}',
            validation_errors: '{{ __("dashboard.validation_errors") }}',
            request_failed: '{{ __("dashboard.request_failed") }}',
            request_error: '{{ __("dashboard.request_error") }}',
            file_too_large: '{{ __("dashboard.file_too_large") }}',
            file_selected: '{{ __("dashboard.file_selected") }}'
        };
    </script>
    @yield('inner_js')
    <script src="{{ asset('assets/admin/js/actions.js') }}"></script>
    <script src="{{ asset('assets/admin/js/custom/adminLoader.js') }}"></script>
    {{-- <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="{{ asset('assets/admin/js/charts.js') }}"></script> --}}
@endsection
