<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Edit pembayaran') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">


                    <div class="container">
                        <h1 class="mb-4">Edit Pembayaran</h1>
                        <form action="{{ route('pembayarans.update', $pembayaran) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="mb-3">
                                <label for="santri_id" class="form-label">Santri</label>
                                <select name="santri_id" id="santri_id" class="w-full px-4 py-3 border rounded" required>
                                    <option value="">Pilih Santri</option>
                                    @foreach($santris as $santri)
                                        <option value="{{ $santri->id }}" {{ (old('santri_id', $pembayaran->santri_id) == $santri->id) ? 'selected' : '' }}>{{ $santri->nama }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="kelas_id" class="form-label">Kelas</label>
                                <select name="kelas_id" id="kelas_id" class="w-full px-4 py-3 border rounded" required>
                                    <option value="">Pilih Kelas</option>
                                    @foreach($kelas as $k)
                                        <option value="{{ $k->id }}" {{ (old('kelas_id', $pembayaran->kelas_id) == $k->id) ? 'selected' : '' }}>{{ $k->nama_kelas }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="tanggal" class="form-label">Tanggal</label>
                                <input type="date" name="tanggal" id="tanggal" class="w-full px-4 py-3 border rounded"
                                    value="{{ old('tanggal', $pembayaran->tanggal) }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="jenis_pembayaran" class="form-label">Jenis Pembayaran</label>
                                <input type="text" name="jenis_pembayaran" id="jenis_pembayaran" class="w-full px-4 py-3 border rounded"
                                    value="{{ old('jenis_pembayaran', $pembayaran->jenis_pembayaran) }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="jumlah" class="form-label">Jumlah</label>
                                <input type="number" name="jumlah" id="jumlah" class="w-full px-4 py-3 border rounded"
                                    value="{{ old('jumlah', $pembayaran->jumlah) }}" required min="0">
                            </div>
                            <div class="mb-3">
                                <label for="keterangan" class="form-label">Keterangan</label>
                                <input type="text" name="keterangan" id="keterangan" class="w-full px-4 py-3 border rounded"
                                    value="{{ old('keterangan', $pembayaran->keterangan) }}">
                            </div>
                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select name="status" required class="w-full px-4 py-3 border rounded">
                                    <option value="menunggu" {{ $pembayaran->status == 'menunggu' ? 'selected' : '' }}>
                                        Menunggu</option>
                                    <option value="diterima" {{ $pembayaran->status == 'diterima' ? 'selected' : '' }}>
                                        Diterima</option>
                                    <option value="ditolak" {{ $pembayaran->status == 'ditolak' ? 'selected' : '' }}>
                                        Ditolak</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="font-semibold">Bukti Pembayaran</label>
                                @if($pembayaran->bukti_pembayaran)
                                    @php
                                        $ext = pathinfo($pembayaran->bukti_pembayaran, PATHINFO_EXTENSION);
                                        $buktiUrl = asset('storage/' . str_replace('\\', '/', $pembayaran->bukti_pembayaran));
                                    @endphp
                                    <div class="mb-2">
                                        <a href="{{ $buktiUrl }}" target="_blank">
                                            @if(in_array(strtolower($ext), ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                                                <img src="{{ $buktiUrl }}" alt="Bukti"
                                                    class="h-24 w-auto rounded shadow">
                                            @else
                                                <span>Lihat File</span>
                                            @endif
                                        </a>
                                    </div>
                                @endif
                                <input type="file" name="bukti_pembayaran" class="form-control rounded"
                                    accept="image/*,application/pdf">
                                @error('bukti_pembayaran')<div class="text-red-600 text-sm mt-1">{{ $message }}</div>@enderror
                            </div>
                            <button type="submit" class="btn btn-primary">Update</button>
                            <a href="{{ route('pembayarans.index') }}" class="btn btn-secondary">Batal</a>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>