@extends('web.layouts.container')

@section('header')
    <section class="inner_header">
        <div class="inner_back">
            <img src="{{asset($detail->header_image)}}" alt="" class="ob_20">
        </div>
        <div class="inner_info">
            <div class="container h-100">
                <div class="row align-items-end h-100">
                    <div class="col-lg-5 offset-lg-6">
                        <div class="about_head_info" style="background-color: #5b859294;">
                            <p>{!! $detail->header_description !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('content')
    <section class="contact section_padding pb-0">
        <div class="container">
            <div class="section_head">
                <h3>{{__('visitorMessages.head')}}</h3>
            </div>
            <form action="{{route('send_contact_us')}}" method="post" class="form contact_us_form">
                <div class="row">
                    <div class="col-lg-5">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="text" name="name" placeholder="{{__('visitorMessages.name')}}">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="text" name="email" placeholder="{{__('visitorMessages.email')}}">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <input type="text" name="subject" placeholder="{{__('visitorMessages.subject')}}">
                                </div>
                            </div>
                            <!--<div class="col-12 mob_none">-->
                            <!--    <small>{{__('visitorMessages.hint')}}</small>-->
                            <!--</div>-->
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="form-group">
                            <textarea name="message" placeholder="{{__('visitorMessages.message')}}"></textarea>
                        </div>
                        <!--<div class="web_none">-->
                            <!--<small>{{__('visitorMessages.hint')}}</small>-->
                        <!--</div>-->
                    </div>
                </div>
                <button class="butn mt-4 contact_us_button"><span>{{__('visitorMessages.send')}}</span></button>
            </form>
            <div class="branches mt_80">
                <div class="section_head">
                    <h3>{{__('visitorMessages.phone_addresses')}}</h3>
                </div>
                <div class="row">
                    <div class="col-lg-5">
                        <div class="select_branch">
                            <select class="offices">
                                @if(count($offices))
                                    @foreach($offices as $office)
                                        <option class="text-uppercase" value="{{$office->id}}">{{$office->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                            @if(count($offices))
                                @foreach($offices as $office)
                                    <div class="branch_info offices_info office_{{$office->id}} {{$loop->iteration != 1 ? 'd-none' : ''}}">
                                        <p>
                                            @if($office->po_box ?? null) P.O. Box {{$office->po_box}} <br> @endif
                                            @if($office->address ?? null) {{$office->address}} @endif
                                        </p>
                                        @if($office->phone ?? null) <p>{{__('visitorMessages.tel')}} <bdi>{{$office->phone}}</bdi> </p> @endif
                                        @if($office->fax ?? null) <p>{{__('visitorMessages.fax')}} <bdi>{{$office->fax}}</bdi></p> @endif
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-7">
                        @if(count($offices))
                            @foreach($offices as $office)
                                <div class="map offices_info office_{{$office->id}} {{$loop->iteration != 1 ? 'd-none' : ''}}">
                                    @if($office->map ?? null)
                                        {!! $office->map !!}
                                    @else
                                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d927755.0521049668!2d46.2620167734785!3d24.725398072981186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2f03890d489399%3A0xba974d1c98e79fd5!2sRiyadh%20Saudi%20Arabia!5e0!3m2!1sen!2seg!4v1634828760694!5m2!1sen!2seg"
                                            width="100%" height="380" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                                    @endif
                                    <!--<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d927755.0521049668!2d46.2620167734785!3d24.725398072981186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2f03890d489399%3A0xba974d1c98e79fd5!2sRiyadh%20Saudi%20Arabia!5e0!3m2!1sen!2seg!4v1634828760694!5m2!1sen!2seg"-->
                                    <!--        width="100%" height="380" style="border:0;" allowfullscreen="" loading="lazy"></iframe>-->
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $('.offices').change(function () {
            let selectVal = $(this).val();
            if(selectVal !== ''){
                $('.offices_info').addClass('d-none');
                $('.offices_info').each(function () {
                    if($(this).hasClass('office_'+selectVal)){
                        $(this).removeClass('d-none');
                    }
                });
            } else {
                $('.offices_info').removeClass('d-none');
            }
        });
    </script>
@endsection