@extends('adminlte::page')

@section('title', 'Dashboard Smart BK | Konseling Modern')

@section('content_header')
    {{-- DESKTOP HEADER (Hanya muncul di laptop/PC) --}}
    <div class="container-fluid pt-3 desktop-ui">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
                <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif;">
                    Dashboard Konseling
                </h1>
                <p class="text-muted small mb-0">
                    <i class="far fa-calendar-alt mr-1"></i> {{ now()->isoFormat('dddd, D MMMM Y') }} &bull; Pantau kedisiplinan siswa hari ini.
                </p>
            </div>
            <div>
                <a href="{{ route('kesiswaan.bk.create') }}" class="btn btn-primary btn-lg modern-shadow rounded-pill px-4 font-weight-bold hover-scale">
                    <i class="fas fa-plus mr-2"></i> Input Kasus
                </a>
            </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-2">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="font-weight-bold text-dark mb-0">Bimbingan & Konseling</h5>
                    <span class="text-muted small">{{ now()->isoFormat('D MMM Y') }}</span>
                </div>
                <a href="{{ route('kesiswaan.bk.create') }}" class="btn btn-primary btn-sm rounded-pill font-weight-bold modern-shadow px-3 touch-target">
                    <i class="fas fa-plus mr-1"></i> Kasus
                </a>
            </div>
        </div>
    </div>

    <div class="container-fluid pb-5 px-md-3 px-2">
        
        {{-- SECTION 1: KARTU STATISTIK --}}
        <div class="row mb-2">
            <div class="col-lg-4 col-6 mb-3 pr-1 pr-md-3">
                <div class="card border-0 modern-shadow h-100 rounded-xl overflow-hidden position-relative">
                    <div class="card-body p-3 p-md-4 d-flex flex-column flex-md-row align-items-md-center">
                        <div class="icon-box bg-primary-light text-primary rounded-circle d-flex align-items-center justify-content-center mb-2 mb-md-0 mr-md-4 mobile-icon">
                            <i class="fas fa-folder-open fa-lg"></i>
                        </div>
                        <div>
                            <span class="text-muted text-uppercase d-block small font-weight-bold ls-1" style="font-size: 0.65rem;">Total Kasus</span>
                            <h3 class="font-weight-bold text-dark mb-0">{{ $total_kasus }}</h3>
                        </div>
                    </div>
                    <div class="position-absolute bg-primary pattern-circle"></div>
                </div>
            </div>

            <div class="col-lg-4 col-6 mb-3 pl-1 pl-md-3">
                <div class="card border-0 modern-shadow h-100 rounded-xl overflow-hidden position-relative">
                    <div class="card-body p-3 p-md-4 d-flex flex-column flex-md-row align-items-md-center">
                        <div class="icon-box bg-warning-light text-warning rounded-circle d-flex align-items-center justify-content-center mb-2 mb-md-0 mr-md-4 mobile-icon">
                            <i class="fas fa-calendar-day fa-lg"></i>
                        </div>
                        <div>
                            <span class="text-muted text-uppercase d-block small font-weight-bold ls-1" style="font-size: 0.65rem;">Bulan Ini ({{ date('M') }})</span>
                            <h3 class="font-weight-bold text-dark mb-0">{{ $kasus_bulan_ini }}</h3>
                        </div>
                    </div>
                     <div class="position-absolute bg-warning pattern-circle"></div>
                </div>
            </div>

            <div class="col-lg-4 col-12 mb-3">
                <div class="card border-0 modern-shadow h-100 rounded-xl bg-primary text-white position-relative overflow-hidden">
                    <div class="card-body p-4 d-flex flex-column justify-content-center">
                        <h5 class="font-weight-bold mb-1">Smart BK Report</h5>
                        <p class="small text-white-50 mb-3">Unduh rekapitulasi data pelanggaran lengkap.</p>
                         <button type="button" data-toggle="modal" data-target="#filterModal" class="btn btn-light text-primary font-weight-bold rounded-pill px-4 btn-sm modern-shadow hover-scale align-self-start touch-target">
                            <i class="fas fa-download mr-1"></i> Export Data
                        </button>
                    </div>
                    <div class="icon-bg position-absolute" style="right: 10px; bottom: -15px; font-size: 6rem; opacity: 0.15; transform: rotate(-15deg);">
                        <i class="fas fa-file-alt"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            {{-- KOLOM KIRI (TABEL RIWAYAT) --}}
            <div class="col-lg-8 col-12 order-2 order-lg-1">
                <div class="card border-0 modern-shadow rounded-xl mb-4">
                    <div class="card-header bg-white py-3 border-bottom-0 d-flex justify-content-between align-items-center">
                        <h6 class="font-weight-bold text-dark m-0">
                            <i class="fas fa-history text-primary mr-2"></i> Log Aktivitas Terbaru
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table id="tableSmartBk" class="table table-hover align-middle w-100 mb-0 mobile-optimized-table">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="border-0 text-secondary small text-uppercase font-weight-bold pl-3 pl-md-4 d-none d-sm-table-cell">Waktu</th>
                                        <th class="border-0 text-secondary small text-uppercase font-weight-bold pl-3 pl-md-2">Siswa</th>
                                        <th class="border-0 text-secondary small text-uppercase font-weight-bold">Pelanggaran</th>
                                        <th class="border-0 text-secondary small text-uppercase font-weight-bold text-center">Poin</th>
                                        <th class="border-0 text-secondary small text-uppercase font-weight-bold text-center pr-3">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($riwayat as $r)
                                    <tr>
                                        <td class="pl-4 align-middle d-none d-sm-table-cell">
                                            <div class="d-flex flex-column">
                                                <span class="font-weight-bold text-dark text-sm">{{ $r->tanggal->format('d/m/y') }}</span>
                                                <small class="text-muted">{{ $r->tanggal->format('H:i') }}</small>
                                            </div>
                                        </td>
                                        <td class="align-middle pl-3 pl-md-2">
                                            <div class="d-flex align-items-center">
                                                <div class="symbol symbol-30px mr-2 d-none d-md-block">
                                                    <div class="symbol-label bg-light-primary text-primary font-weight-bold rounded-circle d-flex align-items-center justify-content-center text-xs" style="width: 32px; height: 32px;">
                                                        {{ substr($r->siswa->nama_lengkap, 0, 1) }}
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-column">
                                                    <span class="text-dark font-weight-bold text-sm text-wrap" style="max-width: 120px;">{{ $r->siswa->nama_lengkap }}</span>
                                                    <span class="text-muted text-xs">{{ $r->siswa->kelas->nama_kelas ?? '-' }} &bull; <span class="d-sm-none">{{ $r->tanggal->format('d/m') }}</span></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="align-middle py-2">
                                            <span class="badge badge-light-secondary text-dark border-0 px-2 py-1 mb-1 text-wrap" style="max-width: 130px; text-align: left;">{{ $r->jenis->nama_pelanggaran ?? 'Pelanggaran Dihapus' }}</span>
                                            
                                            @if($r->tindakan)
                                                <div class="text-success text-xs mt-1 font-weight-bold">
                                                    <i class="fas fa-check-circle mr-1"></i>Selesai
                                                </div>
                                                <div class="text-muted text-xs mt-1 text-wrap" style="max-width: 180px; font-style: italic; line-height: 1.3;">
                                                    "{{ $r->tindakan }}"
                                                </div>
                                            @else
                                                <div class="text-warning text-xs mt-1 font-weight-bold">
                                                    <i class="fas fa-clock mr-1"></i>Pending
                                                </div>
                                            @endif
                                        </td>
                                        <td class="text-center align-middle">
                                            <span class="font-weight-bold text-danger bg-light-danger px-2 py-1 rounded small">+{{ $r->jenis->poin ?? 0 }}</span>
                                        </td>
                                        <td class="text-center align-middle pr-3">
                                            <div class="d-flex justify-content-center align-items-center">
                                                @if(!$r->tindakan)
                                                    <button type="button" 
                                                        onclick="openTindakLanjutModal('{{ route('kesiswaan.bk.tindak_lanjut', $r->id) }}', '{{ addslashes($r->siswa->nama_lengkap) }}', '{{ addslashes($r->jenis->nama_pelanggaran ?? '') }}')" 
                                                        class="btn btn-sm btn-light text-success rounded-circle touch-target hover-scale mr-2" 
                                                        style="width: 38px; height: 38px;" title="Tindak Lanjut Kasus">
                                                        <i class="fas fa-check-double"></i>
                                                    </button>
                                                @endif
                                                <button onclick="confirmDelete('{{ route('kesiswaan.bk.destroy', $r->id) }}')" 
                                                    class="btn btn-sm btn-light text-danger rounded-circle touch-target hover-scale" 
                                                    style="width: 38px; height: 38px;" title="Hapus">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- KOLOM KANAN (SIDEBAR) --}}
            <div class="col-lg-4 col-12 order-1 order-lg-2">
                
                {{-- Widget Filter Cepat --}}
                <div class="card border-0 modern-shadow rounded-xl bg-info-light mb-4">
                    <div class="card-body p-3 p-md-4">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-filter text-primary mr-2"></i>
                                <h6 class="font-weight-bold text-primary-dark m-0">Filter Kelas</h6>
                            </div>
                        </div>
                        <form action="{{ route('kesiswaan.bk.index') }}" method="GET">
                            <div class="form-group mb-0">
                                <select name="kelas_id" class="form-control custom-select-style shadow-none border-0" onchange="this.form.submit()">
                                    <option value="">-- Semua Kelas Aktif --</option>
                                    @if(isset($list_kelas))
                                        @foreach($list_kelas as $kelas)
                                            <option value="{{ $kelas->id }}" {{ request('kelas_id') == $kelas->id ? 'selected' : '' }}>
                                                {{ $kelas->nama_kelas }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Top 5 Siswa --}}
                <div class="card border-0 modern-shadow rounded-xl mb-4">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h6 class="font-weight-bold text-dark m-0">
                            <i class="fas fa-fire text-danger mr-2"></i> Top Pelanggaran
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush">
                            @forelse($top_pelanggar as $index => $s)
                                {{-- PERBAIKAN: Hitung langsung dari database --}}
                                @php 
                                    $poin = \Illuminate\Support\Facades\DB::table('bk_catatan_pelanggarans')
                                        ->join('bk_jenis_pelanggarans', 'bk_catatan_pelanggarans.jenis_pelanggaran_id', '=', 'bk_jenis_pelanggarans.id')
                                        ->where('bk_catatan_pelanggarans.siswa_id', $s->id)
                                        ->sum('bk_jenis_pelanggarans.poin');
                                @endphp

                                @if($poin > 0)
                                <li class="list-group-item border-0 px-3 px-md-4 py-3 d-flex align-items-center justify-content-between hover-bg-light">
                                    <div class="d-flex align-items-center">
                                        <div class="mr-3 font-weight-bold text-muted text-center" style="width: 24px;">
                                            @if($index == 0) <i class="fas fa-crown text-warning fa-lg" style="drop-shadow: 0 2px 4px rgba(255,193,7,0.4);"></i>
                                            @elseif($index == 1) <span class="text-dark h6 mb-0">2</span>
                                            @elseif($index == 2) <span class="text-dark h6 mb-0">3</span>
                                            @else <span class="small">{{ $index + 1 }}</span>
                                            @endif
                                        </div>
                                        <div>
                                            <span class="d-block font-weight-bold text-dark text-sm">{{ Str::limit($s->nama_lengkap, 18) }}</span>
                                            <span class="small text-muted">{{ $s->kelas->nama_kelas ?? 'N/A' }}</span>
                                        </div>
                                    </div>
                                    <span class="badge badge-pill badge-danger-light text-danger px-3 py-2">{{ $poin }} Poin</span>
                                </li>
                                @endif
                            @empty
                                <li class="list-group-item border-0 text-center text-muted py-4">Belum ada data siswa.</li>
                            @endforelse
                        </ul>
                    </div>
                    <div class="card-footer bg-white border-0 text-center pb-3 pt-0">
                        <button type="button" class="btn btn-outline-primary btn-block rounded-pill font-weight-bold hover-scale touch-target" data-toggle="modal" data-target="#modalRanking">
                            Lihat Peringkat Lengkap
                        </button>
                    </div>
                </div>

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

    {{-- MODAL 1: FILTER & EXPORT PDF --}}
    <div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0 modern-shadow rounded-xl">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title font-weight-bold">Export Laporan PDF</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body p-4">
                    <form action="{{ route('kesiswaan.bk.export.pdf') }}" method="GET" target="_blank">
                        <div class="form-group">
                            <label class="small font-weight-bold text-muted">Pilih Kelas</label>
                            <select name="kelas_id" class="form-control select2bs4" style="width: 100%;">
                                <option value="">Semua Kelas</option>
                                @if(isset($list_kelas))
                                    @foreach($list_kelas as $kelas)
                                        <option value="{{ $kelas->id }}">{{ $kelas->nama_kelas }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="small font-weight-bold text-muted">Pilih Siswa (Opsional)</label>
                            <select name="siswa_id" class="form-control select2bs4" style="width: 100%;">
                                <option value="">Semua Siswa</option>
                                @if(isset($list_siswa))
                                    @foreach($list_siswa as $siswa)
                                        <option value="{{ $siswa->id }}">{{ $siswa->nama_lengkap }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block rounded-pill font-weight-bold mt-4 touch-target">
                            <i class="fas fa-file-pdf mr-2"></i> Download PDF
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL 2: FULL RANKING --}}
    <div class="modal fade" id="modalRanking" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content border-0 modern-shadow rounded-xl overflow-hidden">
                <div class="modal-header bg-primary text-white border-0 py-3">
                    <h5 class="modal-title font-weight-bold"><i class="fas fa-trophy mr-2 text-warning"></i> Peringkat Kedisiplinan</h5>
                    <button type="button" class="close text-white opacity-1" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="bg-light p-3 border-bottom">
                    <input type="text" id="searchRanking" class="form-control border-0 modern-shadow rounded-pill touch-target" placeholder="Cari nama siswa..." style="padding-left: 20px;">
                </div>
                <div class="modal-body p-0" style="max-height: 60vh; overflow-y: auto;">
                    <table class="table table-hover table-striped mb-0 align-middle">
                        <thead class="bg-white text-uppercase text-muted small font-weight-bold sticky-top">
                            <tr>
                                <th class="pl-4 border-top-0" width="10%">Rank</th>
                                <th class="border-top-0">Nama Siswa</th>
                                <th class="text-center border-top-0" width="25%">Total Poin</th>
                            </tr>
                        </thead>
                        <tbody id="rankingTableBody">
                            @php $data_ranking = isset($all_pelanggar) ? $all_pelanggar : $top_pelanggar; @endphp
                            @foreach($data_ranking as $index => $s)
                                {{-- PERBAIKAN: Hitung langsung dari database --}}
                                @php 
                                    $poin = \Illuminate\Support\Facades\DB::table('bk_catatan_pelanggarans')
                                        ->join('bk_jenis_pelanggarans', 'bk_catatan_pelanggarans.jenis_pelanggaran_id', '=', 'bk_jenis_pelanggarans.id')
                                        ->where('bk_catatan_pelanggarans.siswa_id', $s->id)
                                        ->sum('bk_jenis_pelanggarans.poin');
                                @endphp

                            @if($poin > 0)
                            <tr>
                                <td class="pl-4 font-weight-bold text-muted">
                                    @if($index+1 <= 3)
                                        <span class="badge badge-warning text-white rounded-circle" style="width:25px; height:25px; line-height:20px;">{{ $index + 1 }}</span>
                                    @else
                                        #{{ $index + 1 }}
                                    @endif
                                </td>
                                <td>
                                    <span class="font-weight-bold text-dark d-block">{{ $s->nama_lengkap }}</span>
                                    <span class="small text-muted">{{ $s->kelas->nama_kelas ?? '-' }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="font-weight-bold text-danger">{{ $poin }} Poin</span>
                                </td>
                            </tr>
                            @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer bg-light border-0">
                    <button type="button" class="btn btn-secondary rounded-pill font-weight-bold px-4 touch-target" data-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL 3: FORM TINDAK LANJUT --}}
    <div class="modal fade" id="modalTindakLanjut" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0 modern-shadow rounded-xl overflow-hidden">
                <div class="modal-header bg-success text-white border-0 py-3">
                    <h5 class="modal-title font-weight-bold">
                        <i class="fas fa-check-double mr-2"></i> Tindak Lanjut Kasus
                    </h5>
                    <button type="button" class="close text-white opacity-1" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <form id="formTindakLanjut" method="POST">
                    @csrf
                    <div class="modal-body p-4 bg-light">
                        <div class="bg-white p-3 rounded-lg mb-4 modern-shadow border-0">
                            <span class="d-block small text-muted font-weight-bold mb-1">NAMA SISWA</span>
                            <h6 class="font-weight-bold text-dark mb-2" id="tlNamaSiswa">-</h6>
                            
                            <span class="d-block small text-muted font-weight-bold mb-1 mt-3">PELANGGARAN</span>
                            <span class="badge badge-danger-light text-danger px-2 py-1" id="tlKasus">-</span>
                        </div>

                        <div class="form-group mb-0">
                            <label class="font-weight-bold small text-secondary">CATATAN PENYELESAIAN <span class="text-danger">*</span></label>
                            <textarea name="tindakan" class="form-control border-0 modern-shadow rounded-lg p-3" rows="3" placeholder="Contoh: Siswa telah diberikan pembinaan..." required style="resize: none; background-color: #fff;"></textarea>
                        </div>
                    </div>
                    
                    <div class="modal-footer bg-white border-0">
                        <button type="button" class="btn btn-light text-secondary rounded-pill font-weight-bold px-4 touch-target" data-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-success rounded-pill font-weight-bold px-4 modern-shadow hover-scale touch-target">
                            Simpan & Selesaikan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

