@extends('adminlte::page')

@section('title', 'Catat Kasus Baru | Smart BK')

@section('content_header')
    {{-- DESKTOP HEADER (Hanya muncul di laptop/PC) --}}
    <div class="container-fluid pt-3 desktop-ui">
        <div class="row mb-2 align-items-center">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif;">
                    <i class="fas fa-edit text-primary mr-2"></i> Input Kasus Pelanggaran
                </h1>
                <p class="text-muted small mb-0">Formulir pencatatan indisipliner siswa.</p>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right bg-transparent p-0 mt-2 mt-sm-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('kesiswaan.bk.index') }}">Bimbingan Konseling</a></li>
                    <li class="breadcrumb-item active">Input Kasus</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    {{-- TAMPILAN MOBILE: HEADER & APP BAR --}}
    <div class="mobile-ui animate__animated animate__fadeIn">
        @include('partials.header_mobile')
        
        <div class="px-3 pt-4 pb-3">
            <div class="d-flex align-items-center">
                <a href="{{ route('kesiswaan.bk.index') }}" class="btn btn-light rounded-circle shadow-sm mr-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="fas fa-arrow-left text-dark"></i>
                </a>
                <div>
                    <h5 class="font-weight-bold text-dark mb-0">Catat Kasus Baru</h5>
                    <span class="text-muted small">Formulir indisipliner siswa</span>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid pb-5 px-md-3 px-2">
        <form action="{{ route('kesiswaan.bk.store') }}" method="POST">
            @csrf
            <div class="row">
                {{-- KOLOM KIRI: FORM INPUT --}}
                <div class="col-lg-8">
                    <div class="card modern-shadow border-0 rounded-xl mb-4 overflow-hidden">
                        <div class="card-header bg-white border-bottom py-3 desktop-ui">
                            <h6 class="font-weight-bold text-dark m-0">
                                <i class="fas fa-file-alt text-primary mr-2"></i> Detail Pelanggaran
                            </h6>
                        </div>
                        <div class="card-body p-3 p-md-4">
                            
                            {{-- ALERT ERROR --}}
                            @if ($errors->any())
                                <div class="alert alert-danger rounded-lg mb-4 border-0" style="background-color: #fee2e2; color: #ef4444;">
                                    <ul class="mb-0 pl-3">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            {{-- Field: Pilih Siswa --}}
                            <div class="form-group mb-4">
                                <label class="font-weight-bold small text-secondary">NAMA SISWA <span class="text-danger">*</span></label>
                                <div class="input-group input-group-custom">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-user-graduate"></i></span>
                                    </div>
                                    <select name="siswa_id" class="form-control select2bs4 touch-target" required style="width: 100%;">
                                        <option value="">-- Cari Nama / NIS / Kelas --</option>
                                        @foreach($siswas as $s)
                                            <option value="{{ $s->id }}" {{ old('siswa_id') == $s->id ? 'selected' : '' }}>
                                                {{ $s->nama_lengkap }} ({{ $s->kelas->nama_kelas ?? 'Tanpa Kelas' }}) - {{ $s->nis }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                {{-- Field: Jenis Pelanggaran --}}
                                <div class="col-md-6 mb-4">
                                    <div class="form-group mb-0">
                                        <label class="font-weight-bold small text-secondary">JENIS PELANGGARAN <span class="text-danger">*</span></label>
                                        <div class="input-group input-group-custom">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-gavel"></i></span>
                                            </div>
                                            <select name="jenis_pelanggaran_id" class="form-control select2bs4 touch-target" required style="width: 100%;">
                                                <option value="">-- Pilih Kategori --</option>
                                                @foreach($jenis_pelanggarans as $jenis)
                                                    <option value="{{ $jenis->id }}" {{ old('jenis_pelanggaran_id') == $jenis->id ? 'selected' : '' }}>
                                                        {{ $jenis->nama_pelanggaran }} ({{ $jenis->poin }} Poin) - [{{ $jenis->kategori }}]
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                {{-- Field: Waktu Kejadian --}}
                                <div class="col-md-6 mb-4">
                                    <div class="form-group mb-0">
                                        <label class="font-weight-bold small text-secondary">WAKTU KEJADIAN <span class="text-danger">*</span></label>
                                        <div class="input-group input-group-custom">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                            </div>
                                            <input type="datetime-local" name="tanggal" class="form-control touch-target border-0" value="{{ old('tanggal', now()->format('Y-m-d\TH:i')) }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Field: Kronologi / Catatan --}}
                            <div class="form-group mb-4">
                                <label class="font-weight-bold small text-secondary">KRONOLOGI / CATATAN TAMBAHAN</label>
                                <div class="input-group input-group-custom align-items-start py-2">
                                    <div class="input-group-prepend pt-1">
                                        <span class="input-group-text border-0"><i class="fas fa-sticky-note"></i></span>
                                    </div>
                                    <textarea name="keterangan" class="form-control border-0 pl-1" rows="3" placeholder="Jelaskan detail kejadian, saksi, atau respon siswa..." style="resize: none;">{{ old('keterangan') }}</textarea>
                                </div>
                            </div>

                            {{-- INFO POIN --}}
                            <div class="alert bg-info-light border-0 rounded-lg d-flex align-items-start mb-0 p-3" role="alert">
                                <i class="fas fa-info-circle text-primary fa-lg mr-3 mt-1"></i>
                                <div>
                                    <strong class="text-primary-dark d-block mb-1">Sistem Poin Otomatis</strong>
                                    <span class="text-muted small">Poin siswa akan bertambah otomatis sesuai jenis pelanggaran yang dipilih di atas.</span>
                                </div>
                            </div>

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

                {{-- KOLOM KANAN: PANDUAN & AKSI --}}
                <div class="col-lg-4">
                    {{-- Card Aksi --}}
                    <div class="card modern-shadow border-0 rounded-xl mb-4">
                        <div class="card-body p-3 p-md-4">
                            <h6 class="font-weight-bold text-dark mb-3 desktop-ui">Simpan Data</h6>
                            <button type="submit" class="btn btn-primary btn-block font-weight-bold rounded-pill modern-shadow hover-scale mb-3 touch-target text-md">
                                <i class="fas fa-save mr-2"></i> Simpan Kasus
                            </button>
                            <a href="{{ route('kesiswaan.bk.index') }}" class="btn btn-light btn-block font-weight-bold rounded-pill hover-scale touch-target desktop-ui text-secondary">
                                Batal & Kembali
                            </a>
                        </div>
                    </div>

                    {{-- Card Panduan --}}
                    <div class="card modern-shadow border-0 rounded-xl bg-info-light mb-4">
                        <div class="card-body p-3 p-md-4 text-primary-dark">
                            <h6 class="font-weight-bold mb-3">
                                <i class="fas fa-lightbulb mr-2 text-warning"></i> Panduan Pengisian
                            </h6>
                            <ul class="pl-3 small mb-0 text-muted" style="line-height: 1.8;">
                                <li><strong>Objektivitas:</strong> Pastikan data berdasarkan fakta lapangan.</li>
                                <li><strong>Nama Siswa:</strong> Wajib diisi (pilih dari daftar).</li>
                                <li><strong>Jenis Pelanggaran:</strong> Menentukan pengurangan skor perilaku.</li>
                                <li><strong>Kronologi:</strong> Tuliskan dengan singkat, padat, dan jelas 5W+1H.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- FOOTER NAV (MOBILE ONLY) --}}
    @include('partials.guru_mobile_nav')

