@extends('admin.layouts.app')

@section('title', 'تعديل التذكرة')

@push('styles')
<style>
.date-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 15px 20px;
    text-align: center;
    position: relative;
    min-width: 120px;
    transition: all 0.2s;
}

.date-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

.date-card__day {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 5px;
}

.date-card__date {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}

.date-card__remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dc3545;
    color: white;
    border: none;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.date-card:hover .date-card__remove {
    opacity: 1;
}

.existing-file {
    position: relative;
    display: inline-block;
    margin: 5px;
}

.existing-file img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #ddd;
}

.existing-file .delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dc3545;
    color: white;
    border: none;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
@endpush

@section('content')
<div class="container-fluid pt-4 px-4">
    <div class="bg-light rounded p-4">
        <div class="d-flex align-items-center justify-content-between mb-4">
            <h6 class="mb-0">تعديل التذكرة: {{ $ticket->title }}</h6>
            <a href="{{ route('admin.tickets.index') }}" class="btn btn-secondary">
                <i class="fa fa-arrow-left me-2"></i>العودة
            </a>
        </div>
        
        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        
        <form action="{{ route('admin.tickets.update', $ticket->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="row flex-column-reverse flex-md-row">
                <div class="col-md-8 order-md-2">
                    <div class="mb-3">
                        <label for="title" class="form-label">العنوان (عربي) *</label>
                        <input type="text" class="form-control" id="title" name="title" value="{{ old('title', $ticket->title) }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="title_en" class="form-label">العنوان (English)</label>
                        <input type="text" class="form-control" id="title_en" name="title_en" value="{{ old('title_en', $ticket->title_en) }}" dir="ltr" placeholder="Title in English">
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">الوصف (عربي)</label>
                        <textarea class="form-control" id="description" name="description" rows="4">{{ old('description', $ticket->description) }}</textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description_en" class="form-label">الوصف (English)</label>
                        <textarea class="form-control" id="description_en" name="description_en" rows="4" dir="ltr" placeholder="Description in English">{{ old('description_en', $ticket->description_en) }}</textarea>
                    </div>
                    
                    <!-- الصور الحالية -->
                    @php
                        $images = $uploads->where('file_type', 'image');
                        $videos = $uploads->where('file_type', 'video');
                    @endphp
                    
                    @if($images->count() > 0)
                    <div class="mb-3">
                        <label class="form-label">الصور الحالية</label>
                        <div class="d-flex flex-wrap">
                            @foreach($images as $image)
                                <div class="existing-file">
                                    <img src="{{ asset('storage/' . $image->file_path) }}" alt="صورة">
                                    <a href="{{ route('admin.tickets.delete-upload', $image->id) }}" class="delete-btn" onclick="return confirm('هل أنت متأكد من حذف هذه الصورة؟')">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                    
                    <!-- رفع صور جديدة -->
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fa fa-images me-2 text-primary"></i>إضافة صور جديدة
                        </label>
                        <input type="file" class="form-control" name="images[]" multiple>
                        <div id="imagePreview" class="d-flex flex-wrap gap-2 mt-2"></div>
                    </div>
                    
                    <!-- الفيديوهات الحالية -->
                    @if($videos->count() > 0)
                    <div class="mb-3">
                        <label class="form-label">الفيديوهات الحالية</label>
                        <div>
                            @foreach($videos as $video)
                                <div class="d-inline-flex align-items-center bg-light border rounded p-2 m-1">
                                    <i class="fa fa-video text-danger me-2"></i>
                                    <span>{{ basename($video->file_path) }}</span>
                                    <a href="{{ route('admin.tickets.delete-upload', $video->id) }}" class="btn btn-sm btn-danger ms-2" onclick="return confirm('هل أنت متأكد من حذف هذا الفيديو؟')">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                    
                    <!-- رفع فيديوهات جديدة -->
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fa fa-video me-2 text-danger"></i>إضافة فيديوهات جديدة
                        </label>
                        <input type="file" class="form-control" name="videos[]" multiple>
                        <div id="videoPreview" class="mt-2"></div>
                    </div>
                    
                    <!-- تفاصيل الجولة -->
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fa fa-list-ol me-2 text-success"></i>تفاصيل الجولة
                        </label>
                        <div id="tripScheduleContainer">
                            <!-- سيتم إضافة الصفوف هنا -->
                        </div>
                        <button type="button" class="btn btn-outline-success btn-sm mt-2" onclick="addTripScheduleRow()">
                            <i class="fa fa-plus me-1"></i>إضافة نشاط
                        </button>
                    </div>
                </div>
                
                <div class="col-md-4 order-md-1">
                    <!-- المدينة -->
                    <div class="mb-3">
                        <label for="city_id" class="form-label">المدينة</label>
                        <select class="form-select" id="city_id" name="city_id">
                            <option value="">اختر المدينة</option>
                            @foreach($cities as $city)
                                <option value="{{ $city->id }}" {{ old('city_id', $ticket->city_id) == $city->id ? 'selected' : '' }}>
                                    {{ $city->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="sub_city_id" class="form-label">المدينة الفرعية</label>
                        <select class="form-select" id="sub_city_id" name="sub_city_id">
                            <option value="">اختر المدينة الفرعية</option>
                        </select>
                    </div>
                    
                    <input type="hidden" name="category_id" id="final_category_id" value="{{ old('category_id', $ticket->category_id) }}">

                    <!-- القسم الرئيسي -->
                    <div class="mb-3">
                        <label for="parent_category" class="form-label">القسم الرئيسي</label>
                        <select class="form-select" id="parent_category">
                            <option value="">اختر القسم الرئيسي</option>
                        </select>
                    </div>

                    <!-- القسم الفرعي -->
                    <div class="mb-3" id="subCategoryDiv" style="display: none;">
                        <label for="sub_category" class="form-label">القسم الفرعي</label>
                        <select class="form-select" id="sub_category">
                            <option value="">اختر القسم الفرعي</option>
                        </select>
                    </div>
                    
                    <!-- السعر الأساسي -->
                    <div class="mb-3">
                        <label for="price" class="form-label">السعر الأساسي *</label>
                        <input type="number" class="form-control" id="price" name="price" value="{{ old('price', $ticket->price) }}" step="0.01" required>
                        <small class="text-muted">هذا السعر سيُستخدم افتراضياً لأي خيار بدون سعر محدد</small>
                    </div>
                    
                    <!-- نوع التذكرة -->
                    <div class="mb-3">
                        <label for="ticket_type" class="form-label">نوع التذكرة *</label>
                        <select class="form-select" id="ticket_type" name="ticket_type" required onchange="toggleTicketOptions()">
                            <option value="cinema" {{ old('ticket_type', $ticket->ticket_type) == 'cinema' ? 'selected' : '' }}>سينما</option>
                            <option value="trip" {{ old('ticket_type', $ticket->ticket_type) == 'trip' ? 'selected' : '' }}>رحلة</option>
                        </select>
                    </div>
                    
                    <!-- خيارات التذاكر -->
                    <div class="mb-3" id="ticketOptionsSection">
                        <label class="form-label" id="ticketOptionsLabel">
                            <i class="fa fa-tags me-2 text-primary"></i><span id="ticketOptionsTitle">خيارات التذاكر</span>
                        </label>
                        <div class="alert alert-info py-2 mb-2">
                            <small><i class="fa fa-info-circle me-1"></i><span id="ticketOptionsHint">أضف خيارات مختلفة للتذكرة. إذا لم تكتب سعر، سيُستخدم السعر الأساسي.</span></small>
                        </div>
                        <div id="ticketOptionsContainer">
                            <!-- سيتم تحميل الخيارات الموجودة هنا -->
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm mt-2" onclick="addTicketOption()">
                            <i class="fa fa-plus me-1"></i><span id="addOptionBtnText">إضافة خيار</span>
                        </button>
                    </div>
                    
                    <!-- التواريخ والأوقات -->
                    <div class="mb-3">
                        <label for="event_date" class="form-label">تاريخ الفعالية</label>
                        <input type="date" class="form-control" id="event_date" name="event_date" value="{{ old('event_date', $ticket->event_date ? $ticket->event_date->format('Y-m-d') : '') }}">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">نوع الإتاحة *</label>
                        <select class="form-select" name="availability" id="availability" required onchange="toggleAvailabilityFields()">
                            <option value="daily" {{ old('availability', $ticket->availability) == 'daily' ? 'selected' : '' }}>يومياً (Daily)</option>
                            <option value="specific_dates" {{ old('availability', $ticket->availability) == 'specific_dates' ? 'selected' : '' }}>تواريخ محددة</option>
                        </select>
                    </div>
                    
                    <!-- حقول يومياً -->
                    <div id="dailyFields">
                        <div class="mb-3">
                            <label for="start_date" class="form-label">تاريخ البداية</label>
                            <input type="date" class="form-control" id="start_date" name="start_date" value="{{ old('start_date', $ticket->start_date ? $ticket->start_date->format('Y-m-d') : '') }}">
                        </div>
                        
                        <div class="mb-3">
                            <label for="end_date" class="form-label">تاريخ النهاية</label>
                            <input type="date" class="form-control" id="end_date" name="end_date" value="{{ old('end_date', $ticket->end_date ? $ticket->end_date->format('Y-m-d') : '') }}">
                        </div>
                    </div>
                    
                    <!-- حقول تواريخ محددة -->
                    <div id="specificDatesFields" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">التواريخ المتاحة</label>
                            <div class="d-flex gap-2 mb-2">
                                <input type="date" class="form-control" id="newDateInput">
                                <button type="button" class="btn btn-success" onclick="addSpecificDate()">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                            <div id="specificDatesContainer" class="d-flex flex-wrap gap-2 mt-3">
                                <!-- التواريخ المحددة ستظهر هنا -->
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="start_time" class="form-label">وقت البداية</label>
                        <input type="time" class="form-control" id="start_time" name="start_time" value="{{ old('start_time', $ticket->start_time) }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="end_time" class="form-label">وقت النهاية</label>
                        <input type="time" class="form-control" id="end_time" name="end_time" value="{{ old('end_time', $ticket->end_time) }}">
                    </div>
                </div>
            </div>
            
            <div class="mt-4">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fa fa-save me-2"></i>حفظ التعديلات
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
// التبديل بين حقول نوع الإتاحة
function toggleAvailabilityFields() {
    const availability = document.getElementById('availability').value;
    const dailyFields = document.getElementById('dailyFields');
    const specificDatesFields = document.getElementById('specificDatesFields');
    
    if (availability === 'daily') {
        dailyFields.style.display = 'block';
        specificDatesFields.style.display = 'none';
    } else {
        dailyFields.style.display = 'none';
        specificDatesFields.style.display = 'block';
    }
}

// إضافة تاريخ محدد
let specificDatesCount = 0;
function addSpecificDate() {
    const dateInput = document.getElementById('newDateInput');
    const dateValue = dateInput.value;
    
    if (!dateValue) {
        alert('الرجاء اختيار تاريخ');
        return;
    }
    
    const container = document.getElementById('specificDatesContainer');
    const dateObj = new Date(dateValue);
    const dayNames = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
    const monthNames = ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'];
    
    const dayName = dayNames[dateObj.getDay()];
    const day = dateObj.getDate();
    const month = monthNames[dateObj.getMonth()];
    
    const dateCard = document.createElement('div');
    dateCard.className = 'date-card';
    dateCard.innerHTML = `
        <input type="hidden" name="specific_dates[]" value="${dateValue}">
        <div class="date-card__day">${dayName}</div>
        <div class="date-card__date">${day} ${month}</div>
        <button type="button" class="date-card__remove" onclick="removeSpecificDate(this)">
            <i class="fa fa-times"></i>
        </button>
    `;
    container.appendChild(dateCard);
    
    dateInput.value = '';
    specificDatesCount++;
}

function removeSpecificDate(btn) {
    btn.closest('.date-card').remove();
    specificDatesCount--;
}

// ===== خيارات التذاكر الديناميكية =====
let ticketOptionIndex = 0;
let currentTicketType = 'trip';

function toggleTicketOptions() {
    const ticketType = document.getElementById('ticket_type').value;
    currentTicketType = ticketType;
    
    const titleEl = document.getElementById('ticketOptionsTitle');
    const hintEl = document.getElementById('ticketOptionsHint');
    const addBtnEl = document.getElementById('addOptionBtnText');
    
    if (ticketType === 'cinema') {
        titleEl.textContent = 'درجات التذاكر';
        hintEl.textContent = 'أضف درجات مختلفة للتذكرة (مثل: VIP، عادي، اقتصادي). إذا لم تكتب سعر، سيُستخدم السعر الأساسي.';
        addBtnEl.textContent = 'إضافة درجة';
    } else {
        titleEl.textContent = 'خيارات التذاكر';
        hintEl.textContent = 'أضف خيارات مختلفة للتذكرة (مثل: بالغ، طفل، عائلة). إذا لم تكتب سعر، سيُستخدم السعر الأساسي.';
        addBtnEl.textContent = 'إضافة خيار';
    }
    
    updatePlaceholders();
}

function updatePlaceholders() {
    const inputs = document.querySelectorAll('.ticket-option-row input[type="text"]');
    const placeholder = currentTicketType === 'cinema' 
        ? 'درجة التذكرة (مثال: VIP، عادي)' 
        : 'الوصف (مثال: بالغ 12+ سنة)';
    
    inputs.forEach(input => {
        input.placeholder = placeholder;
    });
}

function addTicketOption(description = '', price = '') {
    const container = document.getElementById('ticketOptionsContainer');
    const placeholder = currentTicketType === 'cinema' 
        ? 'درجة التذكرة (مثال: VIP، عادي)' 
        : 'الوصف (مثال: بالغ 12+ سنة)';
    
    const row = document.createElement('div');
    row.className = 'row mb-2 ticket-option-row align-items-center';
    row.innerHTML = `
        <div class="col-md-6">
            <input type="text" class="form-control" name="ticket_options[${ticketOptionIndex}][description]" placeholder="${placeholder}" value="${description}" required>
        </div>
        <div class="col-md-4">
            <input type="number" class="form-control" name="ticket_options[${ticketOptionIndex}][price]" placeholder="السعر (اختياري)" step="0.01" value="${price}">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-danger btn-sm w-100" onclick="removeTicketOption(this)">
                <i class="fa fa-trash"></i>
            </button>
        </div>
    `;
    container.appendChild(row);
    ticketOptionIndex++;
}

function removeTicketOption(button) {
    button.closest('.ticket-option-row').remove();
}

// ===== تفاصيل الجولة =====
let tripScheduleIndex = 0;

function addTripScheduleRow(time = '', activity = '') {
    const container = document.getElementById('tripScheduleContainer');
    const row = document.createElement('div');
    row.className = 'row mb-2 trip-schedule-row';
    row.innerHTML = `
        <div class="col-md-3">
            <input type="time" class="form-control" name="trip_schedules[${tripScheduleIndex}][time]" value="${time}">
        </div>
        <div class="col-md-8">
            <input type="text" class="form-control" name="trip_schedules[${tripScheduleIndex}][activity]" placeholder="النشاط" value="${activity}">
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-danger btn-sm" onclick="removeTripScheduleRow(this)">
                <i class="fa fa-trash"></i>
            </button>
        </div>
    `;
    container.appendChild(row);
    tripScheduleIndex++;
}

function removeTripScheduleRow(button) {
    button.closest('.trip-schedule-row').remove();
}

// ===== الفلترة الديناميكية =====
function updateFinalCategoryId() {
    const parentVal = document.getElementById('parent_category').value;
    const subVal = document.getElementById('sub_category').value;
    document.getElementById('final_category_id').value = subVal || parentVal;
}

// تحميل عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    toggleAvailabilityFields();
    toggleTicketOptions();
    
    // تحميل المدن الفرعية والأقسام إذا كانت المدينة محددة
    const cityId = document.getElementById('city_id').value;
    const ticketSubCityId = {{ $ticket->sub_city_id ?? 'null' }};
    const ticketCategoryId = {{ $ticket->category_id ?? 'null' }};
    
    if (cityId) {
        fetch(`/api/subcities-by-city/${cityId}`)
            .then(response => response.json())
            .then(data => {
                const subCitySelect = document.getElementById('sub_city_id');
                data.forEach(subCity => {
                    const option = document.createElement('option');
                    option.value = subCity.id;
                    option.textContent = subCity.name;
                    if (ticketSubCityId && subCity.id == ticketSubCityId) {
                        option.selected = true;
                    }
                    subCitySelect.appendChild(option);
                });
                
                if (ticketSubCityId) {
                    loadCategories(ticketSubCityId, ticketCategoryId);
                }
            });
    }
    
    // تحميل خيارات التذاكر الموجودة
    @if($ticket->ticketOptions && $ticket->ticketOptions->count() > 0)
        @foreach($ticket->ticketOptions as $option)
            addTicketOption('{{ $option->description }}', '{{ $option->price ?? '' }}');
        @endforeach
    @endif
    
    // تحميل تفاصيل الجولة الموجودة
    @if($ticket->tripSchedules && $ticket->tripSchedules->count() > 0)
        @foreach($ticket->tripSchedules as $schedule)
            addTripScheduleRow('{{ $schedule->time ?? '' }}', '{{ $schedule->activity }}');
        @endforeach
    @endif
    
    // تحميل التواريخ المحددة الموجودة
    @if($ticket->ticketDates && $ticket->ticketDates->count() > 0)
        @foreach($ticket->ticketDates as $date)
            const container = document.getElementById('specificDatesContainer');
            const dateObj = new Date('{{ $date->date }}');
            const dayNames = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
            const monthNames = ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'];
            
            const dateCard = document.createElement('div');
            dateCard.className = 'date-card';
            dateCard.innerHTML = `
                <input type="hidden" name="specific_dates[]" value="{{ $date->date }}">
                <div class="date-card__day">${dayNames[dateObj.getDay()]}</div>
                <div class="date-card__date">${dateObj.getDate()} ${monthNames[dateObj.getMonth()]}</div>
                <button type="button" class="date-card__remove" onclick="removeSpecificDate(this)">
                    <i class="fa fa-times"></i>
                </button>
            `;
            container.appendChild(dateCard);
        @endforeach
    @endif
});

