@php
    use App\Enums\BequestsTrustsEnquiryType;
    use App\Enums\DataProtectionEnquiryType;
    use App\Enums\DisputesEnquiryType;
    use App\Enums\EcumenicalEnquiryType;
    use App\Enums\GovernanceConnexionalEnquiryType;
    use App\Enums\LegalEnquiryConcern;
    use App\Enums\ManagingTrusteeType;
    use App\Enums\PropertyEnquiryType;
    use App\Enums\SchoolsEnquiryType;
@endphp

@section('beforeMain')
    @include('sections.banner', ['background' => '', 'space_class'=>'xlg-pt4 pt3 pb3'])

    @include('livewire.sections.lfd-heading', [
        'short_title' => 'Legal',
        'title' => 'Legal enquiry',
        'step' => $this->step
    ])

    @include('sections.banner_CLOSE')
@endsection
<div
    x-data="{
        availableCheckboxes: ['Project ID', 'Name of property', 'Name of Managing Trustee Body'],
        selectedCheckboxes: []
    }"
>
    <form
        wire:submit.prevent="submit"
        class="lfd-default-text mb4 flex flex-column"
        x-data="{
        loading: false,
        attachmentCount: 0,
        enquiryConcern: '{{ $enquiry_concern }}',
        init(){
            this.$watch('enquiryConcern', () => {
                $store.lfd.changeEnquiryConcern(this.enquiryConcern)
            })
        }
    }"
        wire:key="{{ rand() }}"
        x-cloak
    >
        @include('livewire.form.error')

        @if($this->firstStep())
            <div class="lfd-main">
                <div>
                    <div class="mb2">
                        @include('livewire.form.select', [
                            'label' => 'What is your enquiry concerning?',
                            'wire_model' => 'enquiry_concern',
                            'x_model' => 'enquiryConcern',
                            'options' => LegalEnquiryConcern::toArray(),
                            'defer' => false
                        ])
                    </div>


                    <div x-show="$store.lfd.enquiryConcern === '{{ LegalEnquiryConcern::PROPERTY->value }}'"
                         style="display: none">
                        @include('livewire.form.select', [
                            'label' => 'What type of legal matter is this?',
                            'wire_model' => 'enquiry_type_details',
                            'options' => PropertyEnquiryType::toArray(),
                        ])
                    </div>

                    <div x-show="$store.lfd.enquiryConcern === '{{ LegalEnquiryConcern::DISPUTES->value }}'"
                         style="display: none">
                        @include('livewire.form.select', [
                            'label' => 'What type of legal matter is this?',
                            'wire_model' => 'enquiry_type_details',
                            'options' => DisputesEnquiryType::toArray(),
                        ])
                    </div>

                    <div x-show="$store.lfd.enquiryConcern === '{{ LegalEnquiryConcern::ECUMENICAL->value }}'"
                         style="display: none">
                        @include('livewire.form.select', [
                            'label' => 'What type of legal matter is this?',
                            'wire_model' => 'enquiry_type_details',
                            'options' => EcumenicalEnquiryType::toArray(),
                        ])
                    </div>

                    <div x-show="$store.lfd.enquiryConcern === '{{ LegalEnquiryConcern::SCHOOLS->value }}'"
                         style="display: none">
                        @include('livewire.form.select', [
                            'label' => 'What type of legal matter is this?',
                            'wire_model' => 'enquiry_type_details',
                            'options' => SchoolsEnquiryType::toArray(),
                        ])
                    </div>

                    <div x-show="$store.lfd.enquiryConcern === '{{ LegalEnquiryConcern::BEQUESTS->value }}'"
                         style="display: none">
                        @include('livewire.form.select', [
                            'label' => 'What type of legal matter is this?',
                            'wire_model' => 'enquiry_type_details',
                            'options' => BequestsTrustsEnquiryType::toArray(),
                        ])
                    </div>

                    <div x-show="$store.lfd.enquiryConcern === '{{ LegalEnquiryConcern::DATA->value }}'"
                         style="display: none">
                        @include('livewire.form.select', [
                            'label' => 'What type of legal matter is this?',
                            'wire_model' => 'enquiry_type_details',
                            'options' => DataProtectionEnquiryType::toArray(),
                        ])
                    </div>

                    <div x-show="$store.lfd.enquiryConcern === '{{ LegalEnquiryConcern::GOVERNANCE->value }}'"
                         style="display: none">
                        @include('livewire.form.select', [
                            'label' => 'What is the type of enquiry?',
                            'wire_model' => 'enquiry_type_details',
                            'options' => GovernanceConnexionalEnquiryType::toArray(),
                        ])
                    </div>

                    <div
                        x-show="$store.lfd.enquiryConcern && ![
                            '{{ LegalEnquiryConcern::BEQUESTS->value }}',
                            '{{ LegalEnquiryConcern::DATA->value }}' ,
                            '{{ LegalEnquiryConcern::PANEL->value }}',
                            '{{ LegalEnquiryConcern::WEBSITE->value }}'
                        ].includes($store.lfd.enquiryConcern)"
                    >
                        <div class="lfd-input-heading">What information can you provide?</div>
                        <div class="lfd-input-help mb1">Please provide as much information as possible to help us to answer your enquiry.<br>You must select at least one of the following options:</div>
                        <div class="flex align-middle">
                            <template x-for="availableCheckbox in availableCheckboxes">
                                @include('livewire.form.checkbox')
                            </template>
                        </div>
                    </div>

                    <div x-show="selectedCheckboxes.includes('Project ID')">
                        @include('livewire.form.text', [
                            'label' => 'Project ID',
                            'wire_model' => 'project_id',
                            'help' => 'If your enquiry relates to an existing project, please insert the project ID here',
                        ])
                    </div>

                    <div>
                        <div x-show="selectedCheckboxes.includes('Name of property')">
                            @include('livewire.form.text', [
                                'label' => 'Name of property',
                                'wire_model' => 'property_name',
                                'help' => 'Please insert the name of the building e.g. High St MC and add the town and/or postcode so we can identify exactly which property your enquiry relates to.',
                            ])
                        </div>

                        <div x-show="$store.lfd.enquiryConcern === '{{ LegalEnquiryConcern::BEQUESTS->value }}'">
                            @include('livewire.form.text', [
                                'label' => 'Trust Number or Name of Deceased or Donee',
                                'wire_model' => 'property_name',
                                'help' => 'Insert either the Trust Number, name of the deceased or the donee name',
                            ])
                        </div>

                        <div
                            x-show="['{{ LegalEnquiryConcern::DATA->value }}', '{{ LegalEnquiryConcern::PANEL->value }}', '{{ LegalEnquiryConcern::WEBSITE->value }}'].includes($store.lfd.enquiryConcern)">
                            @include('livewire.form.text', [
                                'label' => 'Enquiry Description',
                                'wire_model' => 'property_name',
                                'help' => 'Insert a short title to describe what the enquiry relates to, e.g. the name of the guidance note or standard form or data protection issue your enquiry concerns',
                            ])
                        </div>

                    </div>

                    <div x-show="selectedCheckboxes.includes('Name of Managing Trustee Body')">
                        @include('livewire.form.text', [
                            'label' => 'Name of Managing Trustee Body',
                            'wire_model' => 'managing_trustee_name',
                            'help' => 'Insert name of Managing Trustee body on behalf of whom you are making this enquiry e.g. High Street Church Council',
                        ])

                        @include('livewire.form.select', [
                            'label' => 'Type of Managing Trustee Body',
                            'wire_model' => 'managing_trustee_type',
                            'options' => ManagingTrusteeType::toArray(),
                        ])
                    </div>

                </div>
            </div>
        @else
            @include('livewire.sections.lfd-form-step-2')
        @endif

        @include('livewire.form.submit')
    </form>
</div>