@extends('layouts.app')

@section('title')
Application Form
@endsection

@section('css')
<link href="{{ asset('build/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<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') Application Form @endslot
@endcomponent

<style>
    .a4-page {
        min-height: 1123px;
        margin: 0 auto;
        padding: 30px;
        background: white;
    }
    .table-compact th,
    .table-compact td {
        padding: 0.25rem 0.5rem;
    }
    .inline-input {
        display: inline-block;
        width: auto;
    }
    [data-repeater-item] hr {
        display: none;
    }
    [data-repeater-item]:not(:first-child) hr {
        display: block;
    }
    .autofit-textarea {
        overflow: hidden;
        resize: none;
    }
    .was-validated .form-control:invalid,
    .was-validated .form-select:invalid,
    .was-validated textarea:invalid {
        border-color: #dc3545;
        background-color: #fff5f5;
        background-image: none;
    }
    .was-validated .form-control:invalid:focus,
    .was-validated .form-select:invalid:focus,
    .was-validated textarea:invalid:focus {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
    .was-validated .form-control:valid,
    .was-validated .form-select:valid,
    .was-validated textarea:valid {
        border-color: var(--bs-border-color, #ced4da);
        background-image: none;
        box-shadow: none;
    }
    .was-validated .form-check-input:invalid {
        border-color: #dc3545;
        background-color: #fff5f5;
    }
    .was-validated .form-check-input:invalid:focus {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
    .was-validated .form-check-input:valid {
        border-color: var(--bs-border-color, #ced4da);
        background-image: none;
    }
    .was-validated .form-check-input:invalid ~ .form-check-label {
        color: #dc3545;
    }
    .swal2-toast .swal2-title,
    .swal2-toast .swal2-html-container {
        color: #fff !important;
    }
</style>

@php
    use App\Models\Info\Facility;

    $factoring = $facilities->where('code', Facility::CODE_FACTORING)->first();
    $preFactoring = $facilities->where('code', Facility::CODE_PRE_FACTORING)->first();

    $sectionRejections = function ($records) {
        $records = is_iterable($records) ? collect($records) : collect([$records]);
        return $records->filter()->flatMap(function ($r) {
            $out = [];
            if (($r->verify_status_1 ?? null) === 'rejected' && !empty($r->verify_remarks_1)) {
                $out[] = $r->verify_remarks_1;
            }
            if (($r->verify_status_2 ?? null) === 'rejected' && !empty($r->verify_remarks_2)) {
                $out[] = $r->verify_remarks_2;
            }
            return $out;
        });
    };

    $toastSuccess = collect(['success', 'error'])->map(fn ($key) => $key === 'success' ? session('success') : null)->filter()->first();
@endphp

@if (session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="mdi mdi-alert-circle-outline 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 alert-dismissible fade show" role="alert">
    <i class="mdi mdi-alert-circle-outline me-2"></i> Please fix the errors below.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<ul class="list-group mb-3">
    @foreach ($errors->all() as $error)
    <li class="list-group-item list-group-item-danger">{{ $error }}</li>
    @endforeach
</ul>
@endif

<div id="form" class="row formdiv">
    <div class="col-lg-12">
        <div class="a4-page" id="a4">

            {{-- 1. FACILITY APPLIED & AMOUNT --}}
            <div id="init">
                <div class="card border-1 border-bottom-0 border-dark bg-dark rounded-0 p-1 mb-2">
                    <h5 class="card-title text-center m-0 fs-6 text-white">1. FACILITY APPLIED &amp; AMOUNT</h5>
                </div>
                @php $initRemarks = $sectionRejections($lead); @endphp
                @if ($initRemarks->isNotEmpty())
                <div class="alert alert-danger alert-dismissible fade show mb-0 py-2" role="alert" style="font-size: 0.8rem;">
                    <i class="mdi mdi-alert-circle-outline me-1"></i><strong>Rejected Reason(s):</strong>
                    <ul class="mb-0 mt-1 ps-3">
                        @foreach ($initRemarks as $remark)
                        <li>{{ $remark }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" style="padding: 0.6rem; font-size: 0.65rem;"></button>
                </div>
                @endif
                <form autocomplete="off" class="needs-validation" novalidate method="POST" action="{{ route('application.save', ['section' => 'init', 'leadSN' => optional($lead)->serial_no]) }}">
                    @csrf
                    <input type="hidden" name="form_target" value="full">
                    <input type="hidden" name="facility_code" value="{{ Facility::CODE_FACTORING }}">
                    <div class="card border-dark rounded-0 p-2 mb-3">
                        <table class="table table-bordered border-dark text-center table-compact mb-0" style="table-layout: fixed; word-wrap: break-word;">
                            <colgroup>
                                <col style="width: 25%;">
                                <col style="width: 25%;">
                                <col style="width: 25%;">
                                <col style="width: 25%;">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th colspan="2">
                                        Pre-Factoring
                                        <input type="hidden" name="pre_facility_code" value="{{ Facility::CODE_PRE_FACTORING }}">
                                        <input type="hidden" name="pre_checkbox" id="pre_checkbox_state" value="{{ optional($lead)->pre_purpose_code ? '1' : '' }}">
                                    </th>
                                    <th colspan="2">Factoring <span class="text-danger">*</span></th>
                                </tr>
                                <tr>
                                    <th>Type</th>
                                    <th>Amount</th>
                                    <th>Type</th>
                                    <th>Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-start">
                                        <select name="pre_purpose_code" id="pre_purpose_select" class="form-select form-select-sm">
                                            <option value="">-- None --</option>
                                            @foreach ($facilities_types as $type)
                                            @if ($type->facility_code == $preFactoring->code)
                                            <option value="{{ $type->code }}" {{ optional($lead)->pre_purpose_code == $type->code ? 'selected' : '' }}>{{ $type->description }}</option>
                                            @endif
                                            @endforeach
                                        </select>
                                        @error('pre_purpose_code')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                    </td>
                                    <td>
                                        <input type="number" name="pre_fund_amount" id="pre_amount_input" class="form-control form-control-sm" value="{{ optional($lead)->pre_fund_amount }}" min="1000" step="0.01" {{ optional($lead)->pre_purpose_code ? 'required' : 'disabled' }}>
                                        @error('pre_fund_amount')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                    </td>
                                    <td class="text-start">
                                        <select name="purpose_code" id="purpose_select" class="form-select form-select-sm" required>
                                            <option value="" disabled {{ optional($lead)->purpose_code ? '' : 'selected' }}>-- Select --</option>
                                            @foreach ($facilities_types as $type)
                                            @if ($type->facility_code == $factoring->code)
                                            <option value="{{ $type->code }}" {{ optional($lead)->purpose_code == $type->code ? 'selected' : '' }}>{{ $type->description }}</option>
                                            @endif
                                            @endforeach
                                        </select>
                                        @error('purpose_code')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                    </td>
                                    <td>
                                        <input type="number" name="fund_amount" class="form-control form-control-sm" value="{{ optional($lead)->fund_amount }}" min="1000" step="0.01" required>
                                        @error('fund_amount')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="col row mt-2">
                            <div class="fw-bold col-auto align-self-center">Duration <span class="text-danger">*</span> :</div>
                            <div class="col-auto">
                                <input type="number" name="tenure_period" id="tenure_period_input" class="form-control form-control-sm" value="{{ optional($lead)->tenure_period }}" min="1" step="1" required>
                                @error('tenure_period')<small class="text-danger d-block">{{ $message }}</small>@enderror
                            </div>
                            <div class="col-auto">
                                <select name="tenure_unit" class="form-select form-select-sm" required>
                                    <option value="">Select Unit</option>
                                    @foreach ($tenure_units as $unit)
                                    <option value="{{ $unit->code }}" {{ optional($lead)->tenure_unit == $unit->code ? 'selected' : '' }}>{{ $unit->description }}</option>
                                    @endforeach
                                </select>
                                @error('tenure_unit')<small class="text-danger d-block">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="col row mt-2">
                            <div class="fw-bold col-auto align-self-center">Originator <span class="text-danger">*</span> :</div>
                            <div class="col-auto" style="min-width: 240px;">
                                <select class="form-select form-select-sm select2" id="originator" name="originator" required>
                                    <option value="">Select Originator</option>
                                    @foreach ($originators as $originator)
                                    <option value="{{ $originator->id }}" {{ optional($lead)->originator == $originator->id ? 'selected' : '' }}>{{ $originator->name }}</option>
                                    @endforeach
                                </select>
                                @error('originator')<small class="text-danger d-block">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="col row mt-2">
                            <div class="fw-bold col-auto">Loan Summary <span class="text-danger">*</span> :</div>
                            <div class="col">
                                <textarea name="title_summary" class="form-control form-control-sm autofit-textarea" rows="2" maxlength="65535" required>{{ optional($lead)->title_summary }}</textarea>
                                @error('title_summary')<small class="text-danger d-block">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <small class="text-muted" style="font-size: 0.75rem;">This section is required.</small>
                            <button type="submit" class="btn btn-primary btn-sm">Save</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

@endsection

@section('script')

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

<!-- form repeater js -->
<script src="{{ URL::asset('build/libs/jquery.repeater/jquery.repeater.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/form-repeater.int.js') }}"></script>
<script>
    $(function () {
        document.querySelectorAll('[data-placeholder-row]').forEach(function (row) {
            row.remove();
        });
    });
</script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        @if ($toastSuccess)
        Swal.fire({
            toast: true,
            position: 'top-right',
            icon: 'success',
            title: @json($toastSuccess),
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: false,
            background: '#28a745',
            color: '#fff',
            iconColor: '#fff',
        });
        @endif

        const applicantTypeSelect = document.getElementById('applicant_type_select');
        const applicantIndividualFields = document.getElementById('applicant-individual-fields');
        const applicantCompanyFields = document.getElementById('applicant-company-fields');

        function updateApplicantForm(value) {
            if (!applicantIndividualFields || !applicantCompanyFields) return;
            const isIndividual = value === "{{ \App\Models\LeadApplicant::APPLICANT_INDIVIDUAL }}";
            applicantIndividualFields.classList.toggle('d-none', !isIndividual);
            applicantCompanyFields.classList.toggle('d-none', isIndividual);
            applicantIndividualFields.querySelectorAll('input, select, textarea').forEach(function (field) {
                field.disabled = !isIndividual;
            });
            applicantCompanyFields.querySelectorAll('input, select, textarea').forEach(function (field) {
                field.disabled = isIndividual;
            });
        }

        if (applicantTypeSelect) {
            updateApplicantForm(applicantTypeSelect.value);
            applicantTypeSelect.addEventListener('change', function () {
                updateApplicantForm(this.value);
            });
        }

        const prePurposeSelect = document.getElementById('pre_purpose_select');
        const preAmountInput = document.getElementById('pre_amount_input');
        const preCheckboxState = document.getElementById('pre_checkbox_state');

        if (prePurposeSelect) {
            prePurposeSelect.addEventListener('change', function () {
                preAmountInput.value = '';
                if (this.value === '') {
                    preAmountInput.disabled = true;
                    preAmountInput.required = false;
                    if (preCheckboxState) preCheckboxState.value = '';
                } else {
                    preAmountInput.disabled = false;
                    preAmountInput.required = true;
                    if (preCheckboxState) preCheckboxState.value = '1';
                }
            });
        }

        const tenurePeriodInput = document.getElementById('tenure_period_input');
        if (tenurePeriodInput) {
            tenurePeriodInput.addEventListener('input', function () {
                if (this.value.length > 10) {
                    this.value = this.value.slice(0, 10);
                }
            });
        }

        const feePaymentMethod = document.getElementById('fee_payment_method');
        const feeManualSection = document.getElementById('fee-manual-section');
        const feePaymentDocs = document.getElementById('fee_payment_docs');
        if (feePaymentMethod) {
            feePaymentMethod.addEventListener('change', function () {
                if (this.value === 'manual') {
                    feeManualSection.classList.remove('d-none');
                    if (feePaymentDocs) feePaymentDocs.required = true;
                } else {
                    feeManualSection.classList.add('d-none');
                    if (feePaymentDocs) { feePaymentDocs.required = false; feePaymentDocs.value = ''; }
                }
            });
        }

        function autoFitTextarea(el) {
            el.style.height = 'auto';
            el.style.height = el.scrollHeight + 'px';
        }

        document.querySelectorAll('.autofit-textarea').forEach(autoFitTextarea);

        document.addEventListener('input', function (e) {
            if (e.target.matches('.autofit-textarea')) {
                autoFitTextarea(e.target);
            }
        });

        document.addEventListener('click', function (e) {
            if (e.target.matches('[data-repeater-create]')) {
                setTimeout(function () {
                    document.querySelectorAll('.autofit-textarea').forEach(autoFitTextarea);
                }, 0);
            }
        });

        function setupRepeaterNumbering(listSelector) {
            const list = document.querySelector(listSelector);
            if (!list) return;
            function renumber() {
                list.querySelectorAll(':scope > [data-repeater-item]').forEach(function (item, index) {
                    const label = item.querySelector('.item-number');
                    if (label) label.textContent = index + 1;
                });
            }
            renumber();
            new MutationObserver(renumber).observe(list, { childList: true });
        }

        setupRepeaterNumbering('[data-repeater-list="banks"]');
        setupRepeaterNumbering('[data-repeater-list="contracts"]');
        setupRepeaterNumbering('[data-repeater-list="payees"]');

        function setupTableHeaderVisibility(listSelector, theadSelector) {
            const list = document.querySelector(listSelector);
            const thead = document.querySelector(theadSelector);
            if (!list || !thead) return;
            function updateTheadVisibility() {
                const hasRecord = list.querySelectorAll(':scope > [data-repeater-item]').length > 0;
                thead.classList.toggle('d-none', !hasRecord);
            }
            updateTheadVisibility();
            new MutationObserver(updateTheadVisibility).observe(list, { childList: true });
        }

        setupTableHeaderVisibility('[data-repeater-list="shareholders"]', '#shareholder-thead');

        let scrollTo = "{{ session('scrollTo') ?? request()->query('section') ?? '' }}";
        if (scrollTo) {
            let target = document.getElementById(scrollTo);
            if (target) {
                const navbarOffset = 100;
                const top = target.getBoundingClientRect().top + window.pageYOffset - navbarOffset;
                window.scrollTo({ top, behavior: 'smooth' });
            }
        }

        document.querySelectorAll('form.needs-validation').forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                    form.classList.add('was-validated');
                }
            });
        });
    });
</script>
@endsection