@extends('simaju.layouts.main')

@section('title', 'Edit Dokumentasi Apel')
@section('page-title', 'Edit Dokumentasi Apel')
@section('page-subtitle', 'Perbarui foto dan informasi dokumentasi apel')

@section('content')

<div class="max-w-3xl mx-auto">

    <div class="mb-5">
        <a
            href="{{ route('simaju.dokumentasi-apel.index', ['jenis' => $dokumentasiApel->jenis_apel]) }}"
            class="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-blue-600"
        >
            <i class="fas fa-arrow-left"></i>
            Kembali ke Dokumentasi Apel
        </a>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">

        <div class="px-6 py-5 border-b border-gray-100 bg-gradient-to-r from-amber-50 to-orange-50">
            <h2 class="text-lg font-bold text-gray-800">
                Edit Dokumentasi
            </h2>
            <p class="text-sm text-gray-500 mt-1">
                Perbarui data dokumentasi apel.
            </p>
        </div>

        <form
            action="{{ route('simaju.dokumentasi-apel.update', $dokumentasiApel->id) }}"
            method="POST"
            enctype="multipart/form-data"
            class="p-6 space-y-5"
        >
            @csrf
            @method('PUT')

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Jenis Apel <span class="text-red-500">*</span>
                </label>

                <select
                    name="jenis_apel"
                    required
                    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                    <option value="pagi" {{ old('jenis_apel', $dokumentasiApel->jenis_apel) === 'pagi' ? 'selected' : '' }}>
                        Apel Pagi
                    </option>
                    <option value="pulang" {{ old('jenis_apel', $dokumentasiApel->jenis_apel) === 'pulang' ? 'selected' : '' }}>
                        Apel Pulang
                    </option>
                </select>

                @error('jenis_apel')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Tanggal <span class="text-red-500">*</span>
                </label>

                <input
                    type="date"
                    name="tanggal"
                    value="{{ old('tanggal', optional($dokumentasiApel->tanggal)->format('Y-m-d')) }}"
                    required
                    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >

                @error('tanggal')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Foto Saat Ini
                </label>

                @if($dokumentasiApel->foto_url)
                    <img
                        src="{{ $dokumentasiApel->foto_url }}"
                        alt="Foto dokumentasi"
                        class="w-full max-h-[420px] object-cover rounded-2xl border border-gray-200"
                    >
                @else
                    <div class="bg-gray-50 rounded-2xl p-8 text-center text-gray-400">
                        Foto tidak tersedia.
                    </div>
                @endif
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Ganti Foto
                </label>

                <input
                    id="foto"
                    type="file"
                    name="foto"
                    accept="image/jpeg,image/png,image/webp"
                    class="block w-full text-sm text-gray-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:bg-amber-50 file:text-amber-700 file:font-semibold hover:file:bg-amber-100"
                    onchange="previewFoto(event)"
                >

                <p class="text-xs text-gray-500 mt-1">
                    Kosongkan jika tidak ingin mengganti foto. Maksimal 5 MB.
                </p>

                <div id="previewWrapper" class="hidden mt-4">
                    <img
                        id="previewImage"
                        src=""
                        alt="Preview foto baru"
                        class="w-full max-h-[420px] object-cover rounded-2xl border border-gray-200"
                    >
                </div>

                @error('foto')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Keterangan
                </label>

                <textarea
                    name="keterangan"
                    rows="4"
                    maxlength="2000"
                    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="Keterangan dokumentasi..."
                >{{ old('keterangan', $dokumentasiApel->keterangan) }}</textarea>

                @error('keterangan')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex flex-col sm:flex-row gap-3 pt-2">
                <button
                    type="submit"
                    class="flex-1 inline-flex justify-center items-center gap-2 px-5 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-semibold transition"
                >
                    <i class="fas fa-save"></i>
                    Simpan Perubahan
                </button>

                <a
                    href="{{ route('simaju.dokumentasi-apel.index', ['jenis' => $dokumentasiApel->jenis_apel]) }}"
                    class="inline-flex justify-center items-center gap-2 px-5 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-semibold transition"
                >
                    Batal
                </a>
            </div>

        </form>
    </div>

</div>

@endsection

@push('scripts')
<script>
function previewFoto(event) {
    const file = event.target.files?.[0];
    const wrapper = document.getElementById('previewWrapper');
    const image = document.getElementById('previewImage');

    if (!file) {
        wrapper.classList.add('hidden');
        image.src = '';
        return;
    }

    if (!file.type.startsWith('image/')) {
        wrapper.classList.add('hidden');
        image.src = '';
        return;
    }

    image.src = URL.createObjectURL(file);
    wrapper.classList.remove('hidden');
}
</script>
@endpush