@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') Upload Documents @endslot
@endcomponent

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

                <h4 class="card-title">Documents</h4>
                <p class="card-title-desc">
                    Upload all required documents to support the loan application.
                    These may include identification, financial records, contracts, and other relevant materials.
                </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>
                            <a href="{{ route('application.edit', ['section' => 'applicant', 'leadSN' => $leadSN]) }}">
                                <div class="step-item">
                                    <div class="step-number">2</div>
                                    <div class="step-label">Applicant Information</div>
                                </div>
                            </a>
                            <a href="{{ route('application.edit', ['section' => 'bank', 'leadSN' => $leadSN]) }}">
                                <div class="step-item">
                                    <div class="step-number">3</div>
                                    <div class="step-label">Bank Details</div>
                                </div>
                            </a>
                            <a href="{{ route('application.edit', ['section' => 'contract', 'leadSN' => $leadSN]) }}">
                                <div class="step-item">
                                    <div class="step-number">4</div>
                                    <div class="step-label">Contract(s)</div>
                                </div>
                            </a>
                            <a href="{{ route('application.edit', ['section' => 'payee', 'leadSN' => $leadSN]) }}">
                                <div class="step-item">
                                    <div class="step-number">5</div>
                                    <div class="step-label">Pre-Factoring Payee(s)</div>
                                </div>
                            </a>
                            <div class="step-item active">
                                <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

                        <form id="uploadForm" class="form" method="POST" action="{{ route('application.save', ['section' => 'document', 'leadSN' => $leadSN ?? null]) }}" enctype="multipart/form-data">
                            @csrf

                            @foreach($docTypes as $level => $docs)
                            <h5 class="card-title mt-2 mb-3">
                                @if($level == '1000')
                                Primary Documents
                                @else
                                Supporting Documents
                                @endif
                            </h5>

                            <div class="row">
                                @foreach($docs as $doc)
                                <div class="col-md-12 mb-3">
                                    <label for="doc_type_{{ $level }}" class="form-label">{{ $doc->description }} @if($doc->required) <span class="text-danger">*</span> @endif</label>
                                    @if (isset($uploadedDocs[$doc->code]) && $uploadedDocs[$doc->code]->files->count())
                                    <div class="mt-2 uploaded-files" data-doc-code="{{ $doc->code }}">
                                        <ul class="list-unstyled">
                                            @foreach ($uploadedDocs[$doc->code]->files as $file)
                                            <li class="uploaded-file" data-serial="{{ $file->serial_no }}">
                                                <a href="{{ Storage::disk('supportingdoc')->url($file->file_path) }}" target="_blank">
                                                    {{ $file->file_name }}
                                                </a>
                                                {{-- <a href="{{ route('supportingdoc.view', ltrim(str_replace('uploads/', '', $file->file_path), '/')) }}" target="_blank">
                                                <i class="fas fa-solid fa-file"></i> {{ $file->file_name }}
                                                </a> --}}
                                                <button type="button" class="btn btn-sm btn-danger btn-remove-file mb-2" data-serial="{{ $file->serial_no }}">
                                                    <i class="fas fa-solid fa-trash me-2"></i>Remove
                                                </button>
                                                <input type="hidden" name="existing_files[]" value="{{ $file->serial_no }}">
                                            </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    @endif
                                    <input type="file" class="form-control" id="doc_type_{{ $doc->code }}" name="docs[{{ $doc->code }}][]" accept="image/*,.pdf,.doc,.docx" capture="environment">
                                    {{-- Display validation error for this document --}}
                                    @if ($errors->has("docs.{$doc->code}.*"))
                                    <span class="text-danger">
                                        {{ $errors->first("docs.{$doc->code}.*") }}
                                    </span>
                                    @endif
                                </div>
                                @endforeach
                            </div>
                            @endforeach

                            <div class="text-end">
                                <a class="btn btn-light me-2" href="{{ route('application.edit', ['section' => 'payee', '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 -->

@php
$requiredDocMap = $requiredDocs;
@endphp

@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() {

        // form.addEventListener('submit', function(e) {
        //     let missing = [];

        //     for (const [code, label] of Object.entries(requiredDocMap)) {
        //         const input = form.querySelector(`[name="docs[${code}]"], [name="docs[${code}][]"]`);
        //         if (!input || input.files.length === 0) {
        //             missing.push(label);
        //         }
        //     }

        //     if (missing.length > 0) {
        //         e.preventDefault();

        //         Swal.fire({
        //             icon: 'warning'
        //             , title: 'Missing Required Documents'
        //             , html: 'Please upload the following files:<br><br><ul style="text-align:left;">' +
        //                 missing.map(item => `<li>${item}</li>`).join('') +
        //                 '</ul>'
        //             , confirmButtonText: 'OK'
        //         , });
        //     }
        // });

        const requiredDocMap = @json($requiredDocMap);
        const form = document.getElementById('uploadForm');

        form.addEventListener('submit', function(e) {
            let missing = [];

            for (const [code, label] of Object.entries(requiredDocMap)) {
                const input = form.querySelector(`[name="docs[${code}]"], [name="docs[${code}][]"]`);
                const existingFiles = form.querySelectorAll(`.uploaded-files[data-doc-code="${code}"] .uploaded-file`);

                const hasExisting = existingFiles.length > 0;
                const hasNew = input && input.files.length > 0;

                if (!hasExisting && !hasNew) {
                    missing.push(label);
                }
            }

            if (missing.length > 0) {
                e.preventDefault();
                Swal.fire({
                    icon: 'warning'
                    , title: 'Missing Required Documents'
                    , html: 'Please upload the following:<br><ul style="text-align:left;">' +
                        missing.map(item => `<li>${item}</li>`).join('') +
                        '</ul>'
                    , confirmButtonText: 'OK'
                });
            }
        });

        document.querySelectorAll('.btn-remove-file').forEach(button => {
            button.addEventListener('click', function() {
                const serial = this.dataset.serial;

                // Remove the preview UI
                const fileItem = this.closest('.uploaded-file');
                if (fileItem) fileItem.remove();

                // Remove the associated hidden input
                document.querySelectorAll(`input[name="existing_files[]"][value="${serial}"]`)
                    .forEach(input => input.remove());
            });
        });

    });

</script>





@endsection