@extends('site.layouts.master')
@section('title')
    <title>
        {{ $project->compound->name }}
    </title>
@endsection
@section('seoTags')
  @seoTags()
@endsection
@php
    $seo = SEO\Models\Page::where('path',URL::full())->first();
@endphp

@section('metatags')
 @if(!empty($seo))
    <meta name="title" content="{{ $seo->meta_title ?? $seo->title }}">
    <meta name="keywords" content="{{ $seo->meta_keywords }}">
    <meta name="description" content="{{ $seo->description }}">
 @endif
 <link rel="canonical" href="{{str_replace('public/','',url()->current())}}">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
href="@if(app()->getLocale() == 'en' && str_contains(url()->current(),'/en/')){{'https://nileestate.com/ar/projects/'.$project->slug_ar}}@else{{'https://nileestate.com/en/projects/'.$project->slug_en}}@endif">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif" href="{{str_replace('public/','',url()->current())}}">
@endsection
@section('content')
<div class="d-none">
    {{ Breadcrumbs::render('compound',$project) }}
</div>
{!! $breadcrumbSchema !!}
    <div class="bg-f9f9f9 py-3">
        <div class="customWidth">
            <div>
                <img loading="lazy" class="rounded-4 w-100 h-150 h-lg-350" src="{{ asset('new_theme/d7.webp') }}" alt="project cover">
                {{-- $project->coverImages()->firstOrNew([])->full_url ?? --}}
            </div>
            <div class="d-lg-flex justify-content-lg-between">
                <div class="col-lg-8 px-lg-3">
                    <div class="d-flex align-items-center my-3">
                        <img loading="lazy" class="col-3" src="{{ $project->compound->developer->logo->full_url }}" alt="project logo">
                        <div class="mx-2">
                            <h1 class="SF24_29Bold SF32_38Bold-lg text-2b2b2b">{{ $project->compound->name }}</h1>
                            <p class="SF18_21Light SF18_21Regular-lg text-707070">{{ $project->compound->developer->name }}</p>
                        </div>
                    </div>
                    <div class="SF14_24Light SF18_28Regular-lg text-707070">
                        {!! $project->description !!}
                    </div>
                    <div class="d-flex align-items-center my-3">
                        <img loading="lazy" class="col-3" src="{{ $project->compound->developer->logo->full_url }}" alt="project logo">
                        <div class="mx-2">
                            <p class="SF22_26Bold SF32_38Bold-lg text-2b2b2b">@lang('site.about_developer')</p>
                            <p class="SF18_21Light SF18_21Regular-lg text-blue">{{ $project->compound->developer->name }}</p>
                        </div>
                    </div>
                    <div class="SF14_24Light SF18_28Regular-lg text-707070 mb-3">
                        {{ $project->compound->developer->about }}
                    </div>
                </div>
                <div class="col-lg-4 px-lg-4">
                    <div class="my-3 shadow-sm rounded-4 bg-white p-2">
                        <div class="d-flex justify-content-between">
                            <p class="SF18_21Bold SF20_24Bold-lg text-3b3b3b">@lang('site.Starting Price')</p>
                            <p class="SF18_21Bold SF20_24Bold-lg text-3b3b3b">@lang('site.Down Payment')</p>
                        </div>
                        <div class="d-flex justify-content-between">
                            <p class="price-commas SF22_26Heavy SF29_35Heavy-lg text-red">{{ $project->starting_price ?? 0 }} @lang('site.EGP')</p>
                            <p class="price-commas SF22_26Heavy SF29_35Heavy-lg text-red">{{ $project->down_payment ?? 0 }} @lang('site.EGP')</p>
                        </div>
                    </div>
                    <div class="my-3 shadow-sm rounded-4 bg-white p-2">
                        <p class="home_property_title SF22_26Bold-lg text-red text-uppercase">@lang('site.Agent')</p>
                        <div class="my-3 d-flex justify-content-around align-items-center">
                            <div class="col-4">
                                @if ($agent->id)
                                    <a rel="nofollow" href="{{ route('site.agent-details', $agent->id) }}">
                                        <img loading="lazy" loading="lazy" width="90" height="90"
                                            src="{{ $agent->profile->full_profile_photo ?? asset('new_theme/image_notfound.webp') }}"
                                            alt="{{ $agent->username ?? 'image' }}" class="rounded-circle">
                                    </a>
                                @endif
                            </div>
                            <div class="col-8 px-0">
                                @if ($agent->id)
                                    <a rel="nofollow" href="{{ route('site.agent-details', $agent->id) }}"
                                        class="SFHeavy18_21 SF24_29Heavy-lg text-3b3b3b text-decoration-none">
                                        {{ $agent->username }}
                                    </a>
                                @endif
                                <p class="SFRegular15_18 SF20_24Regular-lg text-3b3b3b m-0">
                                    @lang('site.agent')
                                </p>
                            </div>
                        </div>
                        <div class="my-3 d-flex justify-content-around align-items-center">
                            @if ($agent->profile->phone != null)
                                <a rel="nofollow" href="#"
                                    class="reveal_number showNumberCustom col-4 text-decoration-none SFBold11_13 SF14_16Bold-lg py-3 px-1">
                                    <i class="fa-solid fa-phone-volume"></i>
                                    @lang('site.Call')
                                    <input class="url" type="hidden" value="{{ route('site.addclick') }}" hidden>
                                    <input class="phone_clicks" type="hidden" value="{{ $_SERVER['REMOTE_ADDR'] }}" hidden>
                                </a>
                                <a rel="nofollow"
                                    class="reveal_number-phone showNumberCustom2 col-4 text-decoration-none SFBold11_13 SF14_16Bold-lg py-3 px-1"
                                    href="tel:{{ $agent->profile->phone }}">
                                    <i class="fa-solid fa-phone-volume"></i> {{ $agent->profile->phone }}
                                </a>
                                <a rel="nofollow" class="whatsApp-Icon col-4 text-decoration-none SFBold11_13 SF14_16Bold-lg py-3 px-1"
                                    href="https://api.whatsapp.com/send?phone={{ $agent->profile->phone }}">
                                    <i class="fa-brands fa-whatsapp" style="font-size: 14px"></i> @lang('site.WhatsAppMe')
                                </a>
                                <a rel="nofollow" class="emailIcon col-3 text-decoration-none SFBold11_13 SF14_16Bold-lg py-3 px-1"
                                    href="mailto:{{ $agent->email }}">
                                    <i class="fa-regular fa-envelope" style="font-size: 14px"></i> @lang('site.Email')
                                </a>
                            @endif
                        </div>
                    </div>
                    <div class="my-3 shadow-sm rounded-4 bg-white p-2">
                        <div class="bg-light mx-auto col-11 px-0 py-1 d-flex justify-content-around rounded-2">
                            <button id="showing_tab"
                                class="bg-transparent text-707070 SFBold12_14Bold SF14_16Bold-lg py-2 px-1 my-0 mx-2 rounded-3 active_tab"><small>@lang('site.schudle_showing')</small></button>
                            <button id="info_tab"
                                class="bg-transparent text-707070 SFBold12_14Bold SF14_16Bold-lg py-2 px-1 my-0 mx-2 border-0 rounded-3 "><small>@lang('site.request_info')</small></button>
                            <button id="offer_tab"
                                class="bg-transparent text-707070 SFBold12_14Bold SF14_16Bold-lg py-2 px-1 my-0 mx-2 border-0 rounded-3 "><small>@lang('site.make_offer')</small></button>
                        </div>
                        <div class="showForm tab_content pt-2">
                            <p class="m-0 text-3b3b3b SFRegular15_18 SF20_24Regular-lg">@lang('site.Choose a Prefer time to you'):</p>
                            <form action="{{ route('admin.showing.store') }}" class="showingForm text-center" method="POST">
                                @csrf
                                <input type="hidden" id="gtokenSH" name="gToken">
                                <div class="form-group d-flex justify-content-around"
                                    @if (LaravelLocalization::getCurrentLocale() == 'ar') dir="ltr" @endif>
                                    <div id="request_showing_carousel" class="px-0 col-10 my-1 owl-carousel owl-theme"
                                        data-toggle="buttons">
                                        @for ($i = 1; $i < 15; $i++)
                                            <div id="{{ $i }}"
                                                class="post1 rounded-3 border home_property_title SF14_16Bold-lg p-3 mx-2 bg-light text-707070"
                                                @if (date('d-m-Y', strtotime(old('date'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="background-color:#91d3ff;" @endif>
                                                <p class="p-0" @if (date('d-m-Y', strtotime(old('date'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                                    @lang('site.' . date('l', strtotime(today() . '+ ' . $i . ' day')))</p>
                                                <p class="d-inline-block p-0 m-0"
                                                    @if (date('d-m-Y', strtotime(old('date'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                                    {{ date('d', strtotime(today() . '+ ' . $i . ' day')) }}
                                                </p>
                                                <p class="d-inline-block p-0 m-0"
                                                    @if (date('d-m-Y', strtotime(old('date'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                                    @lang('site.' . date('M', strtotime(today() . '+ ' . $i . ' day')))</p>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                                <input id='date1' name="date" type="text" value="{{ old('date') }}" hidden readonly>
                                <div class="form-group d-flex justify-content-around"
                                    @if (LaravelLocalization::getCurrentLocale() == 'ar') dir="ltr" @endif>
                                    <div id="request_time_carousel" class="px-0 col-10 my-1 owl-carousel owl-theme"
                                        data-toggle="buttons">
                                        @for ($j = 10; $j < 14; $j++)
                                            @php
                                                if (!isset($noon)) {
                                                    $noon = false;
                                                }
                                                if ($j == 12 && $noon == false) {
                                                    $noon = true;
                                                }
                                            @endphp
                                            @php
                                                if ($j == 11 && $noon == true) {
                                                    break;
                                                }
                                            @endphp
                                            @php
                                                if ($j == 13) {
                                                    $j = 1;
                                                }
                                            @endphp
                                            @if ($noon == true)
                                                @php $t = __('site.pm'); @endphp
                                            @else
                                                @php $t = __('site.am'); @endphp
                                            @endif
    
                                            <div id="{{ $j }}"
                                                class="postTime1 px-4 py-2 border rounded-3 mx-2 bg-light text-707070 home_property_title SF14_16Bold-lg"
                                                @if (old('time') == $j . ' ' . $t) style="background-color:#91d3ff;" @endif>
                                                <p class="p-0 m-0" @if (old('time') == $j . ' ' . $t) style="color:#fff;" @endif>
                                                    {{ $j . ' ' . $t }}</p>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                                <input id='time1' name="time" type="text" value="{{ old('time') }}" hidden readonly>
                                <p class="m-0 text-3b3b3b SFRegular15_18 SF18_21Regular-lg text-start">
                                    @lang('site.second_date')<small>(@lang('site.optional'))</small></p>
                                <div class="form-group d-flex justify-content-around"
                                    @if (LaravelLocalization::getCurrentLocale() == 'ar') dir="ltr" @endif>
                                    <div id="request_showing_carousel2" class="px-0 col-10 my-1 owl-carousel owl-theme"
                                        data-toggle="buttons">
                                        @for ($i = 2; $i < 15; $i++)
                                            <div id="{{ $i }}"
                                                class="post2 rounded-3 border home_property_title SF14_16Bold-lg p-3 mx-2 bg-light text-707070"
                                                @if (date('d-m-Y', strtotime(old('date2'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="background-color:#91d3ff;" @endif>
                                                <p class="p-0 m-0" @if (date('d-m-Y', strtotime(old('date2'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                                    @lang('site.' . date('l', strtotime(today() . '+ ' . $i . ' day')))</p>
                                                <p class="d-inline-block p-0 m-0"
                                                    @if (date('d-m-Y', strtotime(old('date2'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                                    {{ date('d', strtotime(today() . '+ ' . $i . ' day')) }}
                                                </p>
                                                <p class="d-inline-block p-0 m-0"
                                                    @if (date('d-m-Y', strtotime(old('date2'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                                    @lang('site.' . date('M', strtotime(today() . '+ ' . $i . ' day')))</p>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                                <input id='date2' name="date2" type="text" value="{{ old('date2') }}" hidden readonly>
                                <div class="form-group d-flex justify-content-around"
                                    @if (LaravelLocalization::getCurrentLocale() == 'ar') dir="ltr" @endif>
                                    <div id="request_time_carousel2" class="px-0 col-10 my-1 owl-carousel owl-theme"
                                        data-toggle="buttons">
                                        @for ($a = 10; $a < 14; $a++)
                                            @php
                                                if (!isset($noon2)) {
                                                    $noon2 = false;
                                                }
                                                if ($a == 12 && $noon2 == false) {
                                                    $noon2 = true;
                                                }
                                            @endphp
                                            @php
                                                if ($a == 11 && $noon2 == true) {
                                                    break;
                                                }
                                            @endphp
                                            @php
                                                if ($a == 13) {
                                                    $a = 1;
                                                }
                                            @endphp
                                            @if ($noon2 == true)
                                                @php $c = __('site.pm'); @endphp
                                            @else
                                                @php $c = __('site.am'); @endphp
                                            @endif
                                            <div id="{{ $a }}"
                                                class="postTime2 px-4 py-2 border rounded-3 mx-2 bg-light text-707070 home_property_title SF14_16Bold-lg"
                                                @if (old('time2') == $a . ' ' . $c) style="background-color:#91d3ff;" @endif>
                                                <p class="p-0 m-0" @if (old('time2') == $a . ' ' . $c) style="color:#fff;" @endif>
                                                    {{ $a . ' ' . $c }}</p>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                                <input id='time2' name="time2" type="text" value="{{ old('time2') }}" hidden readonly>
                                <div class="d-flex flex-wrap justify-content-around align-items-center">
                                    <div id="first" title="@lang('site.inperson_quote')"
                                        class="postMethod1 border my-1 py-1 px-3 d-flex align-items-center rounded-3 SFBold12_14Bold SF14_16Bold-lg text-707070"
                                        @if (old('method') == 'in person') style="color:#fff !important;background-color:#E82C2D;" @endif>
                                        <input type="radio" name="method" value="in person"
                                            @if (old('method') == 'in person') checked @endif><i
                                            class="mx-2 fa fa-home"></i>@lang('site.in_person')
                                    </div>
                                    <div id="second" title="@lang('site.virtual_quote')"
                                        class="postMethod1 border my-1 py-1 px-3 d-flex align-items-center rounded-3 SFBold12_14Bold SF14_16Bold-lg text-707070"
                                        @if (old('method') == 'virtual') style="color:#fff !important;background-color:#E82C2D;" @endif>
                                        <input type="radio" name="method" value="virtual"
                                            @if (old('method') == 'virtual') checked @endif><i
                                            class="mx-2 fa fa-mobile"></i>@lang('site.virtual')
                                    </div>
                                </div>
                                <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="title"
                                    value="{{ $project->compound->name }}">
                                <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="agent_email"
                                    value="{{ $agent->email }}">
                                <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="agent_id"
                                    value="{{ $agent->id }}">
                                <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="compound_id"
                                    value="{{ $project->compound->id }}">
                                <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="compound_slug"
                                    value="{{ $project->slug_en }}">
                                <input
                                    class="my-2 col-11 mx-auto form-control SFBold12_14Light SF16_19light-lg py-2 shadow-none bg-white placeholder text-707070"
                                    placeholder="@lang('site.Name')" type="text" name="name" value="{{ old('name') }}">
                                <input
                                    class="my-2 col-11 mx-auto form-control SFBold12_14Light SF16_19light-lg py-2 shadow-none bg-white placeholder text-707070"
                                    placeholder="@lang('site.Email')" type="text" name="email" value="{{ old('email') }}">
                                <input
                                    class="my-2 col-11 mx-auto form-control SFBold12_14Light SF16_19light-lg py-2 shadow-none bg-white placeholder text-707070"
                                    placeholder="@lang('site.Mobile')" type="text" name="mobile" value="{{ old('mobile') }}">
                                <div
                                    class="d-none form-group col-11 px-0 my-2 mx-auto selectvert SFBold12_14Light SF16_19light-lg py-2 shadow-none bg-white placeholder text-707070">
                                    <select class="mx-auto form-control" name="methodType">
                                        <option value="" disabled selected>Virtual Method</option>
                                        <option value="FaceTime">FaceTime</option>
                                        <option value="Google Meet">Google Meet</option>
                                        <option value="Skype">Skype</option>
                                        <option value="Zoom">Zoom</option>
                                        <option value="WhatsApp">WhatsApp</option>
                                    </select>
                                </div>
                                <div class="d-none form-group col-11 px-0 my-2 mx-auto selectvertData">
                                </div>
                                <textarea class="my-2 w-100 rounded-2 px-3 SFBold12_14Light SF16_19light-lg py-2 shadow-none bg-white placeholder text-707070"
                                    name="message" id="message" cols="50" rows="1" placeholder="{{ __('site.notes') }}">{{ old('message') }}</textarea>
                                @foreach ($errors->showing->all() as $error)
                                    <p class="text-danger">{{ $error }}</p>
                                @endforeach
                                <div class="modal-footer">
                                    <a onclick="Captcha('gtokenSH')" class="bg-danger btn btn-danger SFBold14_16 SF18_21Bold-lg w-100 py-2"
                                        style="font-size: 14px;">{{ __('site.submit') }}</a>
                                    <button hidden type="submit" id="doSubmitWithCaptchagtokenSH"></button>
                                </div>
                            </form>
                        </div>
                        <div class="infoForm pt-2 d-none">
                            <div class="p-2">
                                @include('site.pages.forms.contactAgentForm', [
                                    'agent' => $agent,
                                    'compound' => $project->compound,
                                    'gtoken' => 'gtokenma',
                                    'title' => $project->compound->name,
                                ])
                            </div>
                        </div>
                        <div class="offerForm pt-2 d-none">
                            <form action="{{ route('offer.store') }}" class="showingForm text-center" method="POST">
                                @csrf
                                <input type="hidden" id="gtokenSHF" name="gToken">
                                <input type="hidden" name="product_id" value="{{ $project->compound->id }}">
                                <input type="hidden" name="product_type" value="compound">
                                <input
                                    class="my-2 col-11 mx-auto form-control SFBold12_14Light SF16_19light-lg py-2 shadow-none bg-white placeholder text-707070"
                                    placeholder="@lang('site.Name')" type="text" name="name" value="{{ old('name') }}">
                                <input
                                    class="my-2 col-11 mx-auto form-control SFBold12_14Light SF16_19light-lg py-2 shadow-none bg-white placeholder text-707070"
                                    placeholder="@lang('site.Mobile')" type="text" name="mobile" value="{{ old('mobile') }}">
                                <input
                                    class="my-2 col-11 mx-auto form-control SFBold12_14Light SF16_19light-lg py-2 shadow-none bg-white placeholder text-707070"
                                    placeholder="@lang('site.Email')" type="text" name="email" value="{{ old('email') }}">
                                <textarea class="my-2 col-11 mx-auto form-control SFBold12_14Light SF16_19light-lg py-2 shadow-none bg-white placeholder text-707070"
                                    name="offer_details" id="offer_details" cols="50" rows="5"
                                    placeholder="{{ __('site.offer_details') }}">{{ old('offer_details') }}</textarea>
                                <div class="m-0 text-3b3b3b SFRegular15_18 text-start">
                                    <label>@lang('site.valid_till')</label>
                                </div>
                                <input
                                    class="my-2 col-11 mx-auto form-control SFBold12_14Light SF16_19light-lg py-2 shadow-none bg-white placeholder text-707070"
                                    placeholder="@lang('site.valid_till')" type="date" name="valid_till"
                                    value="{{ old('valid_till') }}">
                                @foreach ($errors->offer->all() as $error)
                                    <p class="text-danger">{{ $error }}</p>
                                @endforeach
                                <div class="modal-footer">
                                    <a onclick="Captcha('gtokenSHF')" class="bg-primary btn btn-primary SFBold14_16 SF18_21Bold-lg w-100 py-2"
                                        style="font-size: 14px;">{{ __('site.Send') }}</a>
                                    <button hidden type="submit" id="doSubmitWithCaptchagtokenSHF"></button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="my-3 shadow-sm rounded-4 bg-white p-2">
                        <div class="widget search-area">
                            <h3 class="light_blue SFBlack22_26 SF26_31Black-lg text-uppercase mt-2">{{ __('site.mortgage_calc') }}</h3>
                            <div class="mcw-wrap_250" id="maoWrap">
                                <div id="mcwWidget"></div>
                                <script defer>
                                    var maoCalc = {};
                                    maoCalc.settings = {
                                        "theme": "theme3",
                                        "view": "vertical2",
                                        "responsive": "mcw-wrap_responsive",
                                        "font": "inherit",
                                        "border": false,
                                        "boxShadow": false,
                                        "backgroundColor": "#f9f9f9",
                                        "fieldColor": "#ffffff",
                                        "textColor": "#2c3239",
                                        "borderColor": "#ffffff",
                                        "currency": "",
                                        "currencySide": "right",
                                        "delimiters": ",.",
                                        "popup": false,
                                        "popupView": "doughnutPopup",
                                        "style": true,
                                        "widgetTotalInterest": true,
                                        "widgetTotalPrincipal": false,
                                        "monthlyPayment": "Monthly Payment",
                                        "totalPrincipalPaid": "Total Principal",
                                        "totalInterestPaid": "Total Interest",
                                        "totalPayments": "Total Payments",
                                        "years": "years",
                                        "title": {
                                            "enabled": false,
                                            "color": "#334356",
                                            "label": "Mortgage Calculator"
                                        },
                                        "homePrice": {
                                            "label": "Home Price",
                                            "value": "<br />
<b>Warning</b>:  Undefined variable $project in <b>/home/nilecp/public_html/resources/views/site/pages/compounds/details.blade.php</b> on line <b>400</b><br />
<br />
<b>Warning</b>:  Attempt to read property "starting_price" on null in <b>/home/nilecp/public_html/resources/views/site/pages/compounds/details.blade.php</b> on line <b>400</b><br />
"
                                        },
                                        "downPayment": {
                                            "enabled": true,
                                            "label": "Down Payment",
                                            "value": "<br />
<b>Warning</b>:  Undefined variable $project in <b>/home/nilecp/public_html/resources/views/site/pages/compounds/details.blade.php</b> on line <b>405</b><br />
<br />
<b>Warning</b>:  Attempt to read property "down_payment" on null in <b>/home/nilecp/public_html/resources/views/site/pages/compounds/details.blade.php</b> on line <b>405</b><br />
0"
                                        },
                                        "interestRate": {
                                            "label": "Interest Rate",
                                            "value": "14"
                                        },
                                        "mortgageTerm": {
                                            "label": "Mortgage Term",
                                            "value": "10"
                                        },
                                        "pmi": {
                                            "enabled": false,
                                            "label": "PMI",
                                            "value": false
                                        },
                                        "taxes": {
                                            "enabled": false,
                                            "label": "Taxes",
                                            "value": false
                                        },
                                        "insurance": {
                                            "enabled": false,
                                            "label": "Insurance",
                                            "value": false
                                        },
                                        "hoa": {
                                            "enabled": false,
                                            "label": "HOA",
                                            "value": false
                                        },
                                        "extra": {
                                            "enabled": true,
                                            "labelAdd": "Add extra payments",
                                            "labelRemove": "Remove extra payments",
                                            "labelToMonthy": "To monthly",
                                            "labelYearly": "Extra yearly"
                                        },
                                        "startDate": {
                                            "enabled": false,
                                            "label": "Start Date"
                                        },
                                        "monthsArr": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
                                            "Oct", "Nov", "Dec"
                                        ],
                                        "button": {
                                            "color": "#ffffff",
                                            "bg": "#c82333",
                                            "label": "Calculate"
                                        },
                                        "amortizationSchedule": "Amortization Schedule",
                                        "popupLabels": {
                                            "monthlyPrincipalInterest": "Monthly Principal & Interest",
                                            "monthlyExtraPayment": "Monthly Extra Payment",
                                            "monthlyPayment": "MONTHLY PAYMENT",
                                            "downPayment": "Down payment",
                                            "extraPayments": "Extra payments",
                                            "totalPrincipalPaid": "Total principal paid",
                                            "totalInterestPaid": "Total interest paid",
                                            "totalOfAllPayments": "TOTAL OF ALL PAYMENTS",
                                            "amortizationSchedule": "Amortization Schedule",
                                            "tablePaymentDate": "Payment date",
                                            "tablePayment": "Payment",
                                            "tablePrincipal": "Principal",
                                            "tableInterest": "Interest",
                                            "tableTotalInterest": "Total Interest",
                                            "tableBalance": "Balance",
                                            "pmi": "PMI",
                                            "taxes": "Taxes",
                                            "insurance": "Insurance",
                                            "shortInsurance": "Ins",
                                            "hoa": "HOA",
                                            "chartBalance": "Balance",
                                            "chartPrincipal": "Principal",
                                            "chartInterest": "Interest"
                                        },
                                        "useTitleAsLink": false,
                                        "titleLinkUrl": "",
                                        "useFooterLink": false,
                                        "footerLinkAnchor": "",
                                        "footerLinkUrl": ""
                                    };
                                    (function() {
                                        function loadScript(src) {
                                            var s, t;
                                            s = document.createElement("script");
                                            s.src = src;
                                            t = document.getElementsByTagName("script")[0];
                                            t.parentNode.insertBefore(s, t);
                                        }
    
                                        function decode(str) {
                                            return !window.btoa ? 'not_found' : window.btoa(unescape(
                                                encodeURIComponent(str)));
                                        }
                                        var uri = 'https://mortgage-advice-online.org/widget/' + decode(window
                                            .location) + '.js';
                                        loadScript(uri);
                                    })();
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="line d-lg-none"></div>
@endsection
@section('script')
    <script>
        $(".owl-carousel").owlCarousel();
        $(document).ready(function() {
            let x = '<br />
<b>Warning</b>:  Undefined variable $errors in <b>/home/nilecp/public_html/resources/views/site/pages/compounds/details.blade.php</b> on line <b>517</b><br />
<br />
<b>Warning</b>:  Attempt to read property "offer" on null in <b>/home/nilecp/public_html/resources/views/site/pages/compounds/details.blade.php</b> on line <b>517</b><br />
';
            let y = '<br />
<b>Warning</b>:  Undefined variable $errors in <b>/home/nilecp/public_html/resources/views/site/pages/compounds/details.blade.php</b> on line <b>518</b><br />
';
            if (x.includes('required') || x.includes('مطلوب') || x.includes('valid') || x.includes('صالح')) {
                $('#offer_tab').click();
            }
            if (y.includes('required') || y.includes('مطلوب') || y.includes('valid') || y.includes('صالح')) {
                $('#info_tab').click();
            }
        });
        $('[id^=info_tab]').on("click", function() {
            $('[id^=showing_tab]').removeClass('active_tab');
            $('[id^=offer_tab]').removeClass('active_tab');
            $('[id^=info_tab]').addClass('active_tab');
            $('[id^=showing_tab]').addClass('border-0');
            $('[id^=offer_tab]').addClass('border-0');
            $('[id^=info_tab]').removeClass('border-0');
            $('[class^=showForm]').removeClass('tab_content');
            $('[class^=showForm]').addClass('d-none');
            $('[class^=offerForm]').removeClass('tab_content');
            $('[class^=offerForm]').addClass('d-none');
            $('[class^=infoForm]').addClass('tab_content');
            $('[class^=infoForm]').removeClass('d-none');
        });
        $('[id^=showing_tab]').on("click", function() {
            $('[id^=info_tab]').removeClass('active_tab');
            $('[id^=offer_tab]').removeClass('active_tab');
            $('[id^=showing_tab]').addClass('active_tab');
            $('[id^=info_tab]').addClass('border-0');
            $('[id^=offer_tab]').addClass('border-0');
            $('[id^=showing_tab]').removeClass('border-0');
            $('[class^=infoForm]').removeClass('tab_content');
            $('[class^=infoForm]').addClass('d-none');
            $('[class^=offerForm]').removeClass('tab_content');
            $('[class^=offerForm]').addClass('d-none');
            $('[class^=showForm]').addClass('tab_content');
            $('[class^=showForm]').removeClass('d-none');
        });
        $('[id^=offer_tab]').on("click", function() {
            $('[id^=info_tab]').removeClass('active_tab');
            $('[id^=showing_tab]').removeClass('active_tab');
            $('[id^=offer_tab]').addClass('active_tab');
            $('[id^=info_tab]').addClass('border-0');
            $('[id^=showing_tab]').addClass('border-0');
            $('[id^=offer_tab]').removeClass('border-0');
            $('[class^=infoForm]').removeClass('tab_content');
            $('[class^=infoForm]').addClass('d-none');
            $('[class^=showForm]').removeClass('tab_content');
            $('[class^=showForm]').addClass('d-none');
            $('[class^=offerForm]').addClass('tab_content');
            $('[class^=offerForm]').removeClass('d-none');
        });
        for (let i = 0; i < 8; i++) {
            $('#right' + (i + 1)).on("click", function() {
                $('.owl-next').eq(i).click();
            });
            $('#left' + (i + 1)).on("click", function() {
                $('.owl-prev').eq(i).click();
            });
        }
        for (let o = 1; o < 5; o++) {
            $('.post' + o).on("click", function(e) {
                let x = $(".post" + o).map(function() {
                    return this;
                }).get();
                x.forEach(e => {
                    // e.style = "background-color:#fff;";
                    let ch = e.children;
                    e.style = "border: 1px solid #dddddd !important;";
                    for (let k = 0; k < ch.length; k++) {
                        ch[k].style = "color:#707070;";
                    }
                });
                let int = $(this).attr('id');
                const divelement = this.children;
                this.style = "border: 1px solid #006AB3 !important;";
                divelement[0].style = "color:#3b3b3b;";
                divelement[1].style = "color:#3b3b3b;";
                divelement[2].style = "color:#3b3b3b;";
                const date = new Date();
                const wd = new Date()
                wd.setDate(date.getDate() + parseInt(int))
                let day = wd.getDate();
                let month = wd.getMonth() + 1;
                let year = wd.getFullYear();
                let Dt = `${day}-${month}-${year}`;
                $('#date' + o).val(Dt);
            });
        }
        for (let p = 1; p < 5; p++) {
            $('.postTime' + p).on("click", function(e) {
                let x = $(".postTime" + p).map(function() {
                    return this;
                }).get();
                x.forEach(e => {
                    e.style = "border: 1px solid #dddddd !important;";
                    let ch = e.children;
                    for (let v = 0; v < ch.length; v++) {
                        ch[v].style = "color:#707070;";
                    }
                });
                let int = $(this).attr('id');
                const divelement = this.children;
                this.style = "border: 1px solid #006AB3 !important;";
                divelement[0].style = "color:#3b3b3b;";
                $('#time' + p).val($(this).text());
            });
        }
        for (let u = 1; u < 3; u++) {
            $('.postMethod' + u).on("click", function(e) {
                let x = $(".postMethod" + u).map(function() {
                    return this;
                }).get();
                x.forEach(e => {
                    e.style = "background-color:#fff;color:#707070;";
                });
                this.style = "background-color:#E82C2D;color:#ffffff !important;";
                let h = $(this).attr('id');
                $('#' + h + ' input:radio').prop('checked', true);

                if ($('#' + h + ' input:radio').val() == 'virtual') {
                    $('.selectvert').removeClass('d-none');
                    $('.selectvertData').removeClass('d-none');
                } else {
                    $('.selectvert').addClass('d-none');
                    $('.selectvertData').addClass('d-none');
                }
            });
        }
        $('[name="methodType"]').on('change', function() {
            console.log($('.selectvertData'));
            if ($(this).val() == 'FaceTime') $('.selectvertData').html(
                `<input class="my-2 col-12 mx-auto form-control" placeholder="Mobile number or Apple ID" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`
            );
            if ($(this).val() == 'Google Meet') $('.selectvertData').html(
                `<input class="my-2 col-12 mx-auto form-control" placeholder="Google Meet Mobile number" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`
            );
            if ($(this).val() == 'Skype') $('.selectvertData').html(
                `<input class="my-2 col-12 mx-auto form-control" placeholder="Skype ID" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`
            );
            if ($(this).val() == 'Zoom') $('.selectvertData').html(
                `<input class="my-2 col-12 mx-auto form-control" placeholder="Email" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`
            );
            if ($(this).val() == 'WhatsApp') $('.selectvertData').html(
                `<input class="my-2 col-12 mx-auto form-control" placeholder="WhatsApp number" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`
            );
        });
        $(".reveal_number").on("click", function(e) {
            e.preventDefault();
            $(this).hide();
            $(this).next(".reveal_number-phone").fadeIn();
            let url = $(this).children('.url').val();
            let ty = $(this).children('.type').val();
            let pr = $(this).children('.pr_id').val();
            let ip = $(this).children('.phone_clicks').val();
            $.ajax({
                url: url,
                data: {
                    ty: ty,
                    pr: pr,
                    ip: ip
                },
                success: function(result) {
                    console.log(result.data);
                },
                error: function(errors) {
                    console.log(errors);
                }
            });
        });
    </script>
@endsection