@extends('layouts.app')

@section('title', 'Holiday Parking - Home')

@section('content')
    <section class="text-fontBase font-poppins">

        <!-- Flex Container -->
        <div class="w-full flex bg-brandGreen items-center mx-auto py-4">
            <h2 class="text-4xl font-bold text-center mx-auto text-white uppercase">
                Confirm Booking
            </h2>
        </div>

    </section>

    <!-- <section>
        <button id="button" onclick="duplicate()">Click me</button>
        <div id="duplicater">
            duplicate EVERYTHING INSIDE THIS DIV
        </div>
    </section> -->

    <section class="text-fontBase font-poppins">

        <!-- Flex Container -->
        <div class="w-full flex items-center mx-auto py-4">
            <!-- Flex container -->
            <div
                class="container flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-3 py-4 px-4 md:px-0 mx-auto">
                <!-- Left -->

                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                <!-- Form Start -->
                <form method="post" action="{{ route('booking.create') }}"
                      class="flex-initial flex-col space-y-4 w-full md:w-2/3">
                    {{ csrf_field() }}

                    <input type="hidden" name="booking[airport_id]" value="{{$filters['airport']}}">
                    <input type="hidden" name="booking[product_id]" value="{{$package['id']}}">
                    <input type="hidden" name="booking[price]" value="{{$package['price']}}">
                    <input type="hidden" name="booking[company_id]" value="{{$package['company_id']}}">


                    <input type="hidden" name="booking[date_from]" value="{{$filters['date_from']}}">
                    <input type="hidden" name="booking[date_to]" value="{{$filters['date_to']}}">
                    <input type="hidden" name="booking[pay_at_exit]" value="0">


                    <!-- Enter Contact Details -->
                    <div
                        class="flex flex-col border-2 border-brandGreen bg-brandGreenLight/50 rounded-lg p-8 space-y-4">
                        <div class="flex flex-col ">
                            <h3 class="text-black font-bold text-md text-left">Contact Details</h3>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="flex flex-col ">
                                <label for="title" class="w-full font-semibold text-xs">Title<span
                                        class="pl-1">*</span></label>
                                <select id="title" name="customer[title]"
                                        class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2">
                                    <option value="" selected>Choose the Title</option>
                                    <option value="Mr" {{old('customer.title') == 'Mr' ? 'selected' : ''}}>Mr.</option>
                                    <option value="Ms" {{old('customer.title') == 'Ms' ? 'selected' : ''}}>Ms.</option>
                                    <option value="Rev" {{old('customer.title') == 'Rev' ? 'selected' : ''}}>Rev.</option>
                                </select>
                                @error('customer.title') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div class="flex flex-col ">
                                <label for="name" class="w-full font-semibold text-xs">Name<span
                                        class="pl-1">*</span></label>
                                <input type="text" id="name" name="customer[first_name]" placeholder="Enter Name"
                                       value="{{old('customer.first_name')}}"
                                       class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                @error('customer.first_name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div class="flex flex-col ">
                                <label for="lastname" class="w-full font-semibold text-xs">Last Name<span
                                        class="pl-1">*</span></label>
                                <input type="text" id="lastname" name="customer[last_name]"
                                       placeholder="Enter Last Name" value="{{old('customer.last_name')}}"
                                       class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                @error('customer.last_name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div class="flex flex-col ">
                                <label for="email" class="w-full font-semibold text-xs">Email<span
                                        class="pl-1">*</span></label>
                                <input type="text" id="email" name="customer[email]" placeholder="Enter Email"
                                       value="{{old('customer.email')}}"
                                       class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                @error('customer.email') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div class="flex flex-col ">
                                <label for="contact" class="w-full font-semibold text-xs">Contact Number<span
                                        class="pl-1">*</span></label>
                                <input type="text" id="contact" name="customer[mobile]" placeholder="Enter Phone Number"
                                       value="{{old('customer.mobile')}}"
                                       class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                @error('customer.mobile') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div class="flex flex-col ">
                                <label for="people" class="w-full font-semibold text-xs">People<span
                                        class="pl-1">*</span></label>
                                <input type="text" id="people" name="customer[people]" placeholder="Enter People"
                                       value="{{old('customer.people')}}"
                                       class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                @error('customer.people') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                    <!-- Enter Flight Details -->
                    <div
                        class="flex flex-col border-2 border-brandGreen bg-brandGreenLight/50 rounded-lg p-8 space-y-4">
                        <div class="flex flex-col ">
                            <h3 class="text-black font-bold text-md text-left">Flight Details</h3>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="flex flex-col">
                                <p for="title" class="w-full text-xs">Do you have terminal and flight details?</p>

                            </div>
                            <div class="flex flex-row space-x-8">
                                <div class="flex flex-row space-x-2">
                                    <input type="radio" id="detailsYes" name="booking[terminal_details]" value="yes"
                                           {{ old('booking.terminal_details')=="yes" ? 'checked='.'"'.'checked'.'"' : '' }}
                                           class="default:ring-2 ring-brandGreen"/>
                                    <label for="detailsYes" class="w-full font-semibold text-xs">Yes</label>
                                </div>
                                <div class="flex flex-row space-x-2">
                                    <input type="radio" id="detailsNo" name="booking[terminal_details]" value="no"
                                           {{ old('booking.terminal_details')=="no" || old('booking.terminal_details')==""  ? 'checked='.'"'.'checked'.'"' : '' }}
                                           class="default:ring-2 ring-brandGreen"/>
                                    <label for="detailsNo" class="w-full font-semibold text-xs">No</label>
                                </div>
                                @error('booking.terminal_details') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div class="flex flex-col ">
                                <label for="depTerminal" class="w-full font-semibold text-xs">Departure Terminal<span
                                        class="pl-1">*</span></label>
                                <select id="depTerminal" name="booking[departure_terminal]"
                                        class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2">
                                    <option selected>Choose the Terminal</option>
                                    @foreach($terminals as $terminal)
                                        <option value="{{$terminal->id}}" {{old('booking.departure_terminal') == $terminal->id ? 'selected' : ''}} >{{$terminal->terminal_name}} </option>
                                    @endforeach
                                </select>
                                @error('booking.departure_terminal') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div class="flex flex-col ">
                                <label for="flightNum" class="w-full font-semibold text-xs">Departure Flight
                                    Number</label>
                                <input type="text" id="flightNum" name="booking[departure_flight_number]"
                                       placeholder="Enter Flight Number" value="{{old('booking.departure_flight_number')}}"
                                       class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                @error('booking.departure_flight_number') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div class="flex flex-col ">
                                <label for="arrTerminal" class="w-full font-semibold text-xs">Arrival Terminal<span
                                        class="pl-1">*</span></label>
                                <select id="arrTerminal" name="booking[arrival_terminal]"
                                        class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2">
                                    <option selected>Choose the Terminal</option>
                                    @foreach($terminals as $terminal)
                                        <option value="{{$terminal->id}}" {{old('booking.arrival_terminal') == $terminal->id ? 'selected' : ''}} >{{$terminal->terminal_name}} </option>
                                    @endforeach
                                </select>
                                @error('booking.arrival_terminal') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div class="flex flex-col ">
                                <label for="arrFlightNum" class="w-full font-semibold text-xs">Arrival Flight
                                    Number</label>
                                <input type="text" id="arrFlightNum" name="booking[arrival_flight_number]"
                                       placeholder="Enter Flight Number" value="{{old('booking.arrival_flight_number')}}"
                                       class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                @error('booking.arrival_flight_number') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Add Vehicle Details and Replicate -->
                    <div id="vehicleDetails"
                         class="flex flex-col border-2 border-brandGreen bg-brandGreenLight/50 rounded-lg p-8 space-y-6 addVehicleCover">
                        <div id="addVehicle" class="flex flex-col vehicle-group">
                            <div class="flex flex-col md:flex-row justify-between pb-4 addVehicleBtnGroup">
                                <h3 class="text-black font-bold text-md text-left">Vehicle Details</h3>
                                <div class="flex flex-row justify-center space-x-2 pt-4 md:pt-0">
{{--                                    <button type="button"--}}
{{--                                            class="remove-vehicle flex justify-center text-sm border border-red-700 rounded text-red-500 text-sm-700 items-center w-auto h-8 rounded p-2 mx-auto deleteButton"--}}
{{--                                            >Remove Vehicle--}}
{{--                                        <img src="assets/icons/ic_delete.svg" alt="X" class="w-auto mx-auto"/>--}}
{{--                                    </button>--}}
                                    <button id="add-vehicle" type="button" itemid=""
                                            class="text-sm bg-brandGreenLight border border-brandGreen rounded text-brandGreen flex justify-center items-center w-auto h-8 rounded p-2 mx-auto">
                                        Add Vehicle +
                                    </button>
                                </div>
                            </div>
                            <div id="" class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-6 border-b border-borderGray/10">
                                <div class="flex flex-col ">
                                    <label for="make" class="w-full font-semibold text-xs">Make<span
                                            class="pl-1">*</span></label>

                                    <input type="text" id="vehicle_make" name="vehicle[0][vehicle_make]"
                                           placeholder="Enter Vehicle Make"
                                           class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
{{--                                    @error('vehicle.vehicle_make') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror--}}
                                </div>
                                <div class="flex flex-col ">
                                    <label for="model" class="w-full font-semibold text-xs">Model<span
                                            class="pl-1">*</span></label>

                                    <input type="text" id="vehicle_model" name="vehicle[0][vehicle_model]"
                                           placeholder="Enter Model"
                                           class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                </div>
                                <div class="flex flex-col ">
                                    <label for="colour" class="w-full font-semibold text-xs">Colour<span
                                            class="pl-1">*</span></label>
                                    <input type="text" id="colour" name="vehicle[0][vehicle_color]"
                                           placeholder="Enter Flight Number"
                                           class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                </div>
                                <div class="flex flex-col">
                                    <label for="regNum" class="w-full font-semibold text-xs">Reg. Number<span
                                            class="pl-1">*</span></label>
                                    <input type="text" id="regNum" placeholder="Enter Registration Number"
                                           name="vehicle[0][vehicle_no]"
                                           class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Check Policies and Conditions -->
                    <div class="flex flex-col">
                        <div class="flex flex-row space-x-2 align-top">
                            <input type="checkbox" id="checkAgreed" name="check_agreed"
                                   class="default:ring-2 ring-brandGreen align-top"/>
                            <p class="text-black text-xs text-left">I agree that I have read, understood and accept the
                                <a href="#" class="text-brandGreen">Terms & Conditions,</a>
                                <a href="#" class="text-brandGreen">Cancellation Policy</a> and
                                <a href="#" class="text-brandGreen">Refund/Return Policy.</a></p>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="flex flex-col">
                        <div
                            class="items-center flex flex-col md:flex-row px-2 pb-4 mx-auto space-y-4 md:space-y-0 md:space-x-6">
                            <button type="submit"
                                    class="text-sm uppercase font-bold bg-mainCTA text-white flex flex-row justify-center items-center w-56 h-12 rounded p-4">
                                Next
                            </button>
{{--                            <button type="submit"--}}
{{--                                    class="text-sm bg-mainCTA text-white flex flex-row justify-center items-center w-56 h-12 rounded p-4">--}}
{{--                                <img src="assets/icons/paypal-btn.svg" alt="Pay Pal" class="w-auto mx-auto"/>--}}
{{--                            </button>--}}
                        </div>
                    </div>


                </form>
                <!-- Form Ends -->



                <!-- Right -->
                <div class="flex-initial w-full md:w-1/3 ">
                    <!-- Package Card -->
                    <div class="flex flex-col border-2 border-brandGreen rounded-lg pb-8">
                        <div class="items-center">
                            <img src="{{$package['image']}}" alt="{{$package['company_name']}}" class="w-auto mx-auto"/>
                        </div>
                        <div class="flex flex-col p-2 items-left text-base text-left bg-white text-black p-4 space-y-2">
                            <h5 class="font-bold truncate">{{$package['company_name']}}</h5>

                        </div>

                        <ul class="flex flex-col items-left text-xs text-white bg-black space-y-4 p-4">
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">Service</span>
                                <span class="w-1/2 font-semibold text-right">{{$package['subtitle']}}</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">Airport</span>
                                <span class="w-1/2 font-semibold text-right">{{$package['airport_name']}}</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">Drop Off Date &amp; Time</span>
                                <span
                                    class="w-1/2 font-semibold text-right">{{$filters['dropoff_date']}} | {{$filters['dropoff_time']}}</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">Pickup Date &amp; Time</span>
                                <span
                                    class="w-1/2 font-semibold text-right">{{$filters['pickup_date']}} | {{$filters['pickup_time']}}</span>
                            </li>

                        </ul>

                        <ul class="flex flex-col items-left text-xs text-black bg-white space-y-4 p-4">
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">Package Amount</span>
                                <span
                                    class="w-1/2 text-right">{{$package['currency_symbol']}} {{$package['price']}}</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">Booking Charges</span>
                                <span class="w-1/2 text-right">£ 6.12</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">Discount</span>
                                <span class="w-1/2 text-right">- £ 10.22</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">Cancellation Charges</span>
                                <span class="w-1/2 text-right">£ 00.00</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2 font-semibold">
                                <span class="w-1/2">Total Amount</span>
                                <span class="w-1/2 text-right">£ 75.32</span>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            let vehicleIndex = 1;

            $('#add-vehicle').click(function () {
                // let vehicleGroupCount = $(".vehicle-group").length;
                // vehicleIndex = $(".vehicle-group").length;
                // console.log('vehicleGroupCount >>> ',vehicleGroupCount)
                // $(".counter").text(vehicleIndex);


                let newVehicle = `
                    <div id="addVehicle" class="flex flex-col vehicle-group">
                            <div class="flex flex-col md:flex-row justify-between pb-4 addVehicleBtnGroup">
                                <h3 class="text-black font-bold text-md text-left">Vehicle Details</span>   </h3>
                                <div class="flex flex-row justify-center space-x-2 pt-4 md:pt-0">
                                    <button type="button"
                                            class="remove-vehicle flex justify-center text-sm border border-red-700 rounded text-red-500 text-sm-700 items-center w-auto h-8 rounded p-2 mx-auto deleteButton">Remove Vehicle <img
                                            src="assets/icons/ic_delete.svg" alt="X" class="w-auto mx-auto"/></button>
                                </div>
                            </div>
                            <div id="" class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-6 border-b border-borderGray/10">
                                <div class="flex flex-col ">
                                    <label for="make" class="w-full font-semibold text-xs">Make<span
                                            class="pl-1">*</span></label>

                                    <input type="text" id="vehicle_make" name="vehicle[${vehicleIndex}][vehicle_make]"
                                           placeholder="Enter Vehicle Make" value="{{old('vehicle.${vehicleIndex}.vehicle_model')}}"
                                           class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                </div>
                                <div class="flex flex-col ">
                                    <label for="model" class="w-full font-semibold text-xs">Model<span
                                            class="pl-1">*</span></label>

                                    <input type="text" id="vehicle_model" name="vehicle[${vehicleIndex}][vehicle_model]"
                                           placeholder="Enter Model" value="{{old('vehicle.${vehicleIndex}.vehicle_model')}}"
                                           class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                </div>
                                <div class="flex flex-col ">
                                    <label for="colour" class="w-full font-semibold text-xs">Colour<span
                                            class="pl-1">*</span></label>
                                    <input type="text" id="colour" name="vehicle[${vehicleIndex}][vehicle_color]"
                                           placeholder="Enter Flight Number" value="{{old('vehicle.${vehicleIndex}.vehicle_color')}}"
                                           class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                </div>
                                <div class="flex flex-col">
                                    <label for="regNum" class="w-full font-semibold text-xs">Reg. Number<span
                                            class="pl-1">*</span></label>
                                    <input type="text" id="regNum" placeholder="Enter Registration Number"
                                           name="vehicle[${vehicleIndex}][vehicle_no]" value="{{old('vehicle.${vehicleIndex}.vehicle_no')}}"
                                           class="text-sm text-fontBase rounded-sm bg-white border border-borderGray focus:ring-transparent focus:border-brandGreen block w-full text-left p-2"/>
                                </div>
                            </div>
                        </div>
                `;

                $('#vehicleDetails').append(newVehicle);
                vehicleIndex++;
            });

            $(document).on('click', '.remove-vehicle', function () {
                console.log('vehicleIndex >> ',vehicleIndex);
                $(this).closest('.vehicle-group').remove();
                vehicleIndex--;
            });

        });
    </script>
@endpush