@extends('layouts.app')

@section('title')
Application
@endsection

@section('css')
<link href="{{ asset('build/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Sweet Alert-->
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Application @endslot
@slot('title') Create Application @endslot
@endcomponent

@php
    use App\Models\LeadApplicant;

    $leadIndividual = optional($lead)->applicant_type == LeadApplicant::APPLICANT_INDIVIDUAL
@endphp

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

                <h4 class="card-title">Applicant Information</h4>
                <p class="card-title-desc">
                    Please fill in the applicant’s personal and contact details accurately.
                    This information is essential for verifying identity, assessing eligibility,
                    and ensuring successful communication throughout the application process.
                </p>

                <div class="row">
                    <div class="col-lg-3 mb-4">
                        <div class="step-sidebar">
                            <a href="{{ route('application.edit', ['section' => 'init', 'leadSN' => $leadSN]) }}">
                                <div class="step-item">
                                    <div class="step-number">1</div>
                                    <div class="step-label">Create Application</div>
                                </div>
                            </a>
                            <div class="step-item active">
                                <div class="step-number">2</div>
                                <div class="step-label">Applicant Information</div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">3</div>
                                <div class="step-label">Bank Details</div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">4</div>
                                <div class="step-label">Contract(s)</div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">5</div>
                                <div class="step-label">Pre-Factoring Payee(s)</div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">6</div>
                                <div class="step-label">Documents</div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">7</div>
                                <div class="step-label">Declarations</div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">8</div>
                                <div class="step-label">Pay Application Fee</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="mdi mdi-check-all me-2"></i>
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        @endif

                        @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="mdi mdi-block-helper me-2"></i>
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        @endif
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <p class="mb-2">If any details are incorrect, please <a href="{{ route('profile.complete') }}" class="text-warning"><u>update your profile</u></a> before proceeding.</p>
                        <form class="form" autocomplete="off" method="POST" action="{{ route('application.save', ['section' => 'applicant', 'leadSN' => $leadSN ?? null]) }}">
                            <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 select2" name="applicant_type" id="applicant_type" onchange="updateForm(this.value)" required>
                                                    <option value="">Select Type</option>
                                                    @foreach ($vendor_types as $type)
                                                    <option value="{{ $type->code }}" {{ (optional($lead)->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="{{ $user->name }}" required readonly>
                                        </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="{{ $user->national_id }}" pattern="^[0-9\-]+$" title="NRIC should contain numbers and dashes only" required readonly>
                                        </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="{{ $user->home_address_1 }}" required readonly>
                                        </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="{{ $user->home_address_2 }}" readonly>
                                        </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="{{ $user->home_postcode }}" required readonly>
                                        </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="{{ $user->home_city }}" required readonly>
                                        </div>
                                        <div class="col-lg-4 mb-3">
                                            <label for="applicant_state" class="form-label">State <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="applicant_state" name="applicant_state" value="{{ $states->where('code', $user->home_state)->first()->name }}" required readonly>
                                            <input type="hidden" name="applicant_state" id="applicant_state" value="{{ $states->where('code', $user->home_state)->first()->code }}">
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="applicant_email" class="form-label">Email <span class="text-danger">*</span></label>
                                            <input type="email" class="form-control" id="applicant_email" name="applicant_email" value="{{ $user->email }}" readonly>
                                        </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="{{ $user->mobile_phone }}" pattern="\d*" inputmode="numeric" readonly>
                                            </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_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_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_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_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_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" placeholder="e.g. 46100" value="{{ $leadIndividual ? '' : optional($lead)->applicant_postcode }}" pattern="[0-9]{5}" maxlength="5" 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_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_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="email" class="form-control" id="applicant_email" placeholder="e.g. john@email.com" name="applicant_email" value="{{ $leadIndividual ? '' : optional($lead)->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="text" id="applicant_phone" placeholder="e.g. 1177489934" name="applicant_phone" class="form-control" value="{{ $leadIndividual ? '' : optional($lead)->applicant_phone }}"pattern="[0-9]{8,15}" minlength="8" maxlength="15" 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)->contact_name ?? $user->name }}" required readonly>
                                        </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)->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)->contact_email ?? $user->email }}" required readonly>
                                        </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)->contact_phone ?? $user->mobile_phone }}" pattern="\d*" inputmode="numeric" readonly>
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                            @csrf
                            <div class="text-end">
                                <a class="btn btn-light me-2" href="{{ route('application.edit', ['section' => 'init', 'leadSN' => $leadSN]) }}">Previous</a>
                                <button type="submit" class="btn btn-primary">Save & Continue</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- end col -->
</div>
<!-- end row -->

@endsection
@section('script')

{{-- select2 --}}
<script src="{{ asset('build/libs/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('build/js/pages/form-advanced.init.js') }}"></script>

<!-- Sweet Alerts js -->
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>

<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>

@endsection