@extends('front.layout')

<?php
$experiences = Config("params.experiences");
$trades = Config("params.trades");
?>
@section('content')
@if(!empty($model) )
@section('title')
{{$model->MetaTitle}}
@endsection
@section('description')
{{$model->MetaDescription}}
@endsection
<section class="page-banner bg-overlay" style="background-image: url({{asset(Config("params.media_path.large").$model->HeaderImageName)}});">
    <div class="page-inner-box col-lg-6 col-md-9 text-center text-white">

        <h1 class="text-uppercase">{{$model->Title}}</h1>
        <?php echo $model->short_description; ?>
    </div>
</section>

<section class="py-lg-5 py-3 mb-lg-0 mb-4">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-9">
                <?php echo $model->Content; ?>                
            </div>
        </div>
    </div>
</section>
@endif
@if(!empty($sec3) )

<section class="py-lg-5 py-3 bg-overlay text-white" style="background-image:url({{asset(Config("params.media_path.large").$sec3->ImageName)}})">
    <div class="container py-lg-5 py-3">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="h1 mb-lg-5 font-weight-bold text-uppercase">{{$sec3->Title}}</h2>
            </div>
            <?php echo $sec3->Content; ?>  
        </div>
    </div>
</section>
@endif
<section class="py-lg-5 py-3">
    <div class="container">
        <form id="form" action="{{url('engineers')}}">

            <div class="row justify-content-center">
                <div class="col-md-12 text-center">
                    <h3 class="h1 text-primary" id="header_title">{{$model->HeaderTitle}}</h3>
                </div>
                <div id="validation-errors" ></div>
                <div id="success" class="alert alert-success" style="display: none" role="alert">
                    Thank you we will definitely contact you! 
                </div>
                <div class="col-md-12 form-group">
                    <h3>Your Details:</h3>
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="text" name="name" id="name" class="form-control form-control-lg" placeholder="Full Name">
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="text" name="companyName" id="companyName" class="form-control form-control-lg" placeholder="Legal Company Name">
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="text" name="companyRegNo" id="companyRegNo" class="form-control form-control-lg" placeholder="Company Registration Number">
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="email" name="email" id="email" class="form-control form-control-lg" placeholder="Email Address">
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="text" name="phone"  id="phone"class="form-control form-control-lg" placeholder="Telephone Number">
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="text" name="mobile" id="mobile" class="form-control form-control-lg" placeholder="Mobile Telephone Number">
                </div>
                <div class="col-md-12 form-group pt-3">
                    <h3>Trading Address:</h3>
                </div>
                <div class="col-md-6 form-group">
                    <input type="text" name="address1" id="address1" class="form-control form-control-lg" placeholder="Address Line 1">
                </div>
                <div class="col-md-6 form-group">
                    <input type="text" name="address2" id="address2"  class="form-control form-control-lg" placeholder="Address Line 2">
                </div>
                <div class="col-md-6 form-group">
                    <input type="text" name="city" id="city"  class="form-control form-control-lg" placeholder="City">
                </div>
                <div class="col-md-6 form-group">
                    <input type="text" name="postcode" id="postcode"  class="form-control form-control-lg" placeholder="Postcode">
                </div>
                <div class="col-md-12 form-group pt-3">
                    <h3>Your Qualifications:</h3>
                </div>
                <div class="col-md-6 form-group">
                    <select name="safeRegistered" id="safeRegistered"  class="form-control form-control-lg" >
                        <option value="">Are You Gas Safe Registered?</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
                <div class="col-md-6 form-group">
                    <input type="text" name="registrationNumber" id="registrationNumber" class="form-control form-control-lg" placeholder="Gas Safe Reg No:">
                </div>
                <div class="col-md-12 form-group pt-3">
                    <h3>Public Liability Insurance:</h3>
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="text" name="policyNumber" id="policyNumber" class="form-control form-control-lg" placeholder="Policy Number">
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="text" name="providersName" id="providersName" class="form-control form-control-lg" placeholder="Providers Name">
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="text" name="coverLimit" id="coverLimit" class="form-control form-control-lg" placeholder="Cover Limit">
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="text" name="renewalDate" id="renewalDate" class="form-control form-control-lg" placeholder="Renewal Date(D-M-Y)">
                </div>

                <div class="col-lg-4 col-md-6 form-group">
                    <select name="vatRegistered" id="vatRegistered" class="form-control form-control-lg">
                        <option value="">Are You VAT Registered?</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-6 form-group">
                    <input type="text" name="vatRegisteredNumber" id="vatRegisteredNumber" class="form-control form-control-lg" placeholder="VAT Registration Number">
                </div>
                <!--<div class="col-md-12 form-group pt-3">
                    <h3>Any Additional Information:</h3>
                </div>
                <div class="col-md-12 form-group">
                    <textarea class="form-control" id="information" name="information" rows="3"></textarea>
                </div>-->
                <div class="col-md-12 form-group text-center">
                    <input type="hidden" name="code" id="code" class="form-control form-control-lg" value="<?php echo $code ?>">
                    <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}"/>
                    <button type="submit" class="btn bg-block btn-lg btn-primary text-uppercase px-5 save">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>
</section>

@include('front/common/google_reviews')

@endsection

@section('myscript')
<script>
    $(document).ready(function ()
    {
        $( "#renewalDate" ).datepicker({ dateFormat: 'dd-mm-yy' });

        $("form").submit(function (e) {
            e.preventDefault(); // avoid to execute the actual submit of the form.
            $('#success').hide();
            $(".save").attr("disabled", true);
            var form = $(this);
            var data = form.serialize();
            var url = form.attr('action');
            $.ajax({

                url: url,
                type: 'post',
                data: data,
                dataType: "json",
                //contentType: false,
                //processData: false,
                success: function (response) {

                    if (response.success == true) {

                        form.find("input[type=text], input[type=email] , textarea,select ").each(function () {
                            $(this).val('');
                        });

                        $('#validation-errors').empty();

                        $(".save").attr("disabled", false);
                        $('#success').show();
                        $('html,body').animate({
                            scrollTop: $('#success').offset().top
                        }, 1000);

                        window.top.location.href = '{{url("thank-you")}}';
                    } else {

                        $.scrollTo($('#validation-errors'), 1000);

                    }
                },

                error: function (xhr) {

                    $('#success').hide();
                    $('#validation-errors ').html('');

                    errorsHtml = '<div class="alert alert-danger"><ul>';
                    $.each(xhr.responseJSON.errors, function (key, value) {
                        errorsHtml += '<li>' + value[0] + '</li>';
                        //showing only the first error.

                    });

                    $(".save").attr("disabled", false);

                    errorsHtml += '</ul></div>';
                    $('#validation-errors').append(errorsHtml); //appending to a <div id="form-errors"></div> inside form
                    $('html,body').animate({
                        scrollTop: $('#validation-errors').offset().top
                    }, 1000);

                },
            });
        });
    });
</script>
@endsection