@extends('agency.layouts.app')

@section('title', $tour->name . ' - Ayarlar')
@section('page_title', 'Tur Ayarları')

@php
    $breadcrumbs = [
        ['title' => 'Ana Sayfa', 'url' => route('agency.dashboard')],
        ['title' => 'Günübirlik Turlar', 'url' => route('agency.products.gunubirlik-turlar.index')],
        ['title' => $tour->name, 'url' => route('agency.products.gunubirlik-turlar.show', $tour)],
        ['title' => 'Ayarlar', 'url' => '']
    ];
@endphp

@push('styles')
    <style>
        .tour-detail-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .tour-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            padding: 2rem;
            border-radius: var(--radius-xl);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .tour-header::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(50%, -50%);
        }

        .tour-header-content {
            position: relative;
            z-index: 2;
        }

        .tour-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .tour-code {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 1rem;
        }

        .tour-meta {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .tour-meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 14px;
        }

        .tour-meta-icon {
            font-size: 16px;
            opacity: 0.8;
        }

        .tabs-container {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-xl);
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .nav-tabs {
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
            padding: 0 1rem;
            margin: 0;
        }

        .nav-tabs .nav-link {
            border: none;
            border-radius: 0;
            color: var(--gray-600);
            font-weight: 500;
            padding: 1rem 1.5rem;
            position: relative;
            transition: var(--transition);
        }

        .nav-tabs .nav-link:hover {
            color: var(--primary-color);
            background: transparent;
            border-color: transparent;
        }

        .nav-tabs .nav-link.active {
            color: var(--primary-color);
            background: transparent;
            border-color: transparent;
            font-weight: 600;
        }

        .nav-tabs .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--primary-color);
            border-radius: 3px 3px 0 0;
        }

        .tab-content {
            padding: 2rem;
        }

        .settings-section {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .settings-section-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--gray-100);
        }

        .settings-section-icon {
            width: 48px;
            height: 48px;
            background: var(--primary-light);
            color: var(--primary-color);
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .settings-section-title {
            flex: 1;
        }

        .settings-section-title h4 {
            font-size: 18px;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 0.25rem;
        }

        .settings-section-title p {
            font-size: 13px;
            color: var(--gray-600);
            margin: 0;
        }

        .settings-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid var(--gray-100);
        }

        .settings-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .settings-row:first-child {
            padding-top: 0;
        }

        .settings-info {
            flex: 1;
        }

        .settings-label {
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 0.25rem;
            font-size: 14px;
        }

        .settings-description {
            font-size: 13px;
            color: var(--gray-600);
            margin: 0;
        }

        .settings-control {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-shrink: 0;
        }

        .toggle-switch {
            position: relative;
            width: 50px;
            height: 26px;
            background: var(--gray-300);
            border-radius: 13px;
            cursor: pointer;
            transition: var(--transition);
        }

        .toggle-switch.active {
            background: var(--success-color);
        }

        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            transition: var(--transition);
        }

        .toggle-switch.active::after {
            left: 27px;
        }

        .settings-status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            border-radius: var(--radius-md);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .settings-status-badge.success {
            background: var(--success-light);
            color: var(--success-dark);
        }

        .settings-status-badge.warning {
            background: var(--warning-light);
            color: var(--warning-dark);
        }

        .settings-status-badge.danger {
            background: var(--danger-light);
            color: var(--danger-dark);
        }

        .settings-status-badge.info {
            background: var(--info-light);
            color: var(--info-dark);
        }

        .form-control-inline {
            width: auto;
            display: inline-block;
            min-width: 120px;
        }

        .input-group-inline {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .input-group-inline .form-control {
            flex: 1;
            max-width: 200px;
        }

        .input-group-inline .input-group-text {
            background: var(--gray-100);
            border: 1px solid var(--gray-300);
            color: var(--gray-600);
            font-size: 13px;
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius-md);
        }

        .danger-zone {
            background: var(--danger-light);
            border: 2px solid var(--danger-color);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            margin-top: 2rem;
        }

        .danger-zone-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .danger-zone-icon {
            font-size: 24px;
            color: var(--danger-color);
        }

        .danger-zone-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--danger-dark);
            margin: 0;
        }

        .danger-zone-description {
            color: var(--danger-dark);
            margin-bottom: 1rem;
            font-size: 14px;
        }

        .actions-bar {
            position: sticky;
            bottom: 0;
            background: white;
            border-top: 2px solid var(--gray-200);
            padding: 1.5rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 2rem -2rem -2rem -2rem;
            border-radius: 0 0 var(--radius-xl) var(--radius-xl);
            z-index: 10;
        }

        .actions-bar-info {
            font-size: 13px;
            color: var(--gray-600);
        }

        .actions-bar-buttons {
            display: flex;
            gap: 1rem;
        }

        @media (max-width: 992px) {
            .tour-detail-container {
                margin: 0;
            }

            .tour-header {
                padding: 1.5rem;
                margin-bottom: 1rem;
            }

            .tour-title {
                font-size: 22px;
            }

            .tour-meta {
                gap: 1rem;
            }

            .tab-content {
                padding: 1.5rem;
            }

            .settings-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .settings-control {
                width: 100%;
                justify-content: flex-end;
            }

            .actions-bar {
                flex-direction: column;
                gap: 1rem;
                padding: 1rem;
                margin: 1.5rem -1.5rem -1.5rem -1.5rem;
                border-radius: 0 0 var(--radius-lg) var(--radius-lg);
            }

            .actions-bar-buttons {
                width: 100%;
                flex-direction: column;
            }

            .actions-bar-buttons .btn {
                width: 100%;
            }
        }

        /* Modern Marketplace Selector */
        .marketplace-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.25rem;
            margin-top: 1rem;
        }

        .marketplace-card {
            border: 2px solid var(--gray-200);
            border-radius: var(--radius-xl);
            padding: 1.25rem;
            background: white;
            cursor: pointer;
            transition: all 0.25s ease;
            position: relative;
            display: block;
            margin-bottom: 0;
            user-select: none;
        }

        .marketplace-card:hover {
            border-color: var(--primary-light);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .marketplace-card.selected {
            border-color: var(--primary-color);
            background: rgba(37, 99, 235, 0.03);
            box-shadow: 0 0 0 1px var(--primary-color), var(--shadow-sm);
        }

        .marketplace-card.selected .marketplace-icon-wrapper {
            background-color: var(--primary-color);
            color: white;
        }

        .marketplace-card.selected .marketplace-status-indicator {
            color: var(--primary-color);
            opacity: 1;
            transform: scale(1);
        }

        .marketplace-header-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            position: relative;
        }

        .marketplace-icon-wrapper {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-lg);
            background-color: var(--gray-100);
            color: var(--gray-600);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all 0.2s ease;
        }

        .marketplace-title-wrapper {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .marketplace-name {
            font-weight: 700;
            font-size: 15px;
            color: var(--gray-900);
        }

        .marketplace-slug {
            font-size: 11px;
            margin-top: 0.1rem;
            color: var(--gray-500);
        }

        .marketplace-status-indicator {
            color: var(--gray-300);
            font-size: 18px;
            opacity: 0.5;
            transition: all 0.2s ease;
            transform: scale(0.9);
        }

        .marketplace-details {
            border-top: 1px dashed var(--gray-200);
            padding-top: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .detail-item {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .detail-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--gray-500);
            display: flex;
            align-items: center;
        }

        .detail-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;
        }

        .detail-tags .badge {
            font-size: 10px;
            font-weight: 600;
            padding: 0.2rem 0.5rem;
            border-radius: var(--radius-sm);
        }
        
        .badge.bg-secondary-subtle {
            background-color: var(--gray-100) !important;
            color: var(--gray-700) !important;
            border: 1px solid var(--gray-200);
        }
        
        .badge.bg-primary-subtle {
            background-color: rgba(37, 99, 235, 0.1) !important;
            color: var(--primary-color) !important;
            border: 1px solid rgba(37, 99, 235, 0.2);
        }
    </style>
