{{-- filepath: c:\xampp\htdocs\sites\KoBone\resources\views\form.blade.php --}}
@extends('layouts.app', ['showNavbar' => false])

@section('title', 'Form Page')

@section('content')
<div class="flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg w-full max-w-lg">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 text-center">Fill Your Details</h2>
        @if (session('success'))
            <div class="bg-white text-green-800 p-4 rounded-lg mb-4">
                {{ session('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="bg-red-100 text-red-700 p-4 rounded-lg mb-4">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form action="{{ route('form.store') }}" method="POST" class="space-y-6">
            @csrf
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name (required):</label>
                <input type="text" id="name" name="name" value="{{ old('name') }}" placeholder="Enter your full name" required class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 px-4 py-2 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200">
                @error('name')
                    <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="visa_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Visa Type (required):</label>
                <input type="text" id="visa_type" name="visa_type" value="{{ old('visa_type') }}" placeholder="e.g., Student" required class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 px-4 py-2 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200">
                @error('visa_type')
                    <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="nearest_station" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nearest Station (required):</label>
                <input type="text" id="nearest_station" name="nearest_station" value="{{ old('nearest_station') }}" placeholder="e.g., Osaka Station" required class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 px-4 py-2 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200">
                @error('nearest_station')
                    <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City (required):</label>
                <input type="text" id="city" name="city" value="{{ old('city') }}" placeholder="The city where you are living" required class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 px-4 py-2 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200">
                @error('city')
                    <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number (required):</label>
                <input type="text" id="phone" name="phone" value="{{ old('phone') }}" placeholder="e.g., 070-1234-5678" required class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 px-4 py-2 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200">
                @error('phone')
                    <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="facebook" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Facebook Profile Link (required):</label>
                <input type="url" id="facebook" name="facebook" value="{{ old('facebook') }}" placeholder="e.g., https://www.facebook.com/..." required class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 px-4 py-2 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200">
                @error('facebook')
                    <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="school_time" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">School Time (optional):</label>
                <input type="text" id="school_time" name="school_time" value="{{ old('school_time') }}" placeholder="e.g., 9:00-17:00" class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 px-4 py-2 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200">
                @error('school_time')
                    <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="region" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Region:</label>
                <select id="region" name="region" class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 px-4 py-2 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200">
                    <option value="Osaka" {{ old('region') == 'Osaka' ? 'selected' : '' }}>Osaka</option>
                    <option value="Kobe" {{ old('region') == 'Kobe' ? 'selected' : '' }}>Kobe</option>
                    <option value="Kobe(Amagasaki)" {{ old('region') == 'Kobe(Amagasaki)' ? 'selected' : '' }}>Kobe (Amagasaki)</option>
                    <option value="Kyoto" {{ old('region') == 'Kyoto' ? 'selected' : '' }}>Kyoto</option>
                    <option value="Nara" {{ old('region') == 'Nara' ? 'selected' : '' }}>Nara</option>
                    <option value="Shiga" {{ old('region') == 'Shiga' ? 'selected' : '' }}>Shiga</option>
                </select>
                @error('region')
                    <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div class="flex items-center justify-center">
                <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg shadow-md transition duration-300">
                    Submit
                </button>
            </div>
        </form>
    </div>
</div>
@endsection