@extends('layouts.app')
@section('page-title', 'Contact Us')


@section('preloader')
 @include('layouts.partials.preloader')
@endsection


@section('body-content')

    <!-- Main Section Starts here -->

    <main class="main__content_wrapper">

          <!-- Start breadcrumb section -->
         <section class="breadcrumb__section breadcrumb__bg" style="background-image: url('{{ asset('images/banner/breadcrumb-contact.webp') }}');">
            <div class="container">
                <div class="row row-cols-1">
                    <div class="col">
                        <div class="breadcrumb__content">
                            <h1 class="breadcrumb__content--title mb-10">Contact Us</h1>

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

        <!-- Start contact section -->
        <section class="contact__section section--padding">
            <div class="container">
                <div class="section__heading text-center mb-40">
                    <h2 class="section__heading--maintitle text__secondary mb-10">Get In Touch</h2>
                    <p class="section__heading--desc">We're dedicated to providing high-quality tech solutions at affordable prices, ensuring accessibility through diverse products.</p>
                </div>
                <div class="main__contact--area">
                    <div class="row align-items-center row-md-reverse">
                        <div class="col-lg-5">
                            <div class="contact__info border-radius-10">
                                <div class="contact__info--items">
                                    <h3 class="contact__info--content__title text-white mb-15">Contact Details</h3>
                                    <div class="contact__info--items__inner d-flex">
                                        <div class="contact__info--icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="31.568" height="31.128" viewBox="0 0 31.568 31.128">
                                                <path id="ic_phone_forwarded_24px" d="M26.676,16.564l7.892-7.782L26.676,1V5.669H20.362v6.226h6.314Zm3.157,7a18.162,18.162,0,0,1-5.635-.887,1.627,1.627,0,0,0-1.61.374l-3.472,3.424a23.585,23.585,0,0,1-10.4-10.257l3.472-3.44a1.48,1.48,0,0,0,.395-1.556,17.457,17.457,0,0,1-.9-5.556A1.572,1.572,0,0,0,10.1,4.113H4.578A1.572,1.572,0,0,0,3,5.669,26.645,26.645,0,0,0,29.832,32.128a1.572,1.572,0,0,0,1.578-1.556V25.124A1.572,1.572,0,0,0,29.832,23.568Z" transform="translate(-3 -1)" fill="currentColor"/>
                                            </svg>
                                        </div>
                                        <div class="contact__info--content">
                                            <p class="contact__info--content__desc text-white">Phone<br> <a href="tel:{{config('constants.PHONE')}}">{{config('constants.PHONE')}}</a> </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="contact__info--items">
                                    <h3 class="contact__info--content__title text-white mb-15">Email Address</h3>
                                    <div class="contact__info--items__inner d-flex align-items-center">
                                        <div class="contact__info--icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="31.57" height="31.13" viewBox="0 0 31.57 31.13">
                                                <path id="ic_email_24px" d="M30.413,4H5.157C3.421,4,2.016,5.751,2.016,7.891L2,31.239c0,2.14,1.421,3.891,3.157,3.891H30.413c1.736,0,3.157-1.751,3.157-3.891V7.891C33.57,5.751,32.149,4,30.413,4Zm0,7.783L17.785,21.511,5.157,11.783V7.891l12.628,9.728L30.413,7.891Z" transform="translate(-2 -4)" fill="currentColor"/>
                                            </svg>
                                        </div>
                                        <div class="contact__info--content">
                                            <p class="contact__info--content__desc text-white"> <a href="mailto:{{config('constants.PRIMARY_EMAIL')}}">{{config('constants.PRIMARY_EMAIL')}}</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="contact__info--items">
                                    <h3 class="contact__info--content__title text-white mb-15">Location</h3>
                                    <div class="contact__info--items__inner d-flex">
                                        <div class="contact__info--icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="31.57" height="31.13" viewBox="0 0 31.57 31.13">
                                                <path id="ic_account_balance_24px" d="M5.323,14.341V24.718h4.985V14.341Zm9.969,0V24.718h4.985V14.341ZM2,32.13H33.57V27.683H2ZM25.262,14.341V24.718h4.985V14.341ZM17.785,1,2,8.412v2.965H33.57V8.412Z" transform="translate(-2 -1)" fill="currentColor"/>
                                            </svg>
                                        </div>
                                        <div class="contact__info--content">
                                            <p class="contact__info--content__desc text-white">{{config('constants.ADDRESS')}}</p>
                                        </div>
                                    </div>
                                </div>
                                <!--<div class="contact__info--items">-->
                                <!--    <h3 class="contact__info--content__title text-white mb-15">Follow Us</h3>-->
                                <!--    <ul class="contact__info--social d-flex">-->
                                <!--        <li class="contact__info--social__list">-->
                                <!--            <a class="contact__info--social__icon" target="_blank" href="https://www.facebook.com/">-->
                                <!--                <svg xmlns="http://www.w3.org/2000/svg" width="7.667" height="16.524" viewBox="0 0 7.667 16.524">-->
                                <!--                    <path data-name="Path 237" d="M967.495,353.678h-2.3v8.253h-3.437v-8.253H960.13V350.77h1.624v-1.888a4.087,4.087,0,0,1,.264-1.492,2.9,2.9,0,0,1,1.039-1.379,3.626,3.626,0,0,1,2.153-.6l2.549.019v2.833h-1.851a.732.732,0,0,0-.472.151.8.8,0,0,0-.246.642v1.719H967.8Z" transform="translate(-960.13 -345.407)" fill="currentColor"></path>-->
                                <!--                </svg>-->
                                <!--                <span class="visually-hidden">Facebook</span>-->
                                <!--            </a>-->
                                <!--        </li>-->
                                <!--        <li class="contact__info--social__list">-->
                                <!--            <a class="contact__info--social__icon" target="_blank" href="https://twitter.com/">-->
                                <!--                <svg xmlns="http://www.w3.org/2000/svg" width="16.489" height="13.384" viewBox="0 0 16.489 13.384">-->
                                <!--                    <path data-name="Path 303" d="M966.025,1144.2v.433a9.783,9.783,0,0,1-.621,3.388,10.1,10.1,0,0,1-1.845,3.087,9.153,9.153,0,0,1-3.012,2.259,9.825,9.825,0,0,1-4.122.866,9.632,9.632,0,0,1-2.748-.4,9.346,9.346,0,0,1-2.447-1.11q.4.038.809.038a6.723,6.723,0,0,0,2.24-.376,7.022,7.022,0,0,0,1.958-1.054,3.379,3.379,0,0,1-1.958-.687,3.259,3.259,0,0,1-1.186-1.666,3.364,3.364,0,0,0,.621.056,3.488,3.488,0,0,0,.885-.113,3.267,3.267,0,0,1-1.374-.631,3.356,3.356,0,0,1-.969-1.186,3.524,3.524,0,0,1-.367-1.5v-.057a3.172,3.172,0,0,0,1.544.433,3.407,3.407,0,0,1-1.1-1.214,3.308,3.308,0,0,1-.4-1.609,3.362,3.362,0,0,1,.452-1.694,9.652,9.652,0,0,0,6.964,3.538,3.911,3.911,0,0,1-.075-.772,3.293,3.293,0,0,1,.452-1.694,3.409,3.409,0,0,1,1.233-1.233,3.257,3.257,0,0,1,1.685-.461,3.351,3.351,0,0,1,2.466,1.073,6.572,6.572,0,0,0,2.146-.828,3.272,3.272,0,0,1-.574,1.083,3.477,3.477,0,0,1-.913.8,6.869,6.869,0,0,0,1.958-.546A7.074,7.074,0,0,1,966.025,1144.2Z" transform="translate(-951.23 -1140.849)" fill="currentColor"></path>-->
                                <!--                </svg>-->
                                <!--                <span class="visually-hidden">Twitter</span>-->
                                <!--            </a>-->
                                <!--        </li>-->


                                <!--    </ul>-->
                                <!--</div>-->
                            </div>
                        </div>
                        <div class="col-lg-7">

                            <div class="contact__form">
                                <form class="contact__form--inner form">
                                    @csrf
                                    <div class="row">

                                        <div class="col-lg-6 col-md-6">
                                            <div class="contact__form--list mb-20">
                                                <label class="contact__form--label" for="fname">First Name <span class="contact__form--label__star">*</span></label>
                                                <input class="contact__form--input" name="fname" id="fname" placeholder="Enter Your First Name" type="text" value="{{ old('fname') }}" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="contact__form--list mb-20">
                                                <label class="contact__form--label" for="lname"> Last Name <span class="contact__form--label__star">*</span></label>
                                                <input class="contact__form--input" name="lname" id="lname" placeholder="Enter Your Last Name" type="text" value="{{ old('lname') }}" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="contact__form--list mb-20">
                                                <label class="contact__form--label" for="phone">Phone Number <span class="contact__form--label__star">*</span></label>
                                                <input class="contact__form--input" name="phone" id="phone" placeholder="Enter Your Phone number" type="text" value="{{ old('phone') }}" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="contact__form--list mb-20">
                                                <label class="contact__form--label" for="email">Email <span class="contact__form--label__star">*</span></label>
                                                <input class="contact__form--input" name="email" id="email" placeholder="Enter Your Email" type="email" value="{{old('email') }}" >
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="contact__form--list mb-10">
                                                <label class="contact__form--label" for="message">Write Your Message <span class="contact__form--label__star">*</span></label>
                                                <textarea class="contact__form--textarea" name="message" id="message" placeholder="Write Your Message"></textarea>

                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="contact__form--list mb-10">
                                                 <div class="my-3">
                                            <ul id="saveform_errList"></ul>
                                             <div id="success_message"></div>
                                          </div>
                                            </div>
                                        </div>
                                    </div>

                                    <button class="contact__form--btn primary__btn contact-frm" type="submit" id="contact_btn">Submit Now</button>
                                    <p class="form-messege"></p>
                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End contact section -->



    </main>

    <!-- Main Section End here -->


