@extends('backEnd.layout')

@section('content')
    <div class="padding">
        <div class="box">
            <div class="box-header dker">
                <h3><i class="material-icons">&#xe02e;</i> {{ trans('backLang.eventAt') }}</h3>
                <small>
                    <a href="{{ route('adminHome') }}">{{ trans('backLang.home') }}</a> /
                    <a href="">{{ trans('backLang.settings') }}</a> /
                </small>
            </div>
            <div class="box-tool">
                <ul class="nav">
                    <li class="nav-item inline">
                        <a class="nav-link" href="{{route("webmails")}}">
                            <i class="material-icons md-18">×</i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="box-body">
                {{Form::open(['route'=>['contactPageSubmit'],'method'=>'POST','class'=>'contactForm'])}}
                <div class="form-group">
                        {!! Form::text('contact_name',"", array('placeholder' => "اسمك الكامل","pattern"=>"[a-zA-z\u0621-\u064A\u0660-\u0669]*",'class' => 'form-control input-lg','id'=>'name', 'data-msg'=> trans('frontLang.enterYourName'),'data-rule'=>'minlen:4')) !!}
                    <div class="alert alert-warning validation"></div>
                </div>
                <div class="form-group">
                    {!! Form::email('contact_email',"", array('placeholder' => trans('frontLang.yourEmail'),'class' => 'form-control input-lg','id'=>'email', 'data-msg'=> trans('frontLang.enterYourEmail'),'data-rule'=>'email')) !!}
                    <div class="validation"></div>
                </div>
                <div class="form-group">
                    {!! Form::date('contact_date',"", array('placeholder' => "تاريخ المناسبة",'class' => 'form-control ddd input-lg','id'=>'datepicker', 'data-msg'=> "ادخل تاريخ المناسبة",'data-rule'=>'minlen:4')) !!}
                    <div class="validation"></div>
                </div>

                <div class="form-group">
                    {!! Form::text('contact_phone',"", array('placeholder' => trans('frontLang.phone'),'class' => 'form-control input-lg','id'=>'phone', 'data-msg'=> trans('frontLang.enterYourPhone'),'data-rule'=>'phone')) !!}
                    <div class="validation"></div>
                </div>
                <div class="form-group">
                    {!! Form::text('coupon',"", array('placeholder' => trans('frontLang.coupon'),'class' => 'form-control input-lg','id'=>'coupon', 'data-msg'=> trans('frontLang.coupon'))) !!}
                    <div class="validation"></div>
                </div>
                <div class="form-group">
                    {!! Form::text('contact_city',"", array('placeholder' => "المدينة",'class' => 'form-control input-lg','id'=>'city', 'data-msg'=> "اسم المدينة",'data-rule'=>'minlen:4')) !!}
                    <div class="alert alert-warning validation"></div>
                </div>
                <div class="form-group">
                    {!! Form::select('contact_subject', array( 'family' => 'مناسبة عائلية', 'graduate' => 'حفل تخرج', 'wedding' => 'مناسبة زواج', 'other' => 'مناسبة اخري' ),"", array('placeholder' => "--- حدد نوع المناسبة ---",'class' => 'form-control input-lg','id'=>'type', 'data-msg'=> "حدد نوع المناسبة",'data-rule'=>'minlen:4')) !!}
                    <div class="alert alert-warning validation"></div>
                </div>

                <div class="form-group other2">
                    {!! Form::text('contact_other',"", array('placeholder' => "نوع المناسبة",'class' => 'form-control input-lg','id'=>'texta', 'data-msg'=> "اكتب نوع المناسبة")) !!}
                    <div class="alert alert-warning validation"></div>
                </div>

                <div class="form-group">
                    {!! Form::select('photographer_id', \App\Photographer::select(['name','id'])->get()->pluck('name','id')->toArray(),"", array('placeholder' => "--- حدد المصور ---",'class' => 'form-control input-lg','id'=>'photographer_id', 'data-msg'=> "حدد المصور",'data-rule'=>'minlen:4')) !!}
                    <div class="alert alert-warning validation"></div>
                </div>


                @if(env('NOCAPTCHA_STATUS', false))
                    <div class="form-group">
                        {!! NoCaptcha::renderJs(app()->getLocale()) !!}
                        {!! NoCaptcha::display() !!}
                    </div>
                @endif
                <div>
                    <button type="submit" class="btn btn-theme btn-block btn-lg">أرسل الطلب</button>
                </div>
                <br>
                {{Form::close()}}
            </div>
        </div>
    </div>

