@extends('layouts.app')

@section('content')
    <div class="container mx-auto px-4 py-8 max-w-2xl">
        <div class="bg-white shadow-lg rounded-xl overflow-hidden border border-gray-100">
            <div class="p-6 bg-blue-50 border-b border-blue-100">
                <h1 class="text-2xl font-extrabold text-blue-900">Formulir Peminjaman Aset</h1>
            </div>

            @if ($errors->any())
                <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 m-6 mb-0" role="alert">
                    <p class="font-bold">Validasi Gagal</p>
                    <ul class="list-disc ml-5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('admin.peminjaman.store') }}" method="POST" class="p-6 space-y-6" id="form-peminjaman">
                @csrf

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Pilih Anggota / Member</label>
                    <select name="id_anggota"
                        class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="">-- Pilih Member --</option>
                        @foreach ($anggota as $a)
                            <option value="{{ $a->id }}" {{ old('id_anggota') == $a->id ? 'selected' : '' }}>
                                {{ $a->nama }} ({{ $a->no_identitas }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Pilih Aset Buku (Hanya yang
                        tersedia)</label>
                    <select name="id_buku"
                        class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="">-- Pilih Buku --</option>
                        @foreach ($buku as $b)
                            <option value="{{ $b->id }}" {{ old('id_buku') == $b->id ? 'selected' : '' }}>
                                {{ $b->bibid }} - {{ $b->judul }} (Stok: {{ $b->eksemplar }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tanggal Pinjam</label>
                        <input type="date" name="tanggal_pinjam" value="{{ old('tanggal_pinjam', date('Y-m-d')) }}"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tanggal Kembali (Tenggat)</label>
                        <input type="date" name="tanggal_kembali"
                            value="{{ old('tanggal_kembali', date('Y-m-d', strtotime('+7 days'))) }}"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    </div>
                </div>

                <div class="pt-6 border-t border-gray-100 flex justify-between items-center">
                    <a href="{{ route('admin.peminjaman.index') }}"
                        class="text-gray-600 hover:text-gray-900 font-medium transition duration-300">Batal</a>
                    <button type="submit" id="btn-submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition duration-300 ease-in-out">
                        Eksekusi Transaksi
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.getElementById('form-peminjaman').addEventListener('submit', function() {
            const btn = document.getElementById('btn-submit');
            btn.disabled = true;
            btn.innerHTML = 'Memproses...';
            btn.classList.add('opacity-50', 'cursor-not-allowed');
        });
    </script>
@endsection