@extends('Admin.layout')
@section('content')
    <div>
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('new_entry') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Add Delivery Partner
        </h5>
    </div>
    <div class="d-flex flex-lg-row flex-column justify-content-start gap-3 my-5">
        <a href="#" class="btn btn-primary d-flex align-items-center">
            <i class="ti tabler-user me-2"></i>
            <span>Profile Details</span>
        </a>
        {{-- <a href="{{ route('delivery_partner_document') }}" class="btn d-flex align-items-center">
            <i class="ti tabler-checklist me-2"></i>
            <span>Documents</span>
        </a> --}}
    </div>
    <form action="{{ route('delivery_partner_store') }}" method="POST" enctype="multipart/form-data"
        id="deliveryPartnerForm">
        @csrf
        <div class="card p-5">
            <h5>Rider Details</h5>
            <div class="row">
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Full Name<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('full_name') is-invalid @enderror" name="full_name"
                        value="{{ old('full_name') }}" placeholder="Enter">
                    @error('full_name')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Phone No<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('phno') is-invalid @enderror" name="phno"
                        value="{{ old('phno') }}" placeholder="Enter">
                    @error('phno')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Choose Image <span class="text-danger">*</span></label>
                    <input type="file" class="form-control @error('image') is-invalid @enderror" id="image"
                        name="image">
                    @error('image')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Email<span class="text-danger">*</span></label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                        value="{{ old('email') }}" placeholder="Enter">
                    @error('email')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">City<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('city') is-invalid @enderror" name="city"
                        value="{{ old('city') }}" placeholder="Enter">
                    @error('city')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Street<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('street') is-invalid @enderror" name="street"
                        value="{{ old('street') }}" placeholder="Enter">
                    @error('street')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Address<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('address') is-invalid @enderror" name="address"
                        value="{{ old('address') }}" placeholder="Enter">
                    @error('address')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Pincode<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('pincode') is-invalid @enderror" name="pincode"
                        value="{{ old('pincode') }}" placeholder="Enter">
                    @error('pincode')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Gender<span class="text-danger">*</span></label>
                    <select class="form-select @error('gender') is-invalid @enderror" name="gender">
                        <option value="" selected disabled>Select Gender</option>
                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                        <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                    </select>
                    @error('gender')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <!--Rider Vehicle Details -->
                <h5 class="my-4">Vehicle Details</h5>
                <div class="col-lg-6 mb-3">
                    <label class="form-label">Vehicle Type<span class="text-danger">*</span></label>
                    <select class="form-select @error('vehicle_type') is-invalid @enderror" name="vehicle_type"
                        id="vehicle_type">
                        <option value="" selected disabled>Select Vehicle</option>
                        <option value="bike" {{ old('vehicle_type') == 'bike' ? 'selected' : '' }}>Bike</option>
                        <option value="scooter" {{ old('vehicle_type') == 'scooty' ? 'selected' : '' }}>Scooter</option>
                        {{-- <option value="auto" {{ old('vehicle_type') == 'auto' ? 'selected' : '' }}>Auto</option>
                        <option value="car" {{ old('vehicle_type') == 'car' ? 'selected' : '' }}>Car</option>
                        <option value="van" {{ old('vehicle_type') == 'van' ? 'selected' : '' }}>Van</option> --}}
                    </select>
                    @error('vehicle_type')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label">Vehicle Number<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('vehicleno') is-invalid @enderror" name="vehicleno"
                        value="{{ old('vehicleno') }}" placeholder="Enter">
                    @error('vehicleno')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label">Insurance Number<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('insuranceno') is-invalid @enderror"
                        name="insuranceno" value="{{ old('insuranceno') }}" placeholder="Enter">
                    @error('insuranceno')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label">Driving License Number<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('driving_license_no') is-invalid @enderror"
                        name="driving_license_no" value="{{ old('driving_license_no') }}" placeholder="Enter">
                    @error('driving_license_no')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <!--Rider Bank Details -->
                <h5 class="my-4">Bank Details</h5>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Account Holder Name<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('accountholder') is-invalid @enderror"
                        name="accountholder" value="{{ old('accountholder') }}" placeholder="Enter">
                    @error('accountholder')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Bank Name<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('bankname') is-invalid @enderror" name="bankname"
                        value="{{ old('bankname') }}" placeholder="Enter">
                    @error('bankname')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Account Number<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('acno') is-invalid @enderror" name="acno"
                        value="{{ old('acno') }}" placeholder="Enter">
                    @error('acno')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">IFSC Code<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('ifsc') is-invalid @enderror" name="ifsc"
                        value="{{ old('ifsc') }}" placeholder="Enter">
                    @error('ifsc')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Branch Name<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('branch') is-invalid @enderror" name="branch"
                        value="{{ old('branch') }}" placeholder="Enter">
                    @error('branch')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-4 mb-3">
                    <label class="form-label">UPI ID(Optional)</label>
                    <input type="text" class="form-control @error('upi') is-invalid @enderror" name="upi"
                        value="{{ old('upi') }}" placeholder="Enter">
                    @error('upi')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="card mt-3">

            <h5 class="p-5">Rider Document Details</h5>

            <div class="card-body p-5">

                @if ($documentTypes->count() > 0)
                    <div class="row g-3">

                        @foreach ($documentTypes as $documentType)
                            <div class="col-12 col-lg-3">

                                <div class="card border-0 shadow-sm h-100 overflow-hidden">

                                    <div class="card-body p-3 p-md-4">

                                        <h5 class="fw-semibold mb-3 mb-md-4 fs-6 fs-md-5">
                                            Upload
                                            {{ ucwords(str_replace('_', ' ', $documentType->name)) }}
                                        </h5>

                                        <div id="document_{{ $documentType->id }}_uploadArea"
                                            class="border border-warning rounded-4 bg-warning bg-opacity-10 p-3 p-md-4 position-relative overflow-hidden"
                                            style="height: 220px;">

                                            <div id="document_{{ $documentType->id }}_uploadContent"
                                                class="d-flex flex-column align-items-center justify-content-center text-center h-100">

                                                <label for="document_{{ $documentType->id }}_file"
                                                    class="mb-2 cursor-pointer">
                                                    <i class="ti tabler-upload text-warning fs-1"></i>
                                                </label>

                                                <input type="file" id="document_{{ $documentType->id }}_file"
                                                    name="documents[{{ $documentType->id }}]" class="d-none"
                                                    accept=".pdf,.jpg,.jpeg,.png">

                                                <h5 class="mt-1 mb-2 fs-6 fs-md-5">
                                                    Drop your file here
                                                </h5>

                                                <p class="text-secondary mb-1">
                                                    or
                                                </p>

                                                <p class="text-secondary mb-2 small">
                                                    Click the upload icon to browse
                                                </p>

                                                <p class="text-secondary mb-1 small">
                                                    Supported formats:
                                                    <strong>PDF, JPG, PNG</strong>
                                                </p>

                                                <p class="text-secondary mb-0 small">
                                                    Max file size:
                                                    <strong>5 MB</strong>
                                                </p>

                                            </div>


                                            <div id="document_{{ $documentType->id }}_previewContainer"
                                                class="d-none position-absolute top-0 start-0 w-100 h-100 bg-white">

                                                <button type="button"
                                                    class="btn btn-danger btn-sm rounded-circle position-absolute top-0 end-0 m-2 z-3"
                                                    onclick="removeFile({{ $documentType->id }})" title="Remove file"
                                                    style="width: 28px; height: 28px; padding: 0; line-height: 28px;">
                                                    &times;
                                                </button>

                                                <div id="document_{{ $documentType->id }}_previewContent"
                                                    class="w-100 h-100 position-relative">
                                                </div>

                                            </div>

                                        </div>

                                        @error('documents.' . $documentType->id)
                                            <div class="text-danger small mt-1 text-center">
                                                {{ $message }}
                                            </div>
                                        @enderror

                                    </div>

                                </div>

                            </div>
                        @endforeach

                    </div>
                @else
                    <div class="alert alert-warning">
                        No active document types available.
                    </div>
                @endif

            </div>

            <div class="d-flex justify-content-center align-items-center mt-5 mb-5 gap-3">
                <button type="reset" class="btn btn-secondary">Discard</button>
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <span id="btnText">Submit</span>
                    <span id="btnSpinner" class="spinner-border spinner-border-sm d-none" role="status"
                        aria-hidden="true"></span>
                </button>
            </div>

        </div>
        {{-- <div class="card mt-3">
            <h5 class="p-5">Rider Document Details</h5>
            <div class="card-body p-5">
                <div class="row g-3">
                    <!-- Aadhar Upload -->
                    <div class="col-12 col-lg-3">
                        <div class="card border-0 shadow-sm h-100 overflow-hidden">
                            <div class="card-body p-3 p-md-4">
                                <h5 class="fw-semibold mb-3 mb-md-4 fs-6 fs-md-5">Upload Aadhar Card </h5>
                                <div id="aadhar_uploadArea"
                                    class="border border-warning rounded-4 bg-warning bg-opacity-10 p-3 p-md-4 position-relative overflow-hidden"
                                    style="height: 220px;">
                                    <!-- Default State Container -->
                                    <div id="aadhar_uploadContent"
                                        class="d-flex flex-column align-items-center justify-content-center text-center h-100">
                                        <label for="aadhar_file" class="mb-2 cursor-pointer">
                                            <i class="ti tabler-upload text-warning fs-1"></i>
                                        </label>
                                        <input type="file" id="aadhar_file" name="aadhar_file" class="d-none"
                                            accept=".pdf,.jpg,.jpeg,.png">
                                        <h5 class="mt-1 mb-2 fs-6 fs-md-5">Drop your file here</h5>
                                        <p class="text-secondary mb-1">or</p>
                                        <p class="text-secondary mb-2 small">Click the upload icon to browse</p>
                                        <p class="text-secondary mb-1 small">Supported formats: <strong>PDF, JPG,
                                                PNG</strong></p>
                                        <p class="text-secondary mb-0 small"> Max file size: <strong>5 MB</strong> </p>
                                    </div>
                                    <!-- Preview Container -->
                                    <div id="aadhar_previewContainer"
                                        class="d-none position-absolute top-0 start-0 w-100 h-100 bg-white">
                                        <button type="button"
                                            class="btn btn-danger btn-sm rounded-circle position-absolute top-0 end-0 m-2 z-3"
                                            onclick="removeFile('aadhar')" title="Remove file"
                                            style="width: 28px; height: 28px; padding: 0; line-height: 28px;">
                                            &times;
                                        </button>
                                        <div id="aadhar_previewContent" class="w-100 h-100 position-relative">
                                            <!-- Dynamic preview content -->
                                        </div>
                                    </div>
                                </div>
                                @error('aadhar_file')
                                    <div class="text-danger small mt-1 text-center">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!-- PAN Upload -->
                    <div class="col-12 col-lg-3">
                        <div class="card border-0 shadow-sm h-100 overflow-hidden">
                            <div class="card-body p-3 p-md-4">
                                <h5 class="fw-semibold mb-3 mb-md-4 fs-6 fs-md-5">Upload PAN Card</h5>
                                <div id="pan_uploadArea"
                                    class="border border-warning rounded-4 bg-warning bg-opacity-10 p-3 p-md-4 position-relative overflow-hidden"
                                    style="height: 220px;">
                                    <div id="pan_uploadContent"
                                        class="d-flex flex-column align-items-center justify-content-center text-center h-100">
                                        <label for="pan_file" class="mb-2 cursor-pointer">
                                            <i class="ti tabler-upload text-warning fs-1"></i>
                                        </label>
                                        <input type="file" id="pan_file" name="pan_file" class="d-none"
                                            accept=".pdf,.jpg,.jpeg,.png">
                                        <h5 class="mt-1 mb-2 fs-6 fs-md-5">Drop your file here</h5>
                                        <p class="text-secondary mb-1">or</p>
                                        <p class="text-secondary mb-2 small">Click the upload icon to browse</p>
                                        <p class="text-secondary mb-1 small">Supported formats: <strong>PDF, JPG,
                                                PNG</strong></p>
                                        <p class="text-secondary mb-0 small">Max file size: <strong>5 MB</strong></p>
                                    </div>
                                    <div id="pan_previewContainer"
                                        class="d-none position-absolute top-0 start-0 w-100 h-100 bg-white">
                                        <button type="button"
                                            class="btn btn-danger btn-sm rounded-circle position-absolute top-0 end-0 m-2 z-3"
                                            onclick="removeFile('pan')" title="Remove file"
                                            style="width: 28px; height: 28px; padding: 0; line-height: 28px;">
                                            &times;
                                        </button>
                                        <div id="pan_previewContent" class="w-100 h-100 position-relative">
                                        </div>
                                    </div>
                                </div>
                                @error('pan_file')
                                    <div class="text-danger small mt-1 text-center">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!-- License Upload -->
                    <div class="col-12 col-lg-3">
                        <div class="card border-0 shadow-sm h-100 overflow-hidden">
                            <div class="card-body p-3 p-md-4">
                                <h5 class="fw-semibold mb-3 mb-md-4 fs-6 fs-md-5">Upload License</h5>
                                <div id="license_uploadArea"
                                    class="border border-warning rounded-4 bg-warning bg-opacity-10 p-3 p-md-4 position-relative overflow-hidden"
                                    style="height: 220px;">
                                    <!-- Default State Container -->
                                    <div id="license_uploadContent"
                                        class="d-flex flex-column align-items-center justify-content-center text-center h-100">
                                        <label for="license_file" class="mb-2 cursor-pointer">
                                            <i class="ti tabler-upload text-warning fs-1"></i>
                                        </label>
                                        <input type="file" id="license_file" name="license_file" class="d-none"
                                            accept=".pdf,.jpg,.jpeg,.png">
                                        <h5 class="mt-1 mb-2 fs-6 fs-md-5">Drop your file here</h5>
                                        <p class="text-secondary mb-1">or</p>
                                        <p class="text-secondary mb-2 small">Click the upload icon to browse</p>
                                        <p class="text-secondary mb-1 small">Supported formats: <strong>PDF, JPG,
                                                PNG</strong></p>
                                        <p class="text-secondary mb-0 small">Max file size: <strong>5 MB</strong></p>
                                    </div>
                                    <div id="license_previewContainer"
                                        class="d-none position-absolute top-0 start-0 w-100 h-100 bg-white">
                                        <button type="button"
                                            class="btn btn-danger btn-sm rounded-circle position-absolute top-0 end-0 m-2 z-3"
                                            onclick="removeFile('license')" title="Remove file"
                                            style="width: 28px; height: 28px; padding: 0; line-height: 28px;">
                                            &times;
                                        </button>
                                        <div id="license_previewContent" class="w-100 h-100 position-relative">
                                        </div>
                                    </div>
                                </div>
                                @error('license_file')
                                    <div class="text-danger small mt-1 text-center">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-3">
                        <div class="card border-0 shadow-sm h-100 overflow-hidden">
                            <div class="card-body p-3 p-md-4">
                                <h5 class="fw-semibold mb-3 mb-md-4 fs-6 fs-md-5">Upload RC Book</h5>
                                <div id="rc_book_uploadArea"
                                    class="border border-warning rounded-4 bg-warning bg-opacity-10 p-3 p-md-4 position-relative overflow-hidden"
                                    style="height: 220px;">
                                    <!-- Default State Container -->
                                    <div id="rc_book_uploadContent"
                                        class="d-flex flex-column align-items-center justify-content-center text-center h-100">
                                        <label for="rc_book_file" class="mb-2 cursor-pointer">
                                            <i class="ti tabler-upload text-warning fs-1"></i>
                                        </label>
                                        <input type="file" id="rc_book_file" name="rc_book_file" class="d-none"
                                            accept=".pdf,.jpg,.jpeg,.png">
                                        <h5 class="mt-1 mb-2 fs-6 fs-md-5">Drop your file here</h5>
                                        <p class="text-secondary mb-1">or</p>
                                        <p class="text-secondary mb-2 small">Click the upload icon to browse</p>
                                        <p class="text-secondary mb-1 small">Supported formats: <strong>PDF, JPG,
                                                PNG</strong></p>
                                        <p class="text-secondary mb-0 small">Max file size: <strong>5 MB</strong></p>
                                    </div>
                                    <div id="rc_book_previewContainer"
                                        class="d-none position-absolute top-0 start-0 w-100 h-100 bg-white">
                                        <button type="button"
                                            class="btn btn-danger btn-sm rounded-circle position-absolute top-0 end-0 m-2 z-3"
                                            onclick="removeFile('rc_book')" title="Remove file"
                                            style="width: 28px; height: 28px; padding: 0; line-height: 28px;">
                                            &times;
                                        </button>
                                        <div id="rc_book_previewContent" class="w-100 h-100 position-relative">
                                        </div>
                                    </div>
                                </div>
                                @error('rc_book_file')
                                    <div class="text-danger small mt-1 text-center">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-center align-items-center mt-5 gap-3">
                    <button type="reset" class="btn btn-secondary">Discard</button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        <span id="btnText">Submit</span>
                        <span id="btnSpinner" class="spinner-border spinner-border-sm d-none" role="status"
                            aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </div> --}}
    </form>
    <div class="modal fade" id="pdfPreviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="pdfPreviewModalTitle">
                        PDF Preview
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body p-0">
                    <iframe id="pdfPreviewFrame" src="" class="w-100 border-0" style="height: 75vh;">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('deliveryPartnerForm').addEventListener('submit', function() {
            const btn = document.getElementById('submitBtn');
            const btnText = document.getElementById('btnText');
            const btnSpinner = document.getElementById('btnSpinner');
            btn.disabled = true;
            btnText.textContent = 'Processing...';
            btnSpinner.classList.remove('d-none');
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            document.querySelectorAll('input[type="file"][name^="documents["]').forEach(function(fileInput) {

                const documentId = fileInput.id.replace('document_', '').replace('_file', '');

                const uploadContent = document.getElementById(
                    `document_${documentId}_uploadContent`
                );

                const previewContainer = document.getElementById(
                    `document_${documentId}_previewContainer`
                );

                const previewContent = document.getElementById(
                    `document_${documentId}_previewContent`
                );

                fileInput.addEventListener('change', function(e) {

                    const file = e.target.files[0];

                    if (!file) {
                        return;
                    }

                    uploadContent.classList.add('d-none');
                    previewContainer.classList.remove('d-none');
                    previewContent.innerHTML = '';

                    if (file.type.startsWith('image/')) {

                        const reader = new FileReader();

                        reader.onload = function(e) {

                            previewContent.innerHTML = `
                            <img
                                src="${e.target.result}"
                                alt="Preview"
                                class="w-100 h-100 rounded-4"
                                style="object-fit: cover; object-position: center;"
                            >

                            <span
                                class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-75 text-white small text-center p-1 text-truncate rounded-bottom-4"
                            >
                                ${file.name}
                            </span>
                        `;
                        };

                        reader.readAsDataURL(file);
                    }

                    else if (file.type === 'application/pdf') {

                        const pdfUrl = URL.createObjectURL(file);

                        const safeFileName = file.name.replace(/'/g, "\\'");

                        previewContent.innerHTML = `
                        <div class="d-flex flex-column align-items-center justify-content-center h-100 p-3 text-center">

                            <i class="ti tabler-file-type-pdf text-danger fs-1 mb-2"></i>

                            <span
                                class="fw-semibold text-truncate w-100 d-block mb-2 px-2"
                                title="${file.name}"
                            >
                                ${file.name}
                            </span>

                            <span class="badge bg-secondary mb-3">
                                PDF Document
                            </span>

                            <button
                                type="button"
                                class="btn btn-primary btn-sm"
                                onclick="viewPdf('${pdfUrl}', '${safeFileName}')"
                            >
                                <i class="ti tabler-eye me-1"></i>
                                View PDF
                            </button>

                        </div>
                    `;
                    }

                    else {

                        previewContent.innerHTML = `
                        <div class="d-flex flex-column align-items-center justify-content-center h-100 p-3 text-center">

                            <i class="ti tabler-file text-secondary fs-1 mb-2"></i>

                            <span
                                class="fw-semibold text-truncate w-100 d-block mb-1 px-2"
                                title="${file.name}"
                            >
                                ${file.name}
                            </span>

                        </div>
                    `;
                    }
                });
            });
        });


        function viewPdf(pdfUrl, fileName) {

            const pdfFrame = document.getElementById('pdfPreviewFrame');

            const modalTitle = document.getElementById('pdfPreviewModalTitle');

            pdfFrame.src = pdfUrl;

            modalTitle.textContent = fileName;

            const modalElement = document.getElementById('pdfPreviewModal');

            const modal = new bootstrap.Modal(modalElement);

            modal.show();
        }


        document.getElementById('pdfPreviewModal')
            .addEventListener('hidden.bs.modal', function() {

                document.getElementById('pdfPreviewFrame').src = '';
            });


        function removeFile(documentId) {

            const fileInput = document.getElementById(
                `document_${documentId}_file`
            );

            const uploadContent = document.getElementById(
                `document_${documentId}_uploadContent`
            );

            const previewContainer = document.getElementById(
                `document_${documentId}_previewContainer`
            );

            const previewContent = document.getElementById(
                `document_${documentId}_previewContent`
            );

            fileInput.value = '';

            previewContent.innerHTML = '';

            previewContainer.classList.add('d-none');

            uploadContent.classList.remove('d-none');
        }
    </script>
@endsection