@extends('term-volunteer-application-forms.volunteer-application-layout')
@section('step', 4)

@section('back-button-url')
    {{route('portal.account.term-volunteer-application.requirements-and-medical-details', compact('term_volunteer_application'))}}
@stop

@section('pages-content')

    <h1 class="mt-8 text-3xl font-extrabold text-blue-900">Qualifications</h1>



    <div
        class="mt-10 flex flex-col gap-4"
        x-data="qualificationTypesData()">

        <p class="text-gray-900 text-sm font-medium mb-8">Please tell us about any qualifications for catering, minibus
            driving and first aid, as well as any for specific outdoor activities. Please include qualifications that
            you are training for, currently.</p>

        @if($term_volunteer_application->user->volunteerQualifications()->count())
            <div class="mb-8">
                <h4 class="mb-8 text-xl font-bold text-gray-900">Uploaded qualifications</h4>
                <div class="flex flex-col gap-6">
                                        @foreach($term_volunteer_application->user->volunteerQualifications as $volunteer_qualification)
                        <div class="bg-gray-50 border border-gray-400 rounded-lg p-4">
                            <header class="flex justify-between">
                    <span
                        class="text-gray-900 text-base font-medium">{{$volunteer_qualification->type->getTypeName()}}</span>
                                <form method="post"
                                      action="{{ route('portal.account.term-volunteer-application.delete-qualification', compact('term_volunteer_application','volunteer_qualification')) }}">
                                    @csrf
                                    <button class="flex gap-2 items-center text-primary-600 hover:underline">
                                        <span class="text-base font-bold">Remove</span>
                                        @svg('img/icons/trash')
                                    </button>
                                </form>
                            </header>
                            <div class="flex flex-col gap-2 mt-2">
                    <span
                        class="text-gray-600 text-sm font-normal">{{$volunteer_qualification->type->getLevelName()}}</span>
                                @if($volunteer_qualification->status === \App\Models\VolunteerQualification::HOLD_QUALIFICATION_STATUS)
                                    <span
                                        class="text-gray-600 text-sm font-normal">Held since {{$volunteer_qualification->gain_date->format(config('formats.datetime.short-date'))}}</span>
                                @else
                                    <span
                                        class="text-gray-600 text-sm font-normal">{{\App\Models\VolunteerQualification::STATUSES[$volunteer_qualification->status]}}</span>
                                @endif
                                <a href="{{route('portal.account.term-volunteer-application.get-qualification-attachment-file', ['term_volunteer_application' => $term_volunteer_application, 'file_name' => basename($volunteer_qualification->attachment_file)])}}"
                                   target="_blank" class="flex gap-2 items-center text-primary-600 hover:underline">
                                    @svg('img/icons/document', 'h-[18px] w-[14px] min-w-[14px] stroke-[4px]')
                                    <div class="inline-block relative">
                        <span>
                            {{$volunteer_qualification->attachment_file_original_name}}
                        </span>
                                        @svg('img/icons/external-link', 'h-[14px] w-[14px] absolute top-[2px] right-[-20px]')
                                    </div>
                                </a>
                                <span class="text-gray-600 text-sm font-normal">{{$volunteer_qualification->further_details}}</span>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        @endif

        <form enctype="multipart/form-data"
              action="{{ route('portal.account.term-volunteer-application.qualifications', compact('term_volunteer_application')) }}"
              method="post"
              id="term_volunteer_application_form"
              class="flex flex-col gap-4"
        >
            @csrf
            <div>
                <h4 class="text-xl font-bold text-gray-900">Add a qualification</h4>

                <x-inputs.select :options="$qualification_types" x-on:change="level = null" name="qualification_type"
                                 label="What type of qualification?" x-model="type"/>
                <x-inputs.error name="qualification_type"/>

                <div class="flex gap-6 p-2 mt-4" x-cloak x-transition x-show="isTypeSelected() && hasLevels()">
                    <span class="block bg-gray-400 w-[2px]"></span>
                    <div class="flex flex-col gap-4 max-w-fit" x-id="['qualification_level']">
                        <h3 class="text-gray-900 my-3 text-sm font-medium">What level</h3>
                        <div class="flex flex-col gap-4">
                            <template x-for="(value, index) in getQualificationLevelsForCurrentType()"
                                      :key="$id('qualification_level', value)">
                                <label x-bind:for="$id('qualification_level', value)"
                                       class="ml-2 leading-none text-sm font-medium text-gray-900 flex gap-2">
                                    <input
                                        x-bind:id="$id('qualification_level', value)"
                                        type="radio"
                                        name="qualification_level"
                                        class="w-4 h-4 border text-blue-600 bg-gray-100 border-gray-400 focus:ring-blue-500'"
                                        :value="value"
                                        x-model="level"
                                    />
                                    <div class="flex flex-col gap-2" x-text="value"></div>
                                </label>
                            </template>
                            <x-inputs.error name="qualification_level"/>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <p class="text-sm font-semibold text-gray-900 mt-4">Status of qualification</p>
                <div class="flex flex-col gap-4 mt-6 max-w-fit">
                    @foreach(\App\Models\VolunteerQualification::STATUSES as $status_value => $status_label)
                        <x-inputs.new-radio-group x-model="status" class="ml-0 flex gap-2"
                                                  :checked="old('status') == $status_value" name="status"
                                                  label="{{$status_label}}" value="{{$status_value}}"/>
                    @endforeach
                </div>
                <x-inputs.error name="status"/>
            </div>

            <div x-cloak x-transition x-show="status !== null">
                <p class="text-sm font-semibold text-gray-900 mt-4">
                    <span x-cloak x-show="status === '1'">What date did you gain the qualification?</span>
                    <span x-cloak x-show="status === '2'">When do you expect to gain the qualification?</span>
                </p>
                <div class="flex gap-4 justify-between sm:justify-start sm:max-w-[300px] mt-2.5">
                    <x-inputs.new-input class="basis-1/3" name="qualification_date[day]" label="Day"/>
                    <x-inputs.select class="basis-1/3 !mt-0" name="qualification_date[month]" label="Month"
                                     :options="config('date.months')" placeholder=""/>
                    <x-inputs.new-input class="basis-1/3" name="qualification_date[year]" label="Year"/>
                </div>
                <x-inputs.error name="qualification_date"/>
            </div>

            <x-inputs.file-upload-dropzone id="qualification_attachment"
                                           label="Please upload certificate or proof of qualification if you have any"
                                           helptext="If you don’t currently have a scan of your certificate or any supporting documents, you can ‘save and leave’ below, and return to this page when you are ready."
                                           :restrictions_description="strtoupper(implode(', ', \App\Models\VolunteerQualification::AVAILABLE_FORMATS)) . '. Max. File size: ' . \App\Models\VolunteerQualification::MAX_SIZE / 1024 . 'MB'"/>
            <x-inputs.error name="qualification_attachment"/>

            <x-inputs.new-input name="further_details" optional label="Please provide any further details"/>
            <x-inputs.error name="further_details"/>

            <button type="submit"
                    class="flex gap-2 items-center text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-3 mt-4 w-fit">
                <span>Save and add</span>
                @svg('img/icons/plus', 'text-white')
            </button>

            <a href="{{ route('portal.account.term-volunteer-application.training-opportunities', compact('term_volunteer_application')) }}"
               class="flex gap-2 items-center text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-3 mt-16 w-fit"
               form="next-page">
                <span>Next: Training opportunities</span>
            </a>

            <button type="submit" name="save-draft-submit"
                    class="flex w-fit gap-2 items-center text-primary-600 hover:text-white hover:bg-primary-600 border border-primary-600 font-medium rounded-lg text-sm px-5 py-3 mt-8">
                <span>Save and leave</span>
            </button>

            <p class="text-xs text-gray-500">You are free to fill in each section of the return form in your own
                time.</p>
        </form>
    </div>

    @once
        <script>
            function qualificationTypesData() {
                return {
                    qualificationLevels: @json($qualification_type_levels),
                    type: @js(old('qualification_type')),
                    level: @js(old('qualification_level')),
                    status: @js(old('status')),

                    getQualificationLevelsForCurrentType() {
                        return this.qualificationLevels[this.type];
                    },

                    hasLevels() {
                        if (!this.isTypeSelected()) {
                            return false;
                        }
                        return Object.entries(this.qualificationLevels[this.type]).length > 0;
                    },

                    isTypeSelected() {
                        return this.type !== null && this.type !== '' && this.type !== undefined;
                    }
                }
            }
        </script>
    @endonce

@endsection