@extends('layouts.app')

@section('title') @lang('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

<form id="application-form">
    <input type="hidden"
        name="lead_sn"
        id="lead_sn"
        value="{{ $lead->lead_sn ?? '' }}">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4"></h4>

                    <div id="form-wizard">
                        <!-- Seller Details -->
                        <h3>Create Application</h3>
                        <section>
                            <div class="row">
                                <!-- Title Summary (editable) -->
                                <div class="col-md-12 mb-3">
                                    <label for="title_summary">Loan Purpose / Summary <span class="text-danger">*</span></label>
                                    <input type="text"
                                        class="form-control @error('title_summary') is-invalid @enderror"
                                        id="title_summary"
                                        name="title_summary"
                                        value="{{ old('title_summary', $lead->title_summary ?? '') }}"
                                        placeholder="Give a short summary of why you're applying for this loan.">
                                    @error('title_summary')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Applicant Information (readonly) -->
                                <div class="col-md-6 mb-3">
                                    <label>Name</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->name }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>NRIC</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->national_id }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Email</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->email }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Phone</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->phone }}"
                                        readonly>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label>Home Address (Line 1)</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->home_address_1 }}"
                                        readonly>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label>Home Address (Line 2)</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->home_address_2 }}"
                                        readonly>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>Postcode</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->home_postcode }}"
                                        readonly>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>City</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->home_city }}"
                                        readonly>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>State</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->HomeState->name }}"
                                        readonly>
                                </div>
                            </div>

                            <div class="alert alert-warning mt-2">
                                If any details are incorrect, please <a href="{{ route('profile.complete') }}"
                                    class="text-warning"><u>update your profile</u></a> before proceeding.
                            </div>
                        </section>

                        <!-- Business Info -->
                        <h3>Business Information</h3>
                        <section>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label>Business Classification</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->BizClass->name }}"
                                        readonly>
                                </div>
                            </div>
                            @if(auth()->user()->biz_name)
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label>Business Name</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_name }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Business Sector / Industry</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->sector->name ?? '-' }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Registration No.</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_reg_no }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Registration Date</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_reg_date }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Telephone No.</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_phone }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Mobile No.</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_mobile }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Email</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_email }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Email (CC)</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_email_cc }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Address (Line 1)</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_address_1 }}"
                                        readonly>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label>Address (Line 2)</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_address_2 }}"
                                        readonly>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>Postcode</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_postcode }}"
                                        readonly>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>City</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->biz_city }}"
                                        readonly>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>State</label>
                                    <input type="text"
                                        class="form-control bg-light"
                                        value="{{ auth()->user()->BizState->name }}"
                                        readonly>
                                </div>
                            </div>
                            @else
                            <div class="alert alert-info mt-2">
                                You have not linked your business. Please <a href="{{ route('profile.complete') }}">complete your profile</a> first.
                            </div>
                            @endif
                        </section>

                        <!-- Details -->
                        <h3>Details</h3>
                        <section>
                            <div class="row">
                                {{-- Category --}}
                                <div class="col-md-6 mb-3">
                                    <label for="category">Category <span class="text-danger">*</span></label>
                                    <select name="category"
                                        id="category"
                                        class="form-select select2 @error('category') is-invalid @enderror"
                                        required>
                                        <option value=""
                                            disabled
                                            selected>Please select category</option>
                                        @foreach ($categories as $category)
                                        <option value="{{ $category->code }}"
                                            {{ old('category', optional($leadDetails)->category ?? '') == $category->code ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('category')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Payment Method --}}
                                <div class="col-md-6 mb-3">
                                    <label for="payment_method">Payment Method <span class="text-danger">*</span></label>
                                    <select name="payment_method"
                                        id="payment_method"
                                        class="form-select select2 @error('payment_method') is-invalid @enderror"
                                        required>
                                        <option value=""
                                            disabled
                                            selected>Please select method</option>
                                        @foreach ($payment_methods as $method)
                                        <option value="{{ $method->code }}"
                                            {{ old('payment_method', optional($leadDetails)->payment_method ?? '') == $method->code ? 'selected' : '' }}>
                                            {{ $method->description }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('payment_method')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Description --}}
                                <div class="col-md-6 mb-3">
                                    <label for="description">Description <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('description') is-invalid @enderror"
                                        id="description"
                                        name="description"
                                        placeholder="Describe the project/loan...">{{ old('description', $leadDetails->description ?? '') }}</textarea>
                                    @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Remarks --}}
                                <div class="col-md-6 mb-3">
                                    <label for="remarks">Other Information</label>
                                    <textarea class="form-control @error('remarks') is-invalid @enderror"
                                        id="remarks"
                                        name="remarks"
                                        placeholder="Optional additional remarks...">{{ old('remarks', $leadDetails->remarks ?? '') }}</textarea>
                                    @error('remarks')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Awarder Name --}}
                                <div class="col-md-6 mb-3">
                                    <label for="awarder_name">Awarder Name <span class="text-danger">*</span></label>
                                    <input type="text"
                                        class="form-control @error('awarder_name') is-invalid @enderror"
                                        id="awarder_name"
                                        name="awarder_name"
                                        value="{{ old('awarder_name', $leadDetails->awarder_name ?? '') }}"
                                        placeholder="Enter awarder name">
                                    @error('awarder_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Awarder Type --}}
                                <div class="col-md-6 mb-3">
                                    <label for="awarder_type">Awarder Type <span class="text-danger">*</span></label>
                                    <select name="awarder_type"
                                        id="awarder_type"
                                        class="form-select select2 @error('awarder_type') is-invalid @enderror"
                                        required>
                                        <option value=""
                                            disabled
                                            selected>Please select awarder type</option>
                                        @foreach ($awarder_types as $type)
                                        <option value="{{ $type->code }}"
                                            {{ old('awarder_type', optional($leadDetails)->awarder_type ?? '') == $type->code ? 'selected' : '' }}>
                                            {{ $type->description }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('awarder_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Level of Margin --}}
                                <div class="col-md-6 mb-3">
                                    <label for="margin_level">Level of Margin <span class="text-danger">*</span></label>
                                    <select name="margin_level"
                                        id="margin_level"
                                        class="form-select select2 @error('margin_level') is-invalid @enderror"
                                        required>
                                        <option value=""
                                            disabled
                                            selected>Select level of margin</option>
                                        @foreach ($margin_levels as $level)
                                        <option value="{{ $level->code }}"
                                            {{ old('margin_level', optional($leadDetails)->margin_level ?? '') == $level->code ? 'selected' : '' }}>
                                            {{ $level->description }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('margin_level')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Margin Percentage --}}
                                <div class="col-md-6 mb-3">
                                    <label for="margin_val">Margin Percentage (%) <span class="text-danger">*</span></label>
                                    <input type="number"
                                        class="form-control @error('margin_val') is-invalid @enderror"
                                        id="margin_val"
                                        name="margin_val"
                                        value="{{ old('margin_val', $leadDetails->margin_val ?? '') }}"
                                        placeholder="Enter margin in percentage">
                                    @error('margin_val')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </section>

                        <!-- Funding Requirement -->
                        <h3>Funding Requirement</h3>
                        <section>
                            <div class="row">
                                {{-- Facility --}}
                                <div class="col-md-6 mb-3">
                                    <label for="facility">Facility <span class="text-danger">*</span></label>
                                    <select name="facility"
                                        id="facility"
                                        class="form-select select2 @error('facility') is-invalid @enderror"
                                        required>
                                        <option value=""
                                            disabled
                                            selected>Select facility</option>
                                        @foreach ($facilities as $facility)
                                        <option value="{{ $facility->id }}"
                                            {{ old('facility', optional($leadFunding)->facility ?? '') == $facility->id ? 'selected' : '' }}>
                                            {{ $facility->label }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('facility')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Fund Type --}}
                                <div class="col-md-6 mb-3">
                                    <label for="fund_type">Type <span class="text-danger">*</span></label>
                                    <select name="fund_type"
                                        id="fund_type"
                                        class="form-select select2 @error('fund_type') is-invalid @enderror"
                                        required>
                                        <option value=""
                                            disabled
                                            selected>Select funding type</option>
                                        @foreach ($fund_types as $type)
                                        <option value="{{ $type->code }}"
                                            {{ old('fund_type', optional($leadFunding)->fund_type ?? '') == $type->code ? 'selected' : '' }}>
                                            {{ $type->description }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('fund_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Fund Amount --}}
                                <div class="col-md-6 mb-3">
                                    <label for="fund_amt">Amount Requested (RM) <span class="text-danger">*</span></label>
                                    <input type="number"
                                        class="form-control @error('fund_amt') is-invalid @enderror"
                                        id="fund_amt"
                                        name="fund_amt"
                                        value="{{ old('fund_amt', $leadFunding->fund_amt ?? '') }}"
                                        placeholder="e.g. 100000">
                                    @error('fund_amt')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Tenure Period --}}
                                <div class="col-md-6 mb-3">
                                    <label for="tenure_period">Duration <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="number"
                                            class="form-control @error('tenure_period') is-invalid @enderror"
                                            id="tenure_period"
                                            name="tenure_period"
                                            value="{{ old('tenure_period', $leadFunding->tenure_period ?? '') }}"
                                            placeholder="e.g. 12">
                                        {{-- Tenure Unit --}}
                                        <select name="tenure_unit"
                                            id="tenure_unit"
                                            class="form-select select2 @error('tenure_unit') is-invalid @enderror"
                                            required>
                                            <option value=""
                                                disabled
                                                selected>Select duration unit</option>
                                            @foreach ($tenure_units as $unit)
                                            <option value="{{ $unit->code }}"
                                                {{ old('tenure_unit', optional($leadFunding)->tenure_unit ?? '') == $unit->code ? 'selected' : '' }}>
                                                {{ $unit->description }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('tenure_period')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    @error('tenure_unit')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Notes --}}
                                <div class="col-md-6 mb-3">
                                    <label for="notes">Notes</label>
                                    <textarea class="form-control @error('notes') is-invalid @enderror"
                                        id="notes"
                                        name="notes"
                                        placeholder="Any relevant notes...">{{ old('notes', $leadFunding->notes ?? '') }}</textarea>
                                    @error('notes')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Additional Info --}}
                                <div class="col-md-6 mb-3">
                                    <label for="other_info">Additional Info</label>
                                    <textarea class="form-control @error('other_info') is-invalid @enderror"
                                        id="other_info"
                                        name="other_info"
                                        placeholder="Optional additional information...">{{ old('other_info', $leadFunding->other_info ?? '') }}</textarea>
                                    @error('other_info')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </section>

                        <!-- Upload Document -->
                        <h3>Upload Document</h3>
                        <section>
                            <div class="row">
                                @forelse ($required_docs as $docType)
                                <div class="col-md-6 mb-4">
                                    <div class="form-group">
                                        <label for="doc_{{ $docType->code }}">
                                            {{ $docType->description }}
                                            @if($docType->required)
                                            <span class="text-danger">*</span>
                                            @endif
                                        </label>

                                        <input type="file"
                                            class="form-control @error('documents.' . $docType->code) is-invalid @enderror"
                                            name="documents[{{ $docType->code }}][]"
                                            id="doc_{{ $docType->code }}"
                                            accept="image/*,application/pdf"
                                            multiple
                                            {{ $docType->required ? 'required' : '' }}>

                                        @error('documents.' . $docType->code)
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror

                                        @if($documents->has($docType->code))
                                        <div class="mt-2">
                                            <small class="text-muted">Previously uploaded:</small>
                                            <ul class="mb-0">
                                                @foreach ($documents[$docType->code] as $doc)
                                                @foreach ($doc->files as $file)
                                                <li>
                                                    <a href="{{ asset('storage/' . $file->file_path) }}"
                                                        target="_blank">
                                                        {{ $file->file_name }}
                                                    </a>
                                                </li>
                                                @endforeach
                                                @endforeach
                                            </ul>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                @empty
                                <div class="col-12">
                                    <div class="alert alert-warning">No required documents configured by admin.</div>
                                </div>
                                @endforelse
                            </div>
                        </section>

                        <h3>Supporting Documents</h3>
                        <section>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="button"
                                        class="btn btn-primary mb-3"
                                        data-bs-toggle="modal"
                                        data-bs-target="#supportingDocModal">
                                        Add Supporting Document
                                    </button>

                                    <table class="table table-bordered"
                                        id="supportingDocsTable">
                                        <thead>
                                            <tr>
                                                <th>Document Type</th>
                                                <th>Reference</th>
                                                <th>Notes</th>
                                                <th>Files</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if(isset($supportingDocEntries) && $supportingDocEntries->count())
                                            @foreach ($supportingDocEntries as $doc)
                                            <tr>
                                                <td>{{ $doc->docType->name ?? '-' }}</td>
                                                <td>{{ $doc->reference }}</td>
                                                <td>{{ $doc->notes }}</td>
                                                <td>
                                                    <ul class="mb-0">
                                                        @foreach ($doc->files as $file)
                                                        <li>
                                                            <a href="{{ asset('storage/' . $file->file_path) }}"
                                                                target="_blank">{{ $file->file_name }}</a>
                                                        </li>
                                                        @endforeach
                                                    </ul>
                                                </td>
                                                <td><button class="btn btn-danger btn-sm">Delete</button></td>
                                            </tr>
                                            @endforeach
                                            @else
                                            <tr>
                                                <td colspan="5"
                                                    class="text-center text-muted">
                                                    No supporting documents uploaded yet.
                                                </td>
                                            </tr>
                                            @endif
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                        </section>

                        <!-- Confirm Details -->
                        <h3>Confirm Application</h3>
                        <section>
                            <div class="row">
                                <div class="col-md-12">
                                    <h5>Please confirm the following before submitting your application:</h5>

                                    <div class="form-check mt-3">
                                        <input class="form-check-input"
                                            type="checkbox"
                                            name="confirm_checks[]"
                                            value="details_valid"
                                            id="check1"
                                            required>
                                        <label class="form-check-label"
                                            for="check1">
                                            I confirm that all the information provided in this application is true and accurate.
                                        </label>
                                    </div>

                                    <div class="form-check mt-2">
                                        <input class="form-check-input"
                                            type="checkbox"
                                            name="confirm_checks[]"
                                            value="docs_uploaded"
                                            id="check2"
                                            required>
                                        <label class="form-check-label"
                                            for="check2">
                                            I have uploaded all the required documents for this application.
                                        </label>
                                    </div>

                                    <div class="form-check mt-2">
                                        <input class="form-check-input"
                                            type="checkbox"
                                            name="confirm_checks[]"
                                            value="consent_agreed"
                                            id="check3"
                                            required>
                                        <label class="form-check-label"
                                            for="check3">
                                            I understand that submission does not guarantee approval and consent to be contacted.
                                        </label>
                                    </div>

                                    {{-- <div class="mt-4">
                                        <div class="alert alert-info">
                                            Once submitted, you won't be able to edit the application. Please review your information carefully.
                                        </div>
                                    </div> --}}
                                </div>
                            </div>
                        </section>

                    </div>

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

