@extends('layouts.app')

@section('title', __('messages.select_tickets') . ' - ' . $ticket->translatedTitle)

@section('content')
<div class="booking-page">
    {{-- Top Section with Gray Background --}}
    <div class="booking-top-section">
        {{-- Ticket Title Bar --}}
        <div class="ticket-title-bar">
            <span class="ticket-title-text">{{ $ticket->translatedTitle }}</span>
            <button type="button" class="back-arrow-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>

        {{-- Date Selector Bar --}}
        <div class="date-selector-bar">
            <div class="selector-dropdown">
                <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>
            </div>
            <div class="selector-calendar">
                <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="1.5" width="22" height="22">
                    <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>

        {{-- Info Text Bar --}}
        <div class="info-text-bar">
            <span>{{ __('messages.please_select_date_time') }}</span>
        </div>
    </div>

    {{-- Bottom Sheet - Date Picker Card --}}
    <div class="date-picker-sheet">
        {{-- Scroll Button at Top Right --}}
        <button type="button" class="sheet-scroll-btn" onclick="scrollDates('left')">
            <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2.5" width="18" height="18">
                <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
        </button>

        {{-- Title --}}
        <h2 class="sheet-title">{{ __('messages.please_select_date_time') }}</h2>

        {{-- Form --}}
        <form action="{{ route('checkout.express-entry', $ticket->id) }}" method="GET" id="datePickerForm">
            <input type="hidden" name="date" id="selected_date_input" required value="{{ old('date') }}">
            
            {{-- Dates Row --}}
            <div class="dates-row">
                {{-- Calendar Icon Box --}}
                <div class="calendar-icon-box" onclick="openCalendarPicker()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="1.5" width="24" height="24">
                        <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>

                {{-- Date Cards --}}
                <div class="dates-scroll-container" id="datesContainer">
                    @foreach($dates as $date)
                    <div class="date-card" onclick="selectDate(this, '{{ $date['val'] }}')">
                        <span class="date-day-name">{{ $date['day_name'] }}</span>
                        <span class="date-number">{{ $date['day'] }} {{ $date['month'] }}</span>
                        <span class="date-price">{{ __('messages.from') }}: {{ number_format($date['price'], 0) }} {{ $currencyCode }}</span>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Apply Button --}}
            <button type="submit" class="apply-btn" id="applyBtn">
                {{ __('messages.apply') }}
            </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;
}

/* Main Page Container */
.booking-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #a0a0a0;
}

/* Top Section with Gray Background */
.booking-top-section {
    background: #a0a0a0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Ticket Title Bar */
.ticket-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    /* direction inherited from body */
}

.ticket-title-text {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    flex: 1;
    flex: 1;
    text-align: start;
    padding-inline-start: 40px;
}

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

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

/* Date Selector Bar */
.date-selector-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    margin: 0 16px;
    padding: 12px 16px;
    border-radius: 8px;
    /* direction inherited */
}

.selector-dropdown,
.selector-calendar {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Info Text Bar */
.info-text-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin: 16px 16px;
    padding: 20px;
    text-align: center;
}

.info-text-bar span {
    color: #333;
    font-size: 15px;
    font-weight: 600;
}

/* Bottom Sheet - Date Picker */
.date-picker-sheet {
    background: #fff;
    border-radius: 28px 28px 0 0;
    padding: 28px 20px 36px;
    position: relative;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
    margin-top: auto;
}

/* Scroll Button - Top Left for RTL */
.sheet-scroll-btn {
    position: absolute;
    top: 24px;
    left: 20px;
    /* RTL adjustment handled via logic or auto-placement if possible, but absolute needs care */
    /* RTL adjustment handled via logic */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.2s;
    z-index: 10;
}

.sheet-scroll-btn:hover {
    background: #fafafa;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: scale(1.05);
}

    transform: scale(0.95);
}

