@extends('layouts.app')

@section('title', 'Tambah Data Siswa')

@section('content')
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('students.index') }}">Data Siswa</a></li>
                    <li class="breadcrumb-item active">Tambah</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Tambah Data Siswa Baru</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('students.store') }}" method="POST" id="studentForm" enctype="multipart/form-data">
                        @csrf

                        <h6 class="border-bottom pb-2 mb-3">Informasi Sekolah</h6>

                        <div class="mb-3">
                            <label for="school_id" class="form-label">Sekolah <span class="text-danger">*</span></label>
                            @if($school)
                                <input type="hidden" name="school_id" value="{{ $school->id }}">
                                <input type="text" class="form-control" value="{{ $school->name }}" readonly>
                            @else
                                <select class="form-select @error('school_id') is-invalid @enderror" 
                                        id="school_id" 
                                        name="school_id" 
                                        required>
                                    <option value="">Pilih Sekolah</option>
                                    @foreach($schools as $s)
                                        <option value="{{ $s->id }}" 
                                                data-level="{{ $s->level }}"
                                                {{ old('school_id') == $s->id ? 'selected' : '' }}>
                                            {{ $s->name }} ({{ $s->level }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('school_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            @endif
                        </div>

                        <h6 class="border-bottom pb-2 mb-3 mt-4">Data Identitas</h6>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="nama" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('nama') is-invalid @enderror" 
                                       id="nama" 
                                       name="nama" 
                                       value="{{ old('nama') }}" 
                                       required>
                                @error('nama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="nik" class="form-label">NIK <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('nik') is-invalid @enderror" 
                                       id="nik" 
                                       name="nik" 
                                       value="{{ old('nik') }}" 
                                       maxlength="16"
                                       pattern="[0-9]{16}"
                                       placeholder="16 digit"
                                       required>
                                @error('nik')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="nisn" class="form-label">NISN <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('nisn') is-invalid @enderror" 
                                       id="nisn" 
                                       name="nisn" 
                                       value="{{ old('nisn') }}" 
                                       maxlength="10"
                                       pattern="[0-9]{10}"
                                       placeholder="10 digit"
                                       required>
                                @error('nisn')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="nis" class="form-label">NIS <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('nis') is-invalid @enderror" 
                                       id="nis" 
                                       name="nis" 
                                       value="{{ old('nis') }}" 
                                       required>
                                @error('nis')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3 mb-3">
                                <label for="kelas" class="form-label">Kelas <span class="text-danger">*</span></label>
                                <select class="form-select @error('kelas') is-invalid @enderror" 
                                        id="kelas" 
                                        name="kelas" 
                                        required>
                                    <option value="">Pilih Kelas</option>
                                </select>
                                @error('kelas')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted" id="kelasHelp"></small>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label for="jenis_kelamin" class="form-label">Jenis Kelamin</label>
                                <select class="form-select @error('jenis_kelamin') is-invalid @enderror" 
                                        id="jenis_kelamin" 
                                        name="jenis_kelamin">
                                    <option value="">Pilih</option>
                                    <option value="L" {{ old('jenis_kelamin') == 'L' ? 'selected' : '' }}>Laki-laki</option>
                                    <option value="P" {{ old('jenis_kelamin') == 'P' ? 'selected' : '' }}>Perempuan</option>
                                </select>
                                @error('jenis_kelamin')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <h6 class="border-bottom pb-2 mb-3 mt-4">Tempat & Tanggal Lahir</h6>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="tempat_lahir" class="form-label">Tempat Lahir <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('tempat_lahir') is-invalid @enderror" 
                                       id="tempat_lahir" 
                                       name="tempat_lahir" 
                                       value="{{ old('tempat_lahir') }}" 
                                       required>
                                @error('tempat_lahir')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="tanggal_lahir" class="form-label">Tanggal Lahir <span class="text-danger">*</span></label>
                                <input type="date" 
                                       class="form-control @error('tanggal_lahir') is-invalid @enderror" 
                                       id="tanggal_lahir" 
                                       name="tanggal_lahir" 
                                       value="{{ old('tanggal_lahir') }}" 
                                       max="{{ date('Y-m-d') }}"
                                       required>
                                @error('tanggal_lahir')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <h6 class="border-bottom pb-2 mb-3 mt-4">Informasi Tambahan</h6>

                        <div class="mb-3">
                            <label for="nama_ibu" class="form-label">Nama Ibu Kandung <span class="text-danger">*</span></label>
                            <input type="text" 
                                   class="form-control @error('nama_ibu') is-invalid @enderror" 
                                   id="nama_ibu" 
                                   name="nama_ibu" 
                                   value="{{ old('nama_ibu') }}" 
                                   required>
                            @error('nama_ibu')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="disability_type_id" class="form-label">Jenis Ketunaan</label>
                            <select class="form-select @error('disability_type_id') is-invalid @enderror" 
                                    id="disability_type_id" 
                                    name="disability_type_id">
                                <option value="">Pilih Jenis Ketunaan</option>
                                @foreach($disabilityTypes as $type)
                                    <option value="{{ $type->id }}" {{ old('disability_type_id') == $type->id ? 'selected' : '' }}>
                                        [{{ $type->code }}] {{ $type->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('disability_type_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="alamat" class="form-label">Alamat</label>
                            <textarea class="form-control @error('alamat') is-invalid @enderror" 
                                      id="alamat" 
                                      name="alamat" 
                                      rows="3">{{ old('alamat') }}</textarea>
                            @error('alamat')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="phone" class="form-label">Nomor Telepon</label>
                            <input type="tel" 
                                   class="form-control @error('phone') is-invalid @enderror" 
                                   id="phone" 
                                   name="phone" 
                                   value="{{ old('phone') }}" 
                                   placeholder="Contoh: 081234567890">
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="photo" class="form-label">Foto Siswa <small class="text-muted">(untuk PSAJ)</small></label>
                            <input type="file" 
                                   class="form-control @error('photo') is-invalid @enderror" 
                                   id="photo" 
                                   name="photo"
                                   accept="image/jpeg,image/png,image/jpg">
                            @error('photo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Format: JPG, PNG. Ukuran maksimal: 2MB. Rekomendasi: 3x4 cm</small>
                        </div>

                        <div class="d-flex gap-2 mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save me-1"></i> Simpan
                            </button>
                            <a href="{{ route('students.index') }}" class="btn btn-secondary">
                                <i class="bi bi-x-circle me-1"></i> Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="bi bi-info-circle me-1"></i> Informasi</h6>
                </div>
                <div class="card-body">
                    <h6>Ketentuan Kelas:</h6>
                    <ul class="small">
                        <li><strong>SDLB:</strong> Kelas I - VI (default: VI)</li>
                        <li><strong>SMPLB:</strong> Kelas VII - IX (default: IX)</li>
                        <li><strong>SMALB:</strong> Kelas X - XII (default: XII)</li>
                    </ul>
                    <hr>
                    <h6>Catatan:</h6>
                    <ul class="small mb-0">
                        <li>NIK harus 16 digit</li>
                        <li>NISN harus 10 digit</li>
                        <li>Kelas otomatis disesuaikan dengan jenjang sekolah</li>
                        <li>Data yang bertanda <span class="text-danger">*</span> wajib diisi</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const schoolSelect = document.getElementById('school_id');
    const kelasSelect = document.getElementById('kelas');
    const kelasHelp = document.getElementById('kelasHelp');
    
    const kelasOptions = {
        'SDLB': ['I', 'II', 'III', 'IV', 'V', 'VI'],
        'SMPLB': ['VII', 'VIII', 'IX'],
        'SMALB': ['X', 'XI', 'XII']
    };
    
    const defaultKelas = {
        'SDLB': 'VI',
        'SMPLB': 'IX',
        'SMALB': 'XII'
    };
    
    function updateKelas() {
        @if($school)
            const level = '{{ $school->level }}';
        @else
            const selectedOption = schoolSelect.options[schoolSelect.selectedIndex];
            if (!selectedOption || !selectedOption.value) {
                kelasSelect.innerHTML = '<option value="">Pilih Kelas</option>';
                kelasHelp.textContent = '';
                return;
            }
            const level = selectedOption.dataset.level;
        @endif
        
        const options = kelasOptions[level] || [];
        const defaultK = defaultKelas[level] || '';
        
        kelasSelect.innerHTML = '<option value="">Pilih Kelas</option>';
        options.forEach(kelas => {
            const option = document.createElement('option');
            option.value = kelas;
            option.textContent = 'Kelas ' + kelas;
            if (kelas === defaultK) {
                option.selected = true;
            }
            kelasSelect.appendChild(option);
        });
        
        if (defaultK) {
            kelasHelp.textContent = 'Default: Kelas ' + defaultK;
        }
    }
    
    @if(!$school)
        schoolSelect.addEventListener('change', updateKelas);
    @endif
    
    // Initialize on page load
    updateKelas();
});
</script>
@endpush
@endsection