@php
    $isEdit = isset($santri);
@endphp

<form action="{{ $isEdit ? route('admin.santri.update', $santri) : route('admin.santri.store') }}" method="POST" class="data-form" enctype="multipart/form-data">
    @csrf
    @if ($isEdit)
        @method('PUT')
    @endif

    <div class="form-group">
        <label for="id_santri">ID Santri</label>
        <input type="text" id="id_santri" name="id_santri" value="{{ $isEdit ? $santri->id_santri : $nextIdSantri ?? 'Otomatis Dibuat' }}" class="form-control" disabled>
        <small class="form-text text-muted">{{ $isEdit ? 'ID Santri tidak dapat diubah.' : 'ID akan otomatis di-generate (Contoh: ' . ($nextIdSantri ?? 'S001') . ')' }}</small>
    </div>

    {{-- FOTO SANTRI (BARU) --}}
    <div class="form-group">
        <label for="foto">
            <i class="fas fa-image form-icon"></i>
            Foto Santri
        </label>
        
        @if($isEdit && $santri->foto)
            <div style="margin-bottom: 10px;">
                <img src="{{ asset('storage/' . $santri->foto) }}" 
                     alt="Foto {{ $santri->nama_lengkap }}" 
                     style="max-width: 150px; max-height: 150px; border-radius: 8px; border: 2px solid var(--primary-light); object-fit: cover;"
                     loading="lazy">
                <p style="margin-top: 5px; font-size: 0.85rem; color: var(--text-light);">
                    <i class="fas fa-info-circle"></i> Foto saat ini
                </p>
            </div>
        @endif
        
        <input type="file" 
               id="foto" 
               name="foto" 
               class="form-control @error('foto') is-invalid @enderror" 
               accept="image/jpeg,image/jpg,image/png"
               onchange="previewImage(event)">
        
        @error('foto')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
        
        <small class="form-text text-muted">
            <i class="fas fa-info-circle"></i> 
            Format: JPG, JPEG, atau PNG. Maksimal 2 MB.
            @if($isEdit)
                Upload foto baru akan mengganti foto lama.
            @endif
        </small>
        
        {{-- Preview Image --}}
        <img id="preview" 
             style="display: none; margin-top: 10px; max-width: 150px; max-height: 150px; border-radius: 8px; border: 2px solid var(--primary-color); object-fit: cover;" 
             loading="lazy">
    </div>

    <div class="form-group">
        <label for="nis">NIS (Nomor Induk Santri)</label>
        <input type="text" id="nis" name="nis" value="{{ old('nis', $isEdit ? $santri->nis : '') }}" class="form-control @error('nis') is-invalid @enderror" placeholder="Masukkan NIS">
        @error('nis')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <label for="nama_lengkap">Nama Lengkap *</label>
        <input type="text" id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap', $isEdit ? $santri->nama_lengkap : '') }}" class="form-control @error('nama_lengkap') is-invalid @enderror" required placeholder="Masukkan nama lengkap">
        @error('nama_lengkap')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <label for="jenis_kelamin">Jenis Kelamin *</label>
        <select id="jenis_kelamin" name="jenis_kelamin" class="form-control @error('jenis_kelamin') is-invalid @enderror" required>
            <option value="">Pilih Jenis Kelamin</option>
            <option value="Laki-laki" {{ old('jenis_kelamin', $isEdit ? $santri->jenis_kelamin : '') == 'Laki-laki' ? 'selected' : '' }}>Laki-laki</option>
            <option value="Perempuan" {{ old('jenis_kelamin', $isEdit ? $santri->jenis_kelamin : '') == 'Perempuan' ? 'selected' : '' }}>Perempuan</option>
        </select>
        @error('jenis_kelamin')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    {{-- ═══════════════════════════════════════ --}}
    {{-- KELAS PER KELOMPOK (checkbox list per kelompok) --}}
    {{-- ═══════════════════════════════════════ --}}
    <hr>
    <h4><i class="fas fa-layer-group"></i> Kelas Santri</h4>
    <small class="form-text text-muted" style="margin-bottom: 15px; display: block;">
        <i class="fas fa-info-circle"></i> Pilih kelas untuk setiap kelompok. Santri bisa mengikuti beberapa kelas dalam 1 kelompok.
    </small>
    @error('kelas_ids')
        <div class="alert alert-danger" style="padding: 8px 12px; font-size: 0.9rem;">
            <i class="fas fa-exclamation-triangle"></i> {{ $message }}
        </div>
    @enderror

    @foreach($kelompokKelas as $index => $kelompok)
        @php
            $existingKelasIds = [];
            if ($isEdit && $santri->kelasSantri) {
                $existingKelasIds = $santri->kelasSantri
                    ->filter(fn($sk) => $sk->kelas && $sk->kelas->id_kelompok === $kelompok->id_kelompok)
                    ->pluck('id_kelas')
                    ->toArray();
            }
            // Support old() untuk setiap kelompok
            $selectedIds = old('kelas_ids.' . $kelompok->id_kelompok, $existingKelasIds);
            if (!is_array($selectedIds)) {
                $selectedIds = $selectedIds ? [$selectedIds] : [];
            }
        @endphp
        <div class="form-group" style="padding: 15px; border-left: 4px solid {{ $index === 0 ? '#6FBA9D' : '#81C6E8' }}; background: {{ $index % 2 === 0 ? '#FAFFFE' : '#F8FBFD' }}; border-radius: 0 8px 8px 0; margin-bottom: 15px;">
            <label style="font-weight: 600; margin-bottom: 10px; display: block;">
                <i class="fas fa-bookmark" style="color: {{ $index === 0 ? '#6FBA9D' : '#81C6E8' }};"></i>
                {{ $kelompok->nama_kelompok }}
                @if($kelompok->deskripsi)
                    <small style="font-weight: normal; color: #7F8C8D; display: block; margin-top: 3px;">{{ $kelompok->deskripsi }}</small>
                @endif
            </label>
            
            @if($kelompok->kelas && $kelompok->kelas->count() > 0)
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;">
                    @foreach($kelompok->kelas as $kelas)
                        <label style="display: flex; align-items: center; padding: 8px 12px; background: white; border: 2px solid {{ in_array($kelas->id, $selectedIds) ? '#6FBA9D' : '#E8ECF0' }}; border-radius: 6px; cursor: pointer; transition: all 0.2s; margin: 0;">
                            <input type="checkbox" 
                                   name="kelas_ids[{{ $kelompok->id_kelompok }}][]" 
                                   value="{{ $kelas->id }}"
                                   {{ in_array($kelas->id, $selectedIds) ? 'checked' : '' }}
                                   style="margin-right: 8px; width: 18px; height: 18px; cursor: pointer;"
                                   onchange="this.parentElement.style.borderColor = this.checked ? '#6FBA9D' : '#E8ECF0';">
                            <span style="font-size: 0.9rem; flex: 1;">{{ $kelas->nama_kelas }}</span>
                        </label>
                    @endforeach
                </div>
                <small class="form-text text-muted" style="margin-top: 8px; display: block;">
                    <i class="fas fa-hand-pointer"></i> Klik untuk memilih. Bisa pilih lebih dari 1 kelas.
                </small>
            @else
                <p style="color: #7F8C8D; font-style: italic; margin: 0;">Belum ada kelas tersedia di kelompok ini.</p>
            @endif
        </div>
    @endforeach

    <div class="form-group">
        <label for="status">Status *</label>
        <select id="status" name="status" class="form-control @error('status') is-invalid @enderror" required>
            <option value="">Pilih Status</option>
            <option value="Aktif" {{ old('status', $isEdit ? $santri->status : 'Aktif') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
            <option value="Lulus" {{ old('status', $isEdit ? $santri->status : '') == 'Lulus' ? 'selected' : '' }}>Lulus</option>
            <option value="Tidak Aktif" {{ old('status', $isEdit ? $santri->status : '') == 'Tidak Aktif' ? 'selected' : '' }}>Tidak Aktif</option>
        </select>
        @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <label for="alamat_santri">Alamat Santri</label>
        <textarea id="alamat_santri" name="alamat_santri" class="form-control @error('alamat_santri') is-invalid @enderror" rows="3" placeholder="Masukkan alamat lengkap">{{ old('alamat_santri', $isEdit ? $santri->alamat_santri : '') }}</textarea>
        @error('alamat_santri')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <label for="daerah_asal">Daerah Asal</label>
        <input type="text" id="daerah_asal" name="daerah_asal" value="{{ old('daerah_asal', $isEdit ? $santri->daerah_asal : '') }}" class="form-control @error('daerah_asal') is-invalid @enderror" placeholder="Contoh: Yogyakarta">
        @error('daerah_asal')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <hr>
    <h4><i class="fas fa-users"></i> Data Orang Tua / Wali</h4>

    <div class="form-group">
        <label for="nama_orang_tua">Nama Orang Tua</label>
        <input type="text" id="nama_orang_tua" name="nama_orang_tua" value="{{ old('nama_orang_tua', $isEdit ? $santri->nama_orang_tua : '') }}" class="form-control @error('nama_orang_tua') is-invalid @enderror" placeholder="Masukkan nama orang tua">
        @error('nama_orang_tua')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <label for="nomor_hp_ortu">Nomor HP Orang Tua</label>
        <input type="text" id="nomor_hp_ortu" name="nomor_hp_ortu" value="{{ old('nomor_hp_ortu', $isEdit ? $santri->nomor_hp_ortu : '') }}" class="form-control @error('nomor_hp_ortu') is-invalid @enderror" placeholder="Contoh: 08123456789">
        @error('nomor_hp_ortu')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div style="margin-top: 30px; display: flex; gap: 10px;">
        <button type="submit" class="btn btn-success">
            <i class="fas fa-save"></i> {{ $isEdit ? 'Update Data' : 'Simpan Santri' }}
        </button>
        <a href="{{ route('admin.santri.index') }}" class="btn btn-secondary">
            <i class="fas fa-times"></i> Batal
        </a>
    </div>
</form>

{{-- JavaScript untuk Preview Image --}}
<script>
function previewImage(event) {
    const preview = document.getElementById('preview');
    const file = event.target.files[0];
    
    if (file) {
        // Validasi ukuran file (2 MB = 2097152 bytes)
        if (file.size > 2097152) {
            alert('Ukuran file terlalu besar! Maksimal 2 MB.');
            event.target.value = '';
            preview.style.display = 'none';
            return;
        }
        
        // Validasi tipe file
        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png'];
        if (!allowedTypes.includes(file.type)) {
            alert('Format file tidak valid! Hanya JPG, JPEG, dan PNG yang diperbolehkan.');
            event.target.value = '';
            preview.style.display = 'none';
            return;
        }
        
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
    } else {
        preview.style.display = 'none';
    }
}
</script>