@extends('website.layouts.app')
@section('content')
    <section id="banner-top" class="banner-top">
        <div class="container-fluid">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-lg-12 p-0">
                    <img src="{{ asset('uploads/contact/' . $page->banner) }}" alt=""
                        class="img-fluid w-100 storyherobanner">
                </div>
            </div>
        </div>
    </section>
    <section id="contact-us" class="contact-us my-5">
        <div class="container-fluid fixedwidth">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-lg-10">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-lg-9">
                            <h2>
                                @if (session('app_language', 'en') == 'en')
                                    {{ $page->title_en ?? '' }}
                                @else
                                    {{ $page->title_ar ?? '' }}
                                @endif
                            </h2>
                            <p>
                                @if (session('app_language', 'en') == 'en')
                                    {!! Str::limit($page->description_en, 150, '…') !!}
                                @else
                                    {!! Str::limit($page->description_ar, 150, '…') !!}
                                @endif
                            </p>
                        </div>
                    </div>
                    <div class="row d-flex justify-content-center align-items-center my-lg-4 my-3 ">
                        <div class="col-lg-6 col-md-6 col-12">
                            <img src="{{ asset('uploads/contact/' . $page->sub_banner) }}" alt="" class="img-fluid">
                        </div>
                        <div class="col-lg-6 col-md-6 col-12">
                            <div id="form-display">
                                <form method="POST" id="contactForm">
                                    @csrf
                                    <div class="row d-flex justify-content-between align-items-center">
                                        <div class="col-lg-12 mb-3">
                                            <label class="form-label mb-1">
                                                @if (session('app_language', 'en') == 'en')
                                                    Your Name
                                                @else
                                                    اسمك
                                                @endif
                                            </label>
                                            <input type="text" class="form-control" name="name" id="name"
                                                placeholder="{{ session('app_language', 'en') == 'en' ? 'Your Name' : 'اسمك' }}">
                                            <p class="text-danger"></p>
                                        </div>
                                        <div class="col-lg-12 mb-3">
                                            <label class="form-label mb-1">
                                                @if (session('app_language', 'en') == 'en')
                                                    Email Address
                                                @else
                                                ای میل ایڈریس
                                                @endif
                                            </label>
                                            <input type="email" name="email" id="email" class="form-control"
                                                placeholder="{{ session('app_language', 'en') == 'en' ? 'Email Address' : 'ای میل ایڈریس' }}">
                                            <p class="text-danger"></p>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 mb-3">
                                        <label class="form-label mb-1">
                                            @if (session('app_language', 'en') == 'en')
                                                Phone Number
                                            @else
                                                رقم التليفون
                                            @endif
                                        </label>
                                        <input type="tel" name="phone" id="phone" class="form-control"
                                            placeholder="{{ session('app_language', 'en') == 'en' ? 'Phone Number' : 'رقم التليفون' }}">
                                        <p class="text-danger"></p>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label mb-1">
                                            @if (session('app_language', 'en') == 'en')
                                                Your message
                                            @else
                                                رسالتك
                                            @endif
                                        </label>
                                        <textarea type="text" name="message" id="message" class="form-control" placeholder="{{ session('app_language', 'en') == 'en' ? 'Your message' : 'رسالتك' }}"></textarea>
                                        <p class="text-danger"></p>
                                    </div>
                                    <div class="mb-3 g-count-btn row d-flex justify-content-between align-items-center">
                                        <div class="col-lg-3 col-md-3 col-3">
                                            <div class="cart_button contactusbtn">
                                                <input type="submit" class="btn btn-primary"
                                                    value="{{ session('app_language', 'en') == 'en' ? 'Send' : 'يرسل' }}">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="our-store" class="top-header">
        <div class="container-fluid fixedwidth">
            <div class="row d-flex justify-content-center align-items-center py-5">
                <div class="col-lg-9 col-xxl-8 col-md-10 col-12">
                    <div class="row d-flex justify-content-center ">
                        <div class="top-title text-center">
                            <h3 class=" text-center">
                                @if (session('app_language', 'en') == 'en')
                                    {{ $page->stores_title_en ?? '' }}
                                @else
                                    {{ $page->stores_title_ar ?? '' }}
                                @endif
                            </h3>
                            <p>
                                @if (session('app_language', 'en') == 'en')
                                    {{ $page->stores_description_en ?? '' }}
                                @else
                                    {{ $page->stores_description_ar ?? '' }}
                                @endif
                            </p>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 text-center">
                            <div class="row d-flex justify-content-center">
                                <div class="col-lg-8">
                                    <div class="top-title text-center">
                                        <h4 class=" {{ session('app_language', 'en') == 'ar' ? 'text-end' : 'text-start' }} mb-0">
                                            @if (session('app_language', 'en') == 'en')
                                                {{ $page->headquarters_title_en ?? '' }}
                                            @else
                                                {{ $page->headquarters_title_ar ?? '' }}
                                            @endif
                                        </h4>
                                        <p class="{{ session('app_language', 'en') == 'ar' ? 'text-end' : 'text-start' }} mb-4">
                                            @if (session('app_language', 'en') == 'en')
                                                {{ $page->headquarters_description_en ?? '' }}
                                            @else
                                                {{ $page->headquarters_description_ar ?? '' }}
                                            @endif
                                        </p>
                                    </div>
                                    <div class="contact-icon ">
                                        <div class="row g-3 ">
                                            <!-- Phone -->
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }}">
                                                    <i class="bi bi-telephone text-white"></i>
                                                </div>
                                                @if (session('app_language', 'en') == 'en')
                                                    <a
                                                        href="tel:{{ $page->headquarters_contact }}">{{ $page->headquarters_contact ?? '' }}</a>
                                                @else
                                                    <a
                                                        href="tel:{{ $page->headquarters_contact }}">{{ $page->headquarters_contact ?? '' }}</a>
                                                @endif
                                            </div>
                                            <!-- Email -->
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }}">
                                                    <i class="bi bi-envelope  text-white"></i>
                                                </div>
                                                {{-- <a class="mail-to:">Info@Wasemflower.Com</a> --}}
                                                @if (session('app_language', 'en') == 'en')
                                                    <a
                                                        href="mail-to:{{ $page->headquarters_email }}">{{ $page->headquarters_email ?? '' }}</a>
                                                @else
                                                    <a
                                                        href="mail-to:{{ $page->headquarters_email }}">{{ $page->headquarters_email ?? '' }}</a>
                                                @endif
                                            </div>
                                            <!-- Timing -->
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }}">
                                                    <i class="fas fa-clock fa-lg text-black "></i>
                                                </div>
                                                <span class="">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $page->headquarters_timming ?? '' }}
                                                    @else
                                                        {{ $page->headquarters_timming ?? '' }}
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12  d-flex ">
                            <div class="divider"></div>
                            <div class="story-title pt-4 pt-md-0 pt-lg-0">
                                <div class="row d-flex align-items-center justify-content-center">
                                    <div class="col-lg-12">
                                        <div class="top-title text-center">
                                            <h4 class=" {{ session('app_language', 'en') == 'ar' ? 'text-end' : 'text-start' }}">
                                                @if (session('app_language', 'en') == 'en')
                                                    {{ $page->branch_title_en ?? '' }}
                                                @else
                                                    {{ $page->branch_title_ar ?? '' }}
                                                @endif
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                                <h5 class="mb-0">
                                    @if (session('app_language', 'en') == 'en')
                                        {{ $page->branch_city_two_en ?? '' }}
                                    @else
                                        {{ $page->branch_city_two_ar ?? '' }}
                                    @endif
                                </h5>
                                <p>
                                    @if (session('app_language', 'en') == 'en')
                                        {{ $page->branch_city_description_two_en ?? '' }}
                                    @else
                                        {{ $page->branch_city_description_two_ar ?? '' }}
                                    @endif
                                </p>
                                <h5 class="mb-0">
                                    @if (session('app_language', 'en') == 'en')
                                        {{ $page->branch_city_three_en ?? '' }}
                                    @else
                                        {{ $page->branch_city_three_ar ?? '' }}
                                    @endif
                                </h5>
                                <p>
                                    @if (session('app_language', 'en') == 'en')
                                        {{ $page->branch_city_description_three_en ?? '' }}
                                    @else
                                        {{ $page->branch_city_description_three_ar ?? '' }}
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="map">
        <div class="container-fluid">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-lg-12 p-0">
                    <iframe src="{{ $page->maps ?? '' }}" width="100%" height="100%" style="border:0;"
                        allowfullscreen="" loading="lazy">
                    </iframe>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('scriptJs')
    <script>
        $(document).ready(function() {
            $(document).on("submit", "#contactForm", function(event) {
                event.preventDefault();
                var data = new FormData(this);
                $("button[type=submit]").prop('disabled', true);
                $.ajax({
                    url: '{{ route('website.contact.us.store') }}',
                    type: 'post',
                    data: data,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.status === true) {
                            toastr.success(response.message, "Success");
                            $('#contactForm')[0].reset();
                            $(".error").removeClass('invalid-feedback').html('');
                            $("input, select").removeClass('is-invalid');
                            $("button[type=submit]").prop('disabled', false);
                        } else {
                            let errors = response['errors'];
                            $("button[type=submit]").prop('disabled', false);
                            $(".error").removeClass('invalid-feedback').html('');
                            $("input, select").removeClass('is-invalid');
                            $.each(errors, function(key, value) {
                                $(`#${key}`).addClass('is-invalid')
                                    .siblings('p')
                                    .addClass('invalid-feedback')
                                    .html(value);
                            });
                            toastr.error(response.message, "Required");
                        }
                    },
                    error: function(jqXHR, exception) {
                        toastr.error("Please Try Again...", "Error");
                        $("button[type=submit]").prop('disabled', false);
                    }
                });
            });
        });
    </script>
@endsection