@extends('layouts.app')

@section('title', $ticket->translatedTitle)

@section('content')
<div class="ticket-selection-page">
    {{-- Header --}}
    <div class="ticket-header">
        <button type="button" class="back-btn" onclick="history.back()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="20" height="20">
                <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
        </button>
        <div class="ticket-header-info">
            <h1 class="ticket-title">{{ $ticket->translatedTitle }}</h1>
            <div class="ticket-datetime">
                <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="1.5" width="18" height="18">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                </svg>
                <span>{{ $dateDisplay ?? request('date_display', 'الخميس 08 يناير') }} {{ request('time', '21:00-04:00') }}</span>
            </div>
        </div>
    </div>

    {{-- Date Selection Bar --}}
    <div class="date-selection-bar" onclick="history.back()">
        <span>{{ $dateDisplay ?? request('date_display', 'الخميس 08 يناير') }} {{ request('time', '21:00-04:00') }}</span>
        <div class="date-icons">
            <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" width="20" height="20">
                <polyline points="6 9 12 15 18 9"></polyline>
            </svg>
            <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="1.5" width="20" height="20">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="16" y1="2" x2="16" y2="6"></line>
                <line x1="8" y1="2" x2="8" y2="6"></line>
                <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
        </div>
    </div>

    {{-- Main Content --}}
    <div class="ticket-content">
        <h2 class="section-title">{{ $ticket->translatedTitle }}</h2>

        <form id="ticketSelectionForm" action="{{ route('checkout.login', $ticket->id) }}" method="GET">
            <input type="hidden" name="date" value="{{ $date ?? request('date') }}">
            <input type="hidden" name="date_display" value="{{ $dateDisplay ?? request('date_display') }}">
            <input type="hidden" name="time" value="{{ request('time', '21:00-04:00') }}">

            {{-- Regular Tickets Section --}}
            @php
                // جلب السعر من التاريخ المحدد أو من التذكرة
                $selectedDate = request('date');
                $ticketPrice = $ticket->price;
                
                if($selectedDate) {
                    $datePrice = \App\Models\TicketDate::where('ticket_id', $ticket->id)
                        ->where('date', $selectedDate)
                        ->where('is_active', true)
                        ->value('price');
                    if($datePrice) {
                        $ticketPrice = $datePrice;
                    }
                }
                
                // جلب رمز العملة
                $currencyCode = '';
                if ($ticket->category && $ticket->category->city) {
                    $currencyCode = $ticket->category->city->currency_code ?? 'USD';
                }
                
                // جلب خيارات التذاكر الديناميكية
                $ticketOptions = \App\Models\TicketOption::where('ticket_id', $ticket->id)
                    ->where('is_active', true)
                    ->orderBy('sort_order', 'asc')
                    ->get();
            @endphp
            
            @if($ticketOptions->count() > 0)
                {{-- عرض الخيارات الديناميكية --}}
                <div class="ticket-category">
                    <div class="category-header">
                        <span class="info-icon">ℹ</span>
                        <span class="category-note">{{ __('messages.for_more_info') }}</span>
                    </div>

                    @foreach($ticketOptions as $index => $option)
                        @php
                            // لو السعر فاضي → استخدم السعر الأساسي
                            $optionPrice = $option->price ?? $ticketPrice;
                        @endphp
                        <div class="ticket-option">
                            <div class="ticket-info">
                                <h3 class="ticket-name">{{ $option->translatedDescription }}</h3>
                                <p class="ticket-price">{{ $currencyCode }} {{ number_format($optionPrice, 2) }}</p>
                            </div>
                            <div class="quantity-selector">
                                <button type="button" class="qty-btn" onclick="updateQuantity('option_{{ $option->id }}', -1)">−</button>
                                <input type="number" name="option_{{ $option->id }}" id="option_{{ $option->id }}" value="0" min="0" max="20" readonly data-price="{{ $optionPrice }}">
                                <button type="button" class="qty-btn" onclick="updateQuantity('option_{{ $option->id }}', 1)">+</button>
                            </div>
                        </div>
                    @endforeach
                </div>
            @elseif($ticketPrice > 0)
                {{-- الخيارات الافتراضية (بالغ/طفل) لو مفيش خيارات ديناميكية --}}
                <div class="ticket-category">
                    <div class="category-header">
                        <span class="info-icon">ℹ</span>
                        <span class="category-note">{{ __('messages.for_more_info') }}</span>
                    </div>

                    {{-- Adult Ticket --}}
                    <div class="ticket-option">
                        <div class="ticket-info">
                            <h3 class="ticket-name">{{ __('messages.adult_ticket_desc') }}</h3>
                            <p class="ticket-price">{{ $currencyCode }} {{ number_format($ticketPrice, 2) }}</p>
                        </div>
                        <div class="quantity-selector">
                            <button type="button" class="qty-btn" onclick="updateQuantity('adults', -1)">−</button>
                            <input type="number" name="adults" id="adults" value="0" min="0" max="20" readonly data-price="{{ $ticketPrice }}">
                            <button type="button" class="qty-btn" onclick="updateQuantity('adults', 1)">+</button>
                        </div>
                    </div>

                    {{-- Child Ticket --}}
                    <div class="ticket-option">
                        <div class="ticket-info">
                            <h3 class="ticket-name">{{ __('messages.child_ticket_desc') }}</h3>
                            <p class="ticket-price">{{ $currencyCode }} {{ number_format($ticketPrice * 0.7, 2) }}</p>
                        </div>
                        <div class="quantity-selector">
                            <button type="button" class="qty-btn" onclick="updateQuantity('children', -1)">−</button>
                            <input type="number" name="children" id="children" value="0" min="0" max="20" readonly data-price="{{ $ticketPrice * 0.7 }}">
                            <button type="button" class="qty-btn" onclick="updateQuantity('children', 1)">+</button>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Private Tours Section - تم حذف هذا القسم --}}

            {{-- Continue Button --}}
            <button type="submit" class="continue-btn" id="continueBtn" disabled>
                {{ __('messages.continue') }}
            </button>
        </form>
    </div>
