<!DOCTYPE html>
<html lang="id">
<head>
    <link rel="icon" type="image/png" href="{{ asset('img/Capture__1_-removebg-preview.png') }}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Pelanggaran Siswa - SMKN 1 Prajekan</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        body { font-family: 'Poppins', sans-serif; background-color: #f4f6f9; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
        .form-wrapper { max-width: 900px; width: 100%; display: flex; gap: 30px; padding: 20px; flex-wrap: wrap; }
        .form-box { flex: 1; min-width: 300px; background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 30px; }
        .right-box { flex: 1; min-width: 250px; background: #304058; color: #fff; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; justify-content: center; }
        .right-box h2 { font-size: 20px; font-weight: 600; margin-bottom: 15px; }
        .right-box p { font-size: 14px; opacity: 0.9; }
        .form-box h2.title { font-size: 18px; font-weight: 600; color: #304058; margin-bottom: 25px; }
        .form-box label { font-weight: 500; font-size: 13px; color: #555; margin-bottom: 5px; display: block; }
        .form-box select, .form-box input, .form-box textarea { width: 100%; padding: 10px 12px; margin-bottom: 15px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; background-color: #f8f9fa; }
        .form-box select:focus, .form-box input:focus, .form-box textarea:focus { border-color: #76c4ef; outline: none; box-shadow: 0 0 0 0.2rem rgba(118,196,239,0.25); }
        .form-box textarea { min-height: 80px; resize: vertical; }
        .form-box button { background-color: #76c4ef; color: #fff; border: none; padding: 12px; width: 100%; border-radius: 8px; font-weight: 600; font-size: 15px; cursor: pointer; }
        .form-box button:hover { background-color: #5bb2e3; }
        .back-link { text-align: center; margin-top: 20px; }
        .back-link a { color: #76c4ef; text-decoration: none; font-weight: 500; }
    </style>
</head>
<body>

<div class="form-wrapper">
    <div class="form-box">
        <h2 class="title"><i class="bi bi-exclamation-triangle me-2"></i>Input Pelanggaran</h2>
        <form method="POST" action="{{ route('input.pelanggaran.simpan') }}">
            @csrf
            <label>Pilih Siswa</label>
            <select name="id_siswa" required>
                <option value="">-- Cari Siswa --</option>
                @foreach($data_siswa as $s)
                    <option value="{{ $s->id_siswa }}">{{ $s->nama }} (Kelas: {{ $s->kelas ?? '-' }})</option>
                @endforeach
            </select>

            <label>Jenis Pelanggaran</label>
            <select name="jenis_pelanggaran" required>
                <option value="">-- Pilih Jenis Pelanggaran --</option>
                <option value="Ringan">Ringan</option>
                <option value="Sedang">Sedang</option>
                <option value="Berat">Berat</option>
            </select>

            <label>Tanggal</label>
            <input type="date" name="tanggal" required>

            <label>Keterangan</label>
            <textarea name="keterangan"></textarea>

            <label>Diinput Oleh (Guru)</label>
            <select name="id_guru" required>
                <option value="">-- Pilih Guru --</option>
                @foreach($data_guru as $g)
                    <option value="{{ $g->id_guru }}">{{ $g->nip }} - {{ $g->nama }}</option>
                @endforeach
            </select>

            <button type="submit">Simpan</button>
        </form>
        <div class="back-link"><a href="{{ url('/') }}"><i class="bi bi-arrow-left me-1"></i>Kembali ke Portal</a></div>
    </div>

    <div class="right-box">
        <h2>Input Data Pelanggaran Siswa</h2>
        <p>Form ini digunakan untuk mencatat data pelanggaran siswa.</p>
    </div>
</div>

@if(session('notif') == 'sukses')
<script>
Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'Data pelanggaran berhasil ditambahkan.', confirmButtonColor: '#76c4ef' });
</script>
@endif

</body>
</html>
