@section('style')

<style>
    .package-option {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .po-active > .package-option-main {
        background-color: #9fe0af;
        border-color: #5ea870;
        background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
    }

    .package-option > div {
        width: 100%;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        border-style: solid;
        border-width: 2px;
    }

    .po-none.po-active > .package-option-main {
        background-color: #ff6b6b;
        border-color: #ff3535;
        background-image: linear-gradient(to right, #ff6868 0%, #ff7575 51%, #ff8484 100%);
    }

    .package-option-main {
        background-color: #d6d6d6;
        border-color: #c4c4c4;
        cursor: pointer;
        transition: 0.5s;
        background-size: 200% auto;
        box-shadow: 0 0 20px #eee;
        border-radius: 2px;
        background-image: linear-gradient(to right, #d6d6d6 0%, #cccccc 51%, #c1c1c1 100%);
    }
    .package-option-main:hover {
        background-position: right center;
    }

    .package-option-info {
        background-color: #f7f7f7;
        border-color: #d8c077;
        font-size: 0.8rem;
    }

    .see-more {
        color: #0000EE;
        cursor: pointer;
        font-weight: bold;
        text-decoration: underline;
    }

    .more-details {
        display: none;
    }

    .package-option-info > .more-details {
        font-size: 1rem;
    }

    .faqs > .see-more {
        font-size: 1.2rem;
    }

    .faqs > .more-details {
        font-size: 1rem;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        background: transparent;
        bottom: 0;
        color: transparent;
        cursor: pointer;
        height: auto;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
    }

    #form-errors {
        color: red;
        font-weight: bold;
    }

</style>

@endsection

    @if(empty($user->lead->package_id) && empty($user->lead->viewed_profile) && !empty($packages))
    <!-- Welcome Modal -->
    <div class="modal fade" id="finalStepModal">
        <div class="modal-dialog shadow">
            <div class="modal-content">

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

                <!-- Modal body -->
                <div class="modal-body">
                    @if(!empty($user->lead->getArea()) && $user->lead->getArea()->isInstalling())
                        <p><strong>Select a package</strong></p>
                        <p>You have been sent an email confirmation of your submission and you are now logged in to your profile.</p>
                    @else
                        <p><strong>Select a preliminary package</strong></p>
                        <p>You have been sent an email confirmation of your submission and you are now logged in to your profile.</p>
                    @endif
                    @if($user->lead->isVoucher())
                        <p>Please continue to secure your voucher funding.</p>
                    @endif
                </div>

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

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

@if(empty($packages))
    <p>We are still in the process of putting together package options for your address.</p>
    @if(!empty($user->lead->address->short()))
    <p style="font-weight: bold;">{{ $user->lead->address->short() }}</p>
    @endif
    <p>We will send you an email to {{ $user->email }} once your package options are ready. <a href="/champion_dashboard/profile">Change your email by clicking here.</a> Feel free to get in touch with us using the form at the bottom of this page for up-to-date information.</p>

@else

    {!! Form::model($user->lead,
        ['route' => ['lead.update', $user->lead->id],
        'id' => 'package_form'
        ]) !!}
        @method('PATCH')
        @if($user->lead->isVoucher())
            {!! Form::hidden('page', 'voucher') !!}
        @elseif(empty($user->lead->package_id))
            {!! Form::hidden('page', 'profile') !!}
        @else
            {!! Form::hidden('page', $active_page) !!}
        @endif

        <div class="row mb-2">
            <div class="col-12">

                <div class="row">
                    <div class="col-12">

                    @if(!empty($user->lead->getArea()->live_date)
                        && $user->lead->getArea()->live_date > \Carbon\Carbon::now())
                        <p>
                            Earliest estimated connection date: <strong>{!! $user->lead->getArea()->live_date->format('D jS M') !!}</strong>
                        </p>
                    @endif

                    @if(!empty($user->lead->getArea()) && !$user->lead->getArea()->isInstalling())
                        <p>We have put together some <b>preliminary</b> package options for you to choose from. Rest assured that at this stage you&rsquo;re <b>not</b> committing to pay for anything. You are just letting us know the level of service you will be looking for to help us plan our network in {{ $user->lead->address->getPostcodeArea()->name ?? 'your area' }}.</p>
                    @endif

                    @if(!empty($voucher_area))
                        <p>The gigabit voucher scheme will help cover the costs of installing the infrastructure from our source location to your residence. From there you will need to select one of our packages to receive your ultrafast internet service. You can also delay the start date of your service until a date that suits you (helpful if you already have an active internet contract)</p>

                        <p>Our goal is to work with the community to provide the best service possible. We welcome your input so feel free to get in touch with any questions.</p>

                        @if(empty($faqs))
                            <p>You can also <a href="/faqs" target="_blank">click here to see some common questions and answers.</a></p>
                        @else
                        <div class="faqs mb-3">
                            <span class="see-more">
                                Click to see common questions and answers <i class="fa fa-chevron-down" aria-hidden="true"></i>
                            </span>
                            <div class="more-details">
                                @foreach($faqs as $faq)
                                <div class="faq mt-3">
                                    <div class="question see-more">
                                        {{ $faq->question }} <i class="fa fa-chevron-down" aria-hidden="true"></i>
                                    </div>
                                    <div class="answer more-details">
                                        {{ $faq->answer }}
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif
                    @endif

                        <p><b>Please select the package below that best suits your needs.</b>
                    </div>
                </div>
            </div>
        </div>


        <div class="row mt-2 mb-3 contract-leng-selection">
            <div class="col-12 text-left">
                <h5> Select contract length</h5>
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                    <label class="btn btn-outline-primary">
                        <input type="radio" name="options" id="show-12"
                            @if($months_checked == 12) checked @endif>
                        12 months
                    </label>
                    <label class="btn btn-outline-primary active">
                        <input type="radio" name="options" id="show-24"
                            @if($months_checked == 24) checked @endif>
                        24 months
                        <span class="badge badge-danger">Best value</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="row mt-2 mb-3 contract-type-selection">
            <div class="col-12 text-left">
                <h5> Select contract type</h5>
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                    <label class="btn btn-outline-primary">
                        <input type="radio" name="options" id="show-residential"
                            @if($type_checked == 'residential') checked @endif>
                        Residential
                    </label>
                    <label class="btn btn-outline-primary active">
                        <input type="radio" name="options" id="show-business"
                            @if($type_checked == 'business') checked @endif>
                        Business
                    </label>
                </div>
            </div>
        </div>

    @if($user->lead->isVoucher())
        <div class="package-option po-none {{ (empty($package->id) ? 'po-active' : '') }}"
            id="package-0">
            <div class="package-option-main">
                <input class="mr-2 package-option-radio" name="package_id" type="radio"
                    value="0" {{ (empty($package->id) ? 'checked="checked"' : '') }} />
                <span style="font-weight: bold;">No package</span> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> You&rsquo;ll miss the opportunity to claim your voucher.
            </div>
            <div class="package-option-info">
                <div class="more-details">
                    <b>Notice</b>
                    If you don&rsquo;t require ultrafast broadband right now then you still have options. It would be a shame for you to miss the opportunity of having your residence connected to the UK&rsquo;s fibre optic network for free. Often customers want to wait until their current broadband contract has ended. In this case we can still help you claim your voucher and postpone your ultrafast service to a date that suits you.
                </div>
                <span class="see-more">
                    show your options <i class="fa fa-chevron-down" aria-hidden="true"></i>
                </span>
            </div>
        </div>
    @elseif($user->lead->isBau())
        <div class="package-option po-none {{ (empty($package->id) ? 'po-active' : '') }}"
            id="package-0">
            <div class="package-option-main">
                <input class="mr-2 package-option-radio" name="package_id" type="radio"
                    value="0" {{ (empty($package->id) ? 'checked="checked"' : '') }} />
                <span style="font-weight: bold;">No package</span> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Select a package to continue.
            </div>
        </div>
    @endif

        <div>
        @foreach($packages as $pack)
            @php
                $package_class = $pack->type.'-'.$pack->months;
            @endphp
            <x-package_option
                :package="$pack"
                href="/champion_dashboard/profile"
                active="{{ ($pack->id == $user->lead->package_id ? true : false) }}"
                isVoucher="{{ $user->lead->isVoucher() }}"
                :pclass="$package_class" />
        @endforeach
        </div>

        <div class="row mt-4 mb-2">
            <div class="col-12">
                <h5>When would you like to upgrade?</h5>
                <i>*For preliminary planning only. We will arrange and confirm your actual install date once you commit.</i>
            </div>
        </div>

        <div class="row mt-1">
            <div class="col-md-12">
                <div class="form-group">
                    {!! Form::select('upgrade_time_type',
                        $upgrade_time_types,
                        $user->lead->upgrade_time_type,
                        ['id'=>'upgrade_time_type-select', 'class' => 'p-1']) !!}
                </div>
            </div>
        </div>

        <div id="upgrade_time-container"
        class="row mt-1">
            <div class="col-md-12">
                <strong>Please select a date</strong>
                <div class="form-group">
                    <input type="date" name="upgrade_time" class="form-control"
                        id="upgrade_time" value="{{ \Carbon\Carbon::parse($user->lead->upgrade_time)->toDateString() ?? '' }}"
                        placeholder="yyyy-mm-dd" />
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12" id="form-errors"></div>
            <div class="col-12">
                <button class="btn btn-primary" type="submit">
                    {!! (empty($user->lead->package_id) ?
                    'Continue &nbsp; <i class="fas fa-chevron-circle-right"></i>'
                    : 'Submit') !!}
                </button>
            </div>
        </div>

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

    @section('script')
    <script>
    var upgrade_time_type = {{ $user->lead->upgrade_time_type ?? 0 }};
    var package_id = {{ $package->id ?? 0 }};
    var packages = {!! json_encode($packages, JSON_FORCE_OBJECT) !!};

    function pageLandSelectedPackage(){
        if(package_id == 0){
            changePackage(package_id);
        }else{
            Object.values(packages).forEach(package => {
                if(package.id == package_id){
                    if(package.months == 12){
                        $('#show-12').click();
                    }else{
                        $('#show-24').click();
                    }
                    $('#packageradio-'+package_id).click();

                    changePackage(package_id);
                    return;
                }
            });
        }

        var lengthOptions = {};
        Object.values(packages).forEach(package => {
            if(!isNaN(package.months)) lengthOptions[package.months] = package.months;
        });

        if(Object.keys(lengthOptions).length <= 1){
            Object.values(lengthOptions).forEach(lengthOption => {
                $('#show-'+lengthOption).click();
            });
            $('.contract-leng-selection').hide();
        }

    }

    var package_type_selected = '{!! $type_checked !!}';
    var package_month_selected = {!! $months_checked !!};
    function change_package_display(){
        $('.residential-12').hide();
        $('.residential-24').hide();
        $('.business-12').hide();
        $('.business-24').hide();
        $('.'+package_type_selected+'-'+package_month_selected).show();
    }

    $(document).ready(function() {
        selectedUpgradeTimeType(upgrade_time_type);

    @if(!empty($user->lead->getArea()->live_date)
        && $user->lead->getArea()->live_date > \Carbon\Carbon::now())
        document.getElementById("upgrade_time").min = "{!! $user->lead->getArea()->live_date->format('Y-m-d') !!}";
    @endif

    @if(empty($user->lead->viewed_profile && !empty($packages)))
        $('#finalStepModal').modal('show');
    @endif

        $('body').on('change', '#upgrade_time_type-select', function() {
            selectedUpgradeTimeType($(this).val());
        });

        $('body').on('click', '.package-option-main', function() {
            $(this).find('.package-option-radio').prop('checked',true);
            var selected_id = $(this).find('.package-option-radio').val();
            if(selected_id != package_id) changePackage(selected_id);
        });

        $('body').on('change', '.package-option-radio', function() {
            var selected_id = $(this).val();
            if(selected_id != package_id) changePackage(selected_id);
        });

        change_package_display();
        $('body').on('click', '#show-12', function() {
            package_month_selected = 12;
            change_package_display();
        });
        $('body').on('click', '#show-24', function() {
            package_month_selected = 24;
            change_package_display();
        });
        $('body').on('click', '#show-residential', function() {
            package_type_selected = 'residential';
            change_package_display();
        });
        $('body').on('click', '#show-business', function() {
            package_type_selected = 'business';
            change_package_display();
        });

        pageLandSelectedPackage();

        <!-- Safari datepicker fix -->
        var el = document.createElement('input');
        el.setAttribute('type','date');
        //if type is text then and only then should you call the fallback
        if(el.type === 'text'){
           $('#upgrade_time').datepicker({
              format: 'yyyy-mm-dd',
              autoHide: true,
              zIndex: 2048,
           });
        }

    });

    $("#package_form").submit(function(){
        $('#form-errors').html('');
        var validates = true;
        var values = $(this).serializeArray();
        for (let i = 0; i < values.length; i++) {
            const val = values[i].value;
            const name = values[i].name;
            if(name == "package_id"){
                if(val == 0){
                    validates = false;
                    formError("Please select a package");
                }
            }else if(name == "upgrade_time"){
                if($('#upgrade_time_type-select').val() > 1
                    && val == ""){
                    validates = false;
                    formError("Please select a date you would like to upgrade, an estimate is fine.");
                }
            }else if(name == "upgrade_time_type"){
                if(val == 0){
                    validates = false;
                    formError("Please select a date you would like to upgrade, an estimate is fine.");
                }
            }
        }
        return validates;
    });

    function formError(string){
        var contents = $('#form-errors').html();
        $('#form-errors').html(contents + '<p>- '+string+'</p>');
    }

    function selectedUpgradeTimeType(val){
        upgrade_time_type = val;
        if(upgrade_time_type < 2){
            $('#upgrade_time-container').hide();
            $('#upgrade_time').val('');
        }else{
            $('#upgrade_time-container').show();
        }
    }

    function changePackage(selected_id){
        package_id = selected_id;
        $('.po-active').removeClass('po-active');
        $('#package-'+package_id).addClass('po-active');
    }

    </script>
    @endsection

@endif