@extends('layout.master')
@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('direct_payment_page_meta_title'),
        'description' => nova_get_setting_translate('direct_payment_page_meta_description'),
        'keywords' => nova_get_setting_translate('direct_payment_page_meta_keywords'),
        'image' => Storage::url(nova_get_setting('direct_payment_page_banner')),
        'schema' => nova_get_setting('direct_payment_page_schema')
    ])
@endsection
@section('content')
    <main id="content">

        <div class="bg-img-hero text-center mb-1"
             style="background-image: url({{Storage::url(nova_get_setting('direct_payment_page_banner'))}});"
             role="img"
             title="{{nova_get_setting_translate('direct_payment_page_banner_title')}}"
             aria-label="{{nova_get_setting_translate('direct_payment_page_banner_alt')}}">
            <div class="container space-top-xl-3 py-6 py-xl-0">
                <div class="row justify-content-center py-xl-4">
                    <!-- Info -->
                    <div class="py-xl-10 py-5">
                        <h1 class="font-size-40 font-size-xs-30 text-white font-weight-bold mb-0">{{nova_get_setting_translate('direct_payment_title')}}</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb breadcrumb-no-gutter justify-content-center mb-0">
                                <li class="breadcrumb-item font-size-14"><a class="text-white"
                                                                            href="{{route('home')}}">{{__('general.home')}}</a>
                                </li>
                                <li class="breadcrumb-item custom-breadcrumb-item font-size-14 text-white active"
                                    aria-current="page">{{nova_get_setting_translate('direct_payment_name')}}
                                </li>
                            </ol>
                        </nav>
                    </div>
                    <!-- End Info -->
                </div>
            </div>
        </div>

        <div class="container text-center space-1">
            <!-- Title -->
            <div class="w-md-80 w-lg-50 text-center mx-md-auto pb-1">
                <h2 class="section-title text-black font-size-30 font-weight-bold">{{nova_get_setting_translate('direct_payment_header')}}</h2>
            </div>
            <!-- End Title -->
            <!-- Features -->
            <div class="mb-8">
                <div class="row">
                    <!-- Icon Block -->
                    <div class="col-md-3">
                        <i class="flaticon-user text-primary font-size-80 mb-3"></i>
                        <h5 class="font-size-17 text-dark font-weight-bold mb-2"><a>{{__('customLink.full_name')}}</a>
                        </h5>
                        <p class="text-gray-1 px-xl-2 px-uw-7">{{$payment->name}}</p>
                    </div>
                    <!-- End Icon Block -->

                    <!-- Icon Block -->
                    <div class="col-md-3">
                        <i class="flaticon-envelope text-primary font-size-80 mb-3"></i>
                        <h5 class="font-size-17 text-dark font-weight-bold mb-2"><a>{{__('customLink.email')}}</a></h5>
                        <p class="text-gray-1 px-xl-2 px-uw-7">{{$payment->email}}</p>
                    </div>
                    <!-- End Icon Block -->

                    <!-- Icon Block -->
                    <div class="col-md-3">
                        <i class="flaticon-phone-call text-primary font-size-80 mb-3"></i>
                        <h5 class="font-size-17 text-dark font-weight-bold mb-2"><a>{{__('customLink.phone')}}</a></h5>
                        <p class="text-gray-1 px-xl-2 px-uw-7">{{$payment->phone}}</p>
                    </div>
                    <!-- End Icon Block -->

                    <!-- Icon Block -->
                    <div class="col-md-3">
                        <i class="flaticon-global-1 text-primary font-size-80 mb-3"></i>
                        <h5 class="font-size-17 text-dark font-weight-bold mb-2">
                            <a>{{__('customLink.number_of_travellers')}}</a></h5>
                        <p class="text-gray-1 px-xl-2 px-uw-7">{{$payment->number_of_traveller}}</p>
                    </div>
                    <!-- End Icon Block -->
                </div>
            </div>
            <div class="mb-8">
                <div class="row">
                    <div class="col-lg-6 col-xl-6">
                        <div
                            class="font-weight-bold border-top text-left pt-3 font-size-24 text-dark mb-3">{{__('customLink.inclusion')}}
                        </div>
                        @foreach($payment->included as $item)
                            <div class="flex-horizontal-center mb-3 text-gray-1"><i
                                    class="flaticon-tick mr-3 font-size-12 text-primary"></i>{{$item['title']}}
                            </div>
                        @endforeach

                    </div>
                    <div class="col-lg-6 col-xl-6">
                        <div
                            class="font-weight-bold border-top text-left pt-3 font-size-24 text-dark mb-3"> {{__('customLink.exclusion')}}
                        </div>
                        @foreach($payment->excluded as $item)
                            <div class="flex-horizontal-center mb-3 text-gray-1"><i
                                    class="flaticon-close mr-3 font-size-12 text-primary"></i>{{$item['title']}}</div>
                        @endforeach
                    </div>

                    <div class="col-lg-12 col-md-12">
                        <div class="border-bottom border-top py-4">
                            <h5 id="scroll-itinerary" class="font-size-21 font-weight-bold text-dark text-left mb-4">
                                {{__('customLink.itinerary')}}
                            </h5>
                            <div id="basicsAccordion1">
                                @foreach($payment->itineraries as $key=>$item)
                                <!-- Card -->
                                <div class="card border-0 mb-3">
                                    <div class="card-header border-bottom-0 p-0" id="basicsHeading{{$key}}One1">
                                        <h5 class="mb-0">
                                            <button type="button"
                                                    class="collapse-link btn btn-link btn-block d-flex align-items-md-center font-weight-bold p-0"
                                                    data-toggle="collapse" data-target="#basicsCollapse{{$key}}One1"
                                                    aria-expanded="true" aria-controls="basicsCollapse{{$key}}One1">
                                                <div class="text-primary font-size-22 mb-3 mb-md-0 mr-3">
                                                    <i class="far fa-circle"></i>
                                                </div>

                                                <div class="text-primary flex-shrink-0">{{__('customLink.day')}} {{$x++}} <span
                                                        class="px-2">-</span></div>
                                                <h6 class="font-weight-bold text-gray-3 text-left mb-0">{{$item['title']}}</h6>
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="basicsCollapse{{$key}}One1" class="collapse @if($loop->first)show @endif "
                                         aria-labelledby="basicsHeading{{$key}}One1" data-parent="#basicsAccordion1">
                                        <div class="card-body pl-6 pb-0 pt-0">
                                            <p class="mb-0 text-left">{!! strip_tags($item['title']) !!}</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Card -->
                                @endforeach
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- End Features -->
        </div>
        @include('layout.partials.faqs')
        @include('layout.partials.partners')
    </main>

@endsection