@extends('admin.layout')

@section('content')
<link rel="stylesheet" href="{{ asset('css/fitur-admin.css') }}">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="dashboard-section d-flex justify-content-center">
    <div style="width: 100%; max-width: 700px;">
        <div class="mb-4 text-center">
            <h4 class="fw-bold text-dark">Tambah Siswa Baru</h4>
            <p class="text-muted small text-uppercase fw-bold" style="letter-spacing: 1px;">Sistem Rekomendasi SMAN 4 Jember</p>
        </div>

        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-5">
                <form id="createSiswaForm">
                    <div class="row g-4">
                        <div class="col-md-12 form-group-custom">
                            <label>Nama Lengkap</label>
                            <input type="text" id="nama_lengkap" class="form-control input-custom" required placeholder="Masukkan nama lengkap siswa">
                        </div>
                        
                        <div class="col-md-12 form-group-custom">
                            <label>NISN</label>
                            <input type="text" id="nisn" class="form-control input-custom" required placeholder="Masukkan 10 digit NISN">
                        </div>

                        <div class="col-md-12 form-group-custom">
                            <label>Kelas</label>
                            <input type="text" id="kelas" class="form-control input-custom" required placeholder="Contoh: XII IPA 1">
                        </div>

                        <div class="col-md-12 form-group-custom">
                            <label>Peminatan</label>
                            <select id="peminatan" class="form-select input-custom">
                                <option value="" disabled selected>Pilih Peminatan</option>
                                <option value="Saintek">Saintek</option>
                                <option value="Soshum">Soshum</option>
                            </select>
                        </div>

                        <div class="col-md-12 form-group-custom">
                            <label>User ID (Sesuai Akun Login)</label>
                            <input type="number" id="user_id" class="form-control input-custom" required placeholder="Contoh: 1">
                        </div>

                        <div class="col-md-12 form-group-custom">
                            <label>Jurusan ID</label>
                            <input type="number" id="jurusan_id" class="form-control input-custom" required placeholder="Contoh: 1">
                        </div>
                    </div>

                    <div class="mt-5 d-flex gap-2 justify-content-end">
                        <button type="submit" id="btnSave" class="btn text-white px-5 shadow-sm" style="background-color: var(--primary-green); border-radius: 10px;">Simpan Data</button>
                        <a href="{{ route('admin.siswa') }}" class="btn btn-light px-4" style="border-radius: 10px;">Batal</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('createSiswaForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const btn = document.getElementById('btnSave');
        btn.disabled = true;

        const payload = {
            user_id: document.getElementById('user_id').value,
            jurusan_id: document.getElementById('jurusan_id').value,
            nama_lengkap: document.getElementById('nama_lengkap').value,
            nisn: document.getElementById('nisn').value,
            kelas: document.getElementById('kelas').value,
            peminatan: document.getElementById('peminatan').value,
        };

        try {
            const response = await fetch('/api/admin/siswa', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + localStorage.getItem('access_token'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify(payload)
            });

            const result = await response.json();

            if (response.ok) {
                Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'Data siswa ditambahkan.', confirmButtonColor: '#2D7A47' })
                .then(() => { window.location.href = "{{ route('admin.siswa') }}"; });
            } else {
                Swal.fire('Gagal!', result.message || 'Cek kembali data Anda.', 'warning');
            }
        } catch (error) { 
            Swal.fire('Error!', 'Gagal menghubungi server.', 'error'); 
        } finally { 
            btn.disabled = false; 
        }
    });
</script>
@endsection