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

    <div class="py-12">
        <div class="max-w-2xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-2xl">
                <div class="p-8">
                    <!-- Header Section -->
                    <div class="mb-8">
                        <h2 class="text-3xl font-bold text-gray-800 mb-2">Tambah Pembayaran</h2>
                        <p class="text-gray-600">Catat pembayaran yang dilakukan oleh santri</p>
                    </div>

                    <form action="{{ route('pembayarans.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Payment Information -->
                        <div class="bg-gray-50 rounded-xl p-6 mb-8">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi Pembayaran</h3>
                            <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">Santri</label>
                                    <select name="santri_id"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-colors"
                                        required>
                                        <option value="">Pilih Santri</option>
                                        @foreach($santris as $s)
                                            <option value="{{ $s->id }}" {{ old('santri_id') == $s->id ? 'selected' : '' }}>
                                                {{ $s->nama }}</option>
                                        @endforeach
                                    </select>
                                    @error('santri_id')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Jenis Pembayaran</label>
                                    <select name="jenis_pembayaran"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-colors"
                                        required>
                                        <option value="">Pilih Jenis Pembayaran</option>
                                        <option value="SPP" {{ old('jenis_pembayaran') == 'SPP' ? 'selected' : '' }}>SPP
                                        </option>
                                        <option value="Uang Makan" {{ old('jenis_pembayaran') == 'Uang Makan' ? 'selected' : '' }}>Uang Makan</option>
                                        <option value="Uang Asrama" {{ old('jenis_pembayaran') == 'Uang Asrama' ? 'selected' : '' }}>Uang Asrama</option>
                                        <option value="Uang Kegiatan" {{ old('jenis_pembayaran') == 'Uang Kegiatan' ? 'selected' : '' }}>Uang Kegiatan</option>
                                        <option value="Uang Seragam" {{ old('jenis_pembayaran') == 'Uang Seragam' ? 'selected' : '' }}>Uang Seragam</option>
                                        <option value="Lainnya" {{ old('jenis_pembayaran') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                                    </select>
                                    @error('jenis_pembayaran')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Jumlah
                                        Pembayaran</label>
                                    <input type="number" name="jumlah_pembayaran"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-colors"
                                        value="{{ old('jumlah_pembayaran') }}" min="0" placeholder="Jumlah dalam rupiah"
                                        required>
                                    @error('jumlah_pembayaran')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Tanggal
                                        Pembayaran</label>
                                    <input type="date" name="tanggal_pembayaran"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-colors"
                                        value="{{ old('tanggal_pembayaran') }}" required>
                                    @error('tanggal_pembayaran')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Bulan</label>
                                    <select name="bulan"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-colors"
                                        required>
                                        <option value="">Pilih Bulan</option>
                                        <option value="Januari" {{ old('bulan') == 'Januari' ? 'selected' : '' }}>Januari
                                        </option>
                                        <option value="Februari" {{ old('bulan') == 'Februari' ? 'selected' : '' }}>
                                            Februari</option>
                                        <option value="Maret" {{ old('bulan') == 'Maret' ? 'selected' : '' }}>Maret
                                        </option>
                                        <option value="April" {{ old('bulan') == 'April' ? 'selected' : '' }}>April
                                        </option>
                                        <option value="Mei" {{ old('bulan') == 'Mei' ? 'selected' : '' }}>Mei</option>
                                        <option value="Juni" {{ old('bulan') == 'Juni' ? 'selected' : '' }}>Juni</option>
                                        <option value="Juli" {{ old('bulan') == 'Juli' ? 'selected' : '' }}>Juli</option>
                                        <option value="Agustus" {{ old('bulan') == 'Agustus' ? 'selected' : '' }}>Agustus
                                        </option>
                                        <option value="September" {{ old('bulan') == 'September' ? 'selected' : '' }}>
                                            September</option>
                                        <option value="Oktober" {{ old('bulan') == 'Oktober' ? 'selected' : '' }}>Oktober
                                        </option>
                                        <option value="November" {{ old('bulan') == 'November' ? 'selected' : '' }}>
                                            November</option>
                                        <option value="Desember" {{ old('bulan') == 'Desember' ? 'selected' : '' }}>
                                            Desember</option>
                                    </select>
                                    @error('bulan')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Tahun</label>
                                    <input type="number" name="tahun"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-colors"
                                        value="{{ old('tahun', date('Y')) }}" min="2020" max="2030" required>
                                    @error('tahun')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Payment Details -->
                        <div class="bg-gray-50 rounded-xl p-6 mb-8">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Detail Pembayaran</h3>
                            <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">Metode
                                        Pembayaran</label>
                                    <select name="metode_pembayaran"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-colors"
                                        required>
                                        <option value="">Pilih Metode</option>
                                        <option value="Tunai" {{ old('metode_pembayaran') == 'Tunai' ? 'selected' : '' }}>
                                            Tunai</option>
                                        <option value="Transfer Bank" {{ old('metode_pembayaran') == 'Transfer Bank' ? 'selected' : '' }}>Transfer Bank</option>
                                        <option value="E-Wallet" {{ old('metode_pembayaran') == 'E-Wallet' ? 'selected' : '' }}>E-Wallet</option>
                                        <option value="Cek" {{ old('metode_pembayaran') == 'Cek' ? 'selected' : '' }}>Cek
                                        </option>
                                    </select>
                                    @error('metode_pembayaran')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Status
                                        Pembayaran</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>
                                    @error('status_pembayaran')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="mt-6">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Keterangan</label>
                                <textarea name="keterangan" rows="3"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-colors"
                                    placeholder="Keterangan tambahan tentang pembayaran">{{ old('keterangan') }}</textarea>
                                @error('keterangan')
                                    <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Bukti Pembayaran -->
                        <div class="bg-gray-50 rounded-xl p-6 mb-8">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Bukti Pembayaran</h3>
                            <div class="mt-6">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Bukti Pembayaran</label>
                                <input type="file" name="bukti_pembayaran" accept="image/*,application/pdf" class="w-full px-4 py-3 border border-gray-300 rounded-lg">
                                @error('bukti_pembayaran')
                                    <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
                            <a href="{{ route('pembayarans.index') }}"
                                class="inline-flex items-center px-6 py-3 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Kembali
                            </a>
                            <button type="submit"
                                class="inline-flex items-center px-6 py-3 text-sm font-medium text-white bg-cyan-600 rounded-lg hover:bg-cyan-700 transition-colors">
                                <i class="fas fa-save mr-2"></i>
                                Simpan Pembayaran
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>