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

<div class="section-card" data-section-id="{{ $section->id }}">
    <div class="section-header">
        <div class="section-header-left">
            <i class="fas fa-grip-vertical drag-handle"></i>
            <div class="section-info">
                <div class="section-title">{{ $section->title ?: 'Başlıksız Bölüm' }}</div>
                <span class="section-type">{{ $section->section_type }}</span>
            </div>
        </div>
        <div class="section-toggle-wrapper">
            @if(!$section->is_active)
                <span class="section-badge hidden">Gizli</span>
            @endif
            <label class="toggle-switch" title="Göster/Gizle">
                <input type="checkbox"
                       {{ $section->is_active ? 'checked' : '' }}
                       onchange="toggleSection({{ $section->id }})">
                <span class="toggle-slider"></span>
            </label>
        </div>
    </div>

    @if($section->subtitle || $section->content)
        <div class="section-content">
            @if($section->subtitle)
                <p class="section-subtitle">{{ Str::limit($section->subtitle, 80) }}</p>
            @endif

            @if($section->content)
                <p class="section-description">{{ Str::limit(strip_tags($section->content), 120) }}</p>
            @endif
        </div>
    @endif

    <div class="section-meta">
        <span>
            <i class="fas fa-layer-group"></i>
            Sıra: {{ $section->sort_order }}
        </span>
        <span>
            <i class="fas fa-eye"></i>
            @if($section->show_on_mobile)
                Mobil
            @endif
            @if($section->show_on_tablet)
                Tablet
            @endif
            @if($section->show_on_desktop)
                Masaüstü
            @endif
        </span>
    </div>

    <div class="section-actions">
        <button type="button"
                class="action-btn"
                onclick="editSection({{ $section->id }})"
                title="Düzenle">
            <i class="fas fa-pen"></i>
            Düzenle
        </button>
        <button type="button"
                class="action-btn"
                onclick="duplicateSection({{ $section->id }})"
                title="Kopyala">
            <i class="fas fa-copy"></i>
            Kopyala
        </button>
        <button type="button"
                class="action-btn"
                onclick="moveUp({{ $section->id }})"
                title="Yukarı">
            <i class="fas fa-arrow-up"></i>
        </button>
        <button type="button"
                class="action-btn"
                onclick="moveDown({{ $section->id }})"
                title="Aşağı">
            <i class="fas fa-arrow-down"></i>
        </button>
        <button type="button"
                class="action-btn text-danger"
                onclick="deleteSection({{ $section->id }})"
                title="Sil">
            <i class="fas fa-trash"></i>
        </button>
    </div>
</div>

<style>
    .section-content {
        padding: 10px 0;
    }

    .section-subtitle {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 8px;
    }

    .section-description {
        font-size: 12px;
        color: #9ca3af;
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .section-meta {
        margin-top: 8px;
    }

    .section-meta small {
        font-size: 11px;
    }

    .section-actions {
        display: flex;
        gap: 6px;
        padding-top: 10px;
        border-top: 1px solid #e5e7eb;
    }

    .action-btn {
        padding: 6px 10px;
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.2s;
        color: #6b7280;
    }

    .action-btn:hover {
        background: #f3f4f6;
        color: #374151;
    }

    .action-btn.text-danger {
        color: #dc2626;
    }

    .action-btn.text-danger:hover {
        background: #fee2e2;
        border-color: #fecaca;
    }

    /* Toggle Switch */
    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
        margin: 0;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .3s;
        border-radius: 20px;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

    .toggle-switch input:checked + .toggle-slider {
        background-color: #10B981;
    }

    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }

    .badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 500;
    }

    .bg-secondary {
        background-color: #6B7280;
        color: white;
    }

    .d-flex {
        display: flex;
    }

    .align-items-center {
        align-items: center;
    }

    .gap-2 {
        gap: 8px;
    }
</style>

<script>
    async function toggleSection(sectionId) {
        try {
            const response = await axios.post(`/agency/page/sections/${sectionId}/toggle`, {}, {
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            showAlert(response.data.message, 'success');
        } catch (error) {
            console.error(error);
            showAlert('İşlem sırasında hata oluştu', 'error');
            // Revert checkbox
            event.target.checked = !event.target.checked;
        }
    }

    async function duplicateSection(sectionId) {
        if (!confirm('Bu bölümü kopyalamak istediğinize emin misiniz?')) return;

        try {
            const response = await axios.post(`/agency/page/sections/${sectionId}/duplicate`, {}, {
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            showAlert('Bölüm kopyalandı', 'success');
            setTimeout(() => window.location.reload(), 1000);
        } catch (error) {
            console.error(error);
            showAlert('Kopyalama sırasında hata oluştu', 'error');
        }
    }

    async function moveUp(sectionId) {
        try {
            await axios.post(`/agency/page/sections/${sectionId}/move-up`, {}, {
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            showAlert('Bölüm yukarı taşındı', 'success');
            setTimeout(() => window.location.reload(), 500);
        } catch (error) {
            console.error(error);
            showAlert('Taşıma sırasında hata oluştu', 'error');
        }
    }

    async function moveDown(sectionId) {
        try {
            await axios.post(`/agency/page/sections/${sectionId}/move-down`, {}, {
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            showAlert('Bölüm aşağı taşındı', 'success');
            setTimeout(() => window.location.reload(), 500);
        } catch (error) {
            console.error(error);
            showAlert('Taşıma sırasında hata oluştu', 'error');
        }
    }

    async function deleteSection(sectionId) {
        if (!confirm('Bu bölümü silmek istediğinize emin misiniz? Bu işlem geri alınamaz.')) return;

        try {
            await axios.delete(`/agency/page/sections/${sectionId}`, {
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            showAlert('Bölüm silindi', 'success');

            // Remove card from DOM
            const card = document.querySelector(`[data-section-id="${sectionId}"]`);
            if (card) {
                card.remove();
            }
        } catch (error) {
            console.error(error);
            showAlert('Silme sırasında hata oluştu', 'error');
        }
    }

    function editSection(sectionId) {
        // Will be implemented in edit-section-modal
        console.log('Edit section:', sectionId);
        openEditSectionModal(sectionId);
    }
</script>