@extends('layouts.frontend')
@push('page-title')
    Step Two - Make Reservation
@endpush
@section('content')
    <style>
        .reservationBookingFormWrap .stepProgressBar .stepItem.stepTwo {
            width: 75%;
        }
    </style>
    <section class="bookTablePageMain">
        <div class="container">
            <div class="row">
                <div class="col-md-10 offset-md-1">
                    <div class="reservationBookingFormWrap">
                        <h4>Make a reservation</h4>
                        <div class="stepProgressBar">
                            <div class="stepItem stepTwo">
                                Step Two
                            </div>
                        </div>
                        @if($errors->any())
                            <div class="text-danger errorsWrap">
                                <ul>
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if($reservation->table_location == '2')
                            <div class="row">
                                <div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2">
                                    <div class="alert alert-warning text-center" role='alert'>
                                        You're booking will take place in the cigar lounge
                                    </div>
                                </div>
                            </div>
                        @endif
                        <form action="{{ route('reservations.step-two-store') }}" method="post" class="reservationBookingForm">
                            @csrf
                            <div class="row">
                                <div class="row">
                                    <div class="col-lg-7">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">First Name *</label>
                                                <input type="text" name="first_name" id="first_name" value="{{ auth()->check() ? auth()->user()->first_name : old('first_name') }}" required>
                                                @error('first_name')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">Last Name *</label>
                                                <input type="text" name="last_name" id="last_name" value="{{ auth()->check() ? auth()->user()->last_name : old('last_name') }}" required>
                                                @error('last_name')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Email Address *</label>
                                                <input type="email" name="email" id="email" value="{{ auth()->check() ? auth()->user()->email : old('email') }}" required>
                                                @error('email')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">Phone Number *</label>
                                                <input type="tel" name="phone_number" id="phone_number" value="@if(auth()->user()) @if(auth()->user()->userDetails){{ auth()->check() ? auth()->user()->userDetails->phone_number : old('phone_number') }} @endif @else {{ old('phone_number') }} @endif" required>
                                                @error('phone_number')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <label for="">Additional Information</label>
                                                <textarea name="additional_info" id="additional_ino" cols="30" rows="10">{{ old('additional_info') }}</textarea>
                                                @error('additional_info')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <label for="">Dietary Information</label>
                                                <textarea name="dietary_info" id="dietary_ino" cols="30" rows="10">@if(auth()->user())@if(auth()->user()->userDetails){{ auth()->check() ? auth()->user()->userDetails->dietary_info : old('dietary_info') }} @endif @else {{ old('dietary_info') }}@endif</textarea>
                                                @error('dietary_info')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <script>
                                            $(document).ready(function(){
                                                $('#create_account').change(function(){
                                                    var selected = $(this).val();
                                                    if(selected === 'yes') {
                                                        $('#passwordAccountField').show()
                                                    }
                                                    else if(selected === 'no'){
                                                        $('#passwordAccountField').hide();
                                                    }
                                                    else if(selected === 'already_have_an_account'){
                                                        $('#passwordAccountField').hide();
                                                        $('#passwordAccountLoginField').show();
                                                    }
                                                })
                                            });
                                        </script>
                                        <div class="row">
                                            <div class="col-12">
                                                @auth
                                                    <div class="alert alert-success text-center" role='alert'>
                                                        You are logged into your account
                                                    </div>
                                                @else
                                                    <label for="">Do you want to create an account? *</label>
                                                    <select name="create_account" id="create_account" @auth() @else required @endif>
                                                        <option selected disabled>-- Select an option --</option>
                                                        <option value="yes">Yes</option>
                                                        <option value="no">No</option>
                                                        <option value="already_have_an_account" @auth selected @endauth>I already have an account</option>
                                                    </select>
                                                @endif
                                                @error('create_account')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row" id="passwordAccountField" style="display: none;">
                                            <div class="col-md-6">
                                                <label for="">Password</label>
                                                <input type="password" name="password" id="password">
                                                @error('password')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">Confirm Password</label>
                                                <input type="password" name="confirmation_password" id="confirmation_password">
                                                @error('confirmation_password')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row" id="passwordAccountLoginField" style="display: none">
                                            <div class="col-12">
                                                <button type="button" class="goldOutlineGoldTextBtn" data-bs-toggle="modal" data-bs-target="#customerLoginModal">
                                                    Click here to login
                                                </button>
                                            </div>
                                        </div>
                                        <div class="row" style="display: none">
                                            <div class="col-12">
                                                <label for="">Table</label>
                                                <input type="text" name="table_id" id="table_id" value="{{ $inputValue }}">

                                                {{--<select name="table_id" id="table_id" required>
                                                    @foreach($availableTables as $table)
                                                        <option value="{{ $table->id }}" @if($loop->first) selected @endif>{{ $table->name }}</option>
                                                    @endforeach
                                                </select>--}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 ">
                                        <div class="bookingDetailsWrap">
                                            <ul class="bookingDetailsList list-unstyled">
                                                <li>
                                                    <i class="fa-solid fa-calendar-days"></i>{{ date('l d/m/Y', strtotime($reservationDate)) }}
                                                </li>
                                                <li>
                                                    <i class="fa-regular fa-clock"></i> {{ $reservation->reservation_time }}
                                                </li>
                                                <li>
                                                    <i class="fa-regular fa-user"></i> {{ $reservation->guest_number }} People
                                                </li>
                                                <li>
                                                    <i class="fa-solid fa-whiskey-glass"></i> {{ str_replace('_', ' ', $reservation->joining_for) }}@if($reservation->joining_for == 'food'), {{ $reservation->meal_type }} @endif
                                                </li>
                                                <li>
                                                    <table class="addressTable">
                                                        <tbody>
                                                        <tr>
                                                            <td><i class="fa-solid fa-map-pin"></i></td>
                                                            <td>
                                                                Puffin' Rooms Edinburgh,<br>
                                                                Unit 2,<br>
                                                                11 Lister Square,<br>
                                                                Edinburgh,<br>
                                                                EH3 9GL
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </li>
                                            </ul>
                                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2234.324190943861!2d-3.1971236232565916!3d55.94375277726752!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4887c79577dbb415%3A0xa48a9f1bb0ec688a!2sPuffin&#39;%20Rooms%20-%20Edinburgh!5e0!3m2!1sen!2suk!4v1703707449244!5m2!1sen!2suk" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <a href="{{ route('reservations.step-one') }}" class="goldOutlineGoldTextBtn backBtn"><i class="fas fa-chevron-left"></i>Back</a>
                                        </div>
                                        <div class="col-md-8 d-flex justify-content-end">
                                            <button type="submit" class="solidGoldBtn">Confirm Booking</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="customerLoginModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route('reservations.customerLogin') }}">
                        @csrf
                        <div class="row">
                            <div class="col-12">
                                <h4 class="loginTitle">
                                    Login
                                </h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <label for="">Email Address</label>
                                <input type="email" name="email" id="email">

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <label for="">Password</label>
                                <input type="password" name="password" id="password">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="goldOutlineGoldTextBtn">Login</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection