@php($user = Auth::guard('web')->user())
@extends('advertiser.layout.app')

@section('advertiser_title', trans('contactus.contact_us.contactus') )

@section('advertiser_content')
@if(!empty($user))
@section('back_button')
<div class="right_wrapper">
    <div class="right_bar">
        <div class="right_back">
            <a href="{{ route('home', app()->getLocale()) }}" class="backBtn">{{ trans('landing.commen.backbtn') }}</a>
        </div>
    </div>
</div>
@stop
<div class="map_viewBg">
    <img src="{{asset('advertiser_user/images/map_bg.jpg')}}" alt="map-bg"/>
</div>
@endif
<!-- //CONTENT START// -->
<div class="contactUs-page">
    <!-- //CONTAINER START// -->
    <div class="container">
        <div class="cloud_content">
            <div class="map_view_cldBox">
                <div class="cldMid_box">
                    <div class="cld_pro_wrap cld_log_wrap cld_log_contact">
                        <div class="cld_pro_contBox cld_log_contBox">

                            <form method="POST" id="register_form" class="cld_formBox" action="{{ route('store.contactus', app()->getLocale()) }}">
                                {{ csrf_field() }}
                                <div class="cld_pro_cont cld_log_cont">
                                    <div class="row m_0">
                                        <div class="col-md-12">
                                            <div class="group prof_email">
                                                <input type="text" name="name" id="name" value="{{old('name')}}" required>
                                                <label>{{ trans('contactus.contact_us.name') }}</label>
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                @if($errors->has('name'))<span class="help-block"><strong>{{ $errors->first('name') }}</strong></span>@endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m_0">
                                        <div class="col-md-12">
                                            <div class="group prof_email">
                                                <input type="text" name="email" id="email" value="{{old('email')}}" required>
                                                <label>{{ trans('contactus.contact_us.e_mail') }}</label>
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                @if($errors->has('email'))<span class="help-block"><strong>{{ $errors->first('email') }}</strong></span>@endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m_0">
                                        <div class="col-md-12">

                                            <div class="group prof_phoneNum">
                                                <input type="phonenumber" class="phone_field" id="phonenumber" name="phonenumber"  maxlength="10" value="{{ old('phonenumber') }}" onkeypress="return isNumberKey(event)" required autocomplete="nope">
                                                <input type="text" class="country_code_field" required value="+966" readonly >
                                                <label>{{ trans('register.register_page.phone_number') }}</label>
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                @if($errors->has('phonenumber'))<span
                                                    class="help-block"><strong>{{ $errors->first('phonenumber') }}</strong></span>@endif
                                            </div>

                                            {{-- <div class="group prof_password">
                                                <input type="text" class="form-control" name="phonenumber" value="{{old('phonenumber')}}" required>
                                                <label>{{ trans('contactus.contact_us.phone_number') }}</label>
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                @if($errors->has('phonenumber'))<span class="help-block"><strong>{{ $errors->first('phonenumber') }}</strong></span>@endif
                                            </div> --}}
                                        </div>
                                    </div>
                                    <div class="row m_0">
                                        <div class="col-md-12">
                                            <div class="group contact_dec">
                                                <textarea required id="description" type="text" name="description" value="">{{old('description')}}</textarea>
                                                <label>{{ trans('contactus.contact_us.description') }}</label>
                                                {{-- <input type="text" name="description" id="description" value="{{old('description')}}" required> --}}
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                @if($errors->has('description'))<span class="help-block"><strong>{{ $errors->first('description') }}</strong></span>@endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cld_button cld_ftBtn">
                                        {{-- <button  class="btn button btn_save active" type="submit" value=""  onclick="this.disabled=true;this.form.submit();">{{ trans('contactus.contact_us.send') }}</button> --}}
                                        <button  class="btn button btn_save active" type="submit">{{ trans('contactus.contact_us.send') }}</button>
                                    </div>

                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>



    </div>
    <!-- //CONTAINER END// -->
</div>
<!-- //CONTENT END// -->
@stop

@section('advertiser_styles')
    <style>
        .help-block{
            color: #dc3545;
        }

        .country_code_field {
            float: left;
            width: 17% !important;
            border-right: none !important;
            border-radius: 4px 0px 0px 4px !important;
        }
        .phone_field {
            float: right;
            width: 83% !important;
            border-left: none !important;
            border-radius: 0px 4px 4px 0px !important;
        }
        .prof_phoneNum {
            display: inline-block;
        }
        .prof_phoneNum label {
            left: 65px;
        }
        .prof_phoneNum input:focus ~ label {
            left: 10px;
        }
        .prof_phoneNum input:focus {
            box-shadow: 0 0 0 0rem rgba(220, 220, 220, 0.25) !important;
        }
        .prof_phoneNum input:focus ~ .country_code_field {
            border-color: #6d6d6d !important;
            box-shadow: 0 0 0 0rem rgba(220, 220, 220, 0.25) !important;
        }

        .prof_phoneNum input:valid ~ label {
            left: 10px;
        }


        .input#description, textarea#description {
            outline: none;
        }



        label.error {
            position: relative;
            left: 0;
            float: left;
            top: 3px;
            color: #dc3545;
            font-size: 13px;
            padding: 0px 0px;
            line-height: 22px;
            font-weight: 700;
        }
        .cld_formBox input:focus ~ label.error,
        .cld_formBox input:valid ~ label.error,
        .cld_formBox textarea:focus ~ label.error,
        .cld_formBox textarea:valid ~ label.error {
            position: relative;
            left: 0;
            float: left;
            top: 3px;
            color: #dc3545;
            font-size: 13px;
            padding: 0px 0px;
            line-height: 22px;
            font-weight: 700;
        }
        input.error, input.error_field, textarea.error, textarea.error_field {
            border-color: #dc3545 !important;
        }
        .cld_formBox input.error:focus  {
            border-color: #dc3545
        }
        .prof_phoneNum input:focus ~ .error_field {
            border-color: #dc3545 !important
        }
        #phonenumber-error {
            position: absolute;
            bottom: 0;
            top: 68px;
        }
        .cld_formBox textarea:focus ~ label.error {
            position: relative !important;
            left: 0 !important;
            float: left;
            top: 3px !important;
            color: #dc3545 !important;
            font-size: 13px !important;
            padding: 0px 0px !important;
            line-height: 22px !important;
            font-weight: 700 !important;
        }
        .cld_formBox .contact_dec label.error {
            position: relative !important;
            left: 0 !important;
            float: left;
            top: 3px !important;
            color: #dc3545 !important;
            font-size: 13px !important;
            padding: 0px 0px !important;
            line-height: 22px !important;
            font-weight: 700 !important;
        }
    </style>
@stop

@section('advertiser_js')
    @include('advertiser.modules.contactus.js.index')
@stop