@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;
}
</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">إضافة تذكرة جديدة</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.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <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') }}" required>
                    </div>
                    

                    
                    <div class="mb-3">
                        <label for="description" class="form-label">الوصف (عربي)</label>
                        <textarea class="form-control" id="description" name="description" rows="4">{{ old('description') }}</textarea>
                    </div>
                    

                    
                    <!-- رفع الصور المتعددة -->
                    <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[]" accept="image/*" multiple>

                        <div id="imagePreview" class="d-flex flex-wrap gap-2 mt-2"></div>
                    </div>
                    
                    <!-- رفع الفيديوهات المتعددة -->
                    <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[]" accept="video/*" 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') == $city->id || (isset($selectedCityId) && $selectedCityId == $city->id)) ? 'selected' : '' }}>
                                    {{ $city->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="sub_city_id" class="form-label">المدينة الفرعية (Sub City)</label>
                        <select class="form-select" id="sub_city_id" name="sub_city_id">
                            <option value="">اختر المدينة الفرعية</option>
                        </select>
                        <small class="text-muted">سيظهر بعد اختيار المدينة</small>
                    </div>
                    
                    <!-- Hidden field for actual category_id -->
                    <input type="hidden" name="category_id" id="final_category_id" value="{{ old('category_id', $selectedCategory->id ?? '') }}">

                    <!-- القسم الرئيسي -->
                    <div class="mb-3">
                        <label for="parent_category" class="form-label">القسم الرئيسي</label>
                        <select class="form-select" id="parent_category">
                            <option value="">اختر القسم الرئيسي</option>
                        </select>
                        <small class="text-muted">سيظهر بعد اختيار المدينة الفرعية</small>
                    </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>
                        <small class="text-muted">اختر القسم الفرعي (المنتجات مرتبطة به)</small>
                    </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') }}" 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') == 'cinema' ? 'selected' : '' }}>سينما</option>
                            <option value="trip" {{ old('ticket_type', 'trip') == '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') }}">
                    </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') == 'daily' ? 'selected' : '' }}>يومياً (Daily)</option>
                            <option value="specific_dates" {{ old('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') }}">
                        </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') }}">
                        </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>
                            <small class="text-muted">اختر التواريخ المحددة التي ستكون التذكرة متاحة فيها</small>
                        </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') }}">
                    </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') }}">
                    </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--;
}

// تفعيل عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    toggleAvailabilityFields();
});

// معاينة الصور
document.querySelector('input[name="images[]"]').addEventListener('change', function(e) {
    const preview = document.getElementById('imagePreview');
    preview.innerHTML = '';
    
    Array.from(e.target.files).forEach(file => {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.width = '80px';
            img.style.height = '80px';
            img.style.objectFit = 'cover';
            img.style.borderRadius = '8px';
            img.style.border = '2px solid #ddd';
            preview.appendChild(img);
        };
        reader.readAsDataURL(file);
    });
});

// معاينة الفيديوهات
document.querySelector('input[name="videos[]"]').addEventListener('change', function(e) {
    const preview = document.getElementById('videoPreview');
    preview.innerHTML = '';
    
    Array.from(e.target.files).forEach(file => {
        const badge = document.createElement('span');
        badge.className = 'badge bg-danger me-2';
        badge.innerHTML = '<i class="fa fa-video me-1"></i>' + file.name;
        preview.appendChild(badge);
    });
});

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

function addTripScheduleRow() {
    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]" placeholder="الوقت">
        </div>
        <div class="col-md-8">
            <input type="text" class="form-control" name="trip_schedules[${tripScheduleIndex}][activity]" placeholder="النشاط">
        </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();
}

// ===== خيارات التذاكر الديناميكية =====
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 = 'إضافة خيار';
    }
    
    // تحديث الـ placeholder للحقول الموجودة
    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() {
    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}" required>
        </div>
        <div class="col-md-4">
            <input type="number" class="form-control" name="ticket_options[${ticketOptionIndex}][price]" placeholder="السعر (اختياري)" step="0.01">
        </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();
}

// تفعيل عرض/إخفاء خيارات التذاكر عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    toggleTicketOptions();
});

// ===== الفلترة الديناميكية =====

// تحديث قيمة حقل الفئة النهائي
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.getElementById('city_id').addEventListener('change', function() {
    const cityId = this.value;
    const subCitySelect = document.getElementById('sub_city_id');
    const parentCategorySelect = document.getElementById('parent_category');
    const subCategorySelect = document.getElementById('sub_category');
    const subCategoryDiv = document.getElementById('subCategoryDiv');
    
    // إعادة تعيين القوائم
    subCitySelect.innerHTML = '<option value="">اختر المدينة الفرعية</option>';
    parentCategorySelect.innerHTML = '<option value="">اختر القسم الرئيسي</option>';
    subCategorySelect.innerHTML = '<option value="">اختر القسم الفرعي</option>';
    subCategoryDiv.style.display = 'none';
    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);
                });
            })
            .catch(error => console.error('Error loading sub-cities:', error));
    }
});

// عند تغيير المدينة الفرعية - تحميل الأقسام الرئيسية
document.getElementById('sub_city_id').addEventListener('change', function() {
    const subCityId = this.value;
    const parentCategorySelect = document.getElementById('parent_category');
    const subCategorySelect = document.getElementById('sub_category');
    const subCategoryDiv = document.getElementById('subCategoryDiv');
    
    // إعادة تعيين الأقسام
    parentCategorySelect.innerHTML = '<option value="">اختر القسم الرئيسي</option>';
    subCategorySelect.innerHTML = '<option value="">اختر القسم الفرعي</option>';
    subCategoryDiv.style.display = 'none';
    document.getElementById('final_category_id').value = '';
    
    if (subCityId) {
        // تحميل الأقسام المرتبطة بالمدينة الفرعية
        fetch(`/api/categories-by-subcity/${subCityId}`)
            .then(response => response.json())
            .then(data => {
                const categories = data.categories || data;
                categories.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category.id;
                    option.textContent = category.name;
                    parentCategorySelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error loading categories:', error));
    }
});

// عند تغيير القسم الرئيسي - تحميل الأقسام الفرعية
document.getElementById('parent_category').addEventListener('change', function() {
    updateFinalCategoryId();
    const parentId = this.value;
    const subCategorySelect = document.getElementById('sub_category');
    const subCategoryDiv = document.getElementById('subCategoryDiv');
    
    subCategorySelect.innerHTML = '<option value="">اختر القسم الفرعي</option>';
    subCategoryDiv.style.display = 'none';
    
    if (parentId) {
        fetch(`/api/subcategories-by-category/${parentId}`)
            .then(response => response.json())
            .then(data => {
                if (data && data.length > 0) {
                    subCategoryDiv.style.display = 'block';
                    data.forEach(category => {
                        const option = document.createElement('option');
                        option.value = category.id;
                        option.textContent = category.name;
                        subCategorySelect.appendChild(option);
                    });
                }
            })
            .catch(error => console.error('Error loading sub-categories:', error));
    }
});

// عند تغيير القسم الفرعي
document.getElementById('sub_category').addEventListener('change', function() {
    updateFinalCategoryId();
});

// ===== تحميل تلقائي عند فتح الصفحة =====
document.addEventListener('DOMContentLoaded', function() {
    toggleAvailabilityFields();

    const selectedCityId = {{ $selectedCityId ?? 'null' }};
    const selectedSubCityId = {{ $selectedSubCityId ?? 'null' }};
    // $selectedCategory could be a child or a parent. 
    // If it's a child, we need to know its parent to pre-fill parent_category
    @php
        $initParentId = 'null';
        $initChildId = 'null';
        if(isset($selectedCategory)) {
            if($selectedCategory->parent_id) {
                $initParentId = $selectedCategory->parent_id;
                $initChildId = $selectedCategory->id;
            } else {
                $initParentId = $selectedCategory->id;
            }
        }
    @endphp
    
    const initParentId = {{ $initParentId }};
    const initChildId = {{ $initChildId }};
    
    if (selectedCityId) {
        fetch(`/api/subcities-by-city/${selectedCityId}`)
            .then(response => response.json())
            .then(data => {
                const subCitySelect = document.getElementById('sub_city_id');
                subCitySelect.innerHTML = '<option value="">اختر المدينة الفرعية</option>';
                data.forEach(subCity => {
                    const option = document.createElement('option');
                    option.value = subCity.id;
                    option.textContent = subCity.name;
                    if (selectedSubCityId && subCity.id == selectedSubCityId) {
                        option.selected = true;
                    }
                    subCitySelect.appendChild(option);
                });
                
                if (selectedSubCityId) {
                    fetch(`/api/categories-by-subcity/${selectedSubCityId}`)
                        .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 (initParentId && category.id == initParentId) {
                                    option.selected = true;
                                }
                                parentCategorySelect.appendChild(option);
                            });

                            // Load sub-categories if parent is selected
                            if(initParentId) {
                                fetch(`/api/subcategories-by-category/${initParentId}`)
                                    .then(res => res.json())
                                    .then(subData => {
                                        if (subData && subData.length > 0) {
                                            const subCategoryDiv = document.getElementById('subCategoryDiv');
                                            const subCategorySelect = document.getElementById('sub_category');
                                            
                                            subCategoryDiv.style.display = 'block';
                                            subData.forEach(cat => {
                                                const opt = document.createElement('option');
                                                opt.value = cat.id;
                                                opt.textContent = cat.name;
                                                if(initChildId && cat.id == initChildId) {
                                                    opt.selected = true;
                                                }
                                                subCategorySelect.appendChild(opt);
                                            });
                                        }
                                        updateFinalCategoryId();
                                    });
                            }
                        });
                }
            });
    }
});
</script>
@endpush
@endsection