@extends('front.master.master')
@section('title', __('Connect us'))
@section('content')
<div class="main-body body-home overflow-hidden">
    <div class="call-us py-5">
        <div class="container">

            <div class="text-center">
                <h4 class="text-white">{{__('Connect us')}}</h4>
                <p class="text-white">{{__('We are happy to serve you, so feel free to send us a message or call us')}}</p>
            </div>

            <div class="d-flex align-items-center my-5">
                <div class="icon-title p-2 rounded-3 d-flex align-items-center justify-content-center">
                    <img src="{{asset('front')}}/images/p-white.png" alt="">
                </div>
                <h4 class="text-white mx-3 fw-bold">{{__('Communication model')}}</h4>
            </div>
            <div class="form-job px-4">
                <form action="{{route('add-Contact')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 col-xs-12">
                            <div class="my-3">
                                <label for="" class="text-white mb-2">{{__('full name')}}</label>
                                <div class="position-relative input-val">
                                    <i class="icon-user-b fix-icon-Input colorMain"></i>
                                    <input type="text" class="input-icon w-100" required maxlength="225"  name="name" placeholder="{{__('full name')}} ">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12">
                            <div class="my-3">
                                <label for="" class="text-white mb-2">{{__('email')}}</label>
                                <div class="position-relative input-val">
                                    <i class="icon-user-b fix-icon-Input colorMain"></i>
                                    <input type="text" required maxlength="225"  name="email" class="input-icon w-100" placeholder="{{__('email')}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12">
                            <div class="my-3">
                                <label for="" class="text-white mb-2"> {{__('phone')}}</label>
                                <div class="position-relative input-val">
                                    <i class="icon-user-b fix-icon-Input colorMain"></i>
                                    <input type="tel" name="phone"  required maxlength="11" class="input-icon w-100" placeholder="{{__('phone')}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12">
                            <div class="my-3">
                                <label for="" class="text-white mb-2">{{__('the topic')}}</label>
                                <div class="position-relative select-in">
                                    <select class="form-select" required name="subject_id" aria-label="Default select example">
                                        @foreach ($subjects as $val)

                                        <option value="{{$val->id}}">{{$val->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-xs-12">
                            <div class="my-3">
                                <label for="" class="text-white mb-2">{{__('Upload file')}}</label>
                                <label for="file-upload" class="custom-file-upload w-100 d-flex align-items-center justify-content-between">
                                    <a class="p-1 rounded-3 text-white px-3 bgColorMain">
                                        <span> {{__('Upload file')}}</span>
                                    </a>
                                </label>
                                <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
                            </div>
                        </div>
                        <div class="col-md-12 col-xs-12">
                            <div class="my-3">
                                <label for="" class="text-white mb-2">{{__('message')}}</label>
                                <textarea name="message" required placeholder=" {{__('message')}}" class="w-100"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12 col-xs-12">
                            <div class="my-5">
                                <button class="btn-button w-75 text-white d-table m-auto bgColorMain rounded-3 fs-5">{{__('send')}}</button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>

            <div class="">

                <div class="mx-txt position-relative my-5 py-3">
                    <div class="position-relative">
                        <h5 class="text-white">{{__('Location and contact information')}}</h5>
                    </div>
                </div>

                <div class="mapouter">
                    <div class="gmap_canvas">
                        <iframe  class="gmap_iframe w-100"  height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"  src = "https://maps.google.com/maps?q={{Setting()->lat}},{{Setting()->lat}}&hl=es;z=14&amp;width=600&amp;height=400&amp;output=embed"></iframe>

                    </div>
                </div>


                <div class="details-work align-items-center py-4">
                    <div class="row">
                        <div class="col-md-5 col-xs-12 overflow-hidden">
                            <div class="block-item-work bgOpSecondColor rounded-3 my-3 p-3 d-flex align-items-center">
                                <div class="btn-icon-45 borderRad-13 bgColorMain d-flex align-items-center justify-content-center">
                                    <i class="icon-map fs-5 text-white"></i>
                                </div>
                                <div class="px-3">
                                    <h6 class="text-white mt-0">{{Setting()->address}}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 col-xs-12 overflow-hidden">
                            <div class="block-item-work bgOpSecondColor rounded-3 my-3 p-3 d-flex align-items-center">
                                <div class="btn-icon-45 borderRad-13 bgColorMain d-flex align-items-center justify-content-center">
                                    <i class="icon-phone-call fs-5 text-white"></i>
                                </div>
                                <div class="px-3">
                                    <h6 class="text-white mt-0">{{Setting()->phone}}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-xs-12 overflow-hidden">
                            <div class="my-3 p-3 d-flex align-items-center justify-content-center">
                                <ul class="d-flex align-items-center justify-content-center">
                                    <li><a href="{{Setting()->twitter}}" class="btn-icon-45 rounded-3 bgColorMain d-flex align-items-center justify-content-center mx-2"><i class="icon-twitter text-white fs-5"></i></a></li>
                                    <li><a href="{{Setting()->facebook}}" class="btn-icon-45 rounded-3 bgColorMain d-flex align-items-center justify-content-center mx-2"><i class="icon-facebook text-white fs-5"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>


</div>
@endsection