<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'mySijil@MBIP')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        body { background: #f0f4f8; min-height: 100vh; }
        .public-container { max-width: 480px; margin: 0 auto; }
    </style>
    @stack('styles')
</head>
<body>

    {{-- Header Brand --}}
    <div class="public-hero">
        <div class="public-container px-3 pt-2 pb-3">
            <div class="d-flex align-items-center mb-2">
                <img src="{{ asset('images/MBIP-2024-300x300.png') }}" alt="MBIP"
                     style="height:28px;width:28px;object-fit:contain;vertical-align:middle;" class="me-2">
                <span class="fw-bold" style="font-size:.9rem; letter-spacing:.5px;">mySijil@MBIP</span>
            </div>
            @yield('hero')
        </div>
    </div>

    {{-- Main Content --}}
    <div class="public-container px-3 py-4">

        {{-- Flash Messages --}}
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        @endif
        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        @endif
        @if(session('warning'))
        <div class="alert alert-warning alert-dismissible fade show mb-4" role="alert">
            <i class="bi bi-exclamation-circle-fill me-2"></i>{{ session('warning') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        @endif

        @yield('content')

    </div>

    {{-- Footer --}}
    <div class="text-center py-4">
        <small class="text-muted">Majlis Bandaraya Iskandar Puteri &copy; {{ date('Y') }}</small>
    </div>

    @stack('scripts')
</body>
</html>