@endpush

@section('content')
    <div class="tour-detail-container">
        <!-- Tour Header -->
        <div class="tour-header">
            <div class="tour-header-content">
                <div class="tour-code">Tur Kodu: {{ $tour->code }}</div>
                <h1 class="tour-title">{{ $tour->name }}</h1>
                <div class="tour-meta">
                    <div class="tour-meta-item">
                        <i class="fas fa-map-marker-alt tour-meta-icon"></i>
                        {{ $tour->departureCity->city ?? 'Belirtilmemiş' }}
                        → {{ $tour->arrivalCity->city ?? 'Belirtilmemiş' }}
                    </div>
                    <div class="tour-meta-item">
                        <i class="fas fa-clock tour-meta-icon"></i>
                        {{ $tour->duration }} {{ $tour->duration_type === 'days' ? 'Gün' : 'Saat' }}
                    </div>
                    <div class="tour-meta-item">
                        <i class="fas fa-cog tour-meta-icon"></i>
                        Ayarlar
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabs Container -->
        <div class="tabs-container">
            <!-- Tab Navigation -->
            @include('agency.products.gunubirlik-turlar._nav', ['active' => 'settings'])

            <!-- Tab Content -->
            <div class="tab-content">
                <form id="settingsForm">
                    @csrf
                    @method('PUT')

                    <!-- Durum ve Görünürlük -->
                    <div class="settings-section">
                        <div class="settings-section-header">
                            <div class="settings-section-icon">
                                <i class="fas fa-eye"></i>
                            </div>
                            <div class="settings-section-title">
                                <h4>Durum ve Görünürlük</h4>
                                <p>Turunuzun yayın durumunu ve görünürlüğünü kontrol edin</p>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Tur Durumu</div>
                                <div class="settings-description">Tur aktif olduğunda sistemde görünür olur</div>
                            </div>
                            <div class="settings-control">
                                <span class="settings-status-badge {{ $tour->is_active ? 'success' : 'danger' }}">
                                    {{ $tour->is_active ? 'Aktif' : 'Pasif' }}
                                </span>
                                <div class="toggle-switch {{ $tour->is_active ? 'active' : '' }}"
                                    onclick="toggleSetting(this, 'is_active')">
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Herkese Açık</div>
                                <div class="settings-description">Tur web sitesinde herkese gösterilsin</div>
                            </div>
                            <div class="settings-control">
                                <span class="settings-status-badge {{ $tour->is_public ? 'success' : 'warning' }}">
                                    {{ $tour->is_public ? 'Açık' : 'Kapalı' }}
                                </span>
                                <div class="toggle-switch {{ $tour->is_public ? 'active' : '' }}"
                                    onclick="toggleSetting(this, 'is_public')">
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Rezervasyona Açık</div>
                                <div class="settings-description">Kullanıcılar bu turu rezerve edebilsin</div>
                            </div>
                            <div class="settings-control">
                                <span class="settings-status-badge {{ $tour->is_bookable ? 'success' : 'danger' }}">
                                    {{ $tour->is_bookable ? 'Açık' : 'Kapalı' }}
                                </span>
                                <div class="toggle-switch {{ $tour->is_bookable ? 'active' : '' }}"
                                    onclick="toggleSetting(this, 'is_bookable')">
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Yayın Tarihi</div>
                                <div class="settings-description">Turun web sitesinde görünmeye başlayacağı tarih</div>
                            </div>
                            <div class="settings-control">
                                <input type="datetime-local" name="published_at" class="form-control form-control-inline"
                                    value="{{ $tour->published_at ? $tour->published_at->format('Y-m-d\TH:i') : '' }}">
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Son Geçerlilik Tarihi</div>
                                <div class="settings-description">Bu tarihten sonra tur otomatik olarak pasif olur</div>
                            </div>
                            <div class="settings-control">
                                <input type="datetime-local" name="expires_at" class="form-control form-control-inline"
                                    value="{{ $tour->expires_at ? $tour->expires_at->format('Y-m-d\TH:i') : '' }}">
                            </div>
                        </div>
                    </div>

                    <!-- Pazaryeri Tanımlamaları -->
                    <div class="settings-section">
                        <div class="settings-section-header">
                            <div class="settings-section-icon">
                                <i class="fas fa-store"></i>
                            </div>
                            <div class="settings-section-title">
                                <h4>Pazaryeri Tanımlamaları</h4>
                                <p>Bu ürünün yayınlanacağı ve hizmet vereceği pazaryerlerini belirleyin</p>
                            </div>
                        </div>

                        <div class="form-group mb-0">
                            <div class="marketplace-grid" id="marketplaceGrid">
                                @php
                                    $selectedMarketplaceIds = $tour->product ? $tour->product->marketplaces->pluck('id')->toArray() : [];
                                @endphp
                                @forelse($marketplaces as $mp)
                                    <label class="marketplace-card" for="mp_{{ $mp->id }}" id="mpCard{{ $mp->id }}">
                                        <input class="marketplace-checkbox d-none" type="checkbox" name="marketplaces[]" value="{{ $mp->id }}" id="mp_{{ $mp->id }}" {{ in_array($mp->id, $selectedMarketplaceIds) ? 'checked' : '' }}>
                                        <div class="marketplace-card-content">
                                            <div class="marketplace-header-row">
                                                <div class="marketplace-icon-wrapper">
                                                    <i class="fas fa-store"></i>
                                                </div>
                                                <div class="marketplace-title-wrapper">
                                                    <span class="marketplace-name">{{ $mp->name }}</span>
                                                    @if($mp->slug)
                                                        <span class="marketplace-slug">{{ $mp->slug }}</span>
                                                    @endif
                                                </div>
                                                <div class="marketplace-status-indicator">
                                                    <i class="fas fa-check-circle"></i>
                                                </div>
                                            </div>
                                            
                                            <div class="marketplace-details">
                                                <div class="detail-item">
                                                    <span class="detail-label"><i class="fas fa-language me-1"></i> Desteklenen Diller:</span>
                                                    <div class="detail-tags">
                                                        @forelse($mp->languages as $lang)
                                                            <span class="badge bg-secondary-subtle">{{ $lang->name }}</span>
                                                        @empty
                                                            <span class="text-muted small" style="font-size: 10px;">Belirtilmemiş</span>
                                                        @endforelse
                                                    </div>
                                                </div>
                                                
                                                <div class="detail-item">
                                                    <span class="detail-label"><i class="fas fa-money-bill-wave me-1"></i> Desteklenen Para Birimleri:</span>
                                                    <div class="detail-tags">
                                                        @forelse($mp->currencies as $curr)
                                                            <span class="badge bg-primary-subtle">{{ $curr->code }}</span>
                                                        @empty
                                                            <span class="text-muted small" style="font-size: 10px;">Belirtilmemiş</span>
                                                        @endforelse
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                @empty
                                    <div class="alert alert-warning w-100 mb-0">
                                        <i class="fas fa-exclamation-triangle alert-icon"></i>
                                        Tanımlı aktif pazaryeri bulunamadı.
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>

                    <!-- Öne Çıkan ve Etiketler -->
                    <div class="settings-section">
                        <div class="settings-section-header">
                            <div class="settings-section-icon">
                                <i class="fas fa-star"></i>
                            </div>
                            <div class="settings-section-title">
                                <h4>Öne Çıkan ve Etiketler</h4>
                                <p>Turunuzun pazarlama ve görünürlük özelliklerini yönetin</p>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Öne Çıkan Tur</div>
                                <div class="settings-description">Anasayfada ve özel bölümlerde öne çıkarılsın</div>
                            </div>
                            <div class="settings-control">
                                <div class="toggle-switch {{ $tour->is_featured ? 'active' : '' }}"
                                    onclick="toggleSetting(this, 'is_featured')">
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">En Çok Satan</div>
                                <div class="settings-description">"Bestseller" rozeti gösterilsin</div>
                            </div>
                            <div class="settings-control">
                                <div class="toggle-switch {{ $tour->is_bestseller ? 'active' : '' }}"
                                    onclick="toggleSetting(this, 'is_bestseller')">
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Yeni Tur</div>
                                <div class="settings-description">"Yeni" rozeti gösterilsin</div>
                            </div>
                            <div class="settings-control">
                                <div class="toggle-switch {{ $tour->is_new ? 'active' : '' }}"
                                    onclick="toggleSetting(this, 'is_new')">
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Öncelik Sırası</div>
                                <div class="settings-description">Yüksek değerler listelerde üstte gösterilir (0-100)
                                </div>
                            </div>
                            <div class="settings-control">
                                <input type="number" name="priority" class="form-control form-control-inline" min="0"
                                    max="100" value="{{ $tour->priority }}">
                            </div>
                        </div>
                    </div>

                    <!-- Rezervasyon Ayarları -->
                    <div class="settings-section">
                        <div class="settings-section-header">
                            <div class="settings-section-icon">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="settings-section-title">
                                <h4>Rezervasyon Ayarları</h4>
                                <p>Rezervasyon kurallarını ve kısıtlamalarını belirleyin</p>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Anında Rezervasyon</div>
                                <div class="settings-description">Onay beklemeden otomatik rezervasyon</div>
                            </div>
                            <div class="settings-control">
                                <div class="toggle-switch {{ $tour->instant_booking ? 'active' : '' }}"
                                    onclick="toggleSetting(this, 'instant_booking')">
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Rezervasyon Son Tarihi</div>
                                <div class="settings-description">Tur başlangıcından kaç saat önce rezervasyon
                                    alınabilir
                                </div>
                            </div>
                            <div class="settings-control">
                                <div class="input-group-inline">
                                    <input type="number" name="booking_deadline_hours" class="form-control" min="0"
                                        value="{{ $tour->booking_deadline_hours }}">
                                    <span class="input-group-text">saat önce</span>
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Minimum Katılımcı</div>
                                <div class="settings-description">Turun gerçekleşmesi için gereken minimum kişi sayısı
                                </div>
                            </div>
                            <div class="settings-control">
                                <div class="input-group-inline">
                                    <input type="number" name="min_participants" class="form-control" min="1"
                                        value="{{ $tour->min_participants }}">
                                    <span class="input-group-text">kişi</span>
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Maksimum Katılımcı</div>
                                <div class="settings-description">Tura katılabilecek maksimum kişi sayısı</div>
                            </div>
                            <div class="settings-control">
                                <div class="input-group-inline">
                                    <input type="number" name="max_participants" class="form-control" min="1"
                                        value="{{ $tour->max_participants ?? '' }}" placeholder="Sınırsız">
                                    <span class="input-group-text">kişi</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- İptal ve İade Politikası -->
                    <div class="settings-section">
                        <div class="settings-section-header">
                            <div class="settings-section-icon">
                                <i class="fas fa-undo"></i>
                            </div>
                            <div class="settings-section-title">
                                <h4>İptal ve İade Politikası</h4>
                                <p>İptal koşullarını ve iade politikasını belirleyin</p>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">İptal Edilebilir</div>
                                <div class="settings-description">Rezervasyonlar iptal edilebilsin</div>
                            </div>
                            <div class="settings-control">
                                <div class="toggle-switch {{ $tour->refundable ? 'active' : '' }}"
                                    onclick="toggleSetting(this, 'refundable')">
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Ücretsiz İptal Süresi</div>
                                <div class="settings-description">Tur başlangıcından kaç saat önce ücretsiz iptal
                                    edilebilir
                                </div>
                            </div>
                            <div class="settings-control">
                                <div class="input-group-inline">
                                    <input type="number" name="cancellation_deadline_hours" class="form-control" min="0"
                                        value="{{ $tour->cancellation_deadline_hours }}">
                                    <span class="input-group-text">saat önce</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Yaş Kısıtlamaları -->
                    <div class="settings-section">
                        <div class="settings-section-header">
                            <div class="settings-section-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="settings-section-title">
                                <h4>Yaş Kısıtlamaları</h4>
                                <p>Tura katılım için yaş kurallarını belirleyin</p>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Çocuk Dostu</div>
                                <div class="settings-description">Tur çocuklar için uygun</div>
                            </div>
                            <div class="settings-control">
                                <div class="toggle-switch {{ $tour->child_friendly ? 'active' : '' }}"
                                    onclick="toggleSetting(this, 'child_friendly')">
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Bebek İzni</div>
                                <div class="settings-description">Bebekler tura katılabilir</div>
                            </div>
                            <div class="settings-control">
                                <div class="toggle-switch {{ $tour->infant_allowed ? 'active' : '' }}"
                                    onclick="toggleSetting(this, 'infant_allowed')">
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Minimum Yaş</div>
                                <div class="settings-description">Tura katılabilecek minimum yaş</div>
                            </div>
                            <div class="settings-control">
                                <div class="input-group-inline">
                                    <input type="number" name="min_age" class="form-control" min="0" max="100"
                                        value="{{ $tour->min_age ?? '' }}" placeholder="Sınırsız">
                                    <span class="input-group-text">yaş</span>
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <div class="settings-info">
                                <div class="settings-label">Maksimum Yaş</div>
                                <div class="settings-description">Tura katılabilecek maksimum yaş</div>
                            </div>
                            <div class="settings-control">
                                <div class="input-group-inline">
                                    <input type="number" name="max_age" class="form-control" min="0" max="100"
                                        value="{{ $tour->max_age ?? '' }}" placeholder="Sınırsız">
                                    <span class="input-group-text">yaş</span>
                                </div>
                            </div>
                    </div>



                    <!-- Tehlikeli Bölge -->
                    <div class="danger-zone">
                        <div class="danger-zone-header">
                            <div class="danger-zone-icon">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <h5 class="danger-zone-title">Tehlikeli Bölge</h5>
                        </div>
                        <p class="danger-zone-description">
                            Bu işlemler geri alınamaz. Devam etmeden önce emin olun.
                        </p>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-outline-danger" onclick="archiveTour()">
                                <i class="fas fa-archive"></i> Turu Arşivle
                            </button>
                            <button type="button" class="btn btn-danger" onclick="deleteTour()">
                                <i class="fas fa-trash"></i> Turu Sil
                            </button>
                        </div>
                    </div>

                    <!-- Actions Bar -->
                    <div class="actions-bar">
                        <div class="actions-bar-info">
                            <i class="fas fa-info-circle me-1"></i>
                            Değişiklikleri kaydetmek için "Kaydet" butonuna tıklayın
                        </div>
                        <div class="actions-bar-buttons">
                            <button type="button" class="btn btn-secondary" onclick="window.history.back()">
                                <i class="fas fa-times"></i> İptal
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Değişiklikleri Kaydet
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function toggleSetting(element, fieldName) {
            element.classList.toggle('active');
            const isActive = element.classList.contains('active');

            // Update hidden input or add it if doesn't exist
            let input = document.querySelector(`input[name="${fieldName}"]`);
            if (!input) {
                input = document.createElement('input');
                input.type = 'hidden';
                input.name = fieldName;
                document.getElementById('settingsForm').appendChild(input);
            }
            input.value = isActive ? '1' : '0';

            // Update status badge if exists
            const row = element.closest('.settings-row');
            if (row) {
                const badge = row.querySelector('.settings-status-badge');
                if (badge) {
                    if (fieldName === 'is_active') {
                        badge.className = 'settings-status-badge ' + (isActive ? 'success' : 'danger');
                        badge.textContent = isActive ? 'Aktif' : 'Pasif';
                    } else if (fieldName === 'is_public') {
                        badge.className = 'settings-status-badge ' + (isActive ? 'success' : 'warning');
                        badge.textContent = isActive ? 'Açık' : 'Kapalı';
                    } else if (fieldName === 'is_bookable') {
                        badge.className = 'settings-status-badge ' + (isActive ? 'success' : 'danger');
                        badge.textContent = isActive ? 'Açık' : 'Kapalı';
                    }
                }
            }
        }

        document.getElementById('settingsForm').addEventListener('submit', function (e) {
            e.preventDefault();

            const formData = new FormData(this);
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn.innerHTML;

            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Kaydediliyor...';

            fetch('{{ route('agency.products.gunubirlik-turlar.settings.update', $tour) }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value,
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnText;

                    if (data.success) {
                        // Remove existing alerts first
                        document.querySelectorAll('.alert').forEach(alert => alert.remove());

                        // Show success message
                        const alert = document.createElement('div');
                        alert.className = 'alert alert-success alert-dismissible fade show';
                        alert.style.margin = '0 0 1.5rem 0';
                        alert.innerHTML = `
                    <i class="fas fa-check-circle me-2"></i>
                    ${data.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;

                        // Insert at the beginning of tab-content
                        const tabContent = document.querySelector('.tab-content');
                        const firstChild = tabContent.firstElementChild;
                        tabContent.insertBefore(alert, firstChild);

                        // Scroll to top to see the message
                        tabContent.scrollIntoView({ behavior: 'smooth', block: 'start' });

                        // Auto dismiss after 5 seconds
                        setTimeout(() => {
                            alert.remove();
                        }, 5000);
                    } else {
                        // Show error message
                        let errorMsg = data.message || 'Ayarlar kaydedilirken bir hata oluştu.';

                        if (data.errors) {
                            errorMsg += '\n\n';
                            Object.values(data.errors).forEach(errors => {
                                errors.forEach(error => {
                                    errorMsg += '• ' + error + '\n';
                                });
                            });
                        }

                        alert(errorMsg);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnText;
                    alert('Bir hata oluştu: ' + error.message);
                });
        });

        function archiveTour() {
            if (!confirm('Bu turu arşivlemek istediğinizden emin misiniz?\n\nArşivlenen tur pasif hale gelir ancak veriler korunur.')) {
                return;
            }

            fetch('{{ route('agency.products.gunubirlik-turlar.archive', $tour) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value,
                    'Content-Type': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.href = '{{ route('agency.products.gunubirlik-turlar.index') }}';
                    } else {
                        alert(data.message || 'Arşivleme işlemi başarısız.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Bir hata oluştu.');
                });
        }

        function deleteTour() {
            if (!confirm('Bu turu kalıcı olarak silmek istediğinizden emin misiniz?\n\n⚠️ BU İŞLEM GERİ ALINAMAZ!\n\nTüm tur verileri, görseller, programlar, fiyatlandırmalar ve rezervasyonlar silinecektir.')) {
                return;
            }

            const confirmText = prompt('Silme işlemini onaylamak için "SİL" yazın:');

            if (confirmText !== 'SİL') {
                alert('Silme işlemi iptal edildi.');
                return;
            }

            fetch('{{ route('agency.products.gunubirlik-turlar.destroy', $tour) }}', {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value,
                    'Content-Type': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.href = '{{ route('agency.products.gunubirlik-turlar.index') }}';
                    } else {
                        alert(data.message || 'Silme işlemi başarısız.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Bir hata oluştu.');
                });
        }

        // Initialize hidden inputs for toggle switches
        document.addEventListener('DOMContentLoaded', function () {
            const toggles = {
                'is_active': {{ $tour->is_active ? 'true' : 'false' }},
                'is_public': {{ $tour->is_public ? 'true' : 'false' }},
                'is_bookable': {{ $tour->is_bookable ? 'true' : 'false' }},
                'is_featured': {{ $tour->is_featured ? 'true' : 'false' }},
                'is_bestseller': {{ $tour->is_bestseller ? 'true' : 'false' }},
                'is_new': {{ $tour->is_new ? 'true' : 'false' }},
                'instant_booking': {{ $tour->instant_booking ? 'true' : 'false' }},
                'refundable': {{ $tour->refundable ? 'true' : 'false' }},
                'child_friendly': {{ $tour->child_friendly ? 'true' : 'false' }},
                'infant_allowed': {{ $tour->infant_allowed ? 'true' : 'false' }}
                };

            const form = document.getElementById('settingsForm');
            Object.entries(toggles).forEach(([name, value]) => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = name;
                input.value = value ? '1' : '0';
                form.appendChild(input);
            });

            // Marketplace card selection styling toggle
            function initMarketplaceCard(card) {
                const checkbox = card.querySelector('.marketplace-checkbox');
                if (!checkbox) return;
                
                // Set initial state
                if (checkbox.checked) {
                    card.classList.add('selected');
                } else {
                    card.classList.remove('selected');
                }
                
                checkbox.addEventListener('change', function() {
                    if (this.checked) {
                        card.classList.add('selected');
                    } else {
                        card.classList.remove('selected');
                    }
                });
            }
            document.querySelectorAll('.marketplace-card').forEach(initMarketplaceCard);
        });
    </script>
@endpush