@extends('site.layouts.master')

@section('title')
<title>{{__('site.sell_buy')}}</title>
@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')){{str_replace('/en','/ar',str_replace('public/','',url()->current()))}}@else{{str_replace('/ar','/en',str_replace('public/','',url()->current()))}}@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('Sell&Buy') }}
    </div>
    {!! $breadcrumbSchema !!}
    <div class="d-flex justify-content-center justify-content-lg-center align-items-lg-center sellBuyBackground">
        <div class="text-center py-3 px-2">
            <h1 class="text-white SF24_29Bold SF60_71Bold-lg my-4">@lang('site.main_sell_buy_quote')</h1>
            <p class="text-white SF14_20Medium SF32_38Medium-lg">@lang('site.form_sell_buy_quote')</p>
            @if (session()->get('success') != null)
                <div class="alert alert-success col-auto mx-auto text-center" role="alert">
                    <p class="text-success p-1 m-1">{{ session()->get('success') }}</p>
                </div>
            @elseif (session()->get('message') != null)
                <div class="alert alert-danger col-auto mx-auto text-center" role="alert">
                    <p class="text-danger p-1 m-1">{{ session()->get('message') }}</p>
                </div>
            @endif
            <form action="{{ route('site.sellbuyStore') }}" class="col-11 col-lg-7 mx-auto" method="POST">
                @csrf
                <input type="hidden" name="id" value="{{ $sellBuy->id }}">
                <input type="hidden" id="gtokensellbuy" name="gToken">
                <div class="form-group my-2">
                    <input type="text" name="address" class="form-control text-707070 priceplaceholder"
                        placeholder="@lang('site.enter_address')" value="{{ $sellBuy->address ?? old('address') }}">
                    @error('address')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group my-2">
                    <input type="email" name="email" class="form-control text-707070 priceplaceholder"
                        placeholder="@lang('site.Email')" value="{{ $sellBuy->email ?? old('email') }}">
                    @error('email')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="d-lg-flex justify-content-lg-between align-items-lg-center">
                    <div class="form-group my-2 w-48">
                        <input type="text" name="name" class="form-control text-707070 priceplaceholder"
                            placeholder="@lang('site.Name')" value="{{ $sellBuy->name ?? old('name') }}">
                        @error('name')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group my-2 w-48">
                        <input type="text" name="phone" class="form-control text-707070 priceplaceholder"
                            placeholder="@lang('site.Phone')" value="{{ $sellBuy->phone ?? old('phone') }}">
                        @error('phone')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="form-group text-center">
                    <a onclick="Captcha('gtokensellbuy')"
                        class="btn bg-red text-white SF22_30Bold-Important w-100 py-lg-2">@lang('site.submit')</a>
                    <button hidden type="submit" id="doSubmitWithCaptchagtokensellbuy"></button>
                </div>
            </form>
        </div>
    </div>
    <div class="bg-f9f9f9 py-3">
        <div class="customWidth">
            <div class="bg-white shadow-sm rounded-3 p-3 mb-3 mb-lg-5">
                <p class="text-blue SF22_26Black">@lang('site.How To Selling With The Aim Of Buy Works'):</p>
                <img loading="lazy" class="rounded-3 w-100 maxVideoHeight" src="{{ asset('new_theme/video-placeholder.webp') }}"
                    alt="explanation video">
            </div>
            <div>
                <p class="SF22_26Bold SF40_50Bold-lg text-blue mb-3">@lang('site.sell_buy_calc_head')</p>
                <p class="SF14_16Medium SF25_40Medium-lg text-707070">@lang('site.sell_buy_calc_quote')</p>
                <div class="bg-white rounded-4 shadow-sm p-3 p-lg-4">
                    <div class="d-flex justify-content-between">
                        <p class="SF20_40Bold SF32_38Bold-lg text-3b3b3b mb-0">@lang('site.Seller Savings')</p>
                        <p class="SF20_40Bold SF32_38Bold-lg text-3b3b3b mb-0"><span id="res"
                                class="price-commas">{{ $initSave }}</span> @lang('site.EGP')</p>
                    </div>
                    <p class="SF14_40Medium SF28_40Medium-lg text-red">@lang('site.Home Sale Price') <span id="homeValue"
                            class="price-commas">{{ $initValue }}</span> @lang('site.EGP')</p>
                    <input class="rangeSlider w-100" type="range" min="{{ $min }}" max="{{ $max }}"
                        value="{{ $initValue }}" step="{{ $step }}" id="myRange">
                    <div class="d-flex justify-content-between col-12 px-0">
                        <p class="SF20_40Medium mb-0 price-commas">{{ $min }} @lang('site.EGP')</p>
                        <p class="SF20_40Medium mb-0 price-commas">{{ $max }} @lang('site.EGP')</p>
                    </div>
                </div>
            </div>
            <div class="my-4">
                <p class="SF20_30Bold SF40_60Bold-lg text-3b3b3b">@lang('site.end_sell_buy_quote')</p>
                <p class="SF14_25Regular SF22_30Regular-lg text-3b3b3b mb-1">@lang('site.sell_buy_end_quote')</p>
            </div>
            <div class="d-lg-flex justify-content-lg-between mb-lg-5">
                <div class="w-lg-30">
                    <img loading="lazy" class="w-100 rounded-3" src="{{ asset('new_theme/sell_buy1.webp') }}" alt="Sell Buy Example">
                </div>
                <div class="bg-white rounded-4 p-3 shadow-sm my-3 my-lg-0 w-lg-30">
                    <p class="SF28_40Bold text-blue my-3 my-lg-4">@lang('site.Remax_Elmohager')</p>
                    <div class="line"></div>
                    <div class="d-flex justify-content-between my-2 my-lg-3 px-2 SF20_40Regular text-3b3b3b">
                        <p class="mb-0">@lang('site.Commission')</p>
                        <p class="mb-0"><i
                                class="fa-solid fa-check rounded-circle bg-darkGreen text-white p-1 text-center"></i></p>
                    </div>
                    <div class="line"></div>
                    <div class="d-flex justify-content-between my-2 my-lg-3 px-2 SF20_40Regular text-3b3b3b">
                        <p class="mb-0">@lang('site.Full Service Agent')</p>
                        <p class="mb-0"><i
                                class="fa-solid fa-check rounded-circle bg-darkGreen text-white p-1 text-center"></i></p>
                    </div>
                    <div class="line"></div>
                    <div class="d-flex justify-content-between my-2 my-lg-3 px-2 SF20_40Regular text-3b3b3b">
                        <p class="mb-0">@lang('site.Extensive Advertising')</p>
                        <p class="mb-0"><i
                                class="fa-solid fa-check rounded-circle bg-darkGreen text-white p-1 text-center"></i></p>
                    </div>
                    <div class="line"></div>
                    <div class="d-flex justify-content-between my-2 my-lg-3 px-2 SF20_40Regular text-3b3b3b">
                        <p class="mb-0">@lang('site.Free Professional Photos')</p>
                        <p class="mb-0"><i
                                class="fa-solid fa-check rounded-circle bg-darkGreen text-white p-1 text-center"></i></p>
                    </div>
                    <div class="line"></div>
                    <div class="d-flex justify-content-between my-2 my-lg-3 px-2 SF20_40Regular text-3b3b3b">
                        <p class="mb-0">@lang('site.Free 3D Video')</p>
                        <p class="mb-0"><i
                                class="fa-solid fa-check rounded-circle bg-darkGreen text-white p-1 text-center"></i></p>
                    </div>
                </div>
                <div class="bg-white rounded-4 p-3 shadow-sm my-3 my-lg-0 w-lg-30">
                    <p class="SF28_40Bold text-red my-3 my-lg-4">@lang('site.Traditional')</p>
                    <div class="line"></div>
                    <div class="d-flex justify-content-between my-2 my-lg-3 px-2 SF20_40Regular text-3b3b3b">
                        <p class="mb-0">@lang('site.Commission')</p>
                        <p class="mb-0"><i
                                class="fa-solid fa-check rounded-circle bg-darkGreen text-white p-1 text-center"></i></p>
                    </div>
                    <div class="line"></div>
                    <div class="d-flex justify-content-between my-2 my-lg-3 px-2 SF20_40Regular text-3b3b3b">
                        <p class="mb-0">@lang('site.Full Service Agent')</p>
                        <p class="mb-0"><i
                                class="fa-solid fa-check rounded-circle bg-e2e2e2 text-white p-1 text-center"></i></p>
                    </div>
                    <div class="line"></div>
                    <div class="d-flex justify-content-between my-2 my-lg-3 px-2 SF20_40Regular text-3b3b3b">
                        <p class="mb-0">@lang('site.Extensive Advertising')</p>
                        <p class="mb-0"><i
                                class="fa-solid fa-check rounded-circle bg-e2e2e2 text-white p-1 text-center"></i></p>
                    </div>
                    <div class="line"></div>
                    <div class="d-flex justify-content-between my-2 my-lg-3 px-2 SF20_40Regular text-3b3b3b">
                        <p class="mb-0">@lang('site.Free Professional Photos')</p>
                        <p class="mb-0"><i
                                class="fa-solid fa-check rounded-circle bg-e2e2e2 text-white p-1 text-center"></i></p>
                    </div>
                    <div class="line"></div>
                    <div class="d-flex justify-content-between my-2 my-lg-3 px-2 SF20_40Regular text-3b3b3b">
                        <p class="mb-0">@lang('site.Free 3D Video')</p>
                        <p class="mb-0"><i
                                class="fa-solid fa-check rounded-circle bg-e2e2e2 text-white p-1 text-center"></i></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="line d-lg-none"></div>
@endsection
@section('script')
    <script>
        var slider = document.getElementById("myRange");
        var output = document.getElementById("homeValue");
        var save = document.getElementById("res");
        slider.oninput = function() {
            x = this.value;
            y = this.value * .02
            x = x.toString().split(".");
            x[0] = x[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            x = x.join(".");
            y = y.toString().split(".");
            y[0] = y[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            y = y.join(".");
            output.innerHTML = x;
            save.innerHTML = y;
        }
    </script>
@endsection