@extends('frontend.layouts.master')

@section('title','Al-Bazai | '.((app()->getLocale() == 'ar') ? 'أدوات التسوق' : 'Shopping tools') .' | '.((app()->getLocale() == 'ar') ? 'خدمة معاودة الاتصال' : 'CALL BACK SERVICE'))

@section('lang')
    @if(app()->getLocale() == 'ar')
        <li class="last leaf toyota-color"><a href="{{ route(Route::currentRouteName(), array_replace(Route::getCurrentRoute()->parameters())) }}" title="English" class="langar">English</a></li>
    @else
        <li class="last leaf toyota-color"><a href="{{ route(Route::currentRouteName(), array_replace(Route::getCurrentRoute()->parameters(), ['lang' =>'ar' ])) }}" title="عربي" class="langar">عربي</a></li>
    @endif
@endsection

@section('content')
<!-- start page content -->
<section class="content">
            <div class="media-center-wrap">
                <div class="container">
                    <div class="heading">
                        <h1 class="main-head"> {{ (app()->getLocale() == 'ar') ? 'خدمة معاودة الاتصال' : 'CALL BACK SERVICE' }}</h1>
                    </div>
                    <div class="mid-content-wrap">
                        <div class="inside-content clearfix">
                            <h2> {{ (app()->getLocale() == 'ar') ? 'خدمة معاودة الاتصال' : 'CALL BACK SERVICE' }}</h2>
                            <div class="region region-content">
                                <article id="node-44" class="node node-webform node-odd">
                                    <header>
                                        <span property="dc:title" content="Call back service" class="rdf-meta element-hidden"></span>
                                        <span property="sioc:num_replies" content="0" datatype="xsd:integer" class="rdf-meta element-hidden"></span>
                                    </header>
                                    <div class="content">
        
                                        <div class="form-elements clearfix">
                                            <form class="webform-client-form webform-client-form-44" action="{{ route('web.lead.store', app()->getLocale() == 'ar' ? ['lang' => 'ar'] : '') }}" method="POST" id="webform-client-form-44" accept-charset="UTF-8">
                                               @method('POST')
                                                @csrf
                                                <input type="hidden" name="source" value="{{ request()->get('source') ?? '' }}">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label for="edit-submitted-name">
                                                            {{ (app()->getLocale() == 'ar') ? 'الاسم' : 'Name' }}:
                                                                <span class="form-required" title="This field is required.">*</span>
                                                            </label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <input required="required" type="text" name="name" value="" size="60" maxlength="128" class="form-control required">
                                                            @error("name")
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
        
        
                                                    <div class="row">
        
        
                                                        <div class="col-md-4">
                                                            <label for="edit-submitted-mobile-number">
                                                            {{ (app()->getLocale() == 'ar') ? 'رقم الهاتف' : 'Mobile Number' }}:
                                                                <span class="form-required" title="This field is required.">*</span>
                                                            </label>
                                                        </div>
                                                        <div class="col-md-8">
                                                           <input required="required" type="text" name="phone" size="60" id="bookPhone" onchange="validateContact(this)" maxlength="10"  class="form-control required">
                                                            <div class="invalid-feedback">
                                                            {{ (app()->getLocale() == 'ar') ? 'يجب أن يكون هذا الحقل جوالًا سعوديًا (05xxxxxxxx).' : 'This field must be saudi arabia mobile (05xxxxxxxx).'}}
                                                            </div>                                                       
                                                        </div>
                                                    </div>
        
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label for="edit-submitted-request-contact-by">
                                                            {{ (app()->getLocale() == 'ar') ? 'طلب الاتصال عن طريق' : 'Request contact by' }}: <span class="form-required" title="This field is required.">*</span>
                                                            </label>
        
                                                        </div>
                                                        <div class="col-md-8">
                                                            <select required="required" id="select2" name="contact_via" class="form-select required" tabindex="-1">
                                                                <option value="">- {{ (app()->getLocale() == 'ar') ? 'اختر' : 'Select' }} -</option>
                                                                @if(!empty($contact_Via))
                                                                @foreach($contact_Via as $key => $data)
                                                                <option value="{{ $data[app()->getLocale()] }}">{{ $data[app()->getLocale()] }}</option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                            @error("contact_via")
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror 
                                                        </div>
                                                    </div>
        
        
        
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label for="edit-submitted-interested-in">
                                                               {{ (app()->getLocale() == 'ar') ? 'مهتم في' : 'Interested in' }}:
                                                                <span class="form-required" title="This field is required.">*</span>
                                                            </label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <select required="required" id="select3" name="interested_in" class="form-select required" tabindex="-1">
                                                               <option value="">- {{ (app()->getLocale() == 'ar') ? 'اختر' : 'Select' }} -</option>
                                                                @if(!empty($interested_In))
                                                                @foreach($interested_In as $key => $data)
                                                                <option value="{{ $data[app()->getLocale()] }}">{{ $data[app()->getLocale()] }}</option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                            @error("interested_in")
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
        
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label for="edit-submitted-request-contact-by">
                                                            {{ (app()->getLocale() == 'ar') ? 'موديل السيارة' : 'Car model' }}: <span class="form-required" title="This field is required.">*</span>
                                                            </label>
        
                                                        </div>
                                                        <div class="col-md-8">
                                                            <select required="required" name="category_id" class="form-select required valid selectnew" tabindex="-1">
                                                                @if(count($Toyotacars) > 0)
                                                                <optgroup label="{{ (app()->getLocale() == 'ar') ? 'اختر موديل تويوتا' : 'Select a model Toyota' }}">
                                                                @foreach($Toyotacars as $cat)
                                                                <option value="{{ $cat->id }}">{{ $cat->title ?? '' }}</option>
                                                                @endforeach
                                                                </optgroup>
                                                                @endif
                                                                @if(count($Lexusacars) > 0)
                                                                <optgroup label="{{ (app()->getLocale() == 'ar') ? 'اختر موديل لكزس' : 'Select a model Lexus' }}">
                                                                @foreach($Lexusacars as $cat)
                                                                <option value="{{ $cat->id }}">{{ $cat->title ?? '' }}</option>
                                                                @endforeach
                                                                </optgroup>
                                                                @endif
                                                                </select>
                                                                @error("category_id")
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label for="edit-submitted-note">
                                                              {{ (app()->getLocale() == 'ar') ? 'ملاحظات' : 'Notes' }}:
                                                            </label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <textarea name="notes" cols="60" rows="5" class="form-controlarea"></textarea>
                                                        </div>
        
                                                    </div>
                                                    <input type="hidden" name="page_name" value="CallBack">
        
                                                    <div class="form-actions">
                                                        <input class="webform-submit button-primary form-submit" type="submit" name="op" value="{{ (app()->getLocale() == 'ar') ? 'إرسال' : 'Submit' }}" id="sendbtn">
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div><div class="links"></div>
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <div class="clear"></div>
        <!-- end page content -->
@endsection

@push('js')
<script>
        function validateContact(tel) {

        var xyz=document.getElementById('bookPhone').value.trim();

        var  phoneno = /^\d{10}$/;
        if((tel.value.match(phoneno)) && tel.value.length == 10 && xyz.substr(0,2)==='05' && $.isNumeric(xyz))
            {
                $(tel).removeClass('is-invalid');
                $(tel).addClass('is-valid');

            }
        else
            {
                $("#bookPhone").val('');
                $(tel).removeClass('is-valid');
                $(tel).addClass('is-invalid');

            }
        }

</script>
@endpush