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

@section('moreStyle')

<style>
    <x-lead_form.lead_form_style />

    #packages {
        display: none;
    }

	.speshreq {
	    background: #81a966;
	    color: #fff;
	    border-radius: 10px;
	    cursor: pointer;
	    padding: 0.5rem 1rem;
	    display: inline-block;
	    font-weight: bold;
	}

</style>

@endsection

@section('content')

    @if(!empty($area) && $area->isVoucher())
    <!-- Voucher qualify modal -->
    <div class="modal fade" id="voucherQualifyModal">
        <div class="modal-dialog shadow">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Good news!</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <p><strong>Government funding project area</strong></p>
                    <p>Your postcode is within one of our government funded projects. You'll most likely be able to cover all installation costs with a free voucher.</p>
                    <p>Please continue to secure your voucher funding.</p>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
                </div>

            </div>
        </div>
    </div>
    @endif

<div class="container-fluid darken m-0 p-0 top-feature" style="overflow: hidden;">
    <div class="row">
        <div class="col-12 text-center" style="margin-top: 10px;">
            <h1 class="mt-5 px-2" style="color: var(--dark-color); display: inline-block; margin-top: 0px;">
                Please enter your postcode
            </h1>
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-6 col-sm-7 col-10">
                <h2 style="font-size: 1.5rem; font-weight: normal; color: var(--dark-color);">
                    to view available services for your property
                </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="row pb-5 mb-5" style="margin: 2rem 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-5 text-center">

            {!! Form::open([
                'url' => 'pricing',
                'method' => 'get',
                'id' => 'postcode_submit']) !!}
            {!! Form::hidden('referrer', $referrer ?? 'pricing_page') !!}

            <span id="postcode_check_error" class="badge badge-pill badge-danger mb-2"></span>
            <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-arrow-right"></i>
                    </button>
                </div>
            </div>

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

</div>

@if(!empty($packages))
<div class="container" id="packages">

    <div class="row mt-5">
        <div class="col-10 offset-1 text-center">
            @if(empty($postcode))
                <h2 id="main-heading">Standard pricing</h2>
                <p id="main-subheading">(enter postcode above for actual prices)</p>
            @elseif(empty($area->packages))
                <h2 id="main-heading">Preliminary pricing</h2>
                <p id="main-subheading">for {{ $postcode }}</p>
            @else
                <h2 id="main-heading">Broadband Packages</h2>
                <p id="main-subheading">for {{ $postcode }}</p>
            @endif
        </div>
    </div>

    <div class="row mt-4 mb-3">
        <div class="col-10 offset-1 text-center">
            <div class="mb-2 contract-leng-selection">
                Select contract length
            </div>
            <div class="btn-group btn-group-toggle contract-leng-selection" data-toggle="buttons">
                <label class="btn btn-outline-primary active">
                    <input type="radio" name="filter-months" id="filter-months-12"
                        value="12">
                    12 months
                </label>
                <label class="btn btn-outline-primary">
                    <input type="radio" name="filter-months" id="filter-months-24"
                        value="24" checked>
                    24 months
                    <!-- <span class="badge badge-danger">Best value</span> -->
                </label>
            </div>
            <br />

            <div class="my-2 contract-leng-selection">
                Select contract type
            </div>
            <div class="btn-group btn-group-toggle contract-leng-selection" data-toggle="buttons">
                <label class="btn btn-outline-primary active">
                    <input type="radio" name="filter-type" id="filter-type-residential"
                        value="residential" checked>
                    Residential
                </label>
                <label class="btn btn-outline-primary">
                    <input type="radio" name="filter-type" id="filter-type-business"
                        value="business">
                    Business
                </label>
            </div>

        </div>
    </div>

    <div class="row no-gutters-md no-gutters-sm" id="packages-filtered">

    </div>

    @include('pricing.explanation_modal')

</div>
@endif

<div class="container" style="border-radius: 5px; padding: 0 12px;">
	<div class="row" style="margin-top: 0px;">
        <x-lead_form.lead_form :referrer="$lead_form_referrer" />
	</div>
</div>

@include('pages.corp.full_fibre_service')
<div class="container-fluid py-5" style="background: #b9e5ff; margin-top: -15px;">
    <x-section_heading title="We'd love to hear from you" subtitle="Send us a message." rowclass="mt-5"/>
    <x-contact />
</div>


@endsection

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