@extends('frontend.layouts.landing')
@section('title', 'Get Your Free Pet Badge - ' . app_name())
@php
    $url = URL::current();
@endphp
@push('head-area')
    <link rel="canonical" href="{{ $url }}" />
@endpush
@section('content')
    <!-- Cart Page Start -->
    <div class="cart_area cart-area-padding pt--35">
        <div class="container content-height">
            <div class="row">
                
                    <div class="col-md-12 bg-ash" style="-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;">

                        <div class="page-section-title text-center pt-4">
                            <h1>Get Your Free Pet Badge</h1>
                        </div>
                    

                        <div class="container pb-3">
                            
                            <ul class="step d-flex flex-nowrap">
                                <li class="step-item active">
                                    <a href="/get-your-free-pet-badge/" class="">Address Details</a>
                                </li>
                                <li class="step-item">
                                    <a href="/get-your-free-pet-badge/set-image" class="disabled">Review Picture</a>
                                </li>
                                <li class="step-item">
                                    <a href="/get-your-free-pet-badge/submit-details" class="">Submit Details</a>
                                </li>
                            </ul> 

                        </div>



                    @include('includes.partials.messages')
                    {!! Form::open(array('method' => 'POST', 'id' => 'frm_pet_badge', 'files' => true)) !!}

                    <div class="row pl--5 pr--5">

                        <div class="col-md-12 col-12 mb--10">
                            <strong>Please enter your shipping details</strong>
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            {!! Form::label('email', 'Email Address:') !!}  <span class="text-red">*</span>
                            {!! Form::text('email', @$data['ses_data_1']['email'], ['onblur' => 'check_pet_badge_email(this.value);', 'type' => 'email', 'required' => 'required', 'class' => 'form-control', 'placeholder' => 'Enter email address ...', 'id' => 'sp_email']) !!}
                        </div>

                        <div class="col-md-12 col-12 mb--10 @if($data['hd_already_exists'] == 'N') d-none @endif" id="div_email_exists">
                            <span class="text-danger">{!! Form::label('default_shipping', 'Seems like you have already requested the free badge, would you like to order for badge by paying $5.99?') !!}</span>
                            <br>
                            <label class="radio-inline">{!! Form::radio('additional', 'Y', (@$data['additional'] == 'Y') ? true : false) !!} Yes, I want to order by paying for it</label>
                            &nbsp;
                            <label class="radio-inline">{!! Form::radio('additional', 'N', (@$data['additional'] == 'N') ? true : false) !!} No, I'm good with the free badge</label>
                            {!! Form::hidden('hd_already_exists', @$data['hd_already_exists'], ['id' => 'hd_already_exists']) !!}
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            {!! Form::label('first_name', 'First Name:') !!}  <span class="text-red">*</span>
                            {!! Form::text('first_name', @$data['ses_data_1']['first_name'],['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Enter first name ...']) !!}
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            {!! Form::label('last_name', 'Last Name:') !!} <span class="text-red">*</span>
                            {!! Form::text('last_name', @$data['ses_data_1']['last_name'],['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Enter last name ...']) !!}
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            {!! Form::label('company', 'Company/Institute:') !!} 
                            {!! Form::text('company', @$data['ses_data_1']['company'],['class'=>'form-control', 'placeholder'=>'Enter company/institute name ...']) !!}
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            {!! Form::label('phone', 'Phone:') !!} <span class="text-red">*</span>
                            {!! Form::text('phone', @$data['ses_data_1']['phone'],['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Enter phone ...']) !!}
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            {!! Form::label('address', 'Address:') !!} <span class="text-red">*</span>
                            {!! Form::text('address', @$data['ses_data_1']['address'],['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Enter address ...']) !!}
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            {!! Form::label('city', 'City:') !!} <span class="text-red">*</span>
                            {!! Form::text('city', @$data['ses_data_1']['city'],['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Enter city ...']) !!}
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            {!! Form::label('state', 'State:') !!} <span class="text-red">*</span>
                            {!! Form::select('state',
                            $data['states']
                            ,@$data['ses_data_1']['state']
                            ,['class'=>'form-control', 'required' => 'required', 'placeholder'=>'Please Select ...']) !!}
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            {!! Form::label('zip', 'Zip / Post Code:') !!} <span class="text-red">*</span>
                            {!! Form::text('zip', @$data['ses_data_1']['zip'],['class'=>'form-control',  'required' => 'required', 'placeholder'=>'Enter zip / post code ...']) !!}
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            {!! Form::label('pet_image', 'Select Pet Image:') !!} <span class="text-red">*</span>
                            {{-- {!! Form::file('zip', false,['class'=>'form-control',  'required' => 'required', 'placeholder'=>'Select and Upload Pet Image ...']) !!} --}}


                            <div class="form-group">
                            <label for="file" class="sr-only">File</label>
                            <div class="input-group">
                                <input type="text" name="filename" class="form-control" placeholder="No image selected" readonly>
                                <span class="input-group-btn">
                                <div class="btn btn-pet-image custom-file-uploader">
                                    <input required accept="image/png, image/gif, image/jpeg" type="file" name="pet_image" onchange="this.form.filename.value = this.files.length ? this.files[0].name : ''" />
                                    Select a image
                                </div>
                                </span>
                            </div>
                            </div>

                        </div>
                       
                        <div class="col-md-12 col-12 mb--10">
                            <div class="recaptcha">
                                <div class="g-recaptcha" data-sitekey="6LfcLOIUAAAAALCab8T2PSUyLVSqwa0sPfpSqLHM"></div>
                            </div>
                        </div>

                        <div class="col-md-12 col-12 mb--10">
                            <button type="submit" class="btn-black">Continue</button>
                        </div>

                        
                    </div>

                    {!! Form::close() !!}



                    </div>

                    {{-- <div class="col-md-4" style="background-image:url(vsi/image/cat.jpeg);">
                        <img src="vsi/image/badge.png">
                    </div> --}}
                
            </div>
        </div>
    </div>


    @push('after-scripts')
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        <script>
            document.getElementById("frm_pet_badge").addEventListener("submit",function(evt)
            {
                var response = grecaptcha.getResponse();
                if(response.length == 0)
                {
                    alert("Please verify you are human!");
                    evt.preventDefault();
                    return false;
                }
            });
        </script>
    @endpush
@endsection