@extends('layouts.dbs')
@section('dbs-title', 'Update DBS details')
@section('back-button-form-url')
    {{route('dbs.index')}}
@stop
@section('dbs-form-content')

        <h4 class="text-3xl font-bold sm:font-extrabold text-blue-900">DBS certificate requirements</h4>
        <div class="mt-7" x-data="{
            hasUpdateService: null,
            coversChildWorkforce: null,
            hasEnhancedLevel: null
        }">
            <p class="text-sm font-semibold text-gray-900 mt-4 mb-6">For us to use a current DBS certificate, it must adhere to our safeguarding requirements. Please confirm the following questions.</p>
            <div class="mb-5">
                <p class="mt-4">Is your DBS registered with the update service?</p>
                <div class="flex flex-col gap-4 mt-6 max-w-fit">
                    <x-inputs.new-radio-group class="ml-0 flex gap-2" x-model="hasUpdateService" label="Yes" value="true" name="updateservice" />
                    <x-inputs.new-radio-group class="ml-0 flex gap-2" x-model="hasUpdateService" label="No" value="false" name="updateservice"  />
                </div>
            </div>

            <div class="mb-5">
                <p class="mt-4">Does your DBS Cover you for working with 'Child workforce'?</p>
                <div class="flex flex-col gap-4 mt-6 max-w-fit">
                    <x-inputs.new-radio-group class="ml-0 flex gap-2" x-model="coversChildWorkforce" label="Yes" value="true" name="child-workforce"  />
                    <x-inputs.new-radio-group class="ml-0 flex gap-2" x-model="coversChildWorkforce" label="No" value="false" name="child-workforce"  />
                </div>
            </div>

            <div class="mb-5">
                <p class="mt-4">Is your DBS classed as ‘Enhanced level’?</p>
                <div class="flex flex-col gap-4 mt-6 max-w-fit">
                    <x-inputs.new-radio-group class="ml-0 flex gap-2" x-model="hasEnhancedLevel" label="Yes" value="true" name="enhanced-level"  />
                    <x-inputs.new-radio-group class="ml-0 flex gap-2" x-model="hasEnhancedLevel" label="No" value="false" name="enhanced-level"  />
                </div>
            </div>
            
            <template x-if="hasUpdateService !== null || coversChildWorkforce !== null || hasEnhancedLevel !== null">
                <div>
                    <div class="dbs-requirements-failed pt-5" x-show="hasUpdateService === 'false' || coversChildWorkforce === 'false' || hasEnhancedLevel === 'false'" x-transition.delay.100ms>
                        <div class="warning flex gap-2 pt-4 pb-10">
                            <div class="rounded-full bg-yellow-100 w-5 h-[1.25rem] flex items-center justify-center">
                                @svg('img/icons/exclamation-circle-warning')
                            </div>
                            <span class="text-base text-yellow-600 font-semibold flex-1">Your current DBS doesn’t fit the criteria of our safeguarding policy, so we will need you to apply for a new DBS. Please proceed for more information.</span>
                        </div>
                        <a class="text-white bg-primary-600 w-full sm:w-auto hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
                            href="{{route('dbs.apply')}}"
                        >
                            Next: Apply for new DBS
                        </a>
                    </div>

                    <div class="dbs-requirements-success mt-10" x-show="hasUpdateService === 'true' && coversChildWorkforce === 'true' && hasEnhancedLevel === 'true'" x-transition.delay.100ms>
                        <a class="text-white bg-primary-600 w-full sm:w-auto hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mt-5"
                            href="{{route('dbs.form.information')}}"
                        >
                            Next: Submit current DBS
                        </a>
                    </div>
                </div>
                
            </template>
            

           
        </div>

@endsection