@extends('adminlte::page')

@section('title', 'Master Tata Tertib | 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-gavel text-primary mr-2"></i> Master Tata Tertib
                </h1>
                <p class="text-muted small mb-0">Kelola daftar pelanggaran dan bobot poin 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') }}">BK</a></li>
                    <li class="breadcrumb-item active">Master Data</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">Tata Tertib</h5>
                    <span class="text-muted small">Kelola master pelanggaran</span>
                </div>
            </div>
        </div>
    </div>

<div class="container-fluid pb-5 px-md-3 px-2">
    
    {{-- Alert Section --}}
    @if(session('success'))
        <div class="alert bg-success-light text-success border-0 modern-shadow rounded-lg mb-4 p-3 d-flex align-items-center" role="alert">
            <i class="fas fa-check-circle mr-3 fa-lg"></i>
            <span class="font-weight-bold">{{ session('success') }}</span>
            <button type="button" class="close text-success" data-dismiss="alert" aria-label="Close" style="opacity: 1; text-shadow: none;">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert bg-danger-light text-danger border-0 modern-shadow rounded-lg mb-4 p-3 d-flex align-items-center" role="alert">
             <i class="fas fa-exclamation-circle mr-3 fa-lg"></i>
            <span class="font-weight-bold">{{ session('error') }}</span>
            <button type="button" class="close text-danger" data-dismiss="alert" aria-label="Close" style="opacity: 1; text-shadow: none;">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="row">
        {{-- KOLOM KIRI: FORM TAMBAH --}}
        <div class="col-lg-4 col-md-5 mb-4">
            <div class="card modern-shadow border-0 rounded-xl overflow-hidden h-100">
                <div class="card-header bg-white py-3 border-bottom desktop-ui">
                    <h6 class="card-title font-weight-bold text-dark m-0">
                        <i class="fas fa-plus-circle text-primary mr-2"></i> Tambah Aturan Baru
                    </h6>
                </div>
                <div class="card-body p-3 p-md-4">
                    <form action="{{ route('kesiswaan.bk.master.store') }}" method="POST">
                        @csrf
                        
                        {{-- Input: Nama Pelanggaran --}}
                        <div class="form-group mb-4">
                            <label class="font-weight-bold small text-secondary">NAMA 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-file-signature"></i></span>
                                </div>
                                <input type="text" name="nama_pelanggaran" class="form-control touch-target" placeholder="Cth: Terlambat Hadir" value="{{ old('nama_pelanggaran') }}" required>
                            </div>
                            @error('nama_pelanggaran') <small class="text-danger font-weight-bold mt-1 d-block">{{ $message }}</small> @enderror
                        </div>

                        <div class="row">
                            {{-- Input: Kategori --}}
                            <div class="col-6 col-md-12 mb-4">
                                <div class="form-group mb-0">
                                    <label class="font-weight-bold small text-secondary">KATEGORI <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-tags"></i></span>
                                        </div>
                                        <select name="kategori" class="form-control custom-select-style touch-target">
                                            <option value="Ringan" {{ old('kategori') == 'Ringan' ? 'selected' : '' }}>Ringan</option>
                                            <option value="Sedang" {{ old('kategori') == 'Sedang' ? 'selected' : '' }}>Sedang</option>
                                            <option value="Berat" {{ old('kategori') == 'Berat' ? 'selected' : '' }}>Berat</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            {{-- Input: Poin --}}
                            <div class="col-6 col-md-12 mb-4">
                                <div class="form-group mb-0">
                                    <label class="font-weight-bold small text-secondary">BOBOT POIN <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-sort-numeric-up-alt"></i></span>
                                        </div>
                                        <input type="number" name="poin" class="form-control touch-target" placeholder="Cth: 10" value="{{ old('poin') }}" min="1" required>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary btn-block font-weight-bold rounded-pill modern-shadow hover-scale mt-2 touch-target text-md">
                            <i class="fas fa-save mr-2"></i> Simpan Aturan
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- KOLOM KANAN: TABEL DATA --}}
        <div class="col-lg-8 col-md-7">
            {{-- Info Widget Kecil (Pindah ke atas tabel pada versi mobile) --}}
            <div class="card bg-info-light border-0 rounded-xl modern-shadow mb-4">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="icon-box bg-white text-primary rounded-circle mr-3 shadow-sm d-flex align-items-center justify-content-center flex-shrink-0" style="width: 40px; height: 40px;">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <div>
                        <span class="text-primary-dark font-weight-bold d-block small">Tips:</span>
                        <span class="text-primary-dark small" style="line-height: 1.2; display: block;">Gunakan kategori dengan bijak untuk memudahkan filter laporan evaluasi diri.</span>
                    </div>
                </div>
            </div>

            <div class="card modern-shadow border-0 rounded-xl overflow-hidden">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom">
                    <h6 class="card-title font-weight-bold text-dark m-0">
                        <i class="fas fa-list-ul mr-2 text-primary"></i> Daftar Tata Tertib Aktif
                    </h6>
                    <span class="badge badge-pill badge-primary-light text-primary px-3 py-2 font-weight-bold">{{ $jenis_pelanggarans->count() }} Aturan</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="tableMaster" class="table table-hover align-middle mb-0 w-100">
                            <thead class="bg-light">
                                <tr>
                                    {{-- Kolom No disembunyikan di HP agar lebih lega --}}
                                    <th class="border-top-0 pl-3 pl-md-4 py-3 text-secondary text-uppercase small font-weight-bold d-none d-md-table-cell" width="5%">No</th>
                                    <th class="border-top-0 py-3 pl-3 pl-md-2 text-secondary text-uppercase small font-weight-bold">Nama Pelanggaran</th>
                                    <th class="border-top-0 py-3 text-secondary text-uppercase small font-weight-bold" width="20%">Kategori</th>
                                    <th class="border-top-0 py-3 text-secondary text-uppercase small font-weight-bold text-center" width="10%">Poin</th>
                                    <th class="border-top-0 py-3 pr-3 text-secondary text-uppercase small font-weight-bold text-center" width="15%">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($jenis_pelanggarans as $jenis)
                                <tr>
                                    <td class="pl-4 align-middle font-weight-bold text-muted d-none d-md-table-cell">{{ $loop->iteration }}</td>
                                    <td class="align-middle pl-3 pl-md-2">
                                        <span class="font-weight-bold text-dark d-block text-wrap" style="min-width: 120px;">{{ $jenis->nama_pelanggaran }}</span>
                                        {{-- Munculkan kategori di bawah nama pelanggaran untuk HP yang sangat kecil jika diperlukan, tapi sementara pakai kolom terpisah --}}
                                    </td>
                                    <td class="align-middle">
                                        @php
                                            $badgeClass = match($jenis->kategori) {
                                                'Ringan' => 'bg-success-light text-success',
                                                'Sedang' => 'bg-warning-light text-warning',
                                                'Berat'  => 'bg-danger-light text-danger',
                                                default  => 'bg-light text-secondary',
                                            };
                                        @endphp
                                        <span class="badge {{ $badgeClass }} px-2 py-1 small border-0">{{ $jenis->kategori }}</span>
                                    </td>
                                    <td class="align-middle text-center">
                                        <span class="font-weight-bold text-danger bg-danger-light px-2 py-1 rounded small">+{{ $jenis->poin }}</span>
                                    </td>
                                    <td class="align-middle text-center pr-3">
                                        {{-- FORM HAPUS --}}
                                        <form action="{{ route('kesiswaan.bk.master.destroy', $jenis->id) }}" method="POST" class="d-inline form-delete">
                                            @csrf 
                                            @method('DELETE')
                                            {{-- TOMBOL HAPUS --}}
                                            <button type="button" class="btn btn-sm btn-light text-danger rounded-circle btn-icon hover-scale btn-delete touch-target" style="width: 38px; height: 38px;" title="Hapus">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center py-5 text-muted">
                                        <div class="d-flex flex-column align-items-center justify-content-center">
                                            <i class="fas fa-box-open fa-3x mb-3 text-secondary opacity-50"></i>
                                            <p class="mb-0 font-weight-bold text-dark">Belum ada data tata tertib.</p>
                                            <small>Silakan tambahkan aturan baru melalui form.</small>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

