@extends('layouts.app')

@section('content')
<div class="container-fluid p-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-0">Quick Guest Registration</h2>
            <small class="text-muted">Register new guests in seconds</small>
        </div>
        <a href="{{ route('guests.search') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> Back to Search
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <form id="guestForm">
                        @csrf

                        <!-- Basic Information -->
                        <h5 class="mb-3">
                            <i class="fas fa-user"></i> Guest Information
                        </h5>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">Full Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="col-md-6">
                                <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                                <input type="tel" class="form-control" id="phone" name="phone" placeholder="+971 50 123 4567" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="email" class="form-label">Email (Optional)</label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                            <div class="col-md-6">
                                <label for="nationality" class="form-label">Nationality</label>
                                <select class="form-select" id="nationality" name="nationality">
                                    <option value="">Select nationality</option>
                                    <option value="UAE">United Arab Emirates</option>
                                    <option value="Saudi Arabia">Saudi Arabia</option>
                                    <option value="UK">United Kingdom</option>
                                    <option value="USA">United States</option>
                                    <option value="Germany">Germany</option>
                                    <option value="France">France</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                        </div>

                        <!-- Visit Information -->
                        <h5 class="mb-3 mt-4">
                            <i class="fas fa-calendar-check"></i> Current Visit
                        </h5>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="venue" class="form-label">Venue <span class="text-danger">*</span></label>
                                <select class="form-select" id="venue" name="venue" required>
                                    <option value="">Select venue</option>
                                    <option value="seven">Seven Hotel</option>
                                    <option value="city_center">City Center Hotel</option>
                                    <option value="coral_bay">Coral Bay Resort</option>
                                    <option value="la_taverna">La Taverna</option>
                                    <option value="rayes">Rayes</option>
                                    <option value="taiga_sky">Taiga Sky</option>
                                    <option value="trabouche">Trabouche</option>
                                    <option value="coral_bay_beach">Coral Bay Beach</option>
                                    <option value="coral_bay_pool">Coral Bay Pool</option>
                                    <option value="jetskis">Jetskis</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="visit_type" class="form-label">Visit Type</label>
                                <select class="form-select" id="visit_type" name="visit_type">
                                    <option value="stay">Hotel Stay</option>
                                    <option value="dining">Dining</option>
                                    <option value="bar">Bar/Lounge</option>
                                    <option value="beach">Beach Access</option>
                                    <option value="pool">Pool Access</option>
                                    <option value="watersports">Water Sports</option>
                                </select>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">
                                <i class="fas fa-user-plus"></i> Register Guest & Generate Loyalty Card
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
    document.getElementById('guestForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const data = Object.fromEntries(formData);

        // Show loading state
        const submitBtn = document.getElementById('submitBtn');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Registering...';
        submitBtn.disabled = true;

        // Simulate API call
        setTimeout(() => {
            // Generate loyalty ID
            const loyaltyId = 'HG-' + Math.floor(100000 + Math.random() * 900000);

            // Reset form and show success
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;

            showToast('Guest registered successfully! Loyalty ID: ' + loyaltyId, 'success');

            // Redirect to search after a delay
            setTimeout(() => {
                window.location.href = '{{ route("guests.search") }}';
            }, 2000);
        }, 1500);
    });
</script>
@endsection