@php
    $setting = App\Models\Websit::first();
@endphp
@extends('front.layout.pages')
@section('title')
    @if (Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() == 'ar')
        تواصل معنا
    @else
        Contact Us
    @endif
@stop
@section('content')

    <section class="land-sec py-5 land-sec1 position-relative    wow fadeInUp " data-wow-duration="2s" data-wow-delay=".5s"
        style="overflow-y: hidden;">
        <div class="container text-center text-md-start">
            <div class="row  align-items-center justify-content-around ">
                <div class="col-xl-5 col-lg-6 text-white  mb-4 wow fadeInLeft" data-wow-duration="2s" data-wow-delay=".5s">
                    <h5 class="  mb-3">{{ __('How can we best help you?') }} </h5>
                    <h1 class="mb-3 fw-bold" style="font-size: 50px;">
                        {{ __('Contact 3DIT') }}
                    </h1>
                    {{-- <p class=" prg" style="margin-bottom: 4rem;"> CLorem Ipsum is simply dummy text of the printing and
                            typesetting industry.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                            took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurie
                            s, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in t
                            he 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                            publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                        </p> --}}
                    <a data-bs-toggle="modal" data-bs-target="#exampleModal1"
                        class="btn btn-top  rounded-3 shadow shadow-sm fs-4"
                        style="padding: 11px 4rem;">{{ __('Get a Quote') }} </a>

                </div>
                <div class=" col-xl-7  col-lg-6  mb-4 wow text-end" data-wow-duration="2s" data-wow-delay=".5s">
                    <img src="{{ asset('front/images/\'.png') }}" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>

    <section class="info my-5">
        <div class="container text-center border-1 border-bottom pb-5 ">
            <div class="row  align-items-center ">
                <div class="col-lg-4 mb-3 text-lg-start  wow fadeInLeft " data-wow-duration="2s" data-wow-delay=".5s">

                    <h2 class="mb-4 "> {{ __('Contact 3DIT') }}</h2>
                    <p class="prg">
                        @if (Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() == 'ar')
                            {{ App\Models\ServiceText::first()->contact_ar ?? '' }}
                        @else
                            {{ App\Models\ServiceText::first()->contact ?? '' }}
                        @endif
                    </p>
                </div>
                <div class="col-lg-8 mb-3 text-lg-end   wow fadeInRight " data-wow-duration="2s" data-wow-delay=".5s">
                    <div class="d-flex  flex-column flex-sm-row justify-content-sm-evenly align-items-center">
                        <div class="d-flex flex-column mb-3">
                            <div class="d-flex mb-2">
                                <i class="bi bi-envelope me-2"></i>
                                <p>{{ __('Email Adress') }} </p>
                            </div>
                            <div>
                                <h5>{{ $setting->email ?? '' }}</h5>
                            </div>
                        </div>
                        <div class="d-flex mb-3 flex-column">
                            <div class="d-flex mb-2">
                                <i class="bi bi-telephone me-2"></i>
                                <p>{{ __('Telephone') }}</p>
                            </div>
                            <div>
                                <h5> {{ $setting->telephone_number ?? '' }}</h5>
                            </div>
                        </div>
                        <div class="d-flex mb-3 flex-column">
                            <div class="d-flex mb-2">
                                <i class="bi bi-phone me-2"></i>
                                <p>{{ __('Customer Service') }}</p>
                            </div>
                            <div>
                                <h5>{{ $setting->phone ?? '' }}</h5>
                            </div>
                        </div>


                    </div>
                </div>

            </div>
        </div>
    </section>
    <section class="form mt-5 wow fadeInUp " data-wow-duration="2s" data-wow-delay=".5s" style="margin-bottom: 5rem;">
        <form action="{{ route('view.contact') }}" id="contactForm1" method="POST">
            @csrf
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <div class="">
                            <label for="exampleInputEmail1" class="form-label">{{ __('You Name') }} </label>
                            <input type="text" class="form-control" name="name" id="name" aria-describedby="emailHelp">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label for="exampleInputEmail2" class="form-label">{{ __('Email Adress') }}</label>
                            <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label for="exampleInputEmail3" class="form-label">{{ __('Phone Number') }}</label>
                            <input type="text" class="form-control" name="phone" id="phone" aria-describedby="emailHelp">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label for="select" class="form-laالجوالbel" style="margin-bottom: .5rem;">What do you need
                                help with?
                            </label>
                            <select class="form-select " aria-label="Default select example" id="select">
                                <option selected>chose...</option>
                                <option value="1"> ch1</option>
                                <option value="2">ch2 </option>
                                <option value="3">other</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="mb-3">
                            <label for="exampleInputEmail4" class="form-label">{{ __('Address') }}</label>
                            <input type="text" class="form-control" name="subject" id="subject" aria-describedby="emailHelp">

                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="mb-3">
                            <label for="exampleInputEmail4" class="form-label">{{ __('What\'s your question, comment, or issue?') }}
                            </label>
                            <textarea type="text" rows="8" class="form-control" name="message" id="message" aria-describedby="emailHelp"></textarea>

                        </div>
                    </div>
                    <div class="col-lg-4">
                        <p style="margin-top: 2rem; font-size: 15px;">
                            {{ __('Share all the details! The more we know, the better we can help. Sharing a screenshot or photo of what\'s wrong will help us help you even faster.') }}
                        </p>
                    </div>
{{--
                    <div class="col-lg-8">
                        <div class="mt-3">
                            <label for="exampleInputEmail4" class="form-label">Attachments
                            </label>

                            <div class="drag-area ">
                                <p class="bros mb-0 ">ADD Files </p>
                                <div class="mx-2"> OR </div>
                                <header> Drag & Drop to Upload File </header>


                                <input type="file" hidden>
                            </div>

                            <p class="mb-4 mt-3" style="color: #9D9D9D; font-size: 14px;">This helps us make sure you get
                                the right
                                answer as fast as possible.

                            </p>



                        </div>

                        <script>
                            //selecting all required elements
                            const dropArea = document.querySelector(".drag-area"),
                                dragText = dropArea.querySelector("header"),
                                button = dropArea.querySelector("p"),
                                input = dropArea.querySelector("input");
                            let file; //this is a global variable and we'll use it inside multiple functions

                            button.onclick = () => {
                                input.click(); //if user click on the button then the input also clicked
                            }

                            input.addEventListener("change", function() {
                                //getting user select file and [0] this means if user select multiple files then we'll select only the first one
                                file = this.files[0];
                                dropArea.classList.add("active");
                                dropArea.textContent = input.value;
                                showFile(); //calling function
                            });


                            //If user Drag File Over DropArea
                            dropArea.addEventListener("dragover", (event) => {
                                event.preventDefault(); //preventing from default behaviour
                                dropArea.classList.add("active");
                                dropArea.textContent = "drag file ...";


                            });

                            //If user leave dragged File from DropArea
                            dropArea.addEventListener("dragleave", (event) => {
                                dropArea.classList.remove("active");
                                dragText.textContent = "Drag & Drop to Upload File";
                            });


                            //If user drop File on DropArea
                            dropArea.addEventListener("drop", (event) => {
                                event.preventDefault(); //preventing from default behaviour
                                //getting user select file and [0] this means if user select multiple files then we'll select only the first one
                                file = event.dataTransfer.files[0];
                                showFile(); //calling function
                            });

                            function showFile() {
                                let fileType = file.type; //getting selected file type
                                let validExtensions = ["image/jpeg", "image/jpg", "image/png"]; //adding some valid image extensions in array
                                if (validExtensions.includes(fileType)) { //if user selected file is an image file
                                    let fileReader = new FileReader(); //creating new FileReader object
                                    fileReader.onload = () => {
                                        let fileURL = fileReader.result;


                                    }

                                    dropArea.innerHTML = fileReader.readAsDataURL(file);
                                } else {
                                    alert("This is not an Image File!");
                                    dropArea.classList.remove("active");
                                    dragText.textContent = "Drag & Drop to Upload File";
                                }

                            }
                        </script>
                    </div> --}}
                    <div class="col-12 my-3">
                        <div class="h-captcha my-3 w-100" data-sitekey="194e8efb-f32d-4d44-8ffb-b54694c2f321"></div>

                        <button type="submit" onclick="submitContact1()" id="contact_submit1" class="btn btn-primary py-3 w-25">{{ __('Submit') }}</button>
                    </div>
                </div>
            </div>


        </form>
    </section>
@stop