@extends('layouts.'.env('THEME'))

@section('style')

<style>
    <x-lead_form.lead_form_style />
</style>

@endsection

@section('content')

<div class="container" id="main-container">

    <x-section_heading
        title="Get started"
        subtitle="Let's check if we service your area."
        rowclass="my-5"/>

    <div class="row pb-5 mb-5" style="margin: 0 0 5rem 0;">
        <div class="col-lg-4 col-md-3 col-sm-2 col-1"></div>
        <div class="col-lg-4 col-md-6 col-sm-8 col-10 pb-2">
            {!! Form::open([
                'url' => 'api/postcode_query',
                'id' => 'postcode_query',
                'class' => 'ajaxform',
                'data-endpoint' => 'postcode_query']) !!}
            {!! Form::hidden('referrer', $lead_form_referrer) !!}
            {!! Form::hidden('force_signup', true) !!}

            <div class="input-group">
                <input type="text" class="form-control hinput" name="postcode"
                    id="postcode_check" placeholder="Enter your post code" maxlength="12"
                    value="{!! $postcode ?? '' !!}">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="submit">
                        <i class="fas fa-chevron-circle-right"></i>
                    </button>
                </div>
            </div>

            {!! Form::close() !!}
        </div>
        <div class="col-lg-4 col-md-3 col-sm-2 col-1"></div>
    </div>

	<div class="row">
        <x-lead_form.lead_form :referrer="$lead_form_referrer" />
    </div>

</div>
@endsection

@section('script')
<x-lead_form.lead_form_script :share_link_q="$share_link_q" />

<script>
$(document).ready(function() {
    $('#packages-business').hide();
    $('body').on('click', '#show-residential', function() {
        $('#packages-residential').show();
        $('#packages-business').hide();
    });
    $('body').on('click', '#show-business', function() {
        $('#packages-residential').hide();
        $('#packages-business').show();
    });
});
</script>
@endsection