@extends('agency.layouts.app')

@section('title', $tour->name . ' - Tarihler')
@section('page_title', 'Tur Tarihleri')

@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' => 'Tarihler', 'url' => '']
    ];

    $dayNames = [
        'monday' => 'Pazartesi',
        'tuesday' => 'Salı',
        'wednesday' => 'Çarşamba',
        'thursday' => 'Perşembe',
        'friday' => 'Cuma',
        'saturday' => 'Cumartesi',
        'sunday' => 'Pazar'
    ];
@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;
        }

        /* ── Sezon & Tarih Oluşturucu ── */
        .sg-card { background:#fff; border:1px solid var(--gray-200); border-radius:20px; padding:1.6rem 1.75rem 1.5rem; margin-bottom:2rem;
            box-shadow:0 10px 30px -18px rgba(15,23,42,.18); position:relative; overflow:hidden; }
        .sg-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,#2563eb,#7c3aed); }
        .sg-title { display:flex; align-items:center; gap:10px; font-size:1.05rem; font-weight:800; color:var(--gray-900); }
        .sg-title i { color:#2563eb; }
        .sg-sub { font-size:.82rem; color:var(--gray-500); margin:2px 0 18px; }
        .sg-steps { display:flex; flex-direction:column; gap:18px; }
        .sg-step { display:flex; gap:14px; }
        .sg-step-no { width:28px; height:28px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
            background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; font-weight:800; font-size:.8rem; box-shadow:0 4px 10px -3px rgba(37,99,235,.5); margin-top:2px; }
        .sg-step-body { flex:1; min-width:0; }
        .sg-step-t { font-weight:700; font-size:.9rem; color:var(--gray-900); }
        .sg-step-d { font-size:.76rem; color:var(--gray-500); margin-bottom:9px; }
        .sg-season-wrap { display:flex; align-items:center; gap:10px; max-width:430px; background:var(--gray-50); border:1.5px solid var(--gray-200);
            border-radius:13px; padding:0 14px; transition:.15s; }
        .sg-season-wrap:focus-within { background:#fff; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
        .sg-season-wrap i { color:#93c5fd; }
        .sg-season-wrap input { flex:1; border:none; outline:none; background:transparent; padding:11px 0; font-size:.9rem; font-weight:600; color:var(--gray-900); }
        .sg-season-wrap input::placeholder { color:#9ca3af; font-weight:400; }
        .sg-range { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
        .sg-range input[type="date"], .sg-range input[data-dtp] { border:1.5px solid var(--gray-200); background:var(--gray-50); border-radius:13px; padding:10px 14px;
            font-size:.88rem; font-weight:600; color:var(--gray-900); transition:.15s; }
        .sg-range input[data-dtp] { padding-right:2.05rem; }
        .sg-range input[type="date"]:focus, .sg-range input[data-dtp]:focus { background:#fff; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); outline:none; }
        .sg-range .arrow { color:var(--gray-400); }
        .sg-days { display:flex; gap:8px; flex-wrap:wrap; }
        .sg-day { cursor:pointer; user-select:none; }
        .sg-day input { position:absolute; opacity:0; pointer-events:none; }
        .sg-day span { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:72px; height:56px;
            border:1.5px solid var(--gray-200); border-radius:14px; background:var(--gray-50); color:var(--gray-600);
            font-size:.8rem; font-weight:700; transition:all .16s cubic-bezier(.34,1.3,.6,1); }
        .sg-day span small { font-size:.6rem; font-weight:600; color:var(--gray-400); text-transform:uppercase; letter-spacing:.04em; transition:color .16s; }
        .sg-day:hover span { border-color:#93c5fd; color:#2563eb; transform:translateY(-2px); }
        .sg-day input:checked + span { background:linear-gradient(135deg,#2563eb,#4f46e5); border-color:transparent; color:#fff;
            box-shadow:0 8px 18px -6px rgba(37,99,235,.55); transform:translateY(-2px); }
        .sg-day input:checked + span small { color:rgba(255,255,255,.75); }
        .sg-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:20px;
            padding-top:16px; border-top:1px dashed var(--gray-200); }
        .sg-preview { display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--gray-600); min-height:38px; }
        .sg-preview .cnt { display:inline-flex; align-items:center; gap:7px; background:#eff6ff; color:#1d4ed8; font-weight:800;
            border-radius:999px; padding:7px 14px; font-size:.82rem; white-space:nowrap; }
        .sg-preview .cnt.zero { background:#fef2f2; color:#dc2626; }
        .sg-preview .ex { color:var(--gray-500); font-size:.78rem; }
        .sg-btn { display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; border-radius:14px; padding:13px 24px;
            background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; font-weight:800; font-size:.92rem;
            box-shadow:0 10px 24px -8px rgba(37,99,235,.6); transition:transform .15s, box-shadow .15s, opacity .15s; }
        .sg-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(37,99,235,.65); }
        .sg-btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
        .season-chip { display:inline-flex; align-items:center; gap:5px; background:#f5f3ff; color:#6d28d9; font-size:11px; font-weight:700;
            border-radius:999px; padding:3px 10px; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
        .season-chip i { font-size:9px; }

        .dates-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .dates-stats {
            display: flex;
            gap: 1rem;
            font-size: 13px;
            color: var(--gray-600);
        }

        .dates-stat {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .dates-table-wrapper {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-xl);
            overflow: hidden;
        }

        .dates-table {
            width: 100%;
            border-collapse: collapse;
        }

        .dates-table thead {
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
        }

        .dates-table th {
            padding: 1rem;
            text-align: left;
            font-weight: 600;
            color: var(--gray-700);
            font-size: 13px;
            white-space: nowrap;
        }

        .dates-table td {
            padding: 1rem;
            border-bottom: 1px solid var(--gray-100);
            font-size: 14px;
        }

        .dates-table tbody tr:hover {
            background: var(--gray-50);
        }

        .dates-table tbody tr:last-child td {
            border-bottom: none;
        }

        .date-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .date-day {
            font-weight: 600;
            color: var(--gray-900);
            font-size: 14px;
        }

        .date-detail {
            font-size: 12px;
            color: var(--gray-600);
        }

        .capacity-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .capacity-bar {
            width: 100px;
            height: 6px;
            background: var(--gray-200);
            border-radius: 3px;
            overflow: hidden;
        }

        .capacity-fill {
            height: 100%;
            background: var(--success-color);
            transition: width 0.3s ease;
        }

        .capacity-fill.warning {
            background: var(--warning-color);
        }

        .capacity-fill.danger {
            background: var(--danger-color);
        }

        .capacity-text {
            font-size: 12px;
            color: var(--gray-600);
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: var(--radius-md);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            white-space: nowrap;
        }

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

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

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

        .status-badge.cancelled {
            background: var(--gray-100);
            color: var(--gray-600);
        }

        .vehicle-select {
            min-width: 150px;
            padding: 0.4rem 0.75rem;
            border: 1px solid var(--gray-300);
            border-radius: var(--radius-md);
            font-size: 13px;
        }

        .empty-dates {
            text-align: center;
            padding: 3rem;
            color: var(--gray-500);
            background: white;
            border: 2px dashed var(--gray-200);
            border-radius: var(--radius-xl);
        }

        .empty-dates-icon {
            font-size: 48px;
            color: var(--gray-300);
            margin-bottom: 1rem;
        }

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

        .form-label {
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 0.5rem;
            display: block;
            font-size: 14px;
        }

        .form-control, .form-select {
            border: 1px solid var(--gray-300);
            border-radius: var(--radius-lg);
            padding: 0.75rem 1rem;
            font-size: 14px;
            transition: var(--transition);
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            outline: none;
        }

        .btn-group {
            display: inline-flex;
            gap: 0.25rem;
        }

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

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

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

            .tab-content {
                padding: 1.5rem;
            }

            .dates-header {
                flex-direction: column;
                gap: 1rem;
                align-items: flex-start;
            }

            .date-generator-section {
                flex-direction: column;
                align-items: stretch;
            }

            .dates-table-wrapper {
                overflow-x: auto;
            }

            .dates-table {
                min-width: 800px;
            }
        }
    </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ş' }}
                    </div>
                    <div class="tour-meta-item">
                        <i class="fas fa-clock tour-meta-icon"></i>
                        {{ $tour->start_time }} - {{ $tour->end_time }}
                    </div>
                    <div class="tour-meta-item">
                        <i class="fas fa-calendar tour-meta-icon"></i>
                        {{ $tourDates->total() }} Tarih
                    </div>
                </div>
            </div>
        </div>

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

            <!-- Tab Content -->
            <div class="tab-content">
                <!-- Sezon & Tarih Oluşturucu -->
                @php
                    $dayShort = ['monday' => 'Pzt', 'tuesday' => 'Sal', 'wednesday' => 'Çar', 'thursday' => 'Per', 'friday' => 'Cum', 'saturday' => 'Cmt', 'sunday' => 'Paz'];
                @endphp
                <div class="sg-card">
                    <div class="sg-title"><i class="fas fa-wand-magic-sparkles"></i> Sezon &amp; Tarih Oluşturucu</div>
                    <p class="sg-sub">Bir sezon adı yazın, tarih aralığını seçin, turun yapılacağı günleri işaretleyin — gerisini biz halledelim.</p>

                    <div class="sg-steps">
                        <div class="sg-step">
                            <div class="sg-step-no">1</div>
                            <div class="sg-step-body">
                                <div class="sg-step-t">Sezon adı verin <span class="text-muted fw-normal">(opsiyonel)</span></div>
                                <div class="sg-step-d">Bu aralıkta oluşturulan tüm tarihler bu grup adıyla etiketlenir; listede birlikte görünür.</div>
                                <div class="sg-season-wrap">
                                    <i class="fas fa-bookmark"></i>
                                    <input type="text" id="season_name" maxlength="80" placeholder="Örn: Yaz Sezonu 2026" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="sg-step">
                            <div class="sg-step-no">2</div>
                            <div class="sg-step-body">
                                <div class="sg-step-t">Tarih aralığını seçin</div>
                                <div class="sg-step-d">Tarihler bu aralık içinde oluşturulur.</div>
                                <div class="sg-range">
                                    <input type="date" id="start_date" value="{{ now()->format('Y-m-d') }}">
                                    <i class="fas fa-arrow-right-long arrow"></i>
                                    <input type="date" id="end_date" value="{{ now()->addMonths(3)->format('Y-m-d') }}">
                                </div>
                            </div>
                        </div>

                        <div class="sg-step">
                            <div class="sg-step-no">3</div>
                            <div class="sg-step-body">
                                <div class="sg-step-t">Tur hangi günler yapılacak?</div>
                                <div class="sg-step-d">Seçtiğiniz günler turun tekrar eden günleri olarak da kaydedilir.</div>
                                <div class="sg-days" id="sgDays">
                                    @foreach($dayNames as $key => $name)
                                        <label class="sg-day">
                                            <input type="checkbox" value="{{ $key }}" @checked(in_array($key, $tour->recurring_days ?? []))>
                                            <span>{{ $dayShort[$key] }}<small>{{ $name }}</small></span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="sg-foot">
                        <div class="sg-preview" id="sgPreview">
                            <span class="cnt zero"><i class="fas fa-calendar-xmark"></i> Gün seçilmedi</span>
                        </div>
                        <button type="button" class="sg-btn" id="sgGenerate" onclick="generateDates()" disabled>
                            <i class="fas fa-wand-magic-sparkles"></i> Tarihleri Oluştur
                        </button>
                    </div>
                </div>

                <!-- Dates Header -->
                <div class="dates-header">
                    <div>
                        <h3>Tur Tarihleri</h3>
                        <p class="text-muted mb-0">Oluşturulan tarihleri yönetin ve araç atayın</p>
                    </div>
                    <div class="dates-stats">
                        <div class="dates-stat">
                            <i class="fas fa-calendar-check"></i>
                            {{ $tourDates->total() }} Tarih
                        </div>
                        <div class="dates-stat">
                            <i class="fas fa-check-circle"></i>
                            {{ $tour->tourDates()->where('is_active', true)->count() }} Aktif
                        </div>
                        <div class="dates-stat">
                            <i class="fas fa-users"></i>
                            {{ $tour->tourDates()->sum('booked_seats') }} Rezervasyon
                        </div>
                    </div>
                </div>

                <!-- Dates Table -->
                @if($tourDates->count() > 0)
                    <div class="dates-table-wrapper">
                        <table class="dates-table">
                            <thead>
                            <tr>
                                <th>Tarih</th>
                                <th>Kapasite</th>
                                <th>Araç</th>
                                <th>Durum</th>
                                <th width="120">İşlemler</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($tourDates as $date)
                                <tr>
                                    <td>
                                        <div class="date-info">
                                            <span class="date-day">
                                                {{ \Carbon\Carbon::parse($date->tour_date)->format('d.m.Y') }}
                                                - {{ $dayNames[strtolower(\Carbon\Carbon::parse($date->tour_date)->format('l'))] ?? \Carbon\Carbon::parse($date->tour_date)->format('l') }}
                                                @if($date->season_name)
                                                    <span class="season-chip ms-1" title="Sezon: {{ $date->season_name }}"><i class="fas fa-bookmark"></i>{{ $date->season_name }}</span>
                                                @endif
                                            </span>
                                            <span class="date-detail">
                                                <i class="fas fa-clock"></i>
                                                {{ $date->start_time ?? $tour->start_time }} - {{ $date->end_time ?? $tour->end_time }}
                                            </span>
                                            @if($date->is_guaranteed)
                                                <span class="status-badge guaranteed mt-1">
                                                    <i class="fas fa-shield-alt me-1"></i>
                                                    Garanti Kalkış
                                                </span>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <div class="capacity-info">
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="capacity-bar">
                                                    @php
                                                        $maxParticipants = $date->max_participants ?? $tour->max_participants ?? 0;
                                                        $percentage = $maxParticipants > 0
                                                            ? (($date->booked_seats + $date->reserved_seats) / $maxParticipants) * 100
                                                            : 0;
                                                        $class = '';
                                                        if($percentage >= 90) $class = 'danger';
                                                        elseif($percentage >= 70) $class = 'warning';
                                                    @endphp
                                                    <div class="capacity-fill {{ $class }}"
                                                         style="width: {{ $percentage }}%"></div>
                                                </div>
                                                <span class="capacity-text">
                                                    {{ $date->available_seats ?? 0 }}/{{ $maxParticipants }}
                                                </span>
                                            </div>
                                            <span class="date-detail">
                                                {{ $date->booked_seats }} rezervasyon
                                                @if($date->reserved_seats > 0)
                                                    , {{ $date->reserved_seats }} beklemede
                                                @endif
                                            </span>
                                        </div>
                                    </td>
                                    <td>
                                        <select class="vehicle-select"
                                                onchange="updateVehicle({{ $date->id }}, this.value)">
                                            <option value="">Araç Seçin</option>
                                            @foreach($vehicles as $vehicle)
                                                <option
                                                    value="{{ $vehicle->id }}" {{ $date->vehicle_id == $vehicle->id ? 'selected' : '' }}>
                                                    {{ $vehicle->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column gap-1">
                                            <span class="status-badge {{ $date->status }}">
                                                {{ strtoupper($date->status) }}
                                            </span>
                                            @if(!$date->is_active)
                                                <span class="status-badge cancelled">PASİF</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                                    onclick="toggleActive({{ $date->id }})"
                                                    title="{{ $date->is_active ? 'Pasif Yap' : 'Aktif Yap' }}">
                                                <i class="fas {{ $date->is_active ? 'fa-eye-slash' : 'fa-eye' }}"></i>
                                            </button>
                                            @if($date->booked_seats == 0)
                                                <button type="button" class="btn btn-sm btn-outline-danger"
                                                        onclick="deleteDate({{ $date->id }})" title="Sil">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if($tourDates->hasPages())
                        <div class="d-flex justify-content-center mt-4">
                            {{ $tourDates->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                @else
                    <div class="empty-dates">
                        <div class="empty-dates-icon">
                            <i class="fas fa-calendar-times"></i>
                        </div>
                        <h5>Henüz tur tarihi oluşturulmamış</h5>
                        <p class="mb-3">Yukarıdaki form ile otomatik tarih oluşturabilirsiniz</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Conflict Resolution Modal -->
    <div class="modal fade" id="conflictModal" tabindex="-1" aria-labelledby="conflictModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-warning text-dark">
                    <h5 class="modal-title" id="conflictModalLabel">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Mevcut Tarihler Tespit Edildi
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <strong id="conflictCount"></strong> tarih zaten sisteminizde mevcut.
                        <span id="newDateCount"></span>
                    </div>

                    <div class="mb-4">
                        <h6 class="fw-bold mb-3">Mevcut tarihler için ne yapmak istersiniz?</h6>

                        <div class="form-check mb-3 p-3 border rounded">
                            <input class="form-check-input" type="radio" name="conflictAction" id="actionSkip" value="skip" checked>
                            <label class="form-check-label" for="actionSkip">
                                <strong><i class="fas fa-forward text-primary me-2"></i>Atla (Önerilen)</strong>
                                <p class="text-muted small mb-0 mt-1">Mevcut tarihlere dokunmaz, sadece yeni tarihleri oluşturur. Rezervasyonlar korunur.</p>
                            </label>
                        </div>

                        <div class="form-check mb-3 p-3 border rounded">
                            <input class="form-check-input" type="radio" name="conflictAction" id="actionUpdatePrices" value="update_prices">
                            <label class="form-check-label" for="actionUpdatePrices">
                                <strong><i class="fas fa-dollar-sign text-success me-2"></i>Fiyatları Güncelle</strong>
                                <p class="text-muted small mb-0 mt-1">Mevcut tarihlerin sadece fiyatlarını günceller. Rezervasyonlar ve diğer bilgiler korunur.</p>
                            </label>
                        </div>

                        <div class="form-check mb-3 p-3 border rounded">
                            <input class="form-check-input" type="radio" name="conflictAction" id="actionRecreate" value="recreate">
                            <label class="form-check-label" for="actionRecreate">
                                <strong><i class="fas fa-sync-alt text-danger me-2"></i>Sil ve Yeniden Oluştur</strong>
                                <p class="text-muted small mb-0 mt-1">
                                    <span class="text-danger fw-bold">Dikkat!</span> Rezervasyonu olmayan tarihleri siler ve yeniden oluşturur.
                                    Rezervasyonu olan tarihler korunur.
                                </p>
                            </label>
                        </div>
                    </div>

                    <!-- Outdated Dates Section -->
                    <div id="outdatedDatesSection" class="mb-4" style="display: none;">
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong id="outdatedCount"></strong> tarih artık seçili günlerde değil!
                        </div>

                        <h6 class="fw-bold mb-3">Eski günlerdeki tarihler için ne yapmak istersiniz?</h6>

                        <div class="form-check mb-3 p-3 border rounded">
                            <input class="form-check-input" type="radio" name="outdatedAction" id="outdatedKeep" value="keep" checked>
                            <label class="form-check-label" for="outdatedKeep">
                                <strong><i class="fas fa-save text-info me-2"></i>Koru</strong>
                                <p class="text-muted small mb-0 mt-1">Tarihleri olduğu gibi sakla. Rezervasyonlar için güvenli.</p>
                            </label>
                        </div>

                        <div class="form-check mb-3 p-3 border rounded">
                            <input class="form-check-input" type="radio" name="outdatedAction" id="outdatedDeactivate" value="deactivate">
                            <label class="form-check-label" for="outdatedDeactivate">
                                <strong><i class="fas fa-eye-slash text-warning me-2"></i>Pasif Et</strong>
                                <p class="text-muted small mb-0 mt-1">Tarihleri pasif yap, görünmesin ama sakla. Mevcut rezervasyonlar korunur.</p>
                            </label>
                        </div>

                        <div class="form-check mb-3 p-3 border rounded">
                            <input class="form-check-input" type="radio" name="outdatedAction" id="outdatedDelete" value="delete">
                            <label class="form-check-label" for="outdatedDelete">
                                <strong><i class="fas fa-trash text-danger me-2"></i>Sil</strong>
                                <p class="text-muted small mb-0 mt-1">
                                    <span class="text-danger fw-bold">Dikkat!</span> Rezervasyonu olmayan tarihleri siler.
                                    Rezervasyonlu tarihler pasif edilir.
                                </p>
                            </label>
                        </div>

                        <div class="border rounded p-2 mb-3" style="max-height: 150px; overflow-y: auto;">
                            <ul id="outdatedDateList" class="list-unstyled mb-0"></ul>
                        </div>
                    </div>

                    <div id="existingDatesList" class="mt-3">
                        <h6 class="fw-bold mb-2">Mevcut Tarihler:</h6>
                        <div class="border rounded p-2" style="max-height: 200px; overflow-y: auto;">
                            <ul id="dateList" class="list-unstyled mb-0"></ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
                    <button type="button" class="btn btn-primary" onclick="confirmGenerateDates()">
                        <i class="fas fa-check me-2"></i>Devam Et
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let conflictData = null;

        // ── Sezon oluşturucu yardımcıları ──
        const JS_DAY_KEYS = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
        const DAY_NAMES_TR = { monday:'Pazartesi', tuesday:'Salı', wednesday:'Çarşamba', thursday:'Perşembe', friday:'Cuma', saturday:'Cumartesi', sunday:'Pazar' };

        window.getSelectedWeekdays = function() {
            return Array.from(document.querySelectorAll('#sgDays input:checked')).map(c => c.value);
        };

        // Canlı önizleme: seçilen aralık + günlere göre kaç tarih oluşacağını anında göster
        window.refreshSgPreview = function() {
            const el = document.getElementById('sgPreview');
            const btn = document.getElementById('sgGenerate');
            const startVal = document.getElementById('start_date').value;
            const endVal = document.getElementById('end_date').value;
            const days = window.getSelectedWeekdays();

            const fail = (msg, icon) => {
                el.innerHTML = `<span class="cnt zero"><i class="fas ${icon || 'fa-calendar-xmark'}"></i> ${msg}</span>`;
                btn.disabled = true;
            };

            if (!days.length) return fail('Gün seçilmedi');
            if (!startVal || !endVal) return fail('Tarih aralığı seçin', 'fa-calendar');
            const start = new Date(startVal), end = new Date(endVal);
            if (start > end) return fail('Başlangıç, bitişten sonra olamaz', 'fa-triangle-exclamation');

            const matches = [];
            const cur = new Date(start);
            let guard = 0;
            while (cur <= end && guard++ < 1100) {
                if (days.includes(JS_DAY_KEYS[cur.getDay()])) matches.push(new Date(cur));
                cur.setDate(cur.getDate() + 1);
            }

            if (!matches.length) return fail('Bu aralıkta seçili günlere denk gelen tarih yok');

            const season = document.getElementById('season_name').value.trim();
            const ex = matches.slice(0, 3)
                .map(d => d.toLocaleDateString('tr-TR', { day:'2-digit', month:'short', weekday:'short' }))
                .join(', ');
            el.innerHTML = `<span class="cnt"><i class="fas fa-calendar-check"></i> ${matches.length} tarih oluşturulacak</span>` +
                `<span class="ex">${ex}${matches.length > 3 ? '…' : ''}${season ? ' · <i class="fas fa-bookmark"></i> ' + season.replace(/</g,'&lt;') : ''}</span>`;
            btn.disabled = false;
        };

        window.generateDates = function() {
            const startDate = document.getElementById('start_date').value;
            const endDate = document.getElementById('end_date').value;
            const weekdays = window.getSelectedWeekdays();

            if (!weekdays.length) {
                alert('Lütfen turun yapılacağı günleri seçin.');
                return;
            }

            if (!startDate || !endDate) {
                alert('Lütfen başlangıç ve bitiş tarihlerini seçin.');
                return;
            }

            if (new Date(startDate) > new Date(endDate)) {
                alert('Başlangıç tarihi bitiş tarihinden sonra olamaz.');
                return;
            }

            // Initial request to check for conflicts
            fetch('{{ route("agency.products.gunubirlik-turlar.dates.generate", $tour) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    start_date: startDate,
                    end_date: endDate,
                    season_name: document.getElementById('season_name').value.trim(),
                    weekdays: weekdays
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert(data.message || 'Tarihler başarıyla oluşturuldu.');
                        window.location.reload();
                    } else if (data.needs_confirmation) {
                        // Show conflict modal
                        showConflictModal(data);
                    } else {
                        alert(data.message || 'Bir hata oluştu.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Sunucu hatası: ' + error.message);
                });
        };

        window.showConflictModal = function(data) {
            conflictData = data;

            // Ensure data arrays exist
            data.existing_dates = data.existing_dates || [];
            data.outdated_dates = data.outdated_dates || [];
            data.new_dates = data.new_dates || [];

            // Get all DOM elements once
            const existingDatesListEl = document.getElementById('existingDatesList');
            const outdatedDatesSection = document.getElementById('outdatedDatesSection');
            const conflictCountEl = document.getElementById('conflictCount');
            const newDateCountEl = document.getElementById('newDateCount');
            const outdatedCountEl = document.getElementById('outdatedCount');
            const outdatedDateListEl = document.getElementById('outdatedDateList');
            const dateListEl = document.getElementById('dateList');

            // Reset modal visibility states
            if (existingDatesListEl) existingDatesListEl.style.display = 'block';
            if (outdatedDatesSection) outdatedDatesSection.style.display = 'none';

            // Update modal content - Existing dates section
            if (conflictCountEl && newDateCountEl) {
                conflictCountEl.textContent = data.existing_dates.length;

                if (data.new_dates.length > 0) {
                    newDateCountEl.textContent = `${data.new_dates.length} yeni tarih oluşturulacak.`;
                } else {
                    newDateCountEl.textContent = 'Yeni tarih oluşturulmayacak.';
                }
            }

            // Handle outdated dates section
            if (data.outdated_dates.length > 0 && outdatedDatesSection && outdatedCountEl && outdatedDateListEl) {
                outdatedDatesSection.style.display = 'block';
                outdatedCountEl.textContent = data.outdated_dates.length;

                outdatedDateListEl.innerHTML = '';

                const dayNamesTr = {
                    'monday': 'Pazartesi',
                    'tuesday': 'Salı',
                    'wednesday': 'Çarşamba',
                    'thursday': 'Perşembe',
                    'friday': 'Cuma',
                    'saturday': 'Cumartesi',
                    'sunday': 'Pazar'
                };

                data.outdated_dates.forEach(date => {
                    const li = document.createElement('li');
                    li.className = 'border-bottom pb-2 mb-2';
                    li.innerHTML = `
                        <i class="fas fa-calendar-times me-2 text-warning"></i>
                        ${window.formatDate(date.date)}
                        <span class="badge bg-secondary ms-2">${dayNamesTr[date.day_name] || date.day_name}</span>
                        ${date.has_bookings ? '<span class="badge bg-danger ms-2">Rezervasyonlu</span>' : ''}
                    `;
                    outdatedDateListEl.appendChild(li);
                });
            } else if (outdatedDatesSection) {
                outdatedDatesSection.style.display = 'none';
            }

            // Populate existing date list
            if (data.existing_dates.length > 0 && existingDatesListEl && dateListEl) {
                existingDatesListEl.style.display = 'block';
                dateListEl.innerHTML = '';

                data.existing_dates.forEach(date => {
                    const li = document.createElement('li');
                    li.className = 'border-bottom pb-2 mb-2';
                    li.innerHTML = `
                        <i class="fas fa-calendar me-2 text-primary"></i>
                        ${window.formatDate(date.date)}
                        ${date.has_bookings ? '<span class="badge bg-danger ms-2">Rezervasyonlu</span>' : ''}
                    `;
                    dateListEl.appendChild(li);
                });
            } else if (existingDatesListEl) {
                existingDatesListEl.style.display = 'none';
            }

            // Show modal
            try {
                const modalElement = document.getElementById('conflictModal');
                if (!modalElement) {
                    throw new Error('conflictModal element not found in DOM');
                }

                const modal = new bootstrap.Modal(modalElement);
                modal.show();
            } catch (error) {
                console.error('Error showing modal:', error);
                console.error('Modal data:', {
                    existing_dates_count: data.existing_dates.length,
                    outdated_dates_count: data.outdated_dates.length,
                    new_dates_count: data.new_dates.length
                });
                alert('Modal gösterilemedi: ' + error.message + '. Lütfen sayfayı yenileyin.');
            }
        };

        window.confirmGenerateDates = function() {
            const actionEl = document.querySelector('input[name="conflictAction"]:checked');
            const outdatedActionEl = document.querySelector('input[name="outdatedAction"]:checked');

            if (!actionEl) {
                alert('Lütfen bir seçenek seçin.');
                return;
            }

            const action = actionEl.value;
            const outdatedAction = outdatedActionEl ? outdatedActionEl.value : 'keep';
            const startDate = document.getElementById('start_date').value;
            const endDate = document.getElementById('end_date').value;

            // Close modal
            const modalElement = document.getElementById('conflictModal');
            if (modalElement) {
                const modal = bootstrap.Modal.getInstance(modalElement);
                if (modal) modal.hide();
            }

            fetch('{{ route("agency.products.gunubirlik-turlar.dates.generate", $tour) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    start_date: startDate,
                    end_date: endDate,
                    season_name: document.getElementById('season_name').value.trim(),
                    weekdays: window.getSelectedWeekdays(),
                    action: action,
                    outdated_action: outdatedAction
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert(data.message || 'İşlem başarıyla tamamlandı.');
                        window.location.reload();
                    } else {
                        alert(data.message || 'Bir hata oluştu.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Sunucu hatası: ' + error.message);
                });
        };

        // Sezon oluşturucu: her değişiklikte önizlemeyi tazele
        document.addEventListener('DOMContentLoaded', function() {
            ['start_date', 'end_date', 'season_name'].forEach(id => {
                const el = document.getElementById(id);
                if (el) { el.addEventListener('input', window.refreshSgPreview); el.addEventListener('change', window.refreshSgPreview); }
            });
            document.querySelectorAll('#sgDays input').forEach(c => c.addEventListener('change', window.refreshSgPreview));
            window.refreshSgPreview();
        });

        // Reset modal when closed
        document.addEventListener('DOMContentLoaded', function() {
            const conflictModal = document.getElementById('conflictModal');
            if (conflictModal) {
                conflictModal.addEventListener('hidden.bs.modal', function () {
                    // Reset radio buttons
                    const skipRadio = document.getElementById('actionSkip');
                    const keepRadio = document.getElementById('outdatedKeep');
                    if (skipRadio) skipRadio.checked = true;
                    if (keepRadio) keepRadio.checked = true;

                    // Clear lists
                    const dateList = document.getElementById('dateList');
                    const outdatedDateList = document.getElementById('outdatedDateList');
                    if (dateList) dateList.innerHTML = '';
                    if (outdatedDateList) outdatedDateList.innerHTML = '';
                });
            }
        });

        window.formatDate = function(dateString) {
            const date = new Date(dateString);
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            return date.toLocaleDateString('tr-TR', options);
        };

        window.updateVehicle = function(dateId, vehicleId) {
            fetch(`{{ url('agency/products/gunubirlik-turlar') }}/{{ $tour->id }}/dates/${dateId}/vehicle`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    vehicle_id: vehicleId
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Success - no alert needed for better UX
                    } else {
                        alert(data.message || 'Araç ataması yapılamadı.');
                        window.location.reload();
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Bir hata oluştu.');
                    window.location.reload();
                });
        };

        window.toggleActive = function(dateId) {
            fetch(`{{ url('agency/products/gunubirlik-turlar') }}/{{ $tour->id }}/dates/${dateId}/toggle-status`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        alert(data.message || 'İşlem başarısız.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Bir hata oluştu.');
                });
        };

        window.deleteDate = function(dateId) {
            if (!confirm('Bu tarihi silmek istediğinizden emin misiniz?')) {
                return;
            }

            fetch(`{{ url('agency/products/gunubirlik-turlar') }}/{{ $tour->id }}/dates/${dateId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        alert(data.message || 'Silme işlemi başarısız.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Bir hata oluştu.');
                });
        };
    </script>
@endpush