function loadCategories(subCityId, selectedCategoryId) {
    fetch(`/api/categories-by-subcity/${subCityId}`)
        .then(response => response.json())
        .then(data => {
            const parentCategorySelect = document.getElementById('parent_category');
            parentCategorySelect.innerHTML = '<option value="">اختر القسم الرئيسي</option>';
            const categories = data.categories || data;
            
            categories.forEach(category => {
                const option = document.createElement('option');
                option.value = category.id;
                option.textContent = category.name;
                if (selectedCategoryId && category.id == selectedCategoryId) {
                    option.selected = true;
                }
                parentCategorySelect.appendChild(option);
            });
            
            updateFinalCategoryId();
        });
}

// Event listeners للفلترة
document.getElementById('city_id').addEventListener('change', function() {
    const cityId = this.value;
    const subCitySelect = document.getElementById('sub_city_id');
    const parentCategorySelect = document.getElementById('parent_category');
    
    subCitySelect.innerHTML = '<option value="">اختر المدينة الفرعية</option>';
    parentCategorySelect.innerHTML = '<option value="">اختر القسم الرئيسي</option>';
    document.getElementById('final_category_id').value = '';
    
    if (cityId) {
        fetch(`/api/subcities-by-city/${cityId}`)
            .then(response => response.json())
            .then(data => {
                data.forEach(subCity => {
                    const option = document.createElement('option');
                    option.value = subCity.id;
                    option.textContent = subCity.name;
                    subCitySelect.appendChild(option);
                });
            });
    }
});

document.getElementById('sub_city_id').addEventListener('change', function() {
    const subCityId = this.value;
    const parentCategorySelect = document.getElementById('parent_category');
    
    parentCategorySelect.innerHTML = '<option value="">اختر القسم الرئيسي</option>';
    document.getElementById('final_category_id').value = '';
    
    if (subCityId) {
        loadCategories(subCityId, null);
    }
});

document.getElementById('parent_category').addEventListener('change', function() {
    updateFinalCategoryId();
});
</script>
@endpush
@endsection