@extends('frontend.layouts.main')
@push('page-title')
    Step Two - Make Reservation
@endpush
@section('content')
    <section class="bookTablePageMain">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="col-12" style="margin-top: 200px;">
                        <div class="reservationBookingForWrap">
                            <div class="row">
                                <div class="col-12">
                                    <h4>Make a reservation</h4>
                                    <div class="stepProgressBar">
                                        <div class="stepTwo">
                                            Step Two
                                        </div>
                                    </div>
                                    @if($errors->any())
                                        <div class="flex flex-row alert alert-danger">
                                            <ul>
                                                @foreach($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                </div>
                                @if($reservation->joining_for == 'drinks_only')
                                    <div class="row">
                                        <div class="col-lg-6 offset-lg-3">
                                            <div class="alert alert-warning text-center" role="alert">
                                                Your booking will take place in the cigar lounge
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <form action="{{ route('reservations.store.step.two') }}" method="post" class="reservationBookingForm">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-6">

                                        <div class="row">
                                            <div class="col-12">
                                                <label for="">First Name *</label>
                                                <input type="text" name="first_name" id="first_name" value='{{ old('first_name') }}' required>
                                                @error('first_name')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <label for="">Last Name *</label>
                                                <input type="text" name="last_name" id="last_name" value="{{ old('last_name') }}" required>
                                                @error('last_name')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <label for="">Email Address *</label>
                                                <input type="email" name="email" id="email" value="{{ old("email") }}" required>
                                                @error('email')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <label for="">Phone Number *</label>
                                                <input type="tel" name="phone_number" id="phone_number" value="{{ old('phone_number') }}" required>
                                                @error('phone_number')
                                                <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_info" cols="30" rows="10" style='height: 60px;'></textarea>
                                                @error('dietary_info')
                                                <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_info" cols="30" rows="10" style="height: 60px;"></textarea>
                                                @error('additional_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').css('display', 'flex');
                                                    }
                                                    else if(selected === 'no') {
                                                        $('#passwordAccountField').css('display', 'none');
                                                    }
                                                });
                                            });
                                        </script>
                                        <div class="row">
                                            <div class="col-12">
                                                <label for="">Do you want to create an account?</label>
                                                <select name="create_account" id="create_account">
                                                    <option value="yes" selected>Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                                @error('create_account')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row" id="passwordAccountField">
                                            <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" style="display: none;">
                                            <div class="col-12">
                                                <label for="">Table</label>
                                                <input type="text" name="table_id" value="{{ $reservation->table_id }}" styl="display: none;">
                                                <select name="table_id" id="table_id">
                                                    @foreach($tables as $table)
                                                        <option value="{{ $table->id }}">{{ $table->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6"><div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 offset-lg-2">
                                        <ul class="bookingDetailsList list-unstyled">
                                            <li>
                                                <i class="fa-solid fa-calendar-days"></i> {{ date('l, d F Y', strtotime($reservation->reservation_date)) }}
                                            </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-map-pin"></i>
                                                Puffin' Rooms,
                                                The Albany Building,
                                                8 Old Hall Street,
                                                Liverpool,
                                                L3 9PA
                                            </li>
                                        </ul>
                                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2378.3493043579597!2d-2.9956090228793544!3d53.408578872307466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b213238d00001%3A0x7e805bf2b1f1a6f2!2sPuffin&#39;%20Rooms!5e0!3m2!1sen!2suk!4v1692808887553!5m2!1sen!2suk" width="100%" height="250px" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                        <hr class="my-4">

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-8 offset-lg-2">
                                        <div class="row">
                                            <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">
                                                <button type="submit" class="solidGoldBtn">Confirm Booking</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        </div>
    </section>

@endsection