// resources/views/member/live-streams/tour-request.blade.php
@extends('layouts.member')

@section('title', 'طلب جولة رسمية')

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <!-- Page Header -->
    <div class="mb-6">
        <nav class="flex mb-4" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3 space-x-reverse">
                <li class="inline-flex items-center">
                    <a href="{{ route('member.dashboard') }}" 
                       class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                        الرئيسية
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-400 rotate-180" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="mr-1 text-sm font-medium text-gray-500 md:mr-2 dark:text-gray-400">طلب جولة رسمية</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">طلب جولة رسمية</h1>
                <p class="text-gray-600 dark:text-gray-400">قم بتقديم طلب لإجراء جولة رسمية في موقع الحرم الشريف</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Form -->
        <div class="lg:col-span-2">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">معلومات الجولة المطلوبة</h2>
                </div>
                
                <form method="POST" action="{{ route('member.request-tour.store') }}" class="p-6">
                    @csrf
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Tour Type -->
                        <div>
                            <label for="tour_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                نوع الجولة <span class="text-red-500">*</span>
                            </label>
                            <select id="tour_type" 
                                    name="tour_type" 
                                    required
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">اختر نوع الجولة</option>
                                <option value="educational" {{ old('tour_type') == 'educational' ? 'selected' : '' }}>تعليمية</option>
                                <option value="entertainment" {{ old('tour_type') == 'entertainment' ? 'selected' : '' }}>ترفيهية</option>
                                <option value="religious" {{ old('tour_type') == 'religious' ? 'selected' : '' }}>دينية</option>
                            </select>
                        </div>
                        
                        <!-- باقي الحقول موجودة في الـ artifact أعلاه -->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection