@extends('layouts.app')

@section('title', __('messages.join_us'))

@section('content')
<div class="join-page">
    {{-- Header --}}
    <div class="join-header">
        <button type="button" class="close-btn" onclick="history.back()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="24" height="24">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
        </button>
        <button type="button" class="next-btn" onclick="skipPhone()">
            <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>

    {{-- Main Content --}}
    <div class="join-content">
        <h1 class="join-title">{{ __('messages.join_us') }}</h1>
        <p class="join-subtitle">{{ __('messages.join_subtitle') }}</p>

        {{-- Phone Form --}}
        <form action="{{ route('checkout.additional-details', $ticket->id) }}" method="GET" id="phoneForm">
            {{-- Pass all checkout data --}}
            <input type="hidden" name="date" value="{{ request('date') }}">
            <input type="hidden" name="time" value="{{ request('time') }}">
            <input type="hidden" name="adults" value="{{ request('adults') }}">
            <input type="hidden" name="children" value="{{ request('children') }}">
            <input type="hidden" name="email" value="{{ auth()->user()->email ?? request('email') }}">

            {{-- Phone Input --}}
            <div class="phone-input-group">
                <div class="phone-input-wrapper">
                    <select name="country_code" class="country-select">
                        <option value="+20">🇪🇬 +20</option>
                        <option value="+966">🇸🇦 +966</option>
                        <option value="+971">🇦🇪 +971</option>
                        <option value="+973">🇧🇭 +973</option>
                        <option value="+974">🇶🇦 +974</option>
                        <option value="+965">🇰🇼 +965</option>
                        <option value="+968">🇴🇲 +968</option>
                    </select>
                    <div class="phone-divider"></div>
                    <input type="tel" name="phone" class="phone-input" placeholder="{{ __('messages.phone_number') }}" required pattern="[0-9]{9,12}">
                </div>
            </div>

            {{-- Submit Button --}}
            <button type="submit" class="continue-btn">
                {{ __('messages.continue') }}
            </button>
        </form>
    </div>

    {{-- Bottom Summary --}}
    <div class="checkout-summary-bar">
        @php
            // استخدام الإجمالي المحفوظ من صفحة اختيار التذاكر
            $checkoutTotal = session('checkout_total', 0);
            $checkoutQuantity = session('checkout_quantity', 0);
            
            // إذا لم يكن هناك إجمالي محفوظ، استخدم الحساب القديم
            if ($checkoutTotal > 0) {
                $totalPrice = $checkoutTotal;
            } else {
                $adults = request('adults', 1);
                $children = request('children', 0);
                $totalPrice = ($adults * $ticket->price) + ($children * $ticket->price * 0.7);
            }
            
            // جلب رمز العملة
            $currencyCode = $ticket->category && $ticket->category->city ? $ticket->category->city->currency_code : 'EGP';
        @endphp
        <div class="summary-price">
            <span class="price-amount">{{ $currencyCode }} {{ number_format($totalPrice, 2) }}</span>
        </div>
        <div class="summary-time">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                <circle cx="12" cy="12" r="10"></circle>
                <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            <span class="time-remaining">14:16</span>
            <span class="time-label">{{ __('messages.time_remaining') }}</span>
        </div>
        <button type="button" class="summary-details-btn" onclick="toggleOrderDetails()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                <rect x="3" y="3" width="7" height="7"></rect>
                <rect x="14" y="3" width="7" height="7"></rect>
                <rect x="14" y="14" width="7" height="7"></rect>
                <rect x="3" y="14" width="7" height="7"></rect>
            </svg>
            <span>{{ __('messages.order_details') }}</span>
            <span class="order-count">2x</span>
        </button>
    </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: #fafafa;
}

.join-page {
    min-height: 100vh;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
}

/* Header */
.join-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

.close-btn,
.next-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

.close-btn:hover,
.next-btn:hover {
    background: #f5f5f5;
}

.close-btn svg,
.next-btn svg {
    stroke: #000;
}

/* Main Content */
.join-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}

.join-title {
    font-size: 32px;
    font-weight: 800;
    color: #000;
    text-align: center;
    margin: 0 0 12px 0;
    /* direction inherited */
}

