@extends('layouts.app')

@section('title', isset($vesselDetails) ? 'Edit Vessel Details' : 'Add Vessel Details')

@section('content')
<div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800">
                        {{ isset($vesselDetails) ? 'Edit Vessel Details' : 'Add Vessel Details' }}
                    </h1>
                    <p class="text-gray-600">Step 4: Register your vessel information</p>
                </div>
                <a href="{{ route('applicant.dashboard') }}" 
                   class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700">
                    Back to Dashboard
                </a>
            </div>
        </div>

        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Form -->
        <div class="bg-white rounded-lg shadow-md p-8">
            @if(isset($vesselDetails))
                <form method="POST" action="{{ route('applicant.vessel.update', $vesselDetails->id) }}" enctype="multipart/form-data">
                    @method('PUT')
            @else
                <form method="POST" action="{{ route('applicant.vessel.store') }}" enctype="multipart/form-data">
            @endif
                @csrf
                
                <div class="space-y-6">
                    <!-- Basic Vessel Information -->
                    <div class="border-b pb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Basic Vessel Information</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Vessel Name -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                        Vessel Name<span class="text-red-500">*</span>
                                </label>
                                <input type="text" name="vessel_name"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->vessel_name : old('vessel_name') }}"
                                    placeholder="e.g., Sea Star"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <!-- Previous Vessel Name -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Previous Vessel Name</label>
                                <input type="text" name="previous_vessel_name"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->previous_vessel_name : old('previous_vessel_name') }}"
                                    placeholder="If vessel was renamed"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <!-- Vessel Type -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Vessel Type</label>
                                @php
                                    $currentVesselType = isset($vesselDetails) ? $vesselDetails->vessel_type : old('vessel_type');
                                    $isOtherVesselType = $currentVesselType === 'Other';
                                @endphp
                                <select name="vessel_type" id="vessel_type_select"
                                    onchange="toggleVesselTypeOther(this)"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                                    <option value="">Select vessel type</option>
                                    <option value="Dhoni" {{ $currentVesselType == 'Dhoni' ? 'selected' : '' }}>Dhoni</option>
                                    <option value="Launch" {{ $currentVesselType == 'Launch' ? 'selected' : '' }}>Launch</option>
                                    <option value="Trawler" {{ $currentVesselType == 'Trawler' ? 'selected' : '' }}>Trawler</option>
                                    <option value="Speedboat" {{ $currentVesselType == 'Speedboat' ? 'selected' : '' }}>Speedboat</option>
                                    <option value="Cargo Vessel" {{ $currentVesselType == 'Cargo Vessel' ? 'selected' : '' }}>Cargo Vessel</option>
                                    <option value="Longliner" {{ $currentVesselType == 'Longliner' ? 'selected' : '' }}>Longliner</option>
                                    <option value="Other" {{ $isOtherVesselType ? 'selected' : '' }}>Other</option>
                                </select>
                                <div id="vessel_type_other_container" class="{{ $isOtherVesselType ? '' : 'hidden' }} mt-2">
                                    <input type="text" name="vessel_type_other"
                                        value="{{ isset($vesselDetails) ? $vesselDetails->vessel_type_other : old('vessel_type_other') }}"
                                        placeholder="Please specify vessel type"
                                        class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                                </div>
                            </div>

                            <!-- Number of Vessels -->
                        <!--    <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Number of Vessels</label>
                                <input type="number" name="number_of_vessels" min="0"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->number_of_vessels : old('number_of_vessels') }}"
                                    placeholder="e.g., 1"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                        -->    <!-- Year Built -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Year Built</label>
                                <input type="number" name="year_built" min="1900" max="{{ date('Y') }}"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->year_built : old('year_built') }}"
                                    placeholder="e.g., {{ date('Y') - 5 }}"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>

                        {{-- ── Is vessel in Kiribati? ── --}}
                        @php
                            $vesselInKiribati = isset($vesselDetails)
                                ? $vesselDetails->vessel_in_kiribati
                                : (old('vessel_in_kiribati') !== null ? old('vessel_in_kiribati') : null);
                        @endphp

                        <div class="mt-6 pt-6 border-t border-gray-200">
                            <label class="block text-sm font-medium text-gray-700 mb-3">
                                Is your vessel currently in Kiribati?
                            </label>
                            <div class="flex gap-6">
                                <label class="flex items-center space-x-2 cursor-pointer">
                                    <input type="radio" name="vessel_in_kiribati" value="1"
                                           id="vessel_in_kiribati_yes"
                                           {{ $vesselInKiribati == '1' || $vesselInKiribati === true ? 'checked' : '' }}
                                           class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
                                    <span class="text-sm text-gray-700 font-medium">Yes</span>
                                </label>
                                <label class="flex items-center space-x-2 cursor-pointer">
                                    <input type="radio" name="vessel_in_kiribati" value="0"
                                           id="vessel_in_kiribati_no"
                                           {{ $vesselInKiribati == '0' || $vesselInKiribati === false ? 'checked' : '' }}
                                           class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
                                    <span class="text-sm text-gray-700 font-medium">No</span>
                                </label>
                            </div>
                            @error('vessel_in_kiribati')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- ============================================================ -->
                    <!-- Vessel Photos                                                  -->
                    <!-- ============================================================ -->
                    <div class="border-b pb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-1">Vessel Photos</h3>
                        <p class="text-sm text-gray-500 mb-4">Up to 6 photos · PNG, JPG, JPEG, WEBP · Max 5 MB each</p>

                        @php
                            $savedPhotos = isset($vesselDetails) ? array_filter([
                                'photo_1' => $vesselDetails->photo_1,
                                'photo_2' => $vesselDetails->photo_2,
                                'photo_3' => $vesselDetails->photo_3,
                                'photo_4' => $vesselDetails->photo_4,
                                'photo_5' => $vesselDetails->photo_5,
                                'photo_6' => $vesselDetails->photo_6,
                            ]) : [];
                            $savedCount = count($savedPhotos);
                        @endphp

                        @if(!empty($savedPhotos))
                            <div class="mb-5">
                                <p class="text-sm font-medium text-gray-700 mb-2">Saved Photos
                                    <span class="text-xs text-gray-400 font-normal">(hover &amp; click ✕ to delete)</span>
                                </p>
                                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                                    @foreach($savedPhotos as $slot => $path)
                                        <div class="relative group" id="saved-{{ $slot }}">
                                            <img src="{{ asset('storage/' . $path) }}"
                                                 alt="Vessel photo"
                                                 class="w-full h-28 object-cover rounded-lg border border-gray-200 transition-opacity duration-150">
                                            <label class="absolute inset-0 rounded-lg cursor-pointer flex items-start justify-end p-1">
                                                <input type="checkbox"
                                                       name="remove_photos[]"
                                                       value="{{ $slot }}"
                                                       class="hidden remove-photo-cb">
                                                <span class="remove-icon w-6 h-6 rounded-full bg-red-500 text-white text-xs
                                                             flex items-center justify-center opacity-0 group-hover:opacity-100
                                                             transition-opacity shadow">✕</span>
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        {{-- ── Upload new photos ── --}}
                        <div>
                            <div id="drop-zone"
                                 class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center
                                        cursor-pointer hover:border-indigo-400 hover:bg-indigo-50 transition-colors"
                                 onclick="document.getElementById('vessel_photos_input').click()">
                                <svg class="mx-auto h-12 w-12 text-gray-400 mb-2" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                                          stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                <p class="text-sm text-gray-600">
                                    <span class="font-medium text-indigo-600">Click to upload</span> or drag and drop
                                </p>
                                <p class="text-xs text-gray-500 mt-1" id="drop-zone-hint">
                                    @if(!empty($savedPhotos))
                                        Add more photos ({{ 6 - $savedCount }} slot{{ 6 - $savedCount === 1 ? '' : 's' }} remaining)
                                    @else
                                        No photos yet — up to 6
                                    @endif
                                </p>
                            </div>

                            <input type="file"
                                   id="vessel_photos_input"
                                   name="vessel_photos[]"
                                   multiple
                                   accept="image/png,image/jpeg,image/jpg,image/webp"
                                   class="mt-3 block w-full text-sm text-gray-500
                                          file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0
                                          file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700
                                          hover:file:bg-indigo-100">

                            <div id="new-photo-preview"
                                 class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4 hidden"></div>
                        </div>
                    </div>
                    {{-- ── End Vessel Photos ── --}}

                    <!-- Vessel Dimensions -->
                    <div class="border-b pb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Vessel Dimensions (in meters)</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                        Registered Length<span class="text-red-500">*</span>
                                </label>
                                <input type="number" name="registered_length" min="0"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->registered_length : old('registered_length') }}"
                                    placeholder="e.g., 14.80"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Beam Length</label>
                                <input type="number" name="beam_length" min="0"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->beam_length : old('beam_length') }}"
                                    placeholder="e.g., 4.50"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Draught Length</label>
                                <input type="number" name="draught_length" min="0"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->draught_length : old('draught_length') }}"
                                    placeholder="e.g., 2.30"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tonnage</label>
                                <input type="number" name="tonnage" min="0"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->tonnage : old('tonnage') }}"
                                    placeholder="e.g., 25.50"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>
                    </div>

                    <!-- Registration & Port Information -->
                    <div class="border-b pb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Registration & Port Information</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Current Flag</label>
                                <input type="text" name="current_flag"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->current_flag : old('current_flag') }}"
                                    placeholder="e.g., Kiribati"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Base Port</label>
                                <input type="text" name="base_port"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->base_port : old('base_port') }}"
                                    placeholder="e.g., Tarawa Harbor"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">IMO Registration Number</label>
                                <input type="text" name="imo_registration_number"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->imo_registration_number : old('imo_registration_number') }}"
                                    placeholder="e.g., IMO1234567"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">International Call Sign</label>
                                <input type="text" name="international_call_sign"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->international_call_sign : old('international_call_sign') }}"
                                    placeholder="e.g., T3A123"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">VMS Number</label>
                                <input type="text" name="vms_number"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->vms_number : old('vms_number') }}"
                                    placeholder="Vessel Monitoring System number"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>
                    </div>

                    <!-- Vessel Specifications -->
                    <div class="border-b pb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Vessel Specifications</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Maximum Speed (knots)</label>
                                <input type="text" name="maximum_speed"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->maximum_speed : old('maximum_speed') }}"
                                    placeholder="e.g., 12"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Service Speed (knots)</label>
                                <input type="text" name="service_speed"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->service_speed : old('service_speed') }}"
                                    placeholder="e.g., 10"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Hull Color</label>
                                <input type="text" name="hull_color"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->hull_color : old('hull_color') }}"
                                    placeholder="e.g., White, Blue"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Hull Material</label>
                                <input type="text" name="hull_material"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->hull_material : old('hull_material') }}"
                                    placeholder="e.g., Fiberglass, Wood, Steel"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>
                    </div>

                    <!-- Crew & Operations -->
                    <div class="border-b pb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Crew & Operations</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Number of Crew</label>
                                <input type="number" name="number_of_crew" min="0"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->number_of_crew : old('number_of_crew') }}"
                                    placeholder="e.g., 8"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Captain/Master Name</label>
                                <input type="text" name="captain_master_name"
                                    value="{{ isset($vesselDetails) ? $vesselDetails->captain_master_name : old('captain_master_name') }}"
                                    placeholder="Name of vessel captain"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>

                        <div class="mt-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Fishing Gears Onboard</label>
                            <textarea name="fishing_gears_onboard" rows="3"
                                placeholder="List the fishing gears and equipment onboard"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">{{ isset($vesselDetails) ? $vesselDetails->fishing_gears_onboard : old('fishing_gears_onboard') }}</textarea>
                            <p class="text-xs text-gray-500 mt-1">e.g., Longline, Nets, Poles, Ice boxes</p>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="pt-4">
                        <button type="submit" 
                                class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 font-semibold text-lg">
                            {{ isset($vesselDetails) ? 'Update Vessel Details' : 'Save & Complete Registration →' }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ================================================================ --}}
{{-- Photo upload JS + Vessel Type toggle                              --}}
{{-- ================================================================ --}}
<script>
// ── Vessel Type "Other" toggle ──
function toggleVesselTypeOther(select) {
    const container = document.getElementById('vessel_type_other_container');
    const input     = container.querySelector('input');
    if (select.value === 'Other') {
        container.classList.remove('hidden');
        input.focus();
    } else {
        container.classList.add('hidden');
        input.value = '';
    }
}

