@extends('layouts.app')

@section('title') Upload Documents @endsection

@section('content')

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

<div class="row">
    <div class="col-lg-2">
        <a href="{{ route('application.edit', ['section' => 'init', 'encryptedLeadId' => encrypt($lead->id)]) }}">
            <div class="card border border-primary">
                <div class="card-body text-center text-primary">
                    <h3><i class="bx bxs-book-content"></i></h3>
                    <h6>Create Application</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-2">
        <a href="{{ route('application.edit', ['section' => 'details', 'encryptedLeadId' => encrypt($lead->id)]) }}">
            <div class="card border border-primary">
                <div class="card-body text-center text-primary">
                    <h3><i class="bx bxs-detail"></i></h3>
                    <h6>Details</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-2">
        <a href="{{ route('application.edit', ['section' => 'funding', 'encryptedLeadId' => encrypt($lead->id)]) }}">
            <div class="card border border-primary">
                <div class="card-body text-center text-primary">
                    <h3><i class="bx bxs-calculator"></i></h3>
                    <h6>Funding Requirement</h6>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-2">
        <div class="card border bg-primary">
            <div class="card-body text-center">
                <h3><i class="bx bxs-file-doc"></i></h3>
                <h6>Documents</h6>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="card border border-primary">
            <div class="card-body text-center text-primary">
                <h3><i class="bx bxs-check-circle"></i></h3>
                <h6>Confirmation</h6>
            </div>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="card border border-primary">
            <div class="card-body text-center text-primary">
                <h3><i class="bx bx-money-withdraw"></i></h3>
                <h6>Pay Application Fee</h6>
            </div>
        </div>
    </div>
</div>

@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

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Upload Documents</h4>
        <p class="card-title-desc">Please upload all required and supporting documents below.</p>

        <form method="POST" action="{{ route('application.save', ['section' => 'docs', 'encryptedLeadId' => encrypt($lead->id)]) }}" enctype="multipart/form-data">
            @csrf

            {{-- Required Documents --}}
            <h5>Required Documents</h5>
            <div class="row">
                @foreach($requiredDocs as $docType)
                <div class="col-md-6 mb-3">
                    <label>{{ $docType->description }} <span class="text-danger">*</span></label>
                    <input type="hidden" name="required_type[]" value="{{ $docType->code }}">
                    <input type="file" name="required_docs_{{ $docType->code }}[]" class="form-control @error('required_docs_' . $docType->code) is-invalid @enderror" multiple>
                    @error('required_docs_' . $docType->code)
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror

                    @php
                    $existingDoc = $leadDocsGrouped[$docType->code] ?? null;
                    $existingDoc = $existingDoc ? $existingDoc->first() : null;
                    @endphp

                    @if ($existingDoc && $existingDoc->files)
                    <ul class="mt-2">
                        @foreach ($existingDoc->files as $file)
                        <li>
                            <a href="{{ asset($file->file_path) }}" target="_blank">{{ basename($file->file_path) }}</a>
                            <input type="checkbox" name="existing_required_file_ids[]" value="{{ $file->id }}" checked hidden>
                            <button type="button" class="btn btn-sm btn-danger ms-2" onclick="removeFile(this, '{{ $file->id }}')">Remove</button>
                        </li>
                        @endforeach
                    </ul>
                    @endif
                </div>
                @endforeach
            </div>

            <hr>
            <h5>Supporting Documents</h5>
            <div class="mb-4">
                <table class="table table-bordered" id="supportingDocsTable">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Files</th>
                            <th>Reference</th>
                            <th>Notes</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($existingSupportingDocs as $doc)
                        <tr>
                            <!-- Type -->
                            <td>
                                <input type="hidden" name="existing_doc_ids[]" value="{{ $doc->id }}">
                                <input type="hidden" name="type[]" value="{{ $doc->type }}">
                                {{ $doc->typeInfo->description ?? $doc->type }}
                            </td>

                            <!-- Files -->
                            <td>
                                @foreach($doc->files as $file)
                                <a href="{{ asset($file->file_path) }}" target="_blank">{{ basename($file->file_path) }}</a><br>
                                @endforeach
                            </td>

                            <!-- Reference -->
                            <td>
                                <input type="text" class="form-control" name="reference[]" value="{{ $doc->reference }}">
                            </td>

                            <!-- Notes -->
                            <td>
                                <textarea name="notes[]" class="form-control">{{ $doc->notes }}</textarea>
                            </td>

                            <!-- Remove Button -->
                            <td>
                                <button type="button" class="btn btn-sm btn-danger" onclick="$(this).closest('tr').remove()">Remove</button>
                            </td>
                        </tr>
                        @endforeach

                    </tbody>
                </table>

                <button type="button" class="btn btn-outline-primary" onclick="addSupportingRow()">+ Add Supporting Document</button>
            </div>
            <a class="btn btn-light float-start" href="{{ route('application.edit', ['section' => 'funding', 'encryptedLeadId' => encrypt($lead->id)]) }}">Previous</a>
            <button class="btn btn-primary float-end">Save & Continue</button>
        </form>
    </div>
</div>

@endsection

@section('script')
<script>
    function addSupportingRow() {
        const row = `<tr>
        <td>
            <select name="supporting_type[]" class="form-control" required>
                <option value="">-- Select --</option>
                @foreach($supportingDocs as $type)
                <option value="{{ $type->code }}">{{ $type->description }}</option>
                @endforeach
            </select>
        </td>
        <td><input type="file" name="supporting_docs[][]" class="form-control" required multiple></td>
        <td><input type="text" name="supporting_reference[]" class="form-control"></td>
        <td><textarea name="supporting_notes[]" class="form-control"></textarea></td>
        <td><button type="button" class="btn btn-sm btn-danger" onclick="$(this).closest('tr').remove()">Remove</button></td>
    </tr>`;
        $('#supportingDocsTable tbody').append(row);
    }

    function removeFile(el, fileId) {
        $(el).closest('li').remove();
        $('<input>').attr({
            type: 'hidden'
            , name: 'removed_required_file_ids[]'
            , value: fileId
        }).appendTo('form');
    }

</script>
@endsection