@stop

@section('plugins.Select2', true)

@section('css')
    <style>
        /* --- 1. Palette Variables (Modern UI) --- */
        :root {
            --primary: #2563eb;       /* Modern Blue Tailwind */
            --primary-light: #eff6ff;
            --primary-dark: #1d4ed8;
            --text-dark: #1e293b;     
            --bg-body: #f8fafc;       
        }
        
        body { font-family: 'Poppins', sans-serif; background-color: var(--bg-body); }
        .text-dark { color: var(--text-dark) !important; }
        .text-primary { color: var(--primary) !important; }
        .text-primary-dark { color: var(--primary-dark) !important; }
        
        /* Background Utilities */
        .bg-info-light { background-color: var(--primary-light) !important; }
        
        /* Shape & Shadows */
        .rounded-xl { border-radius: 1rem !important; }
        .rounded-lg { border-radius: 0.75rem !important; }
        .modern-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; }

        /* --- 2. Buttons & Interactivity --- */
        .btn-primary { background-color: var(--primary); border-color: var(--primary); }
        .btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); }
        .hover-scale { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
        .hover-scale:hover { transform: translateY(-2px); }
        .touch-target { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; width: 100%;} 

        /* --- 3. Modern Input Group --- */
        .input-group-custom {
            background-color: #fff;
            border-radius: 0.75rem;
            border: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            overflow: hidden; /* Mencegah elemen anak keluar dari rounded corner */
        }

        .input-group-custom:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }

        .input-group-custom .input-group-prepend .input-group-text {
            background-color: transparent;
            border: none;
            color: #94a3b8;
            padding-left: 1rem;
            padding-right: 0.5rem;
        }
        
        .input-group-custom:focus-within .input-group-prepend .input-group-text {
            color: var(--primary);
        }

        .input-group-custom .form-control {
            border: none;
            box-shadow: none !important;
            background: transparent;
            height: 44px; /* Default tinggi input */
        }
        
        .input-group-custom textarea.form-control {
            height: auto;
        }

        /* --- 4. Fix Select2 to match Input Group --- */
        .select2-container--bootstrap4 .select2-selection--single {
            border: none !important;
            height: 44px !important;
            box-shadow: none !important;
            display: flex;
            align-items: center;
            background: transparent;
        }
        
        .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
            padding-left: 5px !important;
            color: #475569;
            font-size: 0.95rem;
            line-height: normal;
        }

        /* Hilangkan focus outline bawaan select2 */
        .select2-container--bootstrap4.select2-container--focus .select2-selection {
            box-shadow: none !important;
        }

        /* --- 5. Mobile Specific Overrides --- */
        @media (min-width: 992px) {
            .mobile-ui { display: none !important; }
        }
        @media (max-width: 991.98px) {
            .main-header, .main-sidebar, .content-header { display: none !important; }
            .desktop-ui { display: none !important; }
            .content-wrapper, .content, .container-fluid { 
                margin: 0 !important; 
                padding: 0 !important; 
                background: var(--bg-body) !important; 
                min-height: 100vh !important; 
            }
            .content-wrapper { padding-bottom: 90px !important; } /* Ruang untuk mobile nav */
        }
    </style>
@stop

@section('js')
<script>
    $(document).ready(function() { 
        // Inisialisasi Select2 dengan Tema Bootstrap 4
        $('.select2bs4').select2({
            theme: 'bootstrap4',
            placeholder: "-- Pilih opsi --",
            allowClear: true,
            width: '100%'
        });
    });
</script>
@stop