@extends('website.layouts.app')
@section('page-title')
    {{__('website.contact-us')}}
@endsection
@section('bootstrap')
    <link rel="stylesheet" id="brk-direction-bootstrap" href="{{asset('website/css/assets/bootstrap.css')}}">
    <link rel="stylesheet" id="brk-direction-bootstrap"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    @if(app()->getLocale()=='ar')
        <link rel="stylesheet" id="brk-direction-bootstrap" href="{{asset('website/css/assets/bootstrap-rtl.css')}}">

    @else
        <link rel="stylesheet" id="brk-direction-bootstrap" href="{{asset('website/css/assets/bootstrap.css')}}">

    @endif

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
@endsection

@section('breadcrumb')
    <div class="breadcrumbs__section breadcrumbs__section-thin brk-bg-center-cover lazyload"
         data-bg="{{asset('website/img/contact-us/1920x260_1.jpg')}}" data-brk-library="component__breadcrumbs_css">
        <span class="brk-abs-bg-overlay brk-base-bg-gradient-right-100 opacity-90"></span>
        <div class="breadcrumbs__wrapper rtl">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-12">
                        <div
                            class=" justify-content-lg-center  pr-40 pr-xs-0 breadcrumbs__title center">
                            <h2
                                class="brk-white-font-color font__weight-semibold font__size-48 line__height-68 font__family-montserrat">
                                {{__('website.contact-us')}}
                            </h2>

                            <ol
                                class="breadcrumb font__family-montserrat font__size-15 mt-10 line__height-16 brk-white-font-color">
                                <li>
                                    <a href="{{route('website.home')}}">{{__('website.home')}}</a>

                                    @if(app()->getLocale() == 'ar')
                                        &nbsp;&nbsp;&nbsp;&nbsp;<i class="fal fa-chevron-left icon"></i>
                                    @else
                                        <i class="fal fa-chevron-right icon"></i>&nbsp;&nbsp;&nbsp;
                                    @endif
                                </li>
                                <li class="active"> {{__('website.contact-us')}}</li>
                            </ol>

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

@endsection
@section('content')
    <section class="pt-80 pb-25 rtl">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <h1
                        class="font__family-montserrat font__size-40  font__weight-thin mb-10">

                        <span class="font__weight-bold">{{__('website.contact-form')}}</span>
                    </h1>
                    <form action="{{route('website.contact.store')}}" method="post"
                          class=" mb-30 brk-subscribe-mail_dark brk-form-strict pt-15 wow fadeInLeft">
                        @csrf
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <input type="text" name="name" placeholder="{{__('website.your-name')}}">
                            </div>
                            <div class="col-12 col-md-6">
                                <input type="text" name="phone" placeholder="{{__('website.your-phone')}}">
                            </div>
                            <div class="col-12">
										<textarea name="message" class="bordered-bottom" placeholder="{{__('website.your-message')}}"
                                                  style="min-height: 160px;"></textarea>
                            </div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn center btn-inside-out btn-lg btn__full_width btn-icon border-radius-30 mt-25 btn-shadow"
                                    data-brk-library="component__button">
                                <i class="fas fa-envelope icon-inside"></i>
                                <span class="before">{{__('website.send-a-message')}}</span><span class="text" style="padding-left: 40px;"> {{__('website.send-a-message')}}
                                </span><span class="after">{{__('website.send-a-message')}}</span>
                            </button>
                        </div>
                    </form>
                </div>
                <div class="col-lg-1"></div>
                <div class="col-lg-5">
                    <div class="wow fadeInRight">
                        <h1
                            class="font__family-montserrat font__size-50 line__height-60 font__weight-thin mb-30">
                            {{__('website.need-help')}} <br>
                            <span class="font__weight-bold">{{__('website.contact-us')}}</span>
                        </h1>
                        <p class="brk-dark-font-color font__size-14 line__height-26 mb-35">{{__('website.contact-us-desc')}} </p>
                        <p class="font__family-open-sans font__weight-bold font__size-14 mb-15">
                            <i
                                class="brk-footer-icon text-middle fa fa-envelope line__height-24 brk-base-font-color"></i>
                            <a href="mailto:info@domain.com" class="show-inline-block">{{$settings['email']}}</a>
                        </p>
                        <p class="font__family-open-sans font__weight-bold font__size-14 mb-15">
                            <i
                                class="brk-footer-icon text-middle fas fa-map-marker-alt line__height-24 brk-base-font-color"></i>
                            <span>{{$settings['address']}}</span>
                        </p>
                        <p class="font__family-open-sans font__weight-bold font__size-14 mb-15">
                            <i
                                class="brk-footer-icon text-middle fa fa-phone line__height-24 brk-base-font-color"></i>
                            <a href="tel:{{$settings['phone']}}" class="show-inline-block">{{$settings['phone']}}</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
{{--    <section class="pt-lg-30 pt-0 pb-lg-30 pb-30 rtl" id="services">--}}
{{--        <div class="container">--}}
{{--            <div class="text-center mb-50">--}}
{{--                <h2 class=" font__weight-bold font__size-48 line__height-52 mt-30 text-uppercase mb-25 brk-color-base-3 brk-library-rendered"--}}
{{--                    data-brk-library="component__title">--}}
{{--                    {{__('website.message')}}--}}
{{--                    <span class="brk-base-font-color"> {{__('website.grand')}} </span>--}}
{{--                </h2>--}}
{{--                <div class="divider-cross wow zoomIn brk-library-rendered" data-brk-library="component__title"--}}
{{--                     style="visibility: visible; animation-name: zoomIn;">--}}
{{--                    <span></span>--}}
{{--                    <span></span>--}}
{{--                </div>--}}
{{--                <h5 class="brk-color-base-3  font__size-18  line__height-26 opacity-50 letter-spacing-20 brk-library-rendered"--}}
{{--                    data-brk-library="component__title">--}}