(() => {
    const MAX_PHOTOS  = 6;
    const MAX_SIZE_MB = 5;
    const SAVED_COUNT = {{ $savedCount ?? 0 }};

    const input    = document.getElementById('vessel_photos_input');
    const dropZone = document.getElementById('drop-zone');
    const preview  = document.getElementById('new-photo-preview');

    if (!input || !dropZone || !preview) return;

    let selectedFiles = [];

    // ── Saved photo removal toggle ──
    document.querySelectorAll('.remove-photo-cb').forEach(cb => {
        cb.closest('label').addEventListener('click', function (e) {
            e.preventDefault();
            cb.checked = !cb.checked;
            const wrapper = cb.closest('[id^="saved-"]');
            const img     = wrapper.querySelector('img');
            const icon    = wrapper.querySelector('.remove-icon');
            if (cb.checked) {
                img.classList.add('opacity-30');
                icon.classList.replace('bg-red-500', 'bg-gray-700');
                icon.textContent = '✓';
            } else {
                img.classList.remove('opacity-30');
                icon.classList.replace('bg-gray-700', 'bg-red-500');
                icon.textContent = '✕';
            }
        });
    });

    // ── Drag & Drop ──
    dropZone.addEventListener('dragover', e => {
        e.preventDefault();
        dropZone.classList.add('border-indigo-500', 'bg-indigo-50');
    });
    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('border-indigo-500', 'bg-indigo-50');
    });
    dropZone.addEventListener('drop', e => {
        e.preventDefault();
        dropZone.classList.remove('border-indigo-500', 'bg-indigo-50');
        handleFiles(Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/')));
    });

    // ── File input change ──
    input.addEventListener('change', () => handleFiles(Array.from(input.files)));

    function getMarkedForRemoval() {
        return document.querySelectorAll('.remove-photo-cb:checked').length;
    }

    function handleFiles(newFiles) {
        const effectiveSaved = SAVED_COUNT - getMarkedForRemoval();
        const remaining      = MAX_PHOTOS - effectiveSaved - selectedFiles.length;

        if (remaining <= 0) {
            alert(`Maximum ${MAX_PHOTOS} photos allowed.`);
            return;
        }

        const toAdd     = newFiles.slice(0, remaining);
        const oversized = toAdd.filter(f => f.size > MAX_SIZE_MB * 1024 * 1024);

        if (oversized.length) {
            alert(`The following file(s) exceed ${MAX_SIZE_MB} MB and were skipped:\n` +
                  oversized.map(f => f.name).join('\n'));
        }

        const valid   = toAdd.filter(f => f.size <= MAX_SIZE_MB * 1024 * 1024);
        selectedFiles = [...selectedFiles, ...valid];

        syncInput();
        renderPreviews();
    }

    window.removeNewFile = function (index) {
        selectedFiles.splice(index, 1);
        syncInput();
        renderPreviews();
    };

    function syncInput() {
        const dt = new DataTransfer();
        selectedFiles.forEach(f => dt.items.add(f));
        input.files = dt.files;
    }

    function renderPreviews() {
        preview.innerHTML = '';
        if (selectedFiles.length === 0) {
            preview.classList.add('hidden');
            return;
        }
        preview.classList.remove('hidden');
        selectedFiles.forEach((file, i) => {
            const reader = new FileReader();
            reader.onload = e => {
                const div = document.createElement('div');
                div.className = 'relative group';
                div.innerHTML = `
                    <img src="${e.target.result}" alt="${file.name}"
                         class="w-full h-28 object-cover rounded-lg border border-gray-200">
                    <button type="button" onclick="removeNewFile(${i})"
                            class="absolute top-1 right-1 w-6 h-6 rounded-full bg-red-500 text-white text-xs
                                   flex items-center justify-center shadow
                                   opacity-0 group-hover:opacity-100 transition-opacity">✕</button>
                    <p class="text-xs text-gray-500 truncate mt-1 px-1">${file.name}</p>
                `;
                preview.appendChild(div);
            };
            reader.readAsDataURL(file);
        });
    }
})();
</script>
@endsection