{{-- resources/views/agency/page/partials/edit-section-modal.blade.php --}}

<div id="editSectionModal" class="modal-overlay" style="display: none;">
    <div class="modal-container" style="max-width: 900px;">
        <div class="modal-header">
            <h3 class="modal-title">Bölümü Düzenle</h3>
            <button type="button" class="modal-close" onclick="closeEditSectionModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="modal-body" style="max-height: calc(90vh - 200px); overflow-y: auto;">
            <form id="editSectionForm">
                <input type="hidden" id="editSectionId">

                <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="form-group">
                        <label class="form-label">Bölüm Tipi</label>
                        <select id="editSectionType" class="form-control" disabled
                                style="background: #F3F4F6; cursor: not-allowed;">
                            <option value="hero">Hero / Banner</option>
                            <option value="about">Hakkımızda</option>
                            <option value="tours_grid">Tur Listesi (Grid)</option>
                            <option value="tours_slider">Tur Listesi (Slider)</option>
                            <option value="categories">Kategoriler</option>
                            <option value="features">Özellikler</option>
                            <option value="testimonials">Yorumlar</option>
                            <option value="team">Ekibimiz</option>
                            <option value="cta">Harekete Geçirici</option>
                            <option value="gallery">Galeri</option>
                            <option value="contact">İletişim</option>
                            <option value="faq">SSS</option>
                            <option value="custom">Özel HTML</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Durum</label>
                        <select id="editIsActive" class="form-control">
                            <option value="1">Aktif</option>
                            <option value="0">Gizli</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Başlık</label>
                    <input type="text" id="editSectionTitle" class="form-control">
                </div>

                <div class="form-group">
                    <label class="form-label">Alt Başlık</label>
                    <input type="text" id="editSectionSubtitle" class="form-control">
                </div>

                <div class="form-group">
                    <label class="form-label">İçerik</label>
                    <textarea id="editSectionContent" class="form-control" rows="4"></textarea>
                </div>

                <hr style="margin: 2rem 0; border: none; border-top: 2px solid #E5E7EB;">

                <h4 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem; color: #111827;">
                    <i class="fas fa-cog"></i> Bölüm Ayarları
                </h4>

                <!-- Dynamic Config Fields -->
                <div id="sectionConfigFields"></div>

                <hr style="margin: 2rem 0; border: none; border-top: 2px solid #E5E7EB;">

                <h4 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem; color: #111827;">
                    <i class="fas fa-mobile-alt"></i> Görünüm Ayarları
                </h4>

                <div class="form-row" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
                    <div class="form-group">
                        <label class="form-label" style="display: flex; align-items: center; cursor: pointer;">
                            <input type="checkbox" id="editShowOnMobile" style="margin-right: 0.5rem;">
                            <i class="fas fa-mobile-alt" style="margin-right: 0.5rem;"></i> Mobil
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="display: flex; align-items: center; cursor: pointer;">
                            <input type="checkbox" id="editShowOnTablet" style="margin-right: 0.5rem;">
                            <i class="fas fa-tablet-alt" style="margin-right: 0.5rem;"></i> Tablet
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="display: flex; align-items: center; cursor: pointer;">
                            <input type="checkbox" id="editShowOnDesktop" style="margin-right: 0.5rem;">
                            <i class="fas fa-desktop" style="margin-right: 0.5rem;"></i> Masaüstü
                        </label>
                    </div>
                </div>
            </form>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-light" onclick="closeEditSectionModal()">
                İptal
            </button>
            <button type="button" class="btn btn-primary" onclick="updateSection()">
                <i class="fas fa-save"></i> Kaydet
            </button>
        </div>
    </div>
</div>

<style>
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        z-index: 99999 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .modal-container {
        background: white;
        border-radius: 16px;
        width: 100%;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        position: relative;
        z-index: 999999;
        animation: modalSlideIn 0.3s ease-out;
    }

    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-30px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .modal-header {
        padding: 1.5rem;
        border-bottom: 2px solid #F3F4F6;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }

    .modal-close {
        background: #F3F4F6;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        color: #6B7280;
        font-size: 1.25rem;
    }

    .modal-close:hover {
        background: #E5E7EB;
        color: #374151;
    }

    .modal-body {
        padding: 1.5rem;
        flex: 1;
        overflow-y: auto;
    }

    .modal-footer {
        padding: 1.5rem;
        border-top: 2px solid #F3F4F6;
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        background: #F9FAFB;
    }

    .form-row {
        margin-bottom: 1rem;
    }

    .image-upload-preview {
        margin-top: 1rem;
        border-radius: 8px;
        overflow: hidden;
        max-width: 300px;
    }

    .image-upload-preview img {
        width: 100%;
        height: auto;
        display: block;
    }
</style>