{{-- 
    Lokasi File: resources/views/partials/header_mobile.blade.php
    Deskripsi: HEADER MOBILE - Layout Sejajar (Logo Kiri, Logout Kanan Atas)
--}}

<style>
    /* Reset Layout AdminLTE Khusus Mobile */
    @media (max-width: 991.98px) {
        .main-header, .main-sidebar, .content-header { display: none !important; }
        .content-wrapper {
            padding-top: 80px !important; /* Ruang agar konten tidak tertutup header */
        }
    }

    /* KONTINER HEADER (Flexbox Kaku) */
    .m-header-custom {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 70px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        z-index: 9999;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border-bottom: 1px solid rgba(0,0,0,0.05);
        
        /* KUNCI SEJAJAR: */
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* Jauhkan Kiri dan Kanan */
        align-items: center; /* Sejajarkan di tengah secara vertikal */
        padding: 0 15px;
    }

    /* KUBU KIRI (Logo & Teks) */
    .m-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1; /* Ambil sisa ruang */
        min-width: 0; /* Cegah teks mendorong ke luar layar */
    }

    .m-header-logo {
        width: 40px;
        height: 40px;
        object-fit: contain;
        flex-shrink: 0; /* Logo tidak boleh mengecil */
    }

    .m-header-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

    .m-header-title {
        font-size: 1.1rem;
        font-weight: 800;
        color: #0f172a;
        white-space: nowrap; /* Jangan pernah turun baris */
        overflow: hidden;
        text-overflow: ellipsis; /* Muncul titik-titik jika kepanjangan */
        line-height: 1.2;
    }

    .m-header-subtitle {
        font-size: 0.65rem;
        font-weight: 800;
        color: #3b82f6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* KUBU KANAN (Tombol Logout) */
    .m-header-right {
        flex-shrink: 0; /* Ruang tombol Kanan tidak boleh diganggu gugat */
        margin-left: 10px;
    }

    .m-header-btn {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        font-size: 1.2rem;
        transition: 0.2s;
    }
    
    .m-header-btn:active { transform: scale(0.9); }

    /* Warna Khusus Tombol Logout */
    .btn-logout {
        background: #fff1f2;
        color: #e11d48 !important;
        border: 1px solid rgba(225, 29, 72, 0.1);
    }

    /* Warna Khusus Tombol Kembali */
    .btn-back {
        background: #f1f5f9;
        color: #1e293b !important;
        border: 1px solid #e2e8f0;
    }

    /* Sembunyikan header ini di Desktop */
    @media (min-width: 992px) {
        .m-header-custom { display: none !important; }
    }
</style>

<div class="m-header-custom animate__animated animate__fadeInDown">
    
    <div class="m-header-left">
        @if(Request::is('*dashboard*'))
            <img src="{{ asset('assets/img/app.png') }}" class="m-header-logo" alt="Logo" onerror="this.src='https://ui-avatars.com/api/?name=SC&background=4F46E5&color=fff&rounded=true'">
        @else
            <a href="javascript:history.back()" class="m-header-btn btn-back shadow-sm">
                <i class="fas fa-arrow-left"></i>
            </a>
        @endif

        <div class="m-header-text">
            <span class="m-header-title">Smart Cendekia</span>
            <span class="m-header-subtitle">Enterprise</span>
        </div>
    </div>

    <div class="m-header-right">
        <a href="#" class="m-header-btn btn-logout shadow-sm" onclick="confirmLogout(event)">
            <i class="fas fa-sign-out-alt"></i>
        </a>
    </div>

    {{-- Form Logout (Tersembunyi) --}}
    <form id="logout-form-header" action="{{ route('logout') }}" method="POST" style="display: none;">
        @csrf
    </form>
</div>

@once
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmLogout(event) {
        event.preventDefault();
        Swal.fire({
            title: 'Keluar Aplikasi?',
            text: "Anda akan keluar dari sesi ini.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e11d48',
            cancelButtonColor: '#94a3b8',
            confirmButtonText: 'Ya, Keluar',
            cancelButtonText: 'Batal',
            reverseButtons: true,
            customClass: { popup: 'rounded-2xl', confirmButton: 'rounded-pill px-4', cancelButton: 'rounded-pill px-4' }
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('logout-form-header').submit();
            }
        });
    }
</script>
@endonce