@extends('layout.master')

@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('checkout_meta_title') ?? env('APP_NAME'),
        'description' => nova_get_setting('checkout_meta_description') ?? env('APP_NAME'),
        'keywords' => nova_get_setting('checkout_meta_keywords') ?? env('APP_NAME'),
        'image' => Storage::url(nova_get_setting('checkout_banner')),
        'schema' => nova_get_setting('checkout_schema'),
    ])
@endsection
@section('extraStyles')
@endsection
@section('content')
    <div class="container-fluid bg-breadcrumb"
        style="  position: relative;
            background: linear-gradient(#d09d5b30, #cc944e47), url({{Storage::url(nova_get_setting('checkout_banner'))}});">
        <div class="container text-center py-5" style="max-width: 900px;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">
                {{ nova_get_setting_translate('checkout_title') }}
            </h4>
        </div>
    </div>


    <div class="container-fluid  py-3 banar">
        <ol class="breadcrumb text-dark mb-0 wow fadeInDown" data-wow-delay="0.3s">
            <li class="breadcrumb-item"><a href="index.html" class="text-dark">Home</a></li>
             <li class="breadcrumb-item active text-secondary"> {{ nova_get_setting_translate('more_products_title') }}</li>
        </ol>
    </div>


    <section class="tour__details ">
        <div class="container">
            <div class="row Checkout_row ">
                <div class="col-xl-8 col-lg-8">
                    <div class="tour-heading mb-4 ">

                        <h3>{{ nova_get_setting_translate('checkout_main_title') }}</h3>
                        <p>
                            {!! nova_get_setting_translate('checkout_text') !!}
                        </p>
                        <form action="{{ route('tour.reservation') }}" method="post" id="contact-form"
                            class="tailor-form contact-form">
                            @csrf
                            {{-- <h2>Billing Details</h2> --}}
                            <a href="#" class=" ">
                                <h2 class=" ">Billing Details</h2>
                            </a>
                              <br>
                            <h6 class="text_form">Personal Data</h6>
                            
                            <div class="Checkoutbox Checkout-form mt-4 mb-3" id="Personal_Data">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" name="name" class="form-control border-0 mb-4"
                                                id="name" placeholder="Your Name" />
                                            <label for="name">Your Name</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" name="phone_number" class="form-control border-0 mb-4"
                                                id="phone" placeholder="Your Phone" />
                                            <label for="phone">Phone</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="email" name="email" class="form-control border-0 mb-4"
                                                id="email" placeholder="Your Email" />
                                            <label for="email">Your Email</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-item">
                                            @include('layout.partials.nationalty')
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="text" name="hotel_pickup" class="form-control border-0 mb-4"
                                                id="pick" placeholder="Hotel Pickup" />
                                            <label for="pick">Hotel Name</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <h6 class="text_form">Billing Details</h6>
                            <div class="Checkoutbox Checkout-form mt-4 mb-3" id="billing_Data">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" name="biling_name" class="form-control border-0 mb-4"
                                                id="billing_name" placeholder="Your Name" />
                                            <label for="billing_name">Your Name</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" name="biling_address" class="form-control border-0 mb-4"
                                                id="address" placeholder="Address" />
                                            <label for="address">Address</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" name="vat_number" class="form-control border-0 mb-4"
                                                id="vat" placeholder="VAT Number" />
                                            <label for="vat">VAT Number</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <h6 class="text_form">Payment</h6>
                            <div class="Checkoutbox Payment Checkout-form mt-4 mb-3" id="Payment">
                                <label class="type_encrypted"><i class="fa fa-unlock-alt" aria-hidden="true"></i> Payments
                                    are secure and encrypted</label>
                                <hr />
                                <div class="tour-details-service-checkbox mb-24 d-flex Payment-Method">
                                    <span>
                                        <input id="cash" name="payment_type" type="radio" value="cash" checked>
                                        <label for="cash">Cash</label>
                                    </span>
                                    <span>
                                        <input id="bank_transfer" name="payment_type" type="radio"
                                            value="bank_transfer">
                                        <label for="bank_transfer">Bank Transfer</label>
                                    </span>
                                    <span>
                                        <input id="revolut" name="payment_type" type="radio" value="revolut">
                                        <label for="revolut">Revolut</label>
                                    </span>
                                </div>
                            </div>
                            <button id="saveTailorBtn" class="btn main-btn mt-3 tailor ">

                                {{ __('tour.submit') }}
                                <span class="icon icon-basic-paperplane"></span>
                            </button>
                        </form>


                    </div>

                </div>

                <div class="col-xl-4 col-lg-4">
                    <div class="tour-details-right  trip_Summary">
                        <aside class="tour_details_right ">
                            <h3 class="widget_title"> Trip Summary</h3>
                            <div class="col-md-12">
                                <div class="cartcon">
                                    <ul>
                                        @php
                                            $totalPrice = 0; // Initialize the variable here
                                        @endphp
                                        @foreach ($tours as $tour)
                                            <li class="tourist-item-group ">
                                                <label class="w-100 cart_l">
                                                    <i class="fa-solid fa-tag"></i>
                                                    Your tour
                                                </label>
                                                <div class="tourist-item-group ">
                                                    {{ number_format($tour->cart_data['total_price'], 2) }}
                                                </div>
                                            </li>
                                            <li>
                                                <label class="w-100 cart_l">
                                                    {{ $tour->name }}
                                                </label>
                                            </li>

                                            <br>
                                            @php
                                                $totalPrice += $tour->cart_data['total_price'];
                                            @endphp
                                        @endforeach
                                    </ul>
                                    <div>

                                    </div>

                                </div>

                                <div class="col-md-12">
                                    <div class="cartcon mt-3">
                                        <label class="w-100 cart_l">
                                            Personal Data
                                        </label>
                                        <a href="#Personal_Data" class="scroll-link"><i class="fa-solid fa-pen"></i></a>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="cartcon mt-3">
                                        <label class="w-100 cart_l">
                                            Billing Details
                                        </label>
                                        <a href="#billing_Data" class="scroll-link"><i class="fa-solid fa-pen"></i></a>
                                    </div>
                                </div>



                                <div class="col-md-12">
                                    <div class="cartcon mt-3">
                                        <label class="w-100 cart_l">
                                            Payment
                                        </label>
                                        <a href="#Payment" class="scroll-link"><i class="fa-solid fa-pen"></i></a>
                                    </div>
                                </div>

                                <div class="row">
                                    <h3 class="widget_title">
                                        Price Breakdown
                                    </h3>
                                    <div class="col-md-12">
                                        <div class="cartcon mt-2">
                                            <label class="w-100 cart_l">
                                                <i class="fa-solid fa-cart-shopping"></i>
                                                Total From
                                            </label>
                                            <div class="tourist-item-group total-price ">
                                                {{ $totalPrice }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </aside>
                    </div>
                </div>
           </div>
        </div>
    </section>
@endsection

@section('extraScripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $(document).ready(function() {
                $("#contact-form").on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        url: $(this).attr('action'),
                        method: 'POST',
                        data: $(this).serialize(),
                        beforeSend: function() {
                            $('#submit-contact-button').prop('disabled', true);
                        }
                    }).done(function(response) {
                        console.log(response);
                        if (response.status) {
                            toastr.success(response.message);
                            window.location.href = "{{ route('thanks') }}";
                        } else {
                            toastr.error(response.message);
                            $('#submit-contact-button').prop('disabled', false);
                        }
                    }).fail(function(response) {
                        toastr.error("There was an error. Please try again.");
                        $('#submit-contact-button').prop('disabled', false);
                    });
                });
            });
        });
    </script>
@endsection