@extends('simaju.layouts.main')

@section('title', 'Tambah Dokumentasi Apel')
@section('page-title', 'Tambah Dokumentasi Apel')
@section('page-subtitle', 'Upload foto dokumentasi apel pagi atau apel pulang')

@section('content')

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

    <div class="mb-5">
        <a
            href="{{ route('simaju.dokumentasi-apel.index', ['jenis' => $jenis]) }}"
            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-blue-50 to-indigo-50">
            <h2 class="text-lg font-bold text-gray-800">
                Tambah Foto Dokumentasi
            </h2>
            <p class="text-sm text-gray-500 mt-1">
                Upload satu foto dokumentasi untuk satu catatan apel.
            </p>
        </div>

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

            <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', $jenis) === 'pagi' ? 'selected' : '' }}>
                        Apel Pagi
                    </option>
                    <option value="pulang" {{ old('jenis_apel', $jenis) === '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', date('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 Dokumentasi <span class="text-red-500">*</span>
                </label>

                <div class="border-2 border-dashed border-gray-300 rounded-2xl p-6 text-center hover:border-blue-400 transition">
                    <div class="w-14 h-14 mx-auto rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center mb-3">
                        <i class="fas fa-camera text-xl"></i>
                    </div>

                    <p class="text-sm font-semibold text-gray-700">
                        Pilih foto dokumentasi apel
                    </p>

                    <p class="text-xs text-gray-500 mt-1">
                        JPG, JPEG, PNG, WEBP • Maksimal 5 MB
                    </p>

                    <input
                        id="foto"
                        type="file"
                        name="foto"
                        accept="image/jpeg,image/png,image/webp"
                        required
                        class="mt-4 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-blue-50 file:text-blue-700 file:font-semibold hover:file:bg-blue-100"
                        onchange="previewFoto(event)"
                    >
                </div>

                <div id="previewWrapper" class="hidden mt-4">
                    <img
                        id="previewImage"
                        src=""
                        alt="Preview foto"
                        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="Contoh: Apel pagi dipimpin oleh Kepala Sekolah..."
                >{{ old('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-blue-600 hover:bg-blue-700 text-white rounded-xl font-semibold transition"
                >
                    <i class="fas fa-save"></i>
                    Simpan Dokumentasi
                </button>

                <a
                    href="{{ route('simaju.dokumentasi-apel.index', ['jenis' => $jenis]) }}"
                    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