<style>
    :root {
        --tennis-green: #2ecc71;
        --tennis-blue: #3498db;
        --tennis-orange: #e67e22;
        --tennis-dark: #2c3e50;
        --tennis-light: #ecf0f1;
    }
    
    .admin-header {
        background: linear-gradient(135deg, var(--tennis-blue) 0%, var(--tennis-green) 100%);
        color: white;
        padding: 60px 0;
        margin-bottom: 40px;
    }
    
    .admin-title {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 20px;
    }
    
    .admin-subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
    }
    
    .section-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        padding: 30px;
        margin-bottom: 30px;
        border-left: 4px solid var(--tennis-green);
    }
    
    .section-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--tennis-dark);
    }
    
    .section-title i {
        color: var(--tennis-green);
        margin-right: 10px;
    }
    
    .club-card {
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        transition: all 0.3s;
        background: #fafafa;
    }
    
    .club-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        border-color: var(--tennis-green);
    }
    
    .club-name {
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--tennis-dark);
        margin-bottom: 10px;
    }
    
    .club-info {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .info-item {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        color: #666;
    }
    
    .info-item i {
        margin-right: 5px;
        color: var(--tennis-blue);
    }
    
    .court-list {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #e0e0e0;
    }
    
    .court-item {
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .court-name {
        font-weight: 600;
        color: var(--tennis-dark);
    }
    
    .court-details {
        display: flex;
        gap: 15px;
        font-size: 0.85rem;
        color: #666;
    }
    
    .event-card {
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        transition: all 0.3s;
        background: #fafafa;
    }
    
    .event-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        border-color: var(--tennis-orange);
    }
    
    .event-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--tennis-dark);
        margin-bottom: 10px;
    }
    
    .event-info {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .event-type {
        background: var(--tennis-orange);
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .event-status {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .status-upcoming {
        background: #e3f2fd;
        color: #1976d2;
    }
    
    .status-ongoing {
        background: #e8f5e8;
        color: #388e3c;
    }
    
    .status-completed {
        background: #f5f5f5;
        color: #666;
    }
    
    .btn-admin {
        background: var(--tennis-green);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s;
        text-decoration: none;
        display: inline-block;
    }
    
    .btn-admin:hover {
        background: #27ae60;
        color: white;
        transform: translateY(-2px);
        text-decoration: none;
    }
    
    .btn-secondary {
        background: #95a5a6;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s;
        text-decoration: none;
        display: inline-block;
    }
    
    .btn-secondary:hover {
        background: #7f8c8d;
        color: white;
        text-decoration: none;
    }
    
    .pagination {
        display: flex;
        justify-content: center;
        gap: 5px;
        margin-top: 30px;
    }
    
    .page-btn {
        padding: 8px 12px;
        border: 1px solid #ddd;
        background: white;
        color: var(--tennis-dark);
        text-decoration: none;
        border-radius: 5px;
        transition: all 0.3s;
    }
    
    .page-btn:hover {
        background: var(--tennis-green);
        color: white;
        text-decoration: none;
    }
    
    .page-btn.active {
        background: var(--tennis-green);
        color: white;
    }
    
    .page-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .loading {
        text-align: center;
        padding: 40px;
        color: #666;
    }
    
    .loading i {
        font-size: 2rem;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #999;
    }
    
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 20px;
        color: #ddd;
    }
    
    .empty-state h4 {
        margin-bottom: 10px;
        color: #666;
    }
    
    .stat-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }
    
    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: var(--tennis-green);
        margin-bottom: 5px;
    }
    
    .stat-label {
        color: #666;
        font-size: 0.9rem;
    }

    /* ── Card image wrap ── */
    .card-img-wrap {
        width: 100%;
        height: 170px;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 14px;
        background: #eef0f2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .card-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .card-img-placeholder {
        font-size: 3rem;
        color: #ced4da;
    }

    /* ── Cards grid ── */
    /* ── Image uploader ── */
    .img-uploader {
        position: relative;
    }
    .img-uploader__zone {
        width: 100%;
        aspect-ratio: 16/7;
        border: 2px dashed #dee2e6;
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        transition: border-color 0.2s, background-color 0.2s;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .img-uploader__zone:hover,
    .img-uploader__zone.dragover {
        border-color: var(--tennis-green);
        background: #f0fdf4;
    }
    .img-uploader__zone.uploading {
        pointer-events: none;
    }
    .img-uploader__placeholder {
        text-align: center;
        pointer-events: none;
        user-select: none;
    }
    .img-uploader__placeholder i {
        font-size: 2.8rem;
        display: block;
        margin-bottom: 6px;
        color: #adb5bd;
    }
    .img-uploader__preview {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .img-uploader__loading {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.45);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .img-uploader__remove {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0,0,0,0.55);
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
        z-index: 2;
    }
    .img-uploader__remove:hover {
        background: rgba(220, 53, 69, 0.85);
    }

    /* ── Beautiful modal header ── */
    .modal-header-dark {
        background: linear-gradient(135deg, #1a2530 0%, #2c3e50 100%);
        padding: 18px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .modal-header-dark .modal-title {
        color: #fff;
        font-weight: 700;
        font-size: 1.1rem;
    }
    .modal-header-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(255,255,255,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: #fff;
        flex-shrink: 0;
    }
    .shadow-xl {
        box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
    }

    /* ── Modal section labels ── */
    .modal-section-label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #9ba4af;
        margin-bottom: 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid #f0f2f4;
    }

    /* ── Form control focus ── */
    .modal .form-control:focus,
    .modal .form-select:focus {
        border-color: var(--tennis-green);
        box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
    }

    /* ── Applications table ── */
    .apps-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.875rem;
    }
    .apps-table th {
        background: #f8f9fa;
        color: #495057;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 10px 14px;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }
    .apps-table td {
        padding: 12px 14px;
        border-bottom: 1px solid #f0f2f4;
        vertical-align: middle;
    }
    .apps-table tbody tr:hover {
        background: #fafbfc;
    }

    /* ── Status badges ── */
    .apps-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
    }
    .apps-badge-PENDING  { background: #fff3cd; color: #856404; }
    .apps-badge-APPROVED { background: #d1f2e8; color: #1a7a4a; }
    .apps-badge-REJECTED { background: #fde8e8; color: #a02020; }

    /* ── Filter panel ── */
    .apps-filter-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 16px;
        padding: 14px 16px;
        background: #f8f9fa;
        border-radius: 10px;
    }
    .apps-filter-bar .form-select {
        flex: 1;
        min-width: 180px;
        max-width: 320px;
        font-size: 0.875rem;
    }

    /* ── Status tabs ── */
    .apps-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .apps-tab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 16px;
        border: 1.5px solid #e0e3e8;
        border-radius: 20px;
        background: #fff;
        font-size: 0.85rem;
        font-weight: 600;
        color: #6b7280;
        cursor: pointer;
        transition: all 0.18s;
        line-height: 1;
    }
    .apps-tab:hover {
        border-color: var(--tennis-dark);
        color: var(--tennis-dark);
    }
    .apps-tab.active {
        background: var(--tennis-dark);
        border-color: var(--tennis-dark);
        color: #fff;
    }
    .apps-tab-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 10px;
        font-size: 0.72rem;
        font-weight: 700;
        background: rgba(255,255,255,0.25);
        color: inherit;
    }
    .apps-tab:not(.active) .apps-tab-count {
        background: #e9ecef;
        color: #495057;
    }

    /* ── Action buttons in table ── */
    .apps-action-approve {
        background: #d1f2e8;
        color: #1a7a4a;
        border: none;
        border-radius: 6px;
        font-size: 0.78rem;
        font-weight: 600;
        padding: 4px 10px;
        transition: background 0.15s;
        white-space: nowrap;
    }
    .apps-action-approve:hover { background: #a8e6cc; }
    .apps-action-approve:disabled { opacity: 0.5; }

    .apps-action-reject {
        background: #fde8e8;
        color: #a02020;
        border: none;
        border-radius: 6px;
        font-size: 0.78rem;
        font-weight: 600;
        padding: 4px 10px;
        transition: background 0.15s;
        white-space: nowrap;
    }
    .apps-action-reject:hover { background: #fac4c4; }
    .apps-action-reject:disabled { opacity: 0.5; }

    /* ── Row highlight after approve ── */
    .apps-row-success {
        background: #f0fdf4 !important;
        transition: background 0.4s;
    }

    /* ── Rejection note ── */
    .apps-rejection-note {
        margin-top: 4px;
        font-size: 0.78rem;
        color: #a02020;
        background: #fff3f3;
        border-left: 3px solid #e74c3c;
        border-radius: 3px;
        padding: 3px 8px;
    }

    /* ── Gallery admin images grid ── */
    .gallery-images-uploader {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .gallery-img-uploader {
        width: 140px;
        height: 100px;
    }
    .gallery-img-uploader .img-uploader__zone {
        width: 100%;
        height: 100%;
        aspect-ratio: unset;
    }
    .gallery-img-add {
        width: 140px;
        height: 100px;
        border: 2px dashed #dee2e6;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #adb5bd;
        font-size: 2rem;
        transition: all 0.2s;
    }
    .gallery-img-add:hover {
        border-color: var(--tennis-green);
        color: var(--tennis-green);
        background: #f0fdf4;
    }

    /* ── Gallery admin cards ── */
    .admin-gallery-card {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 16px;
        transition: all 0.3s;
    }
    .admin-gallery-card:hover {
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        border-color: var(--tennis-green);
    }
    .admin-gallery-card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--tennis-dark);
        margin-bottom: 8px;
    }
    .admin-gallery-card-date {
        font-size: 0.8rem;
        color: #95a5a6;
        margin-bottom: 10px;
    }
    .admin-gallery-card-images {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        overflow-x: auto;
    }
    .admin-gallery-card-images img {
        width: 80px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0;
    }

    @media (max-width: 767px) {
        .admin-header {
            padding: 35px 0;
        }
        .admin-title {
            font-size: 1.6rem;
            margin-bottom: 10px;
        }
        .admin-subtitle {
            font-size: 0.95rem;
        }
        .section-card {
            padding: 18px 14px;
        }
        .section-title {
            font-size: 1.3rem;
        }
        .apps-filter-bar {
            flex-direction: column;
        }
        .apps-filter-bar .form-select {
            max-width: 100%;
            min-width: 0;
        }
    }
</style>

<!-- ── Admin header ── -->
<div class="admin-header">
    <div class="container">
        <h1 class="admin-title"><i class="bi bi-gear-fill me-2"></i>Панель управления</h1>
        <p class="admin-subtitle">Управляйте вашими теннисными клубами и мероприятиями</p>
    </div>
</div>

<div class="container">

    <!-- ── Stats ── -->
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-number" id="stat-clubs">—</div>
                <div class="stat-label">Мои клубы</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-number" id="stat-courts">—</div>
                <div class="stat-label">Всего кортов</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-number" id="stat-events">—</div>
                <div class="stat-label">Мероприятия</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-number" id="stat-active">—</div>
                <div class="stat-label">На этой странице</div>
            </div>
        </div>
    </div>

    <!-- ── Clubs section ── -->
    <div class="section-card">
        <div class="section-title d-flex flex-column flex-sm-row justify-content-start justify-content-sm-between align-items-start align-items-sm-center gap-2 mb-3">
            <span><i class="bi bi-building me-2"></i>Мои теннисные клубы</span>
            <button class="btn-admin" data-bs-toggle="modal" data-bs-target="#create-club-modal">
                <i class="bi bi-plus-circle me-1"></i>Добавить клуб
            </button>
        </div>
        <div id="admin-clubs-container"></div>
    </div>

    <!-- ── Events section ── -->
    <div class="section-card">
        <div class="section-title d-flex flex-column flex-sm-row justify-content-start justify-content-sm-between align-items-start align-items-sm-center gap-2 mb-3">
            <span><i class="bi bi-calendar-event me-2"></i>Мероприятия</span>
            <button class="btn-admin" data-bs-toggle="modal" data-bs-target="#create-event-modal">
                <i class="bi bi-plus-circle me-1"></i>Создать мероприятие
            </button>
        </div>
        <div id="admin-events-container"></div>
    </div>

    <!-- ── Applications section ── -->
    <div class="section-card" id="applications-section">
        <div class="section-title mb-3">
            <span><i class="bi bi-people me-2"></i>Заявки на участие</span>
        </div>
        <div id="admin-applications-container"></div>
    </div>

    <!-- ── Site Images section ── -->
    <div class="section-card" id="site-images-section">
        <div class="section-title mb-3">
            <span><i class="bi bi-image me-2"></i>Изображения главной страницы</span>
        </div>
        <p class="text-muted mb-4" style="font-size:0.9rem;">Настройте изображения для hero-секции и фона главной страницы</p>
        <div class="row g-4">
            <div class="col-md-6">
                <h6 class="fw-bold mb-3"><i class="bi bi-card-image me-2"></i>Hero изображение</h6>
                <p class="text-muted mb-2" style="font-size:0.8rem;">Основное изображение справа в hero-секции</p>
                <div id="hero-image-uploader" class="img-uploader">
                    <div class="img-uploader__zone" id="hero-image-zone">
                        <div class="img-uploader__placeholder">
                            <i class="bi bi-cloud-upload"></i>
                            <span>Нажмите или перетащите изображение</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h6 class="fw-bold mb-3"><i class="bi bi-aspect-ratio me-2"></i>Фоновое изображение</h6>
                <p class="text-muted mb-2" style="font-size:0.8rem;">Фон hero-секции и страницы входа</p>
                <div id="bg-image-uploader" class="img-uploader">
                    <div class="img-uploader__zone" id="bg-image-zone">
                        <div class="img-uploader__placeholder">
                            <i class="bi bi-cloud-upload"></i>
                            <span>Нажмите или перетащите изображение</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-4">
            <button id="save-site-images-btn" class="btn-admin" disabled>
                <i class="bi bi-check-circle me-1"></i>Сохранить изображения
            </button>
        </div>
    </div>

    <!-- ── Gallery section ── -->
    <div class="section-card" id="admin-gallery-section">
        <div class="section-title d-flex flex-column flex-sm-row justify-content-start justify-content-sm-between align-items-start align-items-sm-center gap-2 mb-3">
            <span><i class="bi bi-images me-2"></i>Галерея</span>
            <button class="btn-admin" id="add-gallery-post-btn">
                <i class="bi bi-plus-circle me-1"></i>Добавить публикацию
            </button>
        </div>
        <div id="admin-gallery-container"></div>
    </div>

</div>

<!-- Gallery Post Modal -->
<div class="modal fade" id="gallery-post-modal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 rounded-4 overflow-hidden shadow-xl">
            <div class="modal-header-dark">
                <div class="d-flex align-items-center gap-2">
                    <div class="modal-header-icon"><i class="bi bi-image"></i></div>
                    <h5 class="modal-title mb-0" id="gallery-modal-title">Новая публикация</h5>
                </div>
                <button type="button" class="btn-close btn-close-white opacity-75" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4" style="max-height:72vh;overflow-y:auto">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Заголовок <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="gallery-post-title" placeholder=" ">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Текст</label>
                    <textarea class="form-control" id="gallery-post-content" rows="4" placeholder=" "></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Изображения</label>
                    <div id="gallery-images-zone" class="gallery-images-uploader"></div>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="gallery-post-published" checked>
                    <label class="form-check-label" for="gallery-post-published">Опубликовать</label>
                </div>
            </div>
            <div class="modal-footer border-0 px-4 pb-4 pt-2 gap-2">
                <button type="button" class="btn btn-light fw-semibold px-4 rounded-3" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn-admin rounded-3 px-4" id="save-gallery-post-btn">
                    <i class="bi bi-check-lg me-1"></i>Сохранить
                </button>
            </div>
        </div>
    </div>
</div>

<script type="module" src="/js/site/pages/admin/admin.js"></script>
