@extends('adminlte::page')

@section('title', 'Input Pelanggaran')

@section('content_header')
    <div class="container-fluid pt-2">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif; font-size: 26px;">
                    Input Pelanggaran
                </h1>
                <p class="text-muted small mb-0">Kedisiplinan / Catat Baru</p>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right bg-transparent p-0">
                    <li class="breadcrumb-item"><a href="{{ route('pesantren.pelanggaran.index') }}">Riwayat</a></li>
                    <li class="breadcrumb-item active">Catat</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5">
    <form action="{{ route('pesantren.pelanggaran.store') }}" method="POST">
        @csrf
        
        <div class="row">
            {{-- === KOLOM KIRI: FORM UTAMA === --}}
            <div class="col-lg-8">
                <div class="card shadow-none border-0 rounded-lg mb-4" style="background: white;">
                    <div class="card-body p-4">
                        
                        {{-- Header Section --}}
                        <div class="d-flex align-items-center mb-4">
                            <i class="fas fa-exclamation-circle text-danger mr-2" style="font-size: 1.2rem;"></i>
                            <h5 class="text-danger font-weight-bold mb-0">Detail Pelanggaran</h5>
                        </div>

                        {{-- Baris 1: Santri & Jenis Pelanggaran --}}
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="font-weight-bold text-dark small">Nama Santri <span class="text-danger">*</span></label>
                                <div class="input-group-custom">
                                    <div class="input-icon">
                                        <i class="fas fa-user-graduate"></i>
                                    </div>
                                    <select name="siswa_id" class="form-control select2-custom" required>
                                        <option value="">-- Pilih Santri --</option>
                                        @foreach($santris as $data)
                                            {{-- [FIX ERROR] Gunakan ?-> untuk mencegah crash jika data siswa/kamar kosong --}}
                                            <option value="{{ $data->siswa?->id }}">
                                                {{-- Gunakan Accessor nama_lengkap dari Model Santri (Support Hybrid) --}}
                                                {{ $data->nama_lengkap }} 
                                                ({{ $data->kamar?->nama_kamar ?? 'Non-Asrama' }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                {{-- Pesan warning kecil jika user memilih santri eksternal tapi controller masih butuh siswa_id --}}
                                <small class="text-muted text-xs">Pastikan memilih Santri yang terdaftar sebagai Siswa.</small>
                            </div>
                            <div class="col-md-6 mb-4">
                                <label class="font-weight-bold text-dark small">Jenis Pelanggaran <span class="text-danger">*</span></label>
                                <div class="input-group-custom">
                                    <div class="input-icon">
                                        <i class="fas fa-gavel"></i>
                                    </div>
                                    <select name="jenis_pelanggaran_id" class="form-control select2-custom" required>
                                        <option value="">-- Pilih Jenis --</option>
                                        @foreach($jenis_pelanggarans as $jenis)
                                            <option value="{{ $jenis->id }}">
                                                {{ $jenis->nama_pelanggaran }} ({{ $jenis->poin }} Poin)
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        {{-- Baris 2: Waktu & Hukuman --}}
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="font-weight-bold text-dark small">Waktu Kejadian <span class="text-danger">*</span></label>
                                <div class="input-group-custom">
                                    <div class="input-icon">
                                        <i class="far fa-clock"></i>
                                    </div>
                                    <input type="datetime-local" name="tanggal" class="form-control" value="{{ now()->format('Y-m-d\TH:i') }}" required>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <label class="font-weight-bold text-dark small">Hukuman / Takzir</label>
                                <div class="input-group-custom">
                                    <div class="input-icon">
                                        <i class="fas fa-hand-paper"></i>
                                    </div>
                                    <input type="text" name="hukuman" class="form-control" placeholder="Contoh: Membersihkan halaman">
                                </div>
                            </div>
                        </div>

                        {{-- Baris 3: Kronologi --}}
                        <div class="form-group mb-0">
                            <label class="font-weight-bold text-dark small">Kronologi / Keterangan <span class="text-danger">*</span></label>
                            <div class="input-group-custom h-auto" style="align-items: flex-start; padding-top: 10px;">
                                <div class="input-icon" style="margin-top: 2px;">
                                    <i class="fas fa-align-left"></i>
                                </div>
                                <textarea name="keterangan" class="form-control" rows="4" placeholder="Ceritakan singkat kejadiannya..." style="background: transparent; border: none; padding-left: 0;" required></textarea>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {{-- === KOLOM KANAN: PANDUAN & TOMBOL === --}}
            <div class="col-lg-4">
                
                {{-- Panel Panduan (Background Merah Muda Soft) --}}
                <div class="card shadow-none border-0 rounded-lg mb-4" style="background-color: #fff5f5;">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-info-circle text-danger mr-2" style="font-size: 1.2rem;"></i>
                            <h5 class="text-danger font-weight-bold mb-0">Sistem Poin</h5>
                        </div>
                        
                        <ul class="pl-3 small font-weight-bold text-secondary" style="line-height: 1.8;">
                            <li><span class="text-danger-dark">Poin Bertambah:</span> Setiap pelanggaran akan menambah poin negatif siswa.</li>
                            <li><span class="text-danger-dark">Kategori:</span>
                                <ul class="pl-3 mt-1" style="list-style-type: circle;">
                                    <li>Ringan: 1 - 25 Poin</li>
                                    <li>Sedang: 26 - 75 Poin</li>
                                    <li>Berat: > 75 Poin (SP)</li>
                                </ul>
                            </li>
                            <li><span class="text-danger-dark">Validasi:</span> Pastikan bukti atau saksi tersedia sebelum mencatat.</li>
                        </ul>
                    </div>
                </div>

                {{-- Tombol Aksi --}}
                <div class="card shadow-none border-0 bg-transparent">
                    <div class="card-body p-0">
                        <button type="submit" class="btn btn-danger btn-block btn-lg shadow-sm font-weight-bold mb-3 hover-scale" style="border-radius: 50px;">
                            <i class="fas fa-save mr-2"></i> Simpan Laporan
                        </button>
                        <a href="{{ route('pesantren.pelanggaran.index') }}" class="btn btn-outline-secondary btn-block btn-lg font-weight-bold hover-scale" style="border-radius: 50px; background: white;">
                            Batal
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </form>
</div>
@stop

@section('plugins.Select2', true)

@section('css')
    <style>
        /* --- Style Mirip Manajemen User (Versi Danger) --- */
        body { font-family: 'Poppins', sans-serif; background-color: #f4f6f9; }

        .input-group-custom {
            display: flex;
            align-items: center;
            background-color: #f8f9fa; 
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 5px 12px;
            transition: all 0.3s;
        }

        .input-group-custom:focus-within {
            background-color: #fff;
            border-color: #dc3545;
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
        }

        .input-icon {
            color: #6c757d;
            margin-right: 12px;
            min-width: 20px;
            text-align: center;
        }
        
        .input-group-custom:focus-within .input-icon { color: #dc3545; }

        .input-group-custom .form-control {
            border: none;
            background: transparent;
            padding: 5px 0;
            height: calc(2.2rem + 2px);
            font-weight: 500;
            color: #495057;
            box-shadow: none !important;
        }

        .text-danger-dark { color: #a71d2a; font-weight: 700; }

        .select2-container--default .select2-selection--single {
            background-color: transparent;
            border: none;
            height: calc(2.2rem + 2px);
            display: flex;
            align-items: center;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            padding-left: 0; color: #495057; font-weight: 500;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
        
        .hover-scale { transition: transform 0.2s; }
        .hover-scale:hover { transform: scale(1.02); }
    </style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Init Select2
        $('.select2-custom').select2({
            placeholder: "Pilih opsi...",
            allowClear: true,
            width: '100%',
            dropdownParent: $('body')
        });
    });
</script>
@stop