@extends('layouts.app')
@section('title')
    @php echo $metatags @endphp
    @php echo $schema @endphp
@endsection

@section('content')
    <!-- bread crumb area -->
    <div class="rts-bread-crumbarea-1 rts-section-gap bg_image">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main-wrapper">
                        <h1 class="title">{{ __('home.contact-us') }}</h1>
                        <!-- breadcrumb pagination area -->
                        <div class="pagination-wrapper">
                            <a href="{{ url('/') }}">@lang('home.home')</a>
                            <i class="fa-regular fa-chevron-right"></i>
                            <a class="active" href="javascript:void;">{{ __('home.contact-us') }}</a>
                        </div>
                        <!-- breadcrumb pagination area end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="rts-contact-area rts-section-gapTop">
        <div class="container">
            
            <div class="contact-map-area-start mb-5">

                        @if ($configration->address1)
                            <div class="single-maptop-info">
                                <div class="icon">
                                    <img src="{{ Helper::imageFilesPath('contact/02.png') }}" alt="address">
                                </div>
                                <p class="disc">{{$configration->address1}}</p>
                            </div>
                        @endif
                        @if ($setting->mobile)
                            <div class="single-maptop-info">
                                <div class="icon">
                                    <img src="{{ Helper::imageFilesPath('contact/03.png') }}" alt="phone">
                                </div>
                                <a href="tel:{{ $setting->mobile }}">{{ $setting->mobile }}</a>  
                                @if ($setting->telphone)
                                    <a href="tel:{{ $setting->telphone }}">{{ $setting->telphone }}</a>  
                                @endif
                            </div>
                        @endif

                        @if ($setting->date)
                            <div class="single-maptop-info">
                                <div class="icon">
                                    <img src="{{ Helper::imageFilesPath('contact/04.png') }}" alt="dates">
                                </div>
                                <p class="disc">{{$setting->date}}
                                </p>
                            </div>
                        @endif
                    </div>
                    
                    
            <div class="row g-5">
                <div class="col-lg-8 mx-auto">
                    <!-- contact left area start -->
                    <div class="contact-left-area-start">
                        <div class="title-area-left-style">
                            <div class="pre-title">
                                <img src="{{ Helper::imageFilesPath('banner/bulb.png') }}" alt="icon">
                                <span>@lang('home.courses')</span>
                            </div>
                            <h2 class="title mb-5">@lang('home.get_in_touch')</h2>
                        </div>
                        <form action="{{ LaravelLocalization::localizeUrl('save/contact-us') }}" id="contact-form" class="contact-page-form row mx-0" method="POST">
                            @csrf
                            <div class="single-input col-sm-6">
                                <input name="name" id="name" type="text" placeholder="{{ __('home.name') }} *" required>
                            </div>
                            <div class="single-input col-sm-6">
                                <input name="email" id="email" type="email" placeholder="{{ __('home.email') }} *" required>
                            </div>
                            <div class="single-input col-sm-6">
                                <input name="phone" id="phone" type="text" placeholder="{{ __('home.phone') }} *" required>
                            </div>
                            <div class="single-input col-sm-6">
                                <input name="title" id="title" type="text" placeholder="{{ __('home.title') }} *" required>
                            </div>
                            <div class="single-input">
                                <textarea name="message" id="message" cols="30" rows="4" placeholder="{{ __('home.message') }} *" required></textarea>
                            </div>
                            <button class="rts-btn btn-primary mt--30" type="submit">{{ __('home.send_message') }}</button>
                        </form>

                        {{--<div id="form-messages  " class="mt--20"></div>--}}
                    </div>
                    <!-- contact left area end -->
                </div>
                <div class="col-sm-6 my-0 mb-sm-5  py-5">
                    <div class="map-bottom-area mt--30">
                        <h3>@lang('home.riyda_branch')</h3>
                        <iframe
                            src="{{$setting->map_view_riyadh}}"
                            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
                <div class="col-sm-6 my-0 mb-sm-5 py-5">
                    <div class="map-bottom-area mt--30">
                        <h3>@lang('home.jeddah_branch')</h3>
                        <iframe
                            src="{{$setting->map_view_jeddah}}"
                            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div> 
@endsection

@section('script')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

    <script>
        $(document).ready(function() {
            @if (Session::has('success'))
                $.confirm({
                    title: "{{ trans('home.Success Message') }}",
                    content: "{{ Session::get('success') }}",
                    buttons: {
                        ok: {
                            text: "{{ trans('home.OK') }}",
                            btnClass: 'btn main-btn',
                        },
                    },
                    columnClass: 'col-md-6'
                });
            @endif
        });
    </script>
    @if ($errors->any())
        <script>
            $(document).ready(function() {
                @if ($errors->any())
                    $.confirm({
                        title: "{{ trans('home.Validation Errors') }}",
                        content: "<ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>",
                        buttons: {
                            ok: {
                                text: "{{ trans('home.OK') }}",
                                btnClass: 'btn main-btn',
                            },
                        },
                        columnClass: 'col-md-6'
                    });
                @endif
            });
        </script>
    @endif
@endsection