@endsection
@section('footerInclude')
    <script src="{{ asset('frontEnd/js/custom.js') }}"></script>

    <script type="text/javascript">

        jQuery(document).ready(function ($) {
            "use strict";

            //Contact
            $('form.contactForm').submit(function (e) {
                e.preventDefault();
                var f = $(this).find('.form-group'),
                    ferror = false,
                    emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i ,
                    phoneExp = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;

                f.children('input').each(function () { // run all inputs

                    var i = $(this); // current input
                    var rule = i.attr('data-rule');

                    if (rule !== undefined) {
                        var ierror = false; // error flag for current input
                        var pos = rule.indexOf(':', 0);
                        if (pos >= 0) {
                            var exp = rule.substr(pos + 1, rule.length);
                            rule = rule.substr(0, pos);
                        } else {
                            rule = rule.substr(pos + 1, rule.length);
                        }

                        switch (rule) {
                            case 'required':
                                if (i.val() === '') {
                                    ferror = ierror = true;
                                }
                                break;

                            case 'minlen':
                                if (i.val().length < parseInt(exp)) {
                                    ferror = ierror = true;
                                }
                                break;

                            case 'email':
                                if (!emailExp.test(i.val())) {
                                    ferror = ierror = true;
                                }
                                break;

                            case 'phone':
                                if (!phoneExp.test(i.val())) {
                                    ferror = ierror = true;
                                }
                                break;

                            case 'checked':
                                if (!i.attr('checked')) {
                                    ferror = ierror = true;
                                }
                                break;

                            case 'regexp':
                                exp = new RegExp(exp);
                                if (!exp.test(i.val())) {
                                    ferror = ierror = true;
                                }
                                break;
                        }
                        i.next('.validation').html('<i class=\"fa fa-info\"></i> &nbsp;' + ( ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '' )).show();
                        !ierror ? i.next('.validation').hide() : i.next('.validation').show();
                    }
                });
                f.children('textarea').each(function () { // run all inputs

                    var i = $(this); // current input
                    var rule = i.attr('data-rule');

                    if (rule !== undefined) {
                        var ierror = false; // error flag for current input
                        var pos = rule.indexOf(':', 0);
                        if (pos >= 0) {
                            var exp = rule.substr(pos + 1, rule.length);
                            rule = rule.substr(0, pos);
                        } else {
                            rule = rule.substr(pos + 1, rule.length);
                        }

                        switch (rule) {
                            case 'required':
                                if (i.val() === '') {
                                    ferror = ierror = true;
                                }
                                break;

                            case 'minlen':
                                if (i.val().length < parseInt(exp)) {
                                    ferror = ierror = true;
                                }
                                break;
                        }
                        i.next('.validation').html('<i class=\"fa fa-info\"></i> &nbsp;' + ( ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '' )).show();
                        !ierror ? i.next('.validation').hide() : i.next('.validation').show();
                    }
                });
                if (ferror) return false;
                else var str = $(this).serialize();

                var xhr = $.ajax({
                    type: "POST",
                    url: "{{route("contactPageSubmit")}}",
                    data: str,
                    success: function (msg) {
                        if (msg == 'OK') {
                            $("#sendmessage").addClass("show");
                            $("#errormessage").removeClass("show");
                            $("#name").val('');
                            $("#email").val('');
                            $("#phone").val('');
                            $("#subject").val('');
                            $("#coupon").val('');
                            $("#type").val('');
                            $("#city").val('');
                            $("#other").val('');
                            $("#datepicker").val('');
                            $(window).scrollTop($('#contact_div').offset().top);
                        }
                        else {
                            $("#sendmessage").removeClass("show");
                            $("#errormessage").addClass("show");
                            $('#errormessage').html(msg);
                        }

                    }
                });
                //  console.log(xhr);
                return false;
            });

        });

    </script>


@stop