@extends('clientside.layouts.app')
@section('content')
<section class="section_common inner_banner">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            @php $i = 0; @endphp
            @foreach($banner as $banners)
            <div class="carousel-item {{ $i==0 ? 'active': '' }}"
                style="background:url({{isset($banners->image)?asset('storage/banners/'.$banners->image):asset('/images/no-image.png')}})">
                <img src="{{isset($banners->image)?asset('storage/banners/'.$banners->image):asset('/images/no-image.png')}}" alt="" class="w-100 banner_inner_image">
                <div class="carousel-caption d-none d-flex justify-content-center align-items-center">
                    <div class=" wow fadeInUp">
                        {!!$banners->description!!}
                    </div>
                </div>
            </div>
            @php $i++; @endphp
            @endforeach
        </div>
        @if($i !=1)
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <img src="{{ asset('clientside/img/arr_left.png') }}" alt="">
            </a> 
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <img src="{{ asset('clientside/img/arr_right.png') }}" alt="">
            </a>
        @endif
    </div>
    <a href="#" class="scroll_more next-section"> <img alt="" src="{{ asset('clientside/img/circle_white.png') }}"
            class="circle"> <img alt="" src="{{ asset('clientside/img/arrow_white.png') }}" class="arrow"> </a>
</section>
<section class="contact_sec" style="background:url('../clientside/img/contactus-bg.jpg') no-repeat">
    <div class="container">
        <div class="row">
            <div class="col-md-6 contact_address_sec">
                <h3 class=" wow bounceInLeft">{!!trans('headings.get_in_touch_help_info')!!}</h3>
                <div class="media wow bounceInLeft">
                    <div class="icon"><img alt="" src="{{ asset('clientside/img/location_ico.png') }}"></div>
                    <div class="media-body">
                        <h5 class="mt-0">{{trans('headings.our_address')}}</h5>
                        @if(App::getLocale()=='en')
                        <p>{!! $settings->address !!}</p>
                        @else
                        <p>{!! $settings->address_arabic !!}</p>
                        @endif
                    </div>
                </div>
                <div class="media align-items-center wow bounceInLeft">
                    <div class="icon"><img alt="" src="{{ asset('clientside/img/call_ico.png') }}"></div>
                    <div class="media-body">
                        <h5 class="mt-0">{{trans('headings.call_for_support')}}</h5>
                        <a href="tel:{{$settings->phone_number}}">{{$settings->phone_number}}</a>
                        <!-- <a href="tel:+974 4444 2278">+974 4444 2278</a> -->
                        </p>
                    </div>
                </div>
                <div class="media align-items-center wow bounceInLeft">
                    <div class="icon"><img alt="" src="{{ asset('clientside/img/whatsapp_ico.png') }}"></div>
                    <div class="media-body">
                        <h5 class="mt-0">{{trans('headings.chat_with_us')}}</h5>
                        <a data-phone="{{$settings->whatsapp_number}}" data-message=""
                            href="https://web.whatsapp.com/send?phone={{$settings->whatsapp_number}}&amp;text="
                            target="_blank">{{$settings->whatsapp_number}}</a>
                    </div>
                </div>
                <div class="media align-items-center wow bounceInLeft">
                    <div class="icon"><img alt="" src="{{ asset('clientside/img/mail_ico.png') }}"></div>
                    <div class="media-body">
                        <h5 class="mt-0">{{trans('headings.mail_us_info')}}</h5>
                        <a href="mailto:{{$settings->email}}">{{$settings->email}}</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 contact_right wow fadeInUp">
                <!-- <p>We’re glad to discuss with your organisation. So please contact us via the details below, or enter
                    your request.</p> -->
                @if(session()->has('message'))
                    <div class="alert alert-success">
                    {{ session()->get('message') }}
                </div>
                @endif
                <form class="contact-form row" accept-charset="UTF-8" action="{{route('contact-us')}}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="form-field col-12 col-sm-6 x-50">
                        <input class="form-control" type="text" placeholder="{{trans('headings.first_name')}}*" name="first_name">
                        @if ($errors->has('first_name'))
                        <p class="help-block">{{ $errors->first('first_name') }}</p>
                        @endif
                    </div>
                    <div class="form-field col-12 col-sm-6 x-50">
                        <input class="form-control" type="text" placeholder="{{trans('headings.last_name')}}" name="last_name">
                        @if ($errors->has('last_name'))
                        <p class="help-block">{{ $errors->first('last_name') }}</p>
                        @endif
                    </div>
                    <div class="form-field col-12 col-sm-6 x-50">
                        <input class="form-control" type="text" placeholder="{{trans('headings.email')}}*" name="email">
                        @if ($errors->has('email'))
                        <p class="help-block">{{ $errors->first('email') }}</p>
                        @endif
                    </div>
                    <div class="form-field col-12 col-sm-6 x-50">
                        <input class="form-control" type="text" placeholder="{{trans('headings.phone_number')}}*" name="phone_number">
                        @if ($errors->has('phone_number'))
                        <p class="help-block">{{ $errors->first('phone_number') }}</p>
                        @endif
                    </div>
                    <div class="form-field col-12 col-sm-12">
                        <input class="form-control" type="text" placeholder="{{trans('headings.subject')}}" name="subject">
                        @if ($errors->has('subject'))
                        <p class="help-block">{{ $errors->first('subject') }}</p>
                        @endif
                    </div>
                    <div class="form-field col-12 x-100">
                        <textarea class="form-control" placeholder="{{trans('headings.message')}}" name="message"></textarea>
                        @if ($errors->has('message'))
                        <p class="help-block">{{ $errors->first('message') }}</p>
                        @endif
                    </div>
                    <div class="form-field col-12 col-sm-12">
                        <input type="file" class="custom-file-input form-control" id="customFile"
                            placeholder="{{trans('headings.attach_file_contact_us')}}" name="filename">
                        <label class="custom-file-label" for="customFile">{{trans('headings.choose_file')}}</label>
                    </div>
                    <div class="form-field col-12 x-100">
                        <input class="btn btn-primary w-100" type="submit" value="Submit">
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<section class="map_sec" style="background:url('../clientside/img/map_bg.jpg') no-repeat">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12  wow fadeInUp">
                <div class="d-flex flex-wrap mb-5 align-items-center">
                    <h3 class="section_title2 mb-0 mr-auto">{{trans('headings.find_us_on')}}</h3>
                    <h6 class="map_link"><span>{{trans('headings.view_us_on_map')}} - </span><a
                            href="{{$settings->map_link}}"
                            target="_blank">{{$settings->map_link}}</a></h6>
                </div>
                <iframe
                    src="{{$settings->embedded_map_link}}"
                    style="border:0; width:100%;" allowfullscreen="" loading="lazy"></iframe>
            </div>
        </div>
    </div>
</section>
<style>
  .error, .help-block {
    color: red !important;
}
</style>  
@endsection