<!-- New section for Lampiran Dokumen -->
<div class="card border border-agi-100 min-w-full mt-5">
    <div class="card-header light:bg-agi-50">
        <h3 class="card-title">
            Lampiran Dokumen
        </h3>
    </div>
    <div class="card-body">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @forelse($permohonan->lampiranDokumen as $lampiran)
                <div class="border p-4 rounded-lg">
                    <h4 class="font-semibold mb-2">{{ $lampiran->nama_file }}</h4>
                    <p class="text-sm text-gray-600 mb-2">Keterangan : {{ $lampiran->keterangan }}</p>
                    <p class="text-sm text-gray-600 mb-2 capitalize">Jenis Lampiran : {{ str_replace('-',' ',$lampiran->jenisLampiran->nama) }}</p>
                    <div class="flex justify-between items-center">
                        <div>
                            <a href="{{ Storage::url($lampiran->path_file) }}" target="_blank" class="text-blue-600 hover:underline">
                                <i class="ki-filled ki-eye mr-2"></i>View
                            </a>
                            <a href="{{ Storage::url($lampiran->path_file) }}" download="{{ Storage::url($lampiran->path_file) }}" class="text-green-600 hover:underline ml-4">
                                <i class="ki-filled ki-cloud-download mr-2"></i>Download
                            </a>
                        </div>
                        @if(Auth::user()->hasRole('administrator'))
                            <form action="{{ route('lampiran.delete', $lampiran->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this lampiran?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:underline">
                                    <i class="ki-filled ki-trash mr-2"></i>Delete
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            @empty
                <p class="col-span-3 text-center text-gray-500">Tidak ada lampiran dokumen.</p>
            @endforelse
        </div>

        @if(Auth::user()->hasRole(['Penilai', 'administrator','penilai','admin','surveyor','pemohon-ao','pemohon-eo']))
            <form action="{{ route('lampiran.upload') }}" method="POST" enctype="multipart/form-data" class="mt-6">
                @csrf
                <input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="nama_file" class="block text-sm font-medium text-gray-700">Nama File</label>
                        <input type="text" name="nama_file" id="nama_file" required class="input mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label for="file" class="block text-sm font-medium text-gray-700">File</label>
                        <input type="file" name="file" id="file" required class="file-input mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label for="jenis_lampiran_id" class="block text-sm font-medium text-gray-700">Jenis Lampiran</label>
                        <select name="jenis_lampiran_id" id="jenis_lampiran_id" required class="tomselect mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Pilih Jenis Lampiran</option>
                            @foreach(\Modules\Lpj\Models\JenisLampiran::all() as $jenisLampiran)
                                <option value="{{ $jenisLampiran->id }}">{{ $jenisLampiran->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label for="keterangan" class="block text-sm font-medium text-gray-700">Keterangan</label>
                        <textarea name="keterangan" rows="3" class="textarea mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></textarea>
                    </div>
                </div>
                <div class="mt-4">
                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Upload Lampiran
                    </button>
                </div>
            </form>
        @endif
    </div>
</div>
