@extends('layouts.dashboardUser')

@section('title', 'Edit Laporan Kerja')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Header Biru -->
    <div class="bg-blue-900 text-white py-10 shadow-lg rounded-t-lg">
        <div class="flex flex-col items-center">
            <h2 class="text-2xl font-bold">Edit Laporan Kerja</h2>
            <p class="text-gray-300">{{ \Carbon\Carbon::parse($lapor->tanggal)->format('d M Y') }}</p>
        </div>
    </div>

    <!-- Card Form Edit -->
    <div class="bg-white shadow-xl rounded-b-lg p-8 border border-gray-200">
        <form action="{{ route('riwayat.update', $lapor->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="text-blue-900 font-semibold">Lokasi:</label>
                    <input type="text" id="lokasi" name="lokasi" class="w-full p-3 border rounded focus:ring-2 focus:ring-blue-500" value="{{ $lapor->lokasi }}" required>
                </div>
                
                <div>
                    <label class="text-blue-900 font-semibold">Tanggal:</label>
                    <input type="date" name="tanggal" class="w-full p-3 border rounded focus:ring-2 focus:ring-blue-500" value="{{ $lapor->tanggal }}" required>
                </div>
            </div>

            <div class="mt-4">
                <label class="text-blue-900 font-semibold">Hasil Kerja:</label>
                <textarea name="hasil_kerja" class="w-full p-3 border rounded focus:ring-2 focus:ring-blue-500" required>{{ $lapor->hasil_kerja }}</textarea>
            </div>

            <div class="mt-4">
                <label class="text-blue-900 font-semibold">Catatan:</label>
                <textarea name="catatan" class="w-full p-3 border rounded focus:ring-2 focus:ring-blue-500">{{ $lapor->catatan }}</textarea>
            </div>

            <!-- Foto -->
            <div class="mt-4">
                <label class="text-blue-900 font-semibold">Foto:</label>
                <div class="mt-2 flex flex-wrap gap-4 items-center" id="preview-container">
                    <!-- Foto Lama -->
                    @if($lapor->foto)
                        @php
                            $fotos = is_array($lapor->foto) ? $lapor->foto : json_decode($lapor->foto, true);
                        @endphp

                        @if(is_array($fotos))
                            @foreach ($fotos as $foto)
                                <div class="relative preview-item w-24 h-24 sm:w-32 sm:h-32">
                                    <img src="{{ asset('storage/' . $foto) }}" alt="Foto Laporan" class="w-full h-full object-cover rounded-lg shadow">
                                    <button type="button" class="absolute top-2 right-2 bg-blue-100 text-white p-1 rounded-full text-xs opacity-80 hover:opacity-100" onclick="removeOldPhoto(this, '{{ $foto }}')">✖</button>
                                    <input type="hidden" name="old_photos[]" value="{{ $foto }}">
                                </div>
                            @endforeach
                        @endif
                    @endif

                    <!-- Input Hidden untuk Foto yang Dihapus -->
                    <div id="deleted-photos-container"></div>

                    <!-- Tempat untuk foto baru yang diunggah -->
                    <div id="new-photo-preview" class="flex flex-wrap gap-4"></div>

                    <!-- Tombol untuk unggah foto -->
                    <label for="file-upload" id="add-photo-btn" class="cursor-pointer flex items-center justify-center w-24 h-24 sm:w-32 sm:h-32 border-2 border-dashed border-blue-600 rounded-lg transition hover:border-blue-800">
                        <svg class="w-10 sm:w-12 h-10 sm:h-12 text-blue-600 hover:text-blue-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                    </label>
                    <input type="file" name="foto[]" id="file-upload" class="hidden" multiple>
                </div>
            </div>

            <div class="mt-6 flex flex-col sm:flex-row gap-3">
                <a href="{{ route('riwayat.laporan') }}" class="w-full sm:w-auto text-white bg-red-600 px-4 py-3 rounded-md hover:bg-red-500 transition text-center">Batal</a>
                <button type="submit" class="w-full sm:w-auto text-white bg-blue-900 px-4 py-3 rounded-md hover:bg-blue-600 transition">Simpan</button>
             
            </div>
        </form>
    </div>
</div>

<script>
 function removeOldPhoto(button, filename) {
    let parentDiv = button.closest('.preview-item');
    parentDiv.remove();

    let deletedPhotosContainer = document.getElementById("deleted-photos-container");
    let input = document.createElement("input");
    input.type = "hidden";
    input.name = "remove_photos[]";
    input.value = filename;
    deletedPhotosContainer.appendChild(input);
}

document.getElementById('file-upload').addEventListener('change', function(event) {
    let files = Array.from(event.target.files);
    let dataTransfer = new DataTransfer();
    let previewContainer = document.getElementById('new-photo-preview');

    previewContainer.innerHTML = '';

    files.forEach((file, index) => {
        let reader = new FileReader();
        reader.onload = function(e) {
            let div = document.createElement('div');
            div.classList.add("relative", "preview-item", "w-24", "h-24", "sm:w-32", "sm:h-32");

            div.innerHTML = `
                <img src="${e.target.result}" alt="Foto Baru" class="w-full h-full object-cover rounded-lg shadow">
                <button type="button" class="absolute top-2 right-2 bg-red-500 text-white p-1 rounded-full text-xs opacity-80 hover:opacity-100" onclick="removeNewPhoto(${index})">✖</button>
            `;

            previewContainer.appendChild(div);
            dataTransfer.items.add(file);
        };
        reader.readAsDataURL(file);
    });

    event.target.files = dataTransfer.files;
});

function removeNewPhoto(index) {
    let fileInput = document.getElementById('file-upload');
    let files = Array.from(fileInput.files);
    let dataTransfer = new DataTransfer();

    files.splice(index, 1);
    files.forEach(file => dataTransfer.items.add(file));

    fileInput.files = dataTransfer.files;
    document.getElementById('new-photo-preview').innerHTML = '';

    files.forEach((file, newIndex) => {
        let reader = new FileReader();
        reader.onload = function(e) {
            let div = document.createElement('div');
            div.classList.add("relative", "preview-item", "w-24", "h-24", "sm:w-32", "sm:h-32");

            div.innerHTML = `
                <img src="${e.target.result}" alt="Foto Baru" class="w-full h-full object-cover rounded-lg shadow">
                <button type="button" class="absolute top-2 right-2 bg-red-500 text-white p-1 rounded-full text-xs opacity-80 hover:opacity-100" onclick="removeNewPhoto(${newIndex})">✖</button>
            `;

            document.getElementById('new-photo-preview').appendChild(div);
        };
        reader.readAsDataURL(file);
    });
}
</script>

@endsection