@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;
        }

        .recurring-config-card {
            background: var(--gray-50);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .recurring-config-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 1rem;
        }

        .weekdays-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .weekday-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            background: white;
            border: 2px solid var(--gray-300);
            border-radius: var(--radius-md);
            font-size: 13px;
            font-weight: 600;
            color: var(--gray-600);
        }

        .weekday-badge.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        .date-generator-section {
            display: flex;
            gap: 1rem;
            align-items: end;
        }

        .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">
                <!-- Recurring Configuration -->
                <div class="recurring-config-card">
                    <div class="recurring-config-title">
                        <i class="fas fa-calendar-week me-2"></i>Tekrar Eden Günler
                    </div>
                    <div class="weekdays-grid">
                        @foreach($dayNames as $key => $name)
                            <div
                                class="weekday-badge {{ in_array($key, $tour->recurring_days ?? []) ? 'active' : '' }}">
                                <i class="fas fa-check me-2"></i>{{ $name }}
                            </div>
                        @endforeach
                    </div>

                    <div class="pb-3">
                        <small class="text-info">
                            Tekrar eden günler mavi olarak işaretlenmiştir. Eğer bu günleri güncellemek istiyorsanız
                            Genel Bilgiler alanından güncelleyebilirsiniz.
                        </small>
                    </div>

                    <div class="date-generator-section">
                        <div class="form-group flex-fill">
                            <label class="form-label">Başlangıç Tarihi</label>
                            <input type="date" id="start_date" class="form-control"
                                   value="{{ now()->format('Y-m-d') }}">
                        </div>
                        <div class="form-group flex-fill">
                            <label class="form-label">Bitiş Tarihi</label>
                            <input type="date" id="end_date" class="form-control"
                                   value="{{ now()->addMonths(3)->format('Y-m-d') }}">
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary" onclick="generateDates()">
                                <i class="fas fa-magic"></i> Tarihleri Oluştur
                            </button>
                        </div>
                    </div>
                    <small class="text-muted">
                        Seçili günlerde başlangıç ve bitiş tarihleri arasında otomatik tur tarihleri oluşturulacaktır.
                    </small>
                </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') }}
                                            </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;

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

            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
                })
            })
                .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,
                    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);
                });
        };

        // 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