html[dir="rtl"] .sheet-scroll-btn { left: 20px; right: auto; }
html[dir="ltr"] .sheet-scroll-btn { right: 20px; left: auto; }

/* Sheet Title */
.sheet-title {
    font-size: 20px;
    font-weight: 800;
    color: #000;
    color: #000;
    text-align: start;
    margin: 0 0 28px 0;
    /* direction inherited */
    letter-spacing: -0.3px;
}

/* Dates Row */
.dates-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    direction: ltr; /* Dates row order usually LTR for calendar logic, but let's check */
    margin-bottom: 28px;
}
/* For consistent scroll direction match layout */
html[dir="rtl"] .dates-row { direction: rtl; }

/* Calendar Icon Box - On Left Side */
.calendar-icon-box {
    flex: 0 0 auto;
    width: 65px;
    min-height: 90px;
    background: #f8f8f8;
    border: 1.5px solid #e5e5e5;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    order: 1;
}

.calendar-icon-box:hover {
    background: #f0f0f0;
    border-color: #d5d5d5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.calendar-icon-box svg {
    stroke: #666;
}

/* Dates Scroll Container */
.dates-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    flex: 1;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    direction: ltr; /* Ensure horizontal scroll works naturally */
    order: 2;
}
html[dir="rtl"] .dates-scroll-container { direction: rtl; }

.dates-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Date Card */
.date-card {
    flex: 0 0 auto;
    width: 108px;
    min-height: 90px;
    background: #fff;
    border: 1.5px solid #e5e5e5;
    border-radius: 14px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    text-align: center;
}

.date-card:hover {
    border-color: #bbb;
    background: #fafafa;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.date-card.selected {
    border: 2.5px solid #000;
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.date-day-name {
    font-size: 13px;
    font-weight: 500;
    color: #777;
    margin-bottom: 5px;
    display: block;
}

.date-card.selected .date-day-name {
    color: #555;
    font-weight: 600;
}

.date-number {
    font-size: 16px;
    font-weight: 800;
    color: #000;
    margin-bottom: 7px;
    white-space: nowrap;
    display: block;
    letter-spacing: -0.3px;
}

.date-price {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    display: block;
}

.date-card.selected .date-price {
    color: #666;
    font-weight: 600;
}

/* Apply Button */
.apply-btn {
    width: 100%;
    padding: 18px 24px;
    background: #e8eaed;
    color: #a8a8a8;
    border: none;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    cursor: not-allowed;
    transition: all 0.3s;
    text-align: center;
    letter-spacing: -0.2px;
}

.apply-btn.active {
    background: #000;
    color: #fff;
    cursor: pointer;
}

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

.apply-btn.active:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 480px) {
    .date-card {
        width: 95px;
        min-height: 85px;
        padding: 12px 8px;
    }
    
    .calendar-icon-box {
        width: 58px;
        min-height: 85px;
    }
    
    .ticket-title-text {
        font-size: 15px;
    }
    
    .sheet-title {
        font-size: 18px;
    }
    
    .date-number {
        font-size: 15px;
    }
}

@media (max-width: 375px) {
    .date-card {
        width: 88px;
    }
    
    .calendar-icon-box {
        width: 54px;
    }
}
</style>
@endpush

@push('scripts')
<script>
    function scrollDates(direction) {
        const container = document.getElementById('datesContainer');
        const scrollAmount = 200;
        if (direction === 'left') {
            container.scrollLeft -= scrollAmount;
        } else {
            container.scrollLeft += scrollAmount;
        }
    }

    function selectDate(element, dateVal) {
        document.getElementById('selected_date_input').value = dateVal;
        
        document.querySelectorAll('.date-card').forEach(item => {
            item.classList.remove('selected');
        });
        element.classList.add('selected');

        const applyBtn = document.getElementById('applyBtn');
        applyBtn.classList.add('active');
    }

    function openCalendarPicker() {
        alert('Calendar picker coming soon');
    }
</script>
@endpush