@php
    use App\Models\LeadApplicant;

    $leadIndividual = optional($lead->applicant)->applicant_type == LeadApplicant::APPLICANT_INDIVIDUAL
@endphp
<form autocomplete="off" action="{{ route('lead.update', ['section' => 'applicant', 'serial_no' => $lead->serial_no]) }}" method="POST">
    @csrf
    @if(($formTarget ?? 'edit') === 'application')
    <input type="hidden" name="form_target" value="application">
    @endif
    <div class="row">
        <div class="row p-2">
            <div class="col-12 mb-3">
                {{-- Applicant Type --}}
                <fieldset class="row border rounded p-1 h-100">
                    <legend class="float-none w-auto px-2 fs-6 fw-bold">Applicant</legend>
                    <div class="col-md-6 mb-2">
                        <label for="applicant_type">Type of Entity <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <select class="form-control" name="applicant_type" id="applicant_type" onchange="updateForm(this.value)" required>
                                <option value="">Select Type</option>
                                @foreach ($vendorTypes as $type)
                                <option value="{{ $type->code }}" {{ (optional($lead->applicant)->applicant_type) == $type->code ? 'selected' : '' }}>
                                    {{ $type->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="col-12 mb-3 d-none" id="personal-detail-section">
                {{-- Personal Details --}}
                <fieldset class="row border rounded p-1 h-100">
                    <legend class="float-none w-auto px-2 fs-6 fw-bold">Personal Details</legend>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_name" class="form-label">Name of Applicant <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_name" name="applicant_name" value="{{ !$leadIndividual ? $lead->vendor->name : (optional($lead->applicant)->applicant_name ?? $lead->vendor->name) }}" required >
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_nric" class="form-label">NRIC <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_nric" name="applicant_nric" value="{{ !$leadIndividual ? $lead->vendor->national_id : (optional($lead->applicant)->applicant_nric ?? $lead->vendor->national_id) }}" pattern="^[0-9\-]+$" title="NRIC should contain numbers and dashes only" required >
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_address_1" class="form-label">Address (Line 1) <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_address_1" name="applicant_address_1" value="{{ !$leadIndividual ? $lead->vendor->home_address_1 : (optional($lead->applicant)->applicant_address_1 ?? $lead->vendor->home_address_1) }}" required >
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_address_2" class="form-label">Address (Line 2) </label>
                        <input type="text" class="form-control" id="applicant_address_2" name="applicant_address_2" value="{{ !$leadIndividual ? $lead->vendor->home_address_2 : (optional($lead->applicant)->applicant_address_2 ?? $lead->vendor->home_address_2) }}" >
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label for="applicant_postcode" class="form-label">Postcode <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_postcode" name="applicant_postcode" value="{{ !$leadIndividual ? $lead->vendor->home_postcode : (optional($lead->applicant)->applicant_postcode ?? $lead->vendor->home_postcode) }}" required >
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label for="applicant_city" class="form-label">City <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_city" name="applicant_city" value="{{ !$leadIndividual ? $lead->vendor->home_city : (optional($lead->applicant)->applicant_city ?? $lead->vendor->home_city) }}" required >
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label for="applicant_state" class="form-label">State <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <select class="form-control" name="applicant_state" id="applicant_state" required>
                                <option value="">Select State</option>
                                @foreach ($states as $state)
                                <option value="{{ $state->code }}" {{ (!$leadIndividual ? $lead->vendor->home_state : (optional($lead->applicant)->applicant_state ?? $lead->vendor->home_state)) == $state->code ? 'selected' : '' }}>
                                    {{ $state->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_email" class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_email" name="applicant_email" value="{{ !$leadIndividual ? $lead->vendor->email : (optional($lead->applicant)->applicant_email ?? $lead->vendor->email) }}" >
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_phone" class="form-label">Phone No. <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">+60</span>
                            <input type="number" id="applicant_phone" name="applicant_phone" class="form-control" value="{{ !$leadIndividual ? $lead->vendor->mobile_phone : (optional($lead->applicant)->applicant_phone ?? $lead->vendor->mobile_phone) }}" pattern="\d*" inputmode="numeric" >
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="col-12 mb-3 d-none" id="business-detail-section">
                {{-- Business Details --}}
                <fieldset class="row border rounded p-1 h-100">
                    <legend class="float-none w-auto px-2 fs-6 fw-bold">Business Details</legend>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_brn" class="form-label">Name of Entity <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_name" name="applicant_name" 
                            value="{{ $leadIndividual ? '' : optional($lead->applicant)->applicant_name }}">
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_brn" class="form-label">Business Registration No. <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_brn" name="applicant_brn" value="{{ optional($lead->applicant)->applicant_brn }}">
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_brd" class="form-label">Business Registration Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="applicant_brd" name="applicant_brd" value="{{ optional($lead->applicant)->applicant_brd }}">
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_address_1" class="form-label">Business Address (Line 1) <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_address_1" name="applicant_address_1" value="{{ $leadIndividual ? '' : optional($lead->applicant)->applicant_address_1 }}" required>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_address_2" class="form-label">Business Address (Line 2) </label>
                        <input type="text" class="form-control" id="applicant_address_2" name="applicant_address_2" value="{{ $leadIndividual ? '' : optional($lead->applicant)->applicant_address_2 }}">
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label for="applicant_postcode" class="form-label">Postcode <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_postcode" name="applicant_postcode" value="{{ $leadIndividual ? '' : optional($lead->applicant)->applicant_postcode }}" required>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label for="applicant_city" class="form-label">City <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_city" name="applicant_city" value="{{ $leadIndividual ? '' : optional($lead->applicant)->applicant_city }}" required>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label for="applicant_state" class="form-label">State <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <select class="form-control" name="applicant_state" id="applicant_state" required>
                                <option value="">Select State</option>
                                @foreach ($states as $state)
                                <option value="{{ $state->code }}" {{ $leadIndividual ? '' : (optional($lead->applicant)->applicant_state == $state->code ? 'selected' : '') }}>
                                    {{ $state->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_email" class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="applicant_email" name="applicant_email" value="{{ $leadIndividual ? '' : optional($lead->applicant)->applicant_email }}">
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="applicant_phone" class="form-label">Telephone No. <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">+60</span>
                            <input type="number" id="applicant_phone" name="applicant_phone" class="form-control" value="{{ $leadIndividual ? '' : optional($lead->applicant)->applicant_phone }}" pattern="\d*" inputmode="numeric">
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="col-12 mb-3 d-none" id="contact-detail-section">
                {{-- Contact Details (if not individual) --}}
                <fieldset class="row border rounded p-1 h-100">
                    <legend class="float-none w-auto px-2 fs-6 fw-bold">Contact Details</legend>
                    <div class="col-lg-6 mb-3">
                        <label for="contact_name" class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="contact_name" name="contact_name" value="{{ optional($lead->applicant)->contact_name ?? $lead->vendor->name }}" required >
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="contact_position" class="form-label">Position <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="contact_position" name="contact_position" value="{{ optional($lead->applicant)->contact_position ?? '' }}" required>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="contact_email" class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="contact_email" name="contact_email" value="{{ optional($lead->applicant)->contact_email ?? $lead->vendor->email }}" required >
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="contact_phone" class="form-label">Phone No. <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">+60</span>
                            <input type="number" id="contact_phone" name="contact_phone" class="form-control" value="{{ optional($lead->applicant)->contact_phone ?? $lead->vendor->mobile_phone }}" pattern="\d*" inputmode="numeric" >
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    <div class="text-end mt-3">
        <button type="submit" class="btn btn-primary">Save Applicant</button>
    </div>
</form>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const applicantType = document.getElementById('applicant_type');

        if (applicantType) {
            updateForm(applicantType.value);
        }
    });

    function toggleFields(fields, isRequired, isEnabled) {
        fields.forEach(field => {
            field.required = isRequired;
            field.disabled = !isEnabled;
            if (field.name == 'applicant_address_2'){
                field.required = false;
            }
        });
    }

    function updateForm(value){
        const personalForm = document.getElementById('personal-detail-section');
        const businessForm = document.getElementById('business-detail-section');
        const businessContactForm = document.getElementById('contact-detail-section');
        const inputs = personalForm.querySelectorAll('input, select, textarea');
        const inputs2 = businessForm.querySelectorAll('input, select, textarea');
        const inputs3 = businessContactForm.querySelectorAll('input, select, textarea');

        if (value === "{{ LeadApplicant::APPLICANT_INDIVIDUAL }}") {
            personalForm.classList.remove('d-none');
            businessForm.classList.add('d-none');
            businessContactForm.classList.add('d-none');

            toggleFields(inputs, true, true);
            toggleFields(inputs2, false, false);
            toggleFields(inputs3, false, false);
        } else {
            personalForm.classList.add('d-none');
            businessForm.classList.remove('d-none');
            businessContactForm.classList.remove('d-none');

            toggleFields(inputs, false, false);
            toggleFields(inputs2, true, true);
            toggleFields(inputs3, true, true);
        }
        
    }
</script>