@extends('agency.layouts.app')

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

@php
    $breadcrumbs = [
        ['title' => 'Ana Sayfa', 'url' => route('agency.dashboard')],
        ['title' => 'Kültür Turları', 'url' => route('agency.products.kultur-turlari.index')],
        ['title' => $tour->name, 'url' => route('agency.products.kultur-turlari.show', $tour)],
        ['title' => 'Tarihler', 'url' => '']
    ];
@endphp

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .tab-content {
            padding: 2rem;
        }

        .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-code {
            font-weight: 600;
            color: var(--gray-900);
            font-size: 12px;
            display: block;
            margin-bottom: 4px;
        }

        .date-range {
            font-weight: 600;
            color: var(--gray-900);
            display: block;
            margin-bottom: 2px;
        }

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

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

        .capacity-main {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

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

        .capacity-details {
            font-size: 11px;
            color: var(--gray-500);
        }

        .date-price {
            text-align: right;
        }

        .price-main {
            font-weight: 700;
            color: var(--gray-900);
            font-size: 16px;
        }

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

        .price-details {
            font-size: 12px;
            color: var(--gray-600);
            margin-top: 4px;
        }

        .date-status {
            text-align: center;
            vertical-align: middle;
        }

        .date-status .d-flex {
            align-items: center;
            justify-content: center;
        }

        .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.active {
            background: var(--success-light);
            color: var(--success-dark);
        }

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

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

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

        .date-actions {
            text-align: left;
            vertical-align: middle;
        }

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

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

        .modal-content {
            border-radius: var(--radius-xl);
            border: none;
            box-shadow: var(--shadow-xl);
        }

        .modal-header {
            border-bottom: 1px solid var(--gray-200);
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            background: var(--gray-50);
        }

        .modal-body {
            padding: 2rem;
        }

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

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

        .form-label.required::after {
            content: '*';
            color: var(--danger-color);
            margin-left: 4px;
        }

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

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

        .form-text {
            font-size: 12px;
            color: var(--gray-500);
            margin-top: 0.25rem;
        }

        .pricing-section {
            background: var(--gray-50);
            padding: 1.5rem;
            border-radius: var(--radius-lg);
            margin-top: 1.5rem;
        }

        .pricing-section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .use-default-btn {
            font-size: 13px;
            font-weight: 500;
            color: var(--primary-color);
            background: none;
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }

        .use-default-btn:hover {
            color: var(--primary-dark);
        }

        .guarantee-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            background: var(--warning-light);
            color: var(--warning-dark);
            border-radius: var(--radius-sm);
            font-size: 10px;
            font-weight: 600;
            margin-top: 4px;
        }

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

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

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

            .tour-meta {
                gap: 1rem;
            }

            .tab-content {
                padding: 1.5rem;
            }

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

            .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ş' }}
                        → {{ $tour->arrivalCity->city ?? 'Belirtilmemiş' }}
                    </div>
                    <div class="tour-meta-item">
                        <i class="fas fa-clock tour-meta-icon"></i>
                        {{ $tour->duration }} {{ $tour->duration_type === 'days' ? 'Gün' : 'Saat' }}
                    </div>
                    <div class="tour-meta-item">
                        <i class="fas fa-calendar tour-meta-icon"></i>
                        {{ $dates->count() }} Tarih
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabs Container -->
        <div class="tabs-container">
            <!-- Tab Navigation -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('agency.products.kultur-turlari.general', $tour) }}">
                        <i class="fas fa-info-circle me-2"></i>Genel Bilgiler
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('agency.products.kultur-turlari.itinerary', $tour) }}">
                        <i class="fas fa-list me-2"></i>Program
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('agency.products.kultur-turlari.pricing', $tour) }}">
                        <i class="fas fa-dollar-sign me-2"></i>Fiyatlandırma
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="{{ route('agency.products.kultur-turlari.dates', $tour) }}">
                        <i class="fas fa-calendar me-2"></i>Tarihler
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('agency.products.kultur-turlari.media', $tour) }}">
                        <i class="fas fa-images me-2"></i>Görseller
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('agency.products.kultur-turlari.settings', $tour) }}">
                        <i class="fas fa-cog me-2"></i>Ayarlar
                    </a>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content">
                <!-- Dates Header -->
                <div class="dates-header">
                    <div>
                        <h3>Tur Tarihleri</h3>
                        <p class="text-muted mb-0">Turunuzun gerçekleşeceği tarihleri ve kapasitelerini yönetin</p>
                    </div>
                    <div class="dates-stats">
                        <div class="dates-stat">
                            <i class="fas fa-calendar-check"></i>
                            {{ $dates->count() }} Tarih
                        </div>
                        <div class="dates-stat">
                            <i class="fas fa-check-circle"></i>
                            {{ $dates->where('is_active', true)->count() }} Aktif
                        </div>
                        <div class="dates-stat">
                            <i class="fas fa-users"></i>
                            {{ $dates->sum('sold_count') }} Satış
                        </div>
                    </div>
                </div>

                <!-- Add Date Button -->
                <div class="mb-3">
                    <button type="button" class="btn btn-primary" onclick="addDate()">
                        <i class="fas fa-plus"></i> Yeni Tarih Ekle
                    </button>
                </div>

                <!-- Dates Table -->
                @if($dates->count() > 0)
                    <div class="dates-table-wrapper">
                        <table class="dates-table">
                            <thead>
                            <tr>
                                <th>Tarih Bilgileri</th>
                                <th>Kapasite</th>
                                <th>Fiyatlandırma</th>
                                <th width="150">Durum</th>
                                <th width="120">İşlemler</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($dates as $date)
                                <tr>
                                    <td>
                                        <span class="date-code">{{ $date->code }}</span>
                                        <span class="date-range">{{ $date->formatted_date_range }}</span>
                                        @if($date->start_time)
                                            <span class="date-time">
                                                    <i class="fas fa-clock"></i>
                                                    {{ $date->start_time->format('H:i') }}
                                                </span>
                                        @endif
                                        @if($date->guarantee_departure)
                                            <span class="guarantee-badge">
                                                    <i class="fas fa-shield-alt me-1"></i>
                                                    Garanti Kalkış
                                                </span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="date-capacity">
                                            <div class="capacity-main">
                                                <div class="capacity-bar">
                                                    @php
                                                        $percentage = $date->total_capacity > 0
                                                            ? ($date->sold_count / $date->total_capacity) * 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->remaining_capacity }}/{{ $date->total_capacity }}
                                                    </span>
                                            </div>
                                            <div class="capacity-details">
                                                {{ $date->sold_count }} satış
                                                @if($date->reserved_count > 0)
                                                    , {{ $date->reserved_count }} rezerve
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="date-price">
                                        <div>
                                                <span class="price-main">
                                                    {{ number_format($date->adult_price, 0) }}
                                                </span>
                                            <span class="price-currency">{{ $date->currency }}</span>
                                        </div>
                                        @if($date->tourPricing)
                                            <div class="price-details">
                                                {{ $date->tourPricing->pricing_name }}
                                            </div>
                                        @endif
                                    </td>
                                    <td class="date-status">
                                        <div class="d-flex flex-column gap-1">
                                                <span
                                                    class="status-badge {{ $date->is_active ? 'active' : 'inactive' }}">
                                                    {{ $date->is_active ? 'AKTİF' : 'PASİF' }}
                                                </span>
                                            <span class="status-badge {{ strtolower($date->status) }}">
                                                    {{ $date->status_display_name }}
                                                </span>
                                        </div>
                                    </td>
                                    <td class="date-actions">
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-sm btn-outline-primary"
                                                    onclick="editDate({{ $date->id }})" title="Düzenle">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                                    onclick="toggleStatus({{ $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->sold_count == 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>
                @else
                    <div class="empty-dates">
                        <div class="empty-dates-icon">
                            <i class="fas fa-calendar-times"></i>
                        </div>
                        <h5>Henüz tur tarihi eklenmemiş</h5>
                        <p class="mb-3">Turunuzun gerçekleşeceği tarihleri eklemeye başlayın</p>
                        <button type="button" class="btn btn-primary" onclick="addDate()">
                            <i class="fas fa-plus"></i> İlk Tarihi Ekle
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Add/Edit Date Modal -->
    <div class="modal fade" id="dateModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dateModalTitle">Yeni Tarih Ekle</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="dateForm">
                        @csrf
                        <input type="hidden" name="tour_id" value="{{ $tour->id }}">
                        <input type="hidden" name="date_id" id="dateId">

                        <!-- Tarih ve Saat -->
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label required">Başlangıç Tarihi</label>
                                    <input type="date" name="start_date" id="start_date" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label required">Bitiş Tarihi</label>
                                    <input type="date" name="end_date" id="end_date" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Başlangıç Saati</label>
                                    <input type="time" name="start_time" id="start_time" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Bitiş Saati</label>
                                    <input type="time" name="end_time" id="end_time" class="form-control">
                                </div>
                            </div>
                        </div>

                        <!-- Kapasite -->
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label required">Toplam Kapasite</label>
                                    <input type="number" name="total_capacity" id="total_capacity" class="form-control"
                                           required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Yetişkin Kapasitesi</label>
                                    <input type="number" name="adult_capacity" id="adult_capacity" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Çocuk Kapasitesi</label>
                                    <input type="number" name="child_capacity" id="child_capacity" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Bebek Kapasitesi</label>
                                    <input type="number" name="infant_capacity" id="infant_capacity"
                                           class="form-control">
                                </div>
                            </div>
                        </div>

                        <!-- Fiyatlandırma -->
                        <div class="pricing-section">
                            <h5 class="pricing-section-title">Fiyatlandırma</h5>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="form-label">Yetişkin Fiyatı</label>
                                        <input type="number" name="adult_price" id="adult_price" class="form-control"
                                               step="0.01">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="form-label">Çocuk Fiyatı</label>
                                        <input type="number" name="child_price" id="child_price" class="form-control"
                                               step="0.01">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="form-label">Bebek Fiyatı</label>
                                        <input type="number" name="infant_price" id="infant_price" class="form-control"
                                               step="0.01">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="form-label">Para Birimi</label>
                                        <select name="currency" id="currency" class="form-select">
                                            <option value="TRY">TRY</option>
                                            <option value="USD">USD</option>
                                            <option value="EUR">EUR</option>
                                            <option value="GBP">GBP</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Yaş Aralıkları -->
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Çocuk Min Yaş</label>
                                        <input type="number" name="child_min_age" id="child_min_age" class="form-control" placeholder="0">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Çocuk Max Yaş</label>
                                        <input type="number" name="child_max_age" id="child_max_age" class="form-control" placeholder="12">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Bebek Max Yaş</label>
                                        <input type="number" name="infant_max_age" id="infant_max_age" class="form-control" placeholder="2">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- İndirimler -->
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Erken Rezervasyon İndirimi (%)</label>
                                    <input type="number" name="early_booking_discount" id="early_booking_discount"
                                           class="form-control" step="0.01">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Son Dakika İndirimi (%)</label>
                                    <input type="number" name="last_minute_discount" id="last_minute_discount"
                                           class="form-control" step="0.01">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Grup İndirimi (%)</label>
                                    <input type="number" name="group_discount" id="group_discount" class="form-control"
                                           step="0.01">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Özel İndirim (%)</label>
                                    <input type="number" name="special_discount" id="special_discount"
                                           class="form-control" step="0.01">
                                </div>
                            </div>
                        </div>

                        <!-- Sezon ve Durum -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label">Sezon Tipi</label>
                                    <select name="season_type" id="season_type" class="form-select">
                                        <option value="low">Düşük Sezon</option>
                                        <option value="medium" selected>Orta Sezon</option>
                                        <option value="high">Yüksek Sezon</option>
                                        <option value="peak">Zirve Sezon</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label required">Durum</label>
                                    <select name="status" id="status" class="form-select" required>
                                        <option value="draft">Taslak</option>
                                        <option value="published">Yayınlandı</option>
                                        <option value="booking_open" selected>Rezervasyon Açık</option>
                                        <option value="booking_closed">Rezervasyon Kapalı</option>
                                        <option value="confirmed">Onaylandı</option>
                                        <option value="in_progress">Devam Ediyor</option>
                                        <option value="completed">Tamamlandı</option>
                                        <option value="cancelled">İptal Edildi</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label">Min Katılımcı</label>
                                    <input type="number" name="min_participants" id="min_participants"
                                           class="form-control">
                                </div>
                            </div>
                        </div>

                        <!-- Checkboxlar -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input type="checkbox" name="guarantee_departure" id="guarantee_departure"
                                           class="form-check-input">
                                    <label class="form-check-label">Garanti Kalkış</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input type="checkbox" name="is_active" id="is_active" class="form-check-input"
                                           checked>
                                    <label class="form-check-label">Aktif</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input type="checkbox" name="is_bookable" id="is_bookable" class="form-check-input"
                                           checked>
                                    <label class="form-check-label">Rezervasyona Açık</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <label class="form-label">Özel Notlar</label>
                            <textarea name="special_notes" id="special_notes" class="form-control" rows="2"></textarea>
                        </div>
                    </form>
                </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="saveDate()">Kaydet</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Calculate end date based on tour duration
        document.getElementById('start_date').addEventListener('change', function () {
            const startDate = new Date(this.value);
            const duration = {{ $tour->days ?? $tour->duration }};
            const durationType = '{{ $tour->duration_type }}';

            if (startDate && duration) {
                const endDate = new Date(startDate);
                if (durationType === 'days') {
                    endDate.setDate(endDate.getDate() + duration - 1);
                } else {
                    // For hours, set end date to same day
                    endDate.setDate(endDate.getDate());
                }

                document.getElementById('end_date').value = endDate.toISOString().split('T')[0];
                document.getElementById('end_date').min = this.value;
            }
        });

        function addDate() {
            document.getElementById('dateModalTitle').textContent = 'Yeni Tarih Ekle';
            document.getElementById('dateForm').reset();
            document.getElementById('dateId').value = '';

            // Load default pricing automatically
            loadDefaultPricing();

            new bootstrap.Modal(document.getElementById('dateModal')).show();
        }

        function editDate(dateId) {
            document.getElementById('dateModalTitle').textContent = 'Tarihi Düzenle';
            document.getElementById('dateId').value = dateId;

            const modal = new bootstrap.Modal(document.getElementById('dateModal'));
            modal.show();

            fetch(`{{ url('agency/tours/' . $tour->id . '/dates') }}/${dateId}`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value,
                    'Accept': 'application/json'
                }
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        const date = data.date;

                        const setFieldValue = (fieldId, value) => {
                            const field = document.getElementById(fieldId);
                            if (field) {
                                field.value = value || '';
                            }
                        };

                        const setCheckboxValue = (fieldId, value) => {
                            const field = document.getElementById(fieldId);
                            if (field) {
                                field.checked = Boolean(value);
                            }
                        };

                        setFieldValue('start_date', date.start_date);
                        setFieldValue('end_date', date.end_date);
                        setFieldValue('start_time', date.start_time);
                        setFieldValue('total_capacity', date.total_capacity);
                        setFieldValue('tour_pricing_id', date.tour_pricing_id);
                        setFieldValue('adult_price', date.adult_price);
                        setFieldValue('child_price', date.child_price);
                        setFieldValue('infant_price', date.infant_price);
                        setFieldValue('currency', date.currency);
                        setFieldValue('status', date.status); // Status seçimi
                        setFieldValue('special_notes', date.special_notes);
                        setCheckboxValue('guarantee_departure', date.guarantee_departure);
                        setCheckboxValue('is_bookable', date.is_bookable);
                        setFieldValue('adult_capacity', date.adult_capacity);
                        setFieldValue('child_capacity', date.child_capacity);
                        setFieldValue('infant_capacity', date.infant_capacity);
                        setFieldValue('child_min_age', date.child_min_age);
                        setFieldValue('child_max_age', date.child_max_age);
                        setFieldValue('infant_max_age', date.infant_max_age);
                        setFieldValue('early_booking_discount', date.early_booking_discount);
                        setFieldValue('last_minute_discount', date.last_minute_discount);
                        setFieldValue('group_discount', date.group_discount);
                        setFieldValue('special_discount', date.special_discount);
                        setFieldValue('season_type', date.season_type);
                        setFieldValue('min_participants', date.min_participants);
                        setFieldValue('end_time', date.end_time);
                        setCheckboxValue('is_active', date.is_active);

                    } else {
                        alert('Tarih bilgileri alınamadı: ' + (data.message || 'Bilinmeyen hata'));
                    }
                })
                .catch(error => {
                    console.error('Fetch error:', error);
                    alert('Tarih bilgileri yüklenemedi: ' + error.message);
                });
        }

        function loadDefaultPricing() {
            fetch(`{{ route('agency.products.kultur-turlari.dates', $tour) }}/pricing-defaults`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value,
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.pricing) {
                        const pricing = data.pricing;

                        document.getElementById('adult_price').value = pricing.adult_price;
                        document.getElementById('child_price').value = pricing.child_price;
                        document.getElementById('infant_price').value = pricing.infant_price;
                        document.getElementById('currency').value = pricing.currency;

                        // Select the default pricing in dropdown if exists
                        if (pricing.id) {
                            document.getElementById('tour_pricing_id').value = pricing.id;
                        }
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        function saveDate() {
            const form = document.getElementById('dateForm');
            const formData = new FormData(form);
            const dateId = document.getElementById('dateId').value;

            let url = '{{ route('agency.products.kultur-turlari.dates.store', $tour) }}';
            let method = 'POST';

            if (dateId) {
                url = `{{ url('agency/tours/' . $tour->id . '/dates') }}/${dateId}`;
                method = 'PUT';
                formData.append('_method', 'PUT');
            }

            fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        bootstrap.Modal.getInstance(document.getElementById('dateModal')).hide();
                        window.location.reload();
                    } else {
                        if (data.errors) {
                            let errorMsg = 'Validasyon hataları:\n';
                            Object.values(data.errors).forEach(error => {
                                errorMsg += '- ' + error[0] + '\n';
                            });
                            alert(errorMsg);
                        } else {
                            alert(data.message || 'Bir hata oluştu.');
                        }
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Sunucu hatası: ' + error.message);
                });
        }

        function toggleStatus(dateId) {
            fetch(`{{ route('agency.products.kultur-turlari.dates', $tour) }}/${dateId}/toggle-status`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value,
                    'Content-Type': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        alert(data.message || 'İşlem başarısız.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Bir hata oluştu.');
                });
        }

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

            fetch(`{{ route('agency.products.kultur-turlari.dates', $tour) }}/${dateId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value,
                    'Content-Type': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.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