{{--                    {{__('website.grand-message-desc')}}--}}

{{--                </h5>--}}
{{--            </div>--}}

{{--        </div>--}}
{{--        <div class="container">--}}
{{--            <div class="row">--}}
{{--                <div class="col-md-6 col-xl-3 text-center">--}}
{{--                    <figure class="shape-box shape-box_stripe" data-brk-library="component__shape_box">--}}
{{--                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="--}}
{{--                             data-src="{{asset('website/img/demo_freelance_blog/270x430_1.jpg')}}" class="lazyload" alt="alt">--}}
{{--                        <div class="brk-abs-overlay z-index-0 bg-black opacity-60"></div>--}}
{{--                        <div class="icon">--}}
{{--                            <i class="fas fa-laptop-code"></i>--}}
{{--                        </div>--}}
{{--                        <figcaption>--}}
{{--                            <div class="show-cont">--}}
{{--                                <h4 class=" font__weight-bold font__size-18 text-uppercase main-title text-center">--}}
{{--                                    {{__('website.number-1')}}   </h4>--}}
{{--                            </div>--}}
{{--                            <p class="font__family-open-sans font__size-14 text-gray text-center">--}}
{{--                                {{__('website.number-1-desc')}}--}}
{{--                            </p>--}}
{{--                            <a href="#" class="btn btn-inside-out btn-lg border-radius-30 font__weight-bold"--}}
{{--                               data-brk-library="component__button">--}}
{{--                                <span class="before">{{__('website.read-more')}}</span><span class="text">Click Me</span><span--}}
{{--                                    class="after">{{__('website.read-more')}}</span>--}}
{{--                            </a>--}}
{{--                        </figcaption>--}}
{{--                        <span class="after"></span>--}}
{{--                    </figure>--}}
{{--                </div>--}}
{{--                <div class="col-md-6 col-xl-3 text-center">--}}
{{--                    <figure class="shape-box shape-box_stripe" data-brk-library="component__shape_box">--}}
{{--                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="--}}
{{--                             data-src="{{asset('website/img/demo_freelance_blog/270x430_2.jpg')}}" class="lazyload" alt="alt">--}}
{{--                        <div class="brk-abs-overlay z-index-0 bg-black opacity-60"></div>--}}
{{--                        <div class="icon">--}}
{{--                            <i class="fas fa-layer-group"></i>--}}
{{--                        </div>--}}
{{--                        <figcaption>--}}
{{--                            <div class="show-cont">--}}
{{--                                <h4 class=" font__weight-bold font__size-18 text-uppercase main-title text-center">--}}
{{--                                    {{__('website.20-years-of-experience')}}</h4>--}}
{{--                            </div>--}}
{{--                            <p class="font__family-open-sans font__size-14 text-gray text-center">--}}
{{--                                {{__('website.20-years-of-experience-desc')}}--}}
{{--                            </p>--}}
{{--                            <a href="#" class="btn btn-inside-out btn-lg border-radius-30 font__weight-bold"--}}
{{--                               data-brk-library="component__button">--}}
{{--                                <span class="before">{{__('website.read-more')}}</span><span class="text">Click Me</span><span--}}
{{--                                    class="after">{{__('website.read-more')}}</span>--}}
{{--                            </a>--}}
{{--                        </figcaption>--}}
{{--                        <span class="after"></span>--}}
{{--                    </figure>--}}
{{--                </div>--}}
{{--                <div class="col-md-6 col-xl-3 text-center">--}}
{{--                    <figure class="shape-box shape-box_stripe" data-brk-library="component__shape_box">--}}
{{--                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="--}}
{{--                             data-src="{{asset('website/img/demo_freelance_blog/270x430_3.jpg')}}" class="lazyload" alt="alt">--}}
{{--                        <div class="brk-abs-overlay z-index-0 bg-black opacity-60"></div>--}}
{{--                        <div class="icon">--}}
{{--                            <i class="fas fa-eye-dropper"></i>--}}
{{--                        </div>--}}
{{--                        <figcaption>--}}
{{--                            <div class="show-cont">--}}
{{--                                <h4 class=" font__weight-bold font__size-18 text-uppercase main-title text-center">--}}
{{--                                    {{__('website.protection')}} </h4>--}}
{{--                            </div>--}}
{{--                            <p class="font__family-open-sans font__size-14 text-gray text-center">--}}
{{--                                {{__('website.protection-desc')}}--}}
{{--                            </p>--}}
{{--                            <a href="#" class="btn btn-inside-out btn-lg border-radius-30 font__weight-bold"--}}
{{--                               data-brk-library="component__button">--}}
{{--                                <span class="before">{{__('website.read-more')}}</span><span class="text">{{__('website.click-me')}}</span><span--}}
{{--                                    class="after">{{__('website.read-more')}}</span>--}}
{{--                            </a>--}}
{{--                        </figcaption>--}}
{{--                        <span class="after"></span>--}}
{{--                    </figure>--}}
{{--                </div>--}}
{{--                <div class="col-md-6 col-xl-3 text-center">--}}
{{--                    <figure class="shape-box shape-box_stripe" data-brk-library="component__shape_box">--}}
{{--                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="--}}
{{--                             data-src="{{asset('website/img/demo_freelance_blog/270x430_4.jpg')}}" class="lazyload" alt="alt">--}}
{{--                        <div class="brk-abs-overlay z-index-0 bg-black opacity-60"></div>--}}
{{--                        <div class="icon">--}}
{{--                            <i class="fas fa-cogs"></i>--}}
{{--                        </div>--}}
{{--                        <figcaption>--}}
{{--                            <div class="show-cont">--}}
{{--                                <h4 class=" font__weight-bold font__size-18 text-uppercase main-title text-center">--}}
{{--                                    {{__('website.40-employee')}} </h4>--}}
{{--                            </div>--}}
{{--                            <p class="font__family-open-sans font__size-14 text-gray text-center">--}}
{{--                                {{__('website.40-employee-desc')}}--}}
{{--                            </p>--}}
{{--                            <a href="#" class="btn btn-inside-out btn-lg border-radius-30 font__weight-bold"--}}
{{--                               data-brk-library="component__button">--}}
{{--                                <span class="before">{{__('website.read-more')}}</span><span class="text">{{__('website.click-me')}}</span><span--}}
{{--                                    class="after">{{__('website.read-more')}}</span>--}}
{{--                            </a>--}}
{{--                        </figcaption>--}}
{{--                        <span class="after"></span>--}}
{{--                    </figure>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </section>--}}

@endsection