@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">Supporting Documents</h4>
                <p class="card-title-desc">
                    Upload all required documents to support the loan application.
                </p>

                @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="row">
                    <div class="col-lg-3 mb-4">
                        <div class="step-sidebar">
                            <!-- Sidebar steps -->
                            <div class="step-item active">
                                <div class="step-number">5</div>
                                <div class="step-label">Documents</div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">6</div>
                                <div class="step-label">Declarations</div>
                            </div>
                            <div class="step-item">
                                <div class="step-number">7</div>
                                <div class="step-label">Pay Application Fee</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <form class="form" method="POST" action="{{ route('application.save', ['section' => 'document', 'leadSN' => $leadSN ?? null]) }}" enctype="multipart/form-data">
                            @csrf

                            <h5 class="card-title mb-3">Uploaded Documents</h5>
                            @if ($uploadedDocs->isNotEmpty())
                            @foreach ($uploadedDocs as $docType => $docs)
                            <div class="mb-3">
                                <h6>{{ $docType }}</h6>
                                <ul>
                                    @foreach ($docs as $doc)
                                    @foreach ($doc->files as $file)
                                    <li>
                                        <a href="{{ Storage::disk('supportingdoc')->url($file->file_path) }}" target="_blank">
                                            {{ $file->file_name }}
                                        </a>
                                    </li>
                                    @endforeach
                                    @endforeach
                                </ul>
                            </div>
                            @endforeach
                            @else
                            <p>No documents uploaded yet.</p>
                            @endif

                            <div class="text-end">
                                <a class="btn btn-light me-2" href="{{ route('application.edit', ['section' => 'contract', '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.getElementById('docFile').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;

        // Set your limits
        const maxSize = 5 * 1024 * 1024; // 5MB
        const minSize = 10 * 1024; // 10KB
        const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png'];

        if (file.size > maxSize) {
            alert('File is too large. Maximum allowed size is 5MB.');
            e.target.value = '';
        } else if (file.size < minSize) {
            alert('File is too small. Minimum allowed size is 10KB.');
            e.target.value = '';
        } else if (!allowedTypes.includes(file.type)) {
            alert('Invalid file type. Only PDF, JPG, and PNG are allowed.');
            e.target.value = '';
        }
    });

</script>

@endsection