@extends('frontend.master')
@section('content')
<!-- HERO CONTENT -->
<section class="hero py-5">
    <div class="container-fluid" style="max-width:1030px">
        <div class="row align-items-stretch gy-5 gx-sm-0">

            <!-- FIND RESERVATION -->
            <div class="col-12 col-md d-flex justify-content-center justify-content-md-end">
                <form id="findReservationForm" style="max-width: 23.75rem; width:100%;">
                    @csrf
                    <div>
                        <h2 class="fw-light mb-4 text-center text-md-start">
                            Find a Reservation
                        </h2>

                        <input name="pnr" class="form-control custom-input mb-4" placeholder="Reservation Number" required>
                        <input name="last_name" class="form-control custom-input mb-4" placeholder="Last Name" required>

                        <button type="submit" class="btn btn-green w-100 py-2">SEARCH</button>
                    </div>
                </form>
            </div>

            <!-- HORIZONTAL DIVIDER (xs only) -->
            <div class="col-12 d-sm-none">
                <div class="divider-horizontal my-4"></div>
            </div>

            <!-- VERTICAL DIVIDER (sm and up) -->
            <div class="col-auto d-none d-md-flex justify-content-center px-0">
                <div class="divider-vertical"></div>
            </div>

            <!-- LOGIN -->
            <div class="col-12 col-md d-flex justify-content-center justify-content-md-start">
                <form style="max-width: 23.75rem; width:100%;" action="{{ route('login') }}" method="post">
                    @csrf
                     @error('email')<div class="text-danger mb-3">{{ $message }}</div>@enderror
                    <div>
                        <h2 class="fw-light mb-4 text-center text-md-start">
                            Login
                        </h2>

                        <input type="email" class="form-control custom-input mb-4" name="email" value="{{ old('email') }}" required placeholder="Email Address">
                        <input type="password" name="password" class="form-control custom-input mb-3 @error('password') is-invalid @enderror" required placeholder="Password">
                                   @error('password')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        <div class="d-flex justify-content-between mb-4 small">
                            <label><input type="checkbox" name="remember"> Remember Me</label>
                            <a href="{{ route('password.request') }}" class="text-white">Forgot Password</a>
                        </div>

                        <button type="submit" class="btn btn-green w-100 py-2 mb-3">LOGIN</button>
                        <div class="text-center mb-2">-OR-</div>
                        <a href="{{ route('register') }}" class="btn btn-gray w-100 py-2">SIGN UP</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
$('#findReservationForm').on('submit', function (e) {
    e.preventDefault();

    let formData = $(this).serialize();

    Swal.fire({
        title: '',
        html: `
            <div style="padding:40px">
                <div class="spinner-border text-light mb-3"></div>
                <h4 class="mt-3">Retrieving Your Reservation</h4>
            </div>
        `,
        background: '#0b4f7c',
        color: '#ffffff',
        showConfirmButton: false,
        allowOutsideClick: false
    });

    $.ajax({
        url: "{{ route('reservation.find') }}",
        method: "POST",
        data: formData,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function (res) {
            window.location.href = res.redirect;
        },
        error: function () {
            Swal.fire({
                icon: 'error',
                title: 'Not Found',
                text: 'Reservation not found. Please check your details.'
            });
        }
    });
});
</script>
@endpush