.join-subtitle {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 0 0 48px 0;
    /* direction inherited */
    line-height: 1.6;
    max-width: 400px;
}

/* Phone Input */
.phone-input-group {
    width: 100%;
    margin-bottom: 24px;
}

.phone-input-wrapper {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 4px 16px;
    padding: 4px 16px;
    transition: all 0.2s;
    /* direction inherited */
}

.phone-input-wrapper:focus-within {
    border-color: #2d1b3d;
    box-shadow: 0 0 0 4px rgba(45, 27, 61, 0.1);
}

.country-select {
    border: none;
    background: transparent;
    font-size: 15px;
    color: #000;
    cursor: pointer;
    padding: 14px 8px 14px 0;
    outline: none;
    direction: ltr; /* Country codes usually look better in LTR +20 etc */
}

.phone-divider {
    width: 1px;
    height: 24px;
    background: #e0e0e0;
    margin: 0 12px;
}

.phone-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #000;
    padding: 14px 0;
    padding: 14px 0;
    background: transparent;
    direction: ltr; /* Phone numbers are LTR */
    text-align: start;
}

.phone-input::placeholder {
    color: #999;
}

/* Continue Button */
.continue-btn {
    width: 100%;
    padding: 16px 32px;
    background: #f5f5f5;
    color: #999;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: not-allowed;
    transition: all 0.3s;
    /* direction inherited */
}

.phone-input:valid ~ .continue-btn,
.continue-btn.active {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a0f28 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(45, 27, 61, 0.3);
}

.continue-btn.active:hover {
    background: linear-gradient(135deg, #3d2650 0%, #2d1b3d 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(45, 27, 61, 0.4);
}

/* Bottom Summary Bar */
.checkout-summary-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* direction inherited */
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
    z-index: 100;
}

.summary-price {
    display: flex;
    flex-direction: column;
}

.price-amount {
    font-size: 18px;
    font-weight: 800;
    color: #000;
}

.summary-time {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #e8f5e9;
    border-radius: 8px;
}

.summary-time svg {
    stroke: #4caf50;
}

.time-remaining {
    font-size: 14px;
    font-weight: 700;
    color: #4caf50;
}

.time-label {
    font-size: 12px;
    color: #666;
}

.summary-details-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.summary-details-btn:hover {
    border-color: #bbb;
    background: #fafafa;
}

.summary-details-btn svg {
    stroke: #666;
}

.summary-details-btn span {
    font-size: 13px;
    color: #666;
}

.order-count {
    background: #2d1b3d;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 480px) {
    .join-title {
        font-size: 28px;
    }
    
    .join-subtitle {
        font-size: 13px;
    }
    
    .checkout-summary-bar {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .summary-price {
        order: 1;
        flex: 1;
    }
    
    .summary-details-btn {
        order: 2;
    }
    
    .summary-time {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}
</style>
@endpush

@push('scripts')
<script>
// Enable/disable continue button based on phone input
const phoneInput = document.querySelector('.phone-input');
const continueBtn = document.querySelector('.continue-btn');

phoneInput.addEventListener('input', function() {
    if (this.value.length >= 9) {
        continueBtn.classList.add('active');
        continueBtn.style.cursor = 'pointer';
        continueBtn.disabled = false;
    } else {
        continueBtn.classList.remove('active');
        continueBtn.style.cursor = 'not-allowed';
        continueBtn.disabled = true;
    }
});

function skipPhone() {
    document.getElementById('phoneForm').submit();
}

function toggleOrderDetails() {
    alert('عرض تفاصيل الطلب');
}

// Countdown timer (14:16 example)
let timeRemaining = 14 * 60 + 16; // 14:16 in seconds

function updateTimer() {
    const minutes = Math.floor(timeRemaining / 60);
    const seconds = timeRemaining % 60;
    const timeElement = document.querySelector('.time-remaining');
    
    if (timeElement) {
        timeElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
    }
    
    if (timeRemaining > 0) {
        timeRemaining--;
    } else {
        clearInterval(timerInterval);
        alert('انتهى الوقت المحدد للحجز!');
    }
}

const timerInterval = setInterval(updateTimer, 1000);
updateTimer(); // Initial call
</script>
@endpush