@extends('web.layouts.main')


@section('content')
<!-- Start section -->
<section class="pg_header section">
    <div class="container">
        <h5 class="title_w_vector mx-auto w-fit mt-2">{{$title}}</h5>

    </div>
</section>

<!-- Start section -->
<section class="contact_pg section ">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="form_box">
                    <div class="d-flex mb-4  mt-4">
                        <h5 class="title_w_vector color-primary me-4 mt-1"> {{$title}}  </h5>
                        <h4 class="label color-secondary text-capitalize fw-bold">
                            {{__('contacts.contact_with_us_now')}}
                        </h4>
                    </div>
                    <div class="p mb-5 pb-3 d-block"> {{__('contacts.contact_with_us_now_2')}}</div>
                    <form action="{{route('sendContact')}}" class="contact_us_form" method="post">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-floating form-group">
                                    <input type="text" name="name" class="form-control" placeholder="">
                                    <label> {{__('contacts.name')}} </label>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-floating form-group">
                                    <input type="email" name="email" class="form-control" placeholder="">
                                    <label> {{__('contacts.email')}}</label>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-floating form-group">
                                    <input type="text" name="phone" class="form-control" placeholder="">
                                    <label> {{__('contacts.phone')}}</label>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-floating form-group">
                                    <input type="text" name="subject" class="form-control" placeholder="">
                                    <label>  {{__('contacts.subject')}} </label>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-floating form-group">
                                    <textarea class="form-control" name="message" placeholder=" Write here..." rows="10"></textarea>
                                    <label>  {{__('contacts.message')}} </label>
                                </div>
                            </div>
                            <button class="butn primary_butn mx-auto py-3 px-5 fs-6 contact_us_button">{{__('contacts.send')}} <i class="fa-light fa-paper-plane ms-2 me-0"></i></button>

                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="branch_box">
                    <div class="form-group branch_group_select mb-4">
                        <select class="branch_select form-control form-select branches">
                            @foreach($branches as $value)
                            <option value="{{$value->id ?? 0}}">{{$value->title ?? ""}}</option>
                            @endforeach
                        </select>
                    </div>
                    @if($branche)
                    <div class="item">
                        <div class="circle_box">
                            <div class="content">
                                <div class="icon_box">
                                    <img src="{{url('')}}/assets/web/images/icons/contact-1.png" class="icon" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="txt">
                            <h6 class="label ">{{__('branches.phone')}}</h6>
                            <h5 class="data color-primary fw-bold phone">
                                {{$branche->phone}}
                            </h5>
                        </div>

                    </div>
                    <div class="item">
                        <div class="circle_box">
                            <div class="content">
                                <div class="icon_box">
                                    <img src="{{url('')}}/assets/web/images/icons/contact-2.png" class="icon" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="txt">
                            <h6 class="label ">{{__('branches.email')}}</h6>
                            <h5 class="data color-primary fw-bold email">
                                {{$branche->email}}
                            </h5>
                        </div>

                    </div>
                    <div class="item">
                        <div class="circle_box">
                            <div class="content">
                                <div class="icon_box">
                                    <img src="{{url('')}}/assets/web/images/icons/contact-3.png" class="icon" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="txt">
                            <h6 class="label ">{{__('branches.address')}}</h6>
                            <h5 class="data color-primary fw-bold address">
                                {{$branche->address}}
                            </h5>
                        </div>

                    </div>
                    <div class="item">
                        <div class="circle_box">
                            <div class="content">
                                <div class="icon_box">
                                    <img src="{{url('')}}/assets/web/images/icons/contact-4.png" class="icon" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="txt">
                            <h6 class="label ">{{__('contacts.Follow-Us')}}</h6>
                            <div class="social_links d-flex ">
                                <a href="{{$branche->facebook}}" class="facebook_url" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
                                <a href="{{$branche->instagram}}" class="instagram_url" target="_blank"><i class="fa-brands fa-instagram"></i></a>
                                <a href="{{$branche->twitter}}" class="twitter_url" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
                                <a href="{{$branche->youtube}}" class="youtube_url" target="_blank"><i class="fa-brands fa-youtube"></i></a>
                                <a href="{{$branche->whatsapp}}" class="whatsapp_url" target="_blank"><i class="fa-brands fa-whatsapp"></i></a>
                            </div>
                        </div>

                    </div>
                    <div class="map_box map">
                        {!!$branche->map!!}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('inner_js')
<script>const branches = @json($branches);</script>
<script src="{{ asset('assets/web/js/contact.js') }}"></script>
@endsection