</div>
@endsection

@push('styles')
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    background: #fff;
}

.ticket-selection-page {
    min-height: 100vh;
    background: #fff;
    padding-bottom: 100px;
}

/* Header */
.ticket-header {
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* direction inherited */
}

.back-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 4px;
}

.back-btn svg {
    stroke: #000;
}

.ticket-header-info {
    flex: 1;
}

.ticket-title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.ticket-datetime {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

/* Date Selection Bar */
.date-selection-bar {
    margin: 16px 20px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    /* direction inherited */
    transition: all 0.2s;
}

.date-selection-bar:hover {
    border-color: #ccc;
    background: #fafafa;
}

.date-selection-bar span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.date-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Main Content */
.ticket-content {
    padding: 0 20px;
}

.section-title {
    font-size: 20px;
    font-weight: 800;
    color: #000;
    margin: 24px 0 20px 0;
    text-align: right;
}

/* Ticket Category */
.ticket-category {
    margin-bottom: 24px;
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}

.info-icon {
    width: 20px;
    height: 20px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.category-note {
    font-size: 13px;
    color: #666;
}

/* Ticket Option */
.ticket-option {
    background: #fff;
    border: 1.5px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* direction inherited */
    transition: all 0.2s;
}

.ticket-option:hover {
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ticket-info {
    flex: 1;
    text-align: start;
}

.ticket-name {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin: 0 0 6px 0;
}

.price-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.discount-badge {
    background: #4caf50;
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.ticket-price {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin: 0;
}

.original-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    margin: 0;
}

.ticket-note {
    font-size: 12px;
    color: #666;
    margin: 6px 0 0 0;
}

/* Quantity Selector */
.quantity-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
}

.qty-btn {
    width: 44px;
    height: 44px;
    border: 2px solid #e0e0e0;
    background: #fff;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.qty-btn:hover {
    border-color: #000;
    background: #fafafa;
}

.qty-btn:active {
    transform: scale(0.95);
}

.quantity-selector input {
    width: 50px;
    height: 44px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

/* Continue Button */
.continue-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    padding: 18px;
    background: #e8eaed;
    color: #a8a8a8;
    border: none;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    cursor: not-allowed;
    transition: all 0.3s;
    z-index: 100;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

.continue-btn:not(:disabled) {
    background: #000;
    color: #fff;
    cursor: pointer;
}

.continue-btn:not(:disabled):hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.continue-btn:not(:disabled):active {
    transform: translateY(0);
}

/* Responsive */
@media (min-width: 768px) {
    .ticket-selection-page {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .continue-btn {
        max-width: 560px;
    }
}

@media (max-width: 480px) {
    .ticket-title {
        font-size: 16px;
    }
    
    .section-title {
        font-size: 18px;
    }
    
    .qty-btn {
        width: 40px;
        height: 40px;
    }
    
    .quantity-selector input {
        width: 45px;
        height: 40px;
    }
}
</style>
@endpush

@push('scripts')
<script>
function updateQuantity(field, change) {
    const input = document.getElementById(field);
    let currentValue = parseInt(input.value) || 0;
    let newValue = currentValue + change;
    
    // Ensure value stays within limits
    if (newValue < 0) newValue = 0;
    if (newValue > 20) newValue = 20;
    
    input.value = newValue;
    
    // Check if any quantity is selected
    checkFormValidity();
}

function checkFormValidity() {
    const form = document.getElementById('ticketSelectionForm');
    const continueBtn = document.getElementById('continueBtn');
    const inputs = form.querySelectorAll('input[type="number"]');
    
    let hasSelection = false;
    inputs.forEach(input => {
        if (parseInt(input.value) > 0) {
            hasSelection = true;
        }
    });
    
    continueBtn.disabled = !hasSelection;
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    checkFormValidity();
});
</script>
@endpush