<!-- Supporting Document Modal -->
<div class="modal fade"
    id="supportingDocModal"
    tabindex="-1"
    aria-labelledby="supportingDocModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <form id="supporting-doc-form"
            enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload Supporting Document</h5>
                    <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden"
                        name="lead_id"
                        value="{{ $lead->id ?? '' }}">

                    <div class="mb-3">
                        <label for="doc_type">Document Type</label>
                        <select class="form-control select2"
                            id="doc_type"
                            name="doc_type"
                            required>
                            <option value="">Select Document Type</option>
                            @foreach ($supporting_docs as $doc)
                            <option value="{{ $doc->code }}">{{ $doc->description }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="reference">Reference</label>
                        <input type="text"
                            class="form-control"
                            name="reference"
                            id="reference">
                    </div>

                    <div class="mb-3">
                        <label for="notes">Notes</label>
                        <textarea class="form-control"
                            name="notes"
                            id="notes"
                            rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="supporting_docs">Upload File(s)</label>
                        <input type="file"
                            class="form-control"
                            name="docs[]"
                            id="supporting_docs"
                            multiple
                            required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit"
                        class="btn btn-primary">Upload</button>
                    <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>


@endsection
@section('script')
<!-- jquery step -->
<script src="{{ URL::asset('build/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>

<!-- form wizard init -->
{{-- <script src="{{ URL::asset('build/js/pages/form-wizard.init.js') }}"></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).ready(function() {
        const form = $('#application-form');

        function initSelect2() {
            $('.select2').select2({
                width: '100%',
                dropdownParent: $('#form-wizard')
            });
        }

        initSelect2();

        $('#form-wizard').steps({
            headerTag: 'h3',
            bodyTag: 'section',
            transitionEffect: 'slideLeft',
            autoFocus: true,

            onStepChanging: function(event, currentIndex, newIndex) {
                const currentSection = $('#form-wizard').find('section').eq(currentIndex);
                const inputs = currentSection.find('input, select, textarea');

                // Perform HTML5 validation
                let valid = true;
                inputs.each(function() {
                    if (!this.checkValidity()) {
                        $(this).addClass('is-invalid');
                        valid = false;
                    } else {
                        $(this).removeClass('is-invalid');
                    }
                });

                if (!valid) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        text: 'Please complete all required fields before continuing.'
                    });
                    return false;
                }

                // Wrap AJAX in a promise so it returns synchronously
                const stepPromise = $.Deferred();

                const formData = new FormData();
                inputs.each(function() {
                    const name = $(this).attr('name');
                    if (name) {
                        formData.append(name, $(this).val());
                    }
                });

                formData.append('step', currentIndex);
                formData.append('lead_sn', $('#lead_sn').val());

                $.ajax({
                    url: '{{ route("application.saveStep") }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(res) {
                        $('#lead_sn').val(res.lead_sn);
                        stepPromise.resolve(true); // allow step change
                    },
                    error: function(xhr) {
                        let msg = '';

                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function(k, v) {
                                msg += v[0] + '<br>';
                            });
                        } else {
                            msg = (xhr.responseJSON && xhr.responseJSON.exception) ?
                                xhr.responseJSON.exception :
                                'Something went wrong.';
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Server Error',
                            html: msg
                        });

                        stepPromise.resolve(false); // stay on same step
                    }
                });

                return stepPromise.promise(); // return the promise to block/continue
            },


            onStepChanged: function(event, currentIndex) {
                initSelect2();
            }
        });
    });
</script>

@endsection