@stop

@section('plugins.Datatables', true)

@section('css')
<style>
    /* --- 1. Palette Variables (Modern UI) --- */
    :root {
        --primary: #2563eb;       
        --primary-light: #eff6ff;
        --primary-dark: #1d4ed8;
        --text-dark: #1e293b;     
        --bg-body: #f8fafc;       
    }

    body { font-family: 'Poppins', sans-serif !important; background-color: var(--bg-body); }
    .text-primary { color: var(--primary) !important; }
    .text-primary-dark { color: var(--primary-dark) !important; }
    .text-dark { color: var(--text-dark) !important; }
    
    /* Background Utilities */
    .bg-info-light { background-color: var(--primary-light) !important; }
    .bg-primary-light { background-color: rgba(37, 99, 235, 0.1) !important; }
    .bg-success-light { background-color: rgba(34, 197, 94, 0.15) !important; }
    .bg-warning-light { background-color: rgba(245, 158, 11, 0.15) !important; color: #d97706 !important;}
    .bg-danger-light { background-color: rgba(239, 68, 68, 0.1) !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. Custom Styling Input Group --- */
    .input-group-custom {
        background-color: #fff;
        border-radius: 0.75rem;
        border: 1px solid #e2e8f0;
        transition: all 0.3s ease;
        display: flex; align-items: center;
        overflow: hidden;
    }

    .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,
    .input-group-custom .custom-select-style {
        border: none;
        background-color: transparent;
        height: 44px; /* Touch target size */
        padding-left: 0.5rem;
        box-shadow: none !important;
        color: #475569;
    }

    /* --- 3. Button Styling --- */
    .btn-primary { background-color: var(--primary); border-color: var(--primary); }
    .btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); }
    .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%;}
    
    .btn-icon { padding: 0; display: inline-flex; align-items: center; justify-content: center; }

    /* --- 4. Table & SweetAlert Fixes --- */
    .table td { vertical-align: middle !important; border-top: 1px solid #f1f5f9; padding: 1rem 0.5rem;}
    .table thead th { border-bottom: none; background-color: #f8fafc; letter-spacing: 0.5px; padding-top: 1rem; padding-bottom: 1rem;}
    
    .swal2-container { z-index: 99999 !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 */
        
        /* Adjustments for DataTables on mobile */
        .dataTables_wrapper .row:first-child { padding: 1rem; }
        .dataTables_wrapper .row:last-child { padding: 1rem; }
    }
</style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function() {
        
        // Init Datatable
        $('#tableMaster').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "language": {
                "search": "",
                "searchPlaceholder": "Cari aturan...",
                "paginate": { "next": ">", "previous": "<" },
                "emptyTable": "Data kosong",
                "info": "_START_ - _END_ dari _TOTAL_"
            }
        });

        // Styling search box bawaan Datatable agar lebih modern
        $('.dataTables_filter input').addClass('form-control rounded-pill border-0 modern-shadow px-3 touch-target').css('background-color', '#fff');

        // LOGIKA HAPUS DATA (Delegation Fix)
        $(document).on('click', '.btn-delete', function(e) {
            e.preventDefault(); 
            
            var form = $(this).closest('form');
            var tr = $(this).closest('tr');
            // Penyesuaian index kolom karena kolom No disembunyikan di versi mobile/desktop
            var namaItem = tr.find('td').eq(tr.find('td').length > 4 ? 1 : 0).text().trim(); 

            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'Hapus Aturan?',
                    html: "Aturan: <b>" + namaItem + "</b><br><small class='text-danger'>Data tidak dapat dikembalikan!</small>",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444', // Tailwind Red
                    cancelButtonColor: '#94a3b8',  // Tailwind Slate
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal',
                    customClass: {
                        popup: 'rounded-xl border-0 shadow-lg',
                        confirmButton: 'rounded-pill px-4 touch-target',
                        cancelButton: 'rounded-pill px-4 touch-target'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            } else {
                if(confirm("Yakin ingin menghapus data: " + namaItem + "?")) {
                    form.submit();
                }
            }
        });
    });
</script>
@stop