@extends('layouts.app')

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

@section('content')

    <!--Heading-->
    <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">
                Invoice
            </h2>
        </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" id="printableArea">
                <!-- Left -->

                <!-- Invoice Start -->
                <div class="flex-initial flex-col space-y-4 w-full md:w-2/3">

                    <!-- View Customer Details -->
                    <div class="flex flex-col border-2 border-brandGreen bg-white rounded-lg p-8 space-y-4">
                        <div class="flex flex-col ">
                            <h3 class="text-black font-bold text-md text-left">Customer Details</h3>
                        </div>
                        <ul class="flex flex-col items-left text-sm text-black space-y-4">
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/3 font-semibold">Name</span>
                                <span class="w-2/3 text-left">{{$booking['customer']['full_name']}}</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/3 font-semibold">Contact Number</span>
                                <span class="w-2/3 text-left">{{$booking['customer']['mobile']}}</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/3 font-semibold">Email</span>
                                <span class="w-2/3 text-left">{{$booking['customer']['email']}}</span>
                            </li>

                        </ul>

                    </div><!-- customer details Ends -->

                    <!-- Vehicle Details -->
                    <div class="flex flex-col border-2 border-brandGreen rounded-lg">
                        <div class="flex flex-col px-8 py-4 m-0">
                            <h3 class="text-black font-bold text-md text-left">Vehicle Details</h3>
                        </div>

                        <!--Vehicles 1-->
                        @if(!empty($booking['vehicles']))
                            @foreach($booking['vehicles'] as $key => $vehicle)
                                <div class="flex flex-col px-8 py-4 border-t border-brandGreen">
                                    <h5 class="font-semibold text-brandGreen pb-2">Vehicle Number {{++$key}}</h5>
                                    <ul class="flex flex-col items-left text-sm text-black space-y-4">
                                        <li class="flex flex-row items-left align-top space-x-2">
                                            <span class="w-1/3 font-semibold">Make</span>
                                            <span class="w-2/3 text-left">{{$vehicle['vehicle_make']}}</span>
                                        </li>
                                        <li class="flex flex-row items-left align-top space-x-2">
                                            <span class="w-1/3 font-semibold">Model</span>
                                            <span class="w-2/3 text-left">{{$vehicle['vehicle_model']}}</span>
                                        </li>
                                        <li class="flex flex-row items-left align-top space-x-2">
                                            <span class="w-1/3 font-semibold">Colour</span>
                                            <span class="w-2/3 text-left">{{$vehicle['vehicle_color']}}</span>
                                        </li>
                                        <li class="flex flex-row items-left align-top space-x-2">
                                            <span class="w-1/3 font-semibold">Reg. Number</span>
                                            <span class="w-2/3 text-left">{{$vehicle['vehicle_no']}}</span>
                                        </li>
                                    </ul>
                                </div>
                            @endforeach
                        @endif
                    </div>

                    <!-- View Payment Details -->
                    <div class="flex flex-col border-2 border-brandGreen bg-white rounded-lg p-8 space-y-4">
                        <div class="flex flex-col ">
                            <h3 class="text-black font-bold text-md text-left">Payment</h3>
                        </div>

                        <form action="{{ route('stripe.checkout') }}" method="post"
                              class="flex flex-col">

                            {{csrf_field()}}
                            <input type="hidden" name="booking_id" value="{{$booking['id']}}">
                            <input type="hidden" name="company_id" value="{{$booking['company_id']}}">
                            <input type="hidden" name="invoice_id" value="1">
                            <input type="hidden" name="customer_id" value="{{$booking['customer_id']}}">
                            <input type="hidden" name="payment_amount" value="{{$booking['net_price']}}">
                            <input type="hidden" name="payment_currency" value="{{strtolower($booking['company']['currency'])}}">


                            <div class="flex flex-col ">
                                <!-- Trigger/Open The Modal -->
                                <button type="submit" id="payBtn"
                                        class="text-sm uppercase font-bold bg-mainCTA text-white flex flex-row justify-center items-center w-56 h-12 rounded p-4 mx-auto">
                                    Card Payment
                                </button>

                                <button type="submit" class="mt-1 text-sm uppercase font-bold bg-mainCTA text-white flex flex-row justify-center items-center w-56 h-12 rounded p-4 mx-auto">Pay with Apple Pay / Google Pay</button>
                            </div>

                        </form>