@stop

@section('plugins.Datatables', true)
@section('plugins.Select2', true)
@section('plugins.Sweetalert2', true)

@section('css')
    <style>
        :root {
            --primary: #2563eb;       
            --primary-light: #eff6ff;
            --primary-dark: #1d4ed8;
            --warning-light: #fef3c7;
            --danger-light: #fee2e2;
            --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-dark { color: var(--primary-dark) !important; }
        .bg-info-light { background-color: var(--primary-light) !important; }
        .bg-primary-light { background-color: rgba(37, 99, 235, 0.1) !important; color: var(--primary); }
        .bg-warning-light { background-color: rgba(245, 158, 11, 0.15) !important; color: #d97706; }
        .bg-light-danger { background-color: rgba(239, 68, 68, 0.1) !important; color: #ef4444; }
        .badge-danger-light { background-color: var(--danger-light); }
        .bg-light-secondary { background-color: #f1f5f9; color: #475569; }
        
        .rounded-xl { border-radius: 1rem !important; }
        .ls-1 { letter-spacing: 0.5px; }
        .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; }
        .pattern-circle { width: 120px; height: 120px; border-radius: 50%; top: -40px; right: -40px; opacity: 0.08; }

        .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); }
        .btn-light-danger { background-color: #fff; color: #ef4444; border: 1px solid var(--danger-light); }
        .btn-light-danger:hover { background-color: #ef4444; color: #fff; border-color: #ef4444;}
        .touch-target { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } 

        .table thead th { border-bottom: none; background-color: #f8fafc; font-size: 0.75rem; letter-spacing: 0.5px; padding-top: 1rem; padding-bottom: 1rem;}
        .table td { border-top: 1px solid #f1f5f9; padding: 1rem 0.5rem; }
        .hover-bg-light:hover { background-color: #f8fafc; cursor: pointer; }
        .mobile-optimized-table td { vertical-align: middle; }

        .custom-select-style { height: 44px; border-radius: 0.75rem; background-color: #fff; font-size: 0.9rem; }
        .select2-container--bootstrap4 .select2-selection--single {
            height: 44px !important;
            border-radius: 0.75rem;
            border: 1px solid #e2e8f0;
            display: flex; align-items: center;
        }
        .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { padding-left: 1rem; color: #475569; }

        @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; }
            .mobile-icon { width: 45px !important; height: 45px !important; }
            .mobile-icon i { font-size: 1.2rem; }
            .card-body { padding: 1rem !important; }
        }
    </style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('#tableSmartBk').DataTable({
            "order": [[ 0, "desc" ]],
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "info": false,
            "autoWidth": false,
            "pageLength": 5,
            "language": {
                 "emptyTable": "Tidak ada riwayat kasus baru"
            }
        });

        $('.select2bs4').select2({ theme: 'bootstrap4', width: '100%' });

        $("#searchRanking").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#rankingTableBody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

    function openTindakLanjutModal(url, namaSiswa, pelanggaran) {
        $('#formTindakLanjut').attr('action', url);
        $('#tlNamaSiswa').text(namaSiswa);
        $('#tlKasus').text(pelanggaran);
        $('textarea[name="tindakan"]').val('');
        $('#modalTindakLanjut').modal('show');
    }

    function confirmDelete(url) {
        Swal.fire({
            title: 'Hapus Log?',
            text: "Poin siswa akan dikembalikan.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#2563eb',
            cancelButtonColor: '#94a3b8',
            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) {
                var form = document.createElement('form');
                form.method = 'POST';
                form.action = url;
                form.innerHTML = '@csrf @method("DELETE")';
                document.body.appendChild(form);
                form.submit();
            }
        })
    }
</script>
@stop