<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? 'Hotel Pineta Admin' }}</title>
    <style>
        :root {
            --bg: #f5f7f3;
            --panel: #ffffff;
            --line: #d7ddd1;
            --text: #1f2a1d;
            --muted: #657160;
            --accent: #29563a;
            --accent-soft: #edf5ef;
            --danger: #b23434;
            --danger-soft: #fff1f1;
            --warning: #7a4f07;
            --warning-soft: #fff5df;
            --success: #1d5d2b;
            --success-soft: #ebf7ee;
            --shadow: 0 12px 30px rgba(41, 86, 58, .08);
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            background: var(--bg);
            color: var(--text);
            font-family: Arial, Helvetica, sans-serif;
        }
        a { color: var(--accent); text-decoration: none; }
        .shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
        .sidebar { background: #183324; color: #f1f7f2; padding: 28px 22px; }
        .brand { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
        .brand img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; background: #fff; padding: 4px; }
        .brand h1 { margin: 0; font-size: 18px; line-height: 1.2; }
        .brand p { margin: 4px 0 0; color: rgba(241, 247, 242, .75); font-size: 12px; }
        .nav { display: grid; gap: 10px; }
        .nav a { display: block; padding: 12px 14px; border-radius: 12px; color: #f1f7f2; background: rgba(255,255,255,.04); }
        .nav a.active, .nav a:hover { background: rgba(255,255,255,.12); }
        .main { padding: 28px; }
        .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
        .topbar .title h2 { margin: 0; font-size: 28px; }
        .topbar .title p { margin: 6px 0 0; color: var(--muted); }
        .userbox { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); }
        .userbox form { margin: 0; }
        .logout-btn { border: 0; border-radius: 10px; background: #f1f4ef; padding: 10px 12px; cursor: pointer; }
        .grid { display: grid; gap: 18px; }
        .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        .card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
        .card h3 { margin: 0 0 12px; font-size: 18px; }
        .stat-label { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
        .stat-value { font-size: 34px; font-weight: 700; }
        .table-wrap { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; font-size: 14px; }
        th, td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
        th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
        .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
        .badge.expired { color: #7a3415; background: #ffedd5; }
        .badge.cancelled { color: #7a1a1a; background: #faeaea; }
        .badge.confirmed { color: #1d5d2b; background: #ebf7ee; }
        .badge.pending_payment, .badge.awaiting_prepayment { color: #7a4f07; background: #fff5df; }
        .badge.payment_uploaded { color: #2b5a99; background: #eaf1ff; }
        .badge.payment_rejected { color: #8b2d2d; background: #ffe8e8; }
        .badge.draft { color: #29563a; background: #edf5ef; }
        .empty { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 16px; background: #fbfcfa; }
        .filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
        .field, .field-inline { display: grid; gap: 6px; }
        .field-inline { grid-template-columns: 1fr auto; align-items: end; }
        .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
        .field.full { grid-column: 1 / -1; }
        label { font-size: 13px; color: var(--muted); }
        input, select, textarea { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 14px; font-family: inherit; }
        textarea { min-height: 120px; resize: vertical; }
        button.primary, a.primary, button.secondary, a.secondary, button.danger { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 0; border-radius: 12px; padding: 12px 16px; cursor: pointer; font-size: 14px; }
        button.primary, a.primary { background: var(--accent); color: #fff; }
        button.secondary, a.secondary { background: #eef3ed; color: var(--text); }
        button.danger { background: var(--danger); color: #fff; }
        .meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
        .meta-row { background: #fbfcfa; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
        .meta-row .k { color: var(--muted); font-size: 12px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
        .meta-row .v { font-size: 15px; line-height: 1.45; }
        .section-title { margin: 0 0 12px; font-size: 16px; }
        .muted { color: var(--muted); }
        .list { display: grid; gap: 10px; }
        .list-item { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: #fbfcfa; }
        .pagination { margin-top: 18px; }
        .admin-pagination { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
        .admin-pagination-summary { color: var(--muted); font-size: 14px; }
        .admin-pagination-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .admin-pagination-page { color: var(--muted); font-size: 13px; }
        .admin-pagination .disabled { opacity: .45; cursor: default; pointer-events: none; }
        .admin-pagination svg { width: 16px !important; height: 16px !important; }
        .actions-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
        .alert { border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; border: 1px solid transparent; }
        .alert-success { background: var(--success-soft); color: var(--success); border-color: #cfe9d5; }
        .alert-error { background: var(--danger-soft); color: var(--danger); border-color: #f4cccc; }
        .help { color: var(--muted); font-size: 12px; line-height: 1.45; }
        .loading-indicator{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#eef6ff;border:1px solid #d7e6ff;color:#295487;font-weight:700}.loading-indicator[hidden]{display:none !important}.loading-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(41,84,135,.2);border-top-color:#295487;animation:pineta-spin .8s linear infinite}.loading-text{line-height:1.3}@keyframes pineta-spin{to{transform:rotate(360deg)}}

        .confirmation-card-preview{border:1px solid #d9e7f5;background:#fbfdff;border-radius:18px;padding:18px;margin-top:14px}
        .confirmation-card-preview .confirm-top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left}
        .confirmation-card-preview .confirm-top-row .created-emblem{margin:0;width:46px;height:46px;flex:0 0 auto;object-fit:cover;border-radius:999px;box-shadow:0 6px 16px rgba(15,23,42,.16)}
        .confirmation-card-preview .confirm-heading-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:1;flex-wrap:wrap}
        .confirmation-card-preview .confirm-hotel{font-weight:900}
        .confirmation-card-preview .confirm-code{font-size:13px;color:var(--muted);font-weight:800;margin-top:4px}
        .confirmation-card-preview .confirm-title{font-size:20px;font-weight:900;color:#166534;margin-top:0}
        .confirmation-lines{display:grid;gap:8px;margin-top:14px}
        .confirmation-lines div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed #dbe5ef;padding-bottom:6px}
        .confirmation-lines strong{color:var(--muted);white-space:nowrap}
        .confirmation-lines span{text-align:right}
        .confirmation-format-label{font-size:13px;color:var(--muted);font-weight:700}
        .confirmation-format-select{width:auto;min-width:90px;padding:10px 12px}
        .confirmation-actions{align-items:center}
        @media (max-width: 640px){
            .confirmation-card-preview{padding:14px;border-radius:16px}
            .confirmation-card-preview .confirm-top-row{align-items:flex-start;gap:12px}
            .confirmation-card-preview .confirm-heading-row{display:block}
            .confirmation-card-preview .confirm-title{font-size:18px;margin-top:8px}
            .confirmation-lines{gap:10px}
            .confirmation-lines div{display:block;padding-bottom:8px}
            .confirmation-lines strong{display:inline;color:var(--muted);white-space:normal}
            .confirmation-lines span{display:inline;text-align:left;word-break:break-word}
            .confirmation-actions{align-items:stretch}
            .confirmation-actions button,.confirmation-actions select{width:100%}
        }

        @media (max-width: 1180px) {
            .shell { grid-template-columns: 1fr; }
            .sidebar { padding-bottom: 0; }
            .stats, .filters, .meta-grid, .form-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 760px) {
            .main { padding: 18px; }
            .topbar { flex-direction: column; align-items: flex-start; }
            .stats, .filters, .meta-grid, .form-grid { grid-template-columns: 1fr; }
            .field.full { grid-column: auto; }
        }
    </style>
</head>
<body>
<div class="shell">
    <aside class="sidebar">
        <div class="brand">
            <img src="{{ asset('images/hotel/emblem.jpg') }}" alt="Hotel Pineta">
            <div>
                <h1>Hotel Pineta</h1>
                <p>Laravel Admin</p>
            </div>
        </div>

        <nav class="nav">
            <a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard*') ? 'active' : '' }}">Панель управления</a>
            <a href="{{ route('admin.bookings.index') }}" class="{{ request()->routeIs('admin.bookings.index') || request()->routeIs('admin.bookings.show') ? 'active' : '' }}">Бронирования</a>
            <a href="{{ route('admin.guests.index') }}" class="{{ request()->routeIs('admin.guests.*') ? 'active' : '' }}">Гости</a>
            <a href="{{ route('admin.bookings.create') }}" class="{{ request()->routeIs('admin.bookings.create') ? 'active' : '' }}">Новая бронь</a>
            <a href="{{ route('admin.booking_blocks.index') }}" class="{{ request()->routeIs('admin.booking_blocks.*') ? 'active' : '' }}">Закрыть для Booking</a>
            <a href="{{ route('admin.police_registrations.index') }}" class="{{ request()->routeIs('admin.police_registrations.*') ? 'active' : '' }}">Регистрация гостей статистика</a>
            <a href="{{ route('admin.rate_imports.index') }}" class="{{ request()->routeIs('admin.rate_imports.*') ? 'active' : '' }}">Импорт тарифов</a>
            <a href="{{ route('home') }}">Главная</a>
        </nav>
    </aside>

    <main class="main">
        <div class="topbar">
            <div class="title">
                <h2>{{ $heading ?? 'Hotel Pineta Admin' }}</h2>
                <p>{{ $subheading ?? 'Новый контур управления бронированиями' }}</p>
            </div>

            <div class="userbox">
                <div>
                    <div><strong>{{ auth()->user()?->name }}</strong></div>
                    <div class="muted">{{ auth()->user()?->phone }}</div>
                </div>

                <form method="post" action="{{ route('admin.logout') }}">
                    @csrf
                    <button type="submit" class="logout-btn">Выйти</button>
                </form>
            </div>
        </div>

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

        @if ($errors->any())
            <div class="alert alert-error">
                <strong>Проверьте форму.</strong>
                <div style="margin-top:8px;">{{ $errors->first() }}</div>
            </div>
        @endif

        @yield('content')
    </main>
    @stack('scripts')
    <script src="{{ asset('assets/js/phone-fields.js') }}"></script>
</div>
</body>
</html>