@endsection

@section('scripts')
<script>
    $(document).ready(function(){
    $(document).on('click','.contact-frm', function (e) {
     e.preventDefault();
     $('#contact_btn').attr('disabled', true);
    // alert("hello");
      var data = {
          'fname': $('#fname').val(),
          'lname': $('#lname').val(),
          'phone': $('#phone').val(),
          'email': $('#email').val(),
          'message': $('#message').val()
      }
      // console.log(data);
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });

      $.ajax({
         type: "POST",
         url: "contact_form",
         data: data,
         dataType: "json",
         success: function(response)
         {
            //console.log(response.student);
            if (response.status == 400)
            {
            $('#contact_btn').attr('disabled', false);
            $('#saveform_errList').html("");
            // $('#saveform_errList').addClass('alert alert-red');
            $.each(response.msg, function (key, err_values){
            $('#saveform_errList').append('<li class="alert alert-red">'+err_values+'</li>');
            });


            }
            else
            {
            $('#contact_btn').attr('disabled', false);
            $('#saveform_errList').html("");
            $('#success_message').html("");
            $('#success_message').addClass('alert alert-success');
            $('#success_message').text(response.msg);
            setTimeout(function() {
					$('#success_message').fadeOut("slow");
				}, 5000 );
            $('input[type="text"],textarea').val('');
             $('input[type="email"]').val('');
            }//else end
         }// success end

      });//ajax end

 })
 })
</script>
@endsection