{{--                        <ul class="flex flex-col items-left text-sm text-black space-y-4">--}}
{{--                            <li class="flex flex-row items-left align-top space-x-2">--}}
{{--                                <span class="w-1/3 font-semibold">Payment Method</span>--}}
{{--                                <span class="w-2/3 text-left">Visa</span>--}}
{{--                            </li>--}}
{{--                            <li class="flex flex-row items-left align-top space-x-2">--}}
{{--                                <span class="w-1/3 font-semibold">Payment Date</span>--}}
{{--                                <span class="w-2/3 text-left">23-12-2024</span>--}}
{{--                            </li>--}}
{{--                            <li class="flex flex-row items-left align-top space-x-2">--}}
{{--                                <span class="w-1/3 font-semibold">Payment Status</span>--}}
{{--                                <span class="w-2/3 text-left">Success</span>--}}
{{--                            </li>--}}
{{--                        </ul>--}}
                    </div><!-- customer details Ends -->

                </div>

                <!-- 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-2">
                        <div class="items-center">
                            <div class="flex flex-col p-2 items-left text-base text-left text-black p-4 space-y-2">
                                <h5 class="font-semibold">Invoice No: {{$booking['invoice']['invoice_no']}}</h5>

                                <h5 class="font-semibold">Booking Ref: QWE444</h5>

                                <ul class="flex flex-col items-left text-xs text-black space-y-4">
                                    <li class="flex flex-row items-left align-top space-x-2">
                                        <span class="w-1/2">Invoice Date</span>
                                        <span class="w-1/2 font-semibold text-right">
                                            {{$booking['invoice']['invoice_date']}}
                                        </span>
                                    </li>
                                    <li class="flex flex-row items-left align-top space-x-2">
                                        <span class="w-1/2">Payment Due on</span>
                                        <span class="w-1/2 font-semibold text-right">23-12-2024(static)</span>
                                    </li>

                                </ul>

                            </div>

                        </div>

                        <div class="items-center">
                            <img src="{{$booking['company']['logo']}}" alt="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">{{$booking['company']['name']}}</h5>

                            <ul class="flex flex-col items-left text-xs text-black space-y-4">
                                <li class="flex flex-row items-left align-top space-x-2">
                                    <span class="font-semibold text-left">
                                        {{$booking['company']['address']}}
                                    </span>
                                </li>
                                <li class="flex flex-row items-left align-top space-x-2">
                                    <a href="02012345678" class="font-semibold text-left">Phone: {{$booking['company']['phone']}}</a>
                                </li>
                                <li class="flex flex-row items-left align-top">
                                    <a href="mailto:demo.parking@exampleparking.test" class="font-semibold text-left">Email: {{$booking['company']['email']}}</a>
                                </li>

                            </ul>

                        </div>

                        <ul class="flex flex-col items-left text-xs text-black border-t border-brandGreen 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">{{$booking['product']['subtitle']}}</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">Travelling From</span>
                                <span class="w-1/2 font-semibold text-right">{{$booking['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">{{$booking['date_from']}} | {{$booking['date_fromtime']}}</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">{{$booking['date_to']}} | {{$booking['date_totime']}}</span>
                            </li>

                        </ul>

                        <ul class="flex flex-col items-left text-xs text-black border-t border-brandGreen 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">{{$booking['company']['currency_symbol']}}{{$booking['price']}}</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2 text-brandGreen">Add-on Packages</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">48hr Late Return Cover</span>
                                <span class="w-1/2 text-right">£ 8.75</span>
                            </li>
                            <li class="flex flex-row items-left align-top space-x-2">
                                <span class="w-1/2">Priority Parking</span>
                                <span class="w-1/2 text-right">£ 12.75</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 pt-4 border-t border-brandGreen">
                                <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>


    <!-- Success Modal -->
    <div id="paySuccessModal" class=" justify-center items-center font-poppins modal">

        <!-- Modal content -->
        <div class="flex flex-col w-96 mx-auto bg-white p-6 rounded-xl space-y-2">
            <div class="mx-auto">
                <img src="assets/icons/ic_alert_success.svg" class="" alt="Success" />
            </div>

            <h3 class="text-center text-md font-semibold text-fontBase">Success !</h3>
            <div class="mx-auto w-full px-4 pb-2">
                <p class="text-center text-xs font-light text-fontBase mx-auto ">Your payment has been processed successfully. Thank you for your purchase! You will receive a confirmation email shortly.</p>
            </div>
            <button class="bg-brandGreen w-36 mx-auto text-sm font-bold uppercase text-white text-center px-4 py-2 rounded btnclose">Done</button>
        </div>

    </div>

    <!-- Error State Modal -->
    <div id="payErrorModal" class=" justify-center items-center font-poppins modal">

        <!-- Modal content -->
        <div class="flex flex-col w-96 mx-auto bg-white p-6 rounded-xl space-y-2">
            <div class="mx-auto">
                <img src="assets/icons/ic_alert_error.svg" class="" alt="Success" />
            </div>

            <h3 class="text-center text-md font-semibold text-fontBase">Error !</h3>
            <div class="mx-auto w-full px-4 pb-2">
                <p class="text-center text-xs font-light text-fontBase mx-auto ">Oops! Something went wrong with your payment. Please try again or check your payment details.</p>
            </div>
            <div class="flex flex-row w-full px-4 pb-2 space-x-2">
                <button class="border border-brandGreen uppercase w-36 mx-auto text-sm font-bold text-brandGreen text-center px-4 py-2 rounded btncancel">Cancel</button>
                <button class="bg-errorRed w-36 mx-auto uppercase text-sm font-bold text-white text-center px-4 py-2 rounded btntry">Try Again</button>
            </div>

        </div>

    </div>
@endsection
{{--@push('scripts')--}}
{{--    <script>--}}
{{--        $(document).ready(function () {--}}
{{--            $('.vehicle_make').change(function () {--}}
{{--                let makeId = $(this).val(); // Get selected make ID--}}
{{--                console.log('makeId >> ', makeId)--}}

{{--                if (makeId) {--}}
{{--                    // Make an AJAX request to fetch vehicle models--}}
{{--                    $.ajax({--}}
{{--                        url: '/vehicle-models/' + makeId, // Laravel route--}}
{{--                        type: 'GET',--}}
{{--                        success: function (response) {--}}
{{--                            console.log('response >> = ', response)--}}
{{--                            if (response.success) {--}}
{{--                                console.log('response >> ', response)--}}

{{--                                // Populate the vehicle model dropdown--}}
{{--                                let modelsDropdown = $('.vehicle_model');--}}
{{--                                modelsDropdown.empty(); // Clear existing options--}}
{{--                                modelsDropdown.append('<option value="">Select Model</option>');--}}

{{--                                // Add options dynamically--}}
{{--                                response.data.forEach(function (model) {--}}
{{--                                    modelsDropdown.append('<option value="' + model.id + '">' + model.name + '</option>');--}}
{{--                                });--}}
{{--                            }--}}
{{--                        },--}}
{{--                        error: function () {--}}
{{--                            alert('Failed to fetch vehicle models.');--}}
{{--                        }--}}
{{--                    });--}}
{{--                } else {--}}
{{--                    // Clear the vehicle model dropdown if no make is selected--}}
{{--                    $('.vehicle_model').empty().append('<option value="">Select Model</option>');--}}
{{--                }--}}
{{--            });--}}
{{--        });--}}
{{--    </script>--}}
{{--@endpush--}}