@extends('adminlte::page')

@section('title', 'Data Tahfidz')

@section('content_header')
    <div class="row mb-2 align-items-center">
        <div class="col-sm-6">
            <h1 class="m-0 text-dark" style="font-family: 'Poppins', sans-serif; font-weight: 700;">
                <i class="fas fa-quran text-purple mr-2"></i> Program Tahfidz
            </h1>
            <p class="text-muted small mb-0">Pencatatan Setoran Hafalan Santri</p>
        </div>
        <div class="col-sm-6 text-right">
            <button class="btn btn-purple btn-lg shadow-sm rounded-pill px-4 font-weight-bold" data-toggle="modal" data-target="#modalSetoran">
                <i class="fas fa-plus-circle mr-2"></i> Input Hafalan
            </button>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5">
    
    {{-- STATISTIK MINI --}}
    <div class="row mb-4">
        {{-- Card Setoran Hari Ini --}}
        <div class="col-md-4">
            <div class="card shadow-sm border-0 rounded-lg bg-gradient-purple text-white overflow-hidden">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-0 font-weight-bold">{{ $total_setoran_hari_ini ?? 0 }}</h2>
                            <small class="text-white-50 text-uppercase font-weight-bold letter-spacing-1">Setoran Hari Ini</small>
                        </div>
                        <div class="icon-circle bg-white-20">
                            <i class="fas fa-microphone-alt fa-2x text-white"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        {{-- Card Top Santri --}}
        <div class="col-md-4">
            <div class="card shadow-sm border-0 rounded-lg bg-white h-100">
                <div class="card-body p-4 d-flex align-items-center">
                    <div class="symbol symbol-50px mr-3">
                        <div class="symbol-label bg-light-purple text-purple font-weight-bold rounded-circle d-flex align-items-center justify-content-center" style="width:50px; height:50px; font-size: 1.2rem;">
                            <i class="fas fa-trophy"></i>
                        </div>
                    </div>
                    <div>
                        <div class="text-dark font-weight-bold" style="font-size: 1.1rem;">Top Santri</div>
                        <div class="text-muted small">
                            {{ ($top_santri && $top_santri->santri) ? $top_santri->santri->nama_lengkap : 'Belum ada data' }} 
                            @if($top_santri)
                                <span class="badge badge-light-purple ml-1">{{ $top_santri->total }} Setoran</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- TABEL DATA --}}
    <div class="card border-0 shadow-lg rounded-lg">
        <div class="card-header bg-white py-4 border-bottom-0 d-flex align-items-center">
            <h6 class="font-weight-bold text-dark m-0">
                <i class="fas fa-list-ul text-purple mr-2"></i> Riwayat Setoran Terbaru
            </h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="tableTahfidz" class="table table-hover align-middle mb-0 w-100">
                    <thead class="bg-light-purple">
                        <tr class="text-purple text-uppercase text-xs font-weight-bold ls-1">
                            <th class="pl-4 border-0 rounded-left">Tanggal</th>
                            <th class="border-0">Santri</th>
                            <th class="border-0">Hafalan (Juz/Surah)</th>
                            <th class="border-0">Ayat</th>
                            <th class="border-0 text-center">Predikat</th>
                            <th class="border-0">Penyimak</th>
                            <th class="border-0 text-center rounded-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($setorans as $setor)
                        <tr>
                            <td class="pl-4">
                                <span class="font-weight-bold text-dark d-block">
                                    {{ $setor->tanggal_setor ? $setor->tanggal_setor->format('d/m/Y') : '-' }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="symbol symbol-35px mr-3">
                                        <div class="symbol-label bg-light-purple text-purple font-weight-bold rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width:35px; height:35px;">
                                            {{ substr($setor->santri?->nama_lengkap ?? '?', 0, 1) }}
                                        </div>
                                    </div>
                                    <span class="text-dark font-weight-bold">
                                        {{ $setor->santri?->nama_lengkap ?? 'Santri Terhapus' }}
                                    </span>
                                </div>
                            </td>
                            <td>
                                <span class="badge badge-purple px-2 py-1 rounded-1 mr-1">Juz {{ $setor->juz }}</span>
                                <span class="text-dark font-weight-bold small">{{ $setor->surah }}</span>
                            </td>
                            <td>
                                <span class="badge badge-light-secondary text-muted">Ayat {{ $setor->ayat_awal }} - {{ $setor->ayat_akhir }}</span>
                            </td>
                            <td class="text-center">
                                {!! $setor->predikat_badge !!}
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-user-tie text-purple mr-2"></i>
                                    <small class="text-muted font-weight-bold">{{ $setor->ustadz?->user?->name ?? '-' }}</small>
                                </div>
                            </td>
                            <td class="text-center">
                                <form action="{{ route('pesantren.tahfidz.destroy', $setor->id) }}" method="POST" onsubmit="return confirm('Hapus data ini?');">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-icon btn-sm btn-light-danger text-danger rounded-circle shadow-sm transition-hover">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-5 text-muted">
                                <div class="mb-3">
                                    <i class="fas fa-book-open fa-3x text-purple opacity-25"></i>
                                </div>
                                <p class="font-weight-bold">Belum ada data setoran hafalan.</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- MODAL INPUT --}}
<div class="modal fade" id="modalSetoran" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 rounded-lg shadow-lg">
            <div class="modal-header bg-gradient-purple text-white border-0">
                <h5 class="modal-title font-weight-bold"><i class="fas fa-plus-circle mr-2"></i> Input Setoran Baru</h5>
                <button type="button" class="close text-white opacity-75 hover-opacity-100" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('pesantren.tahfidz.store') }}" method="POST">
                @csrf
                <div class="modal-body bg-white p-4">
                    
                    <div class="form-group mb-4">
                        <label class="small font-weight-bold text-uppercase text-muted ls-1">Santri</label>
                        <select name="santri_id" class="form-control select2" style="width: 100%;" required>
                            <option value="">-- Cari Nama Santri --</option>
                            @foreach($santris as $s)
                                <option value="{{ $s->id }}">
                                    {{ $s->nama_lengkap }} 
                                    @if($s->kamar)
                                        ({{ $s->kamar->nama_kamar }})
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="small font-weight-bold text-uppercase text-muted ls-1">Tanggal</label>
                                <input type="date" name="tanggal_setor" class="form-control bg-light border-0" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                             <div class="form-group">
                                <label class="small font-weight-bold text-uppercase text-muted ls-1">Juz Ke-</label>
                                <input type="number" name="juz" class="form-control bg-light border-0" min="1" max="30" placeholder="1-30" required>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="small font-weight-bold text-uppercase text-muted ls-1">Nama Surah</label>
                        <input type="text" name="surah" class="form-control bg-light border-0" placeholder="Contoh: An-Naba" required>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="small font-weight-bold text-uppercase text-muted ls-1">Ayat Awal</label>
                                <input type="text" name="ayat_awal" class="form-control bg-light border-0" placeholder="1">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="small font-weight-bold text-uppercase text-muted ls-1">Ayat Akhir</label>
                                <input type="text" name="ayat_akhir" class="form-control bg-light border-0" placeholder="10">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="small font-weight-bold text-uppercase text-muted ls-1">Predikat</label>
                                <select name="predikat" class="form-control bg-light border-0" required>
                                    <option value="lancar">Mumtaz (Lancar)</option>
                                    <option value="kurang_lancar">Jayyid (Kurang Lancar)</option>
                                    <option value="ulang">Ulang (Belum Lulus)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                             <div class="form-group">
                                <label class="small font-weight-bold text-uppercase text-muted ls-1">Penyimak</label>
                                <select name="ustadz_id" class="form-control select2" style="width: 100%;">
                                    <option value="">-- Pilih Ustadz --</option>
                                    @foreach($ustadzs as $u)
                                        <option value="{{ $u->id }}">{{ $u->user->name ?? 'Ustadz' }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-0">
                        <label class="small font-weight-bold text-uppercase text-muted ls-1">Catatan</label>
                        <textarea name="catatan" class="form-control bg-light border-0" rows="2" placeholder="Catatan evaluasi..."></textarea>
                    </div>

                </div>
                <div class="modal-footer bg-white border-top-0 pt-0 pb-4 pr-4">
                    <button type="button" class="btn btn-light rounded-pill font-weight-bold px-4" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-purple rounded-pill shadow-sm px-4 font-weight-bold">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@stop

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

@section('css')
<style>
    /* --- APEX MODERN PURPLE THEME --- */
    :root {
        --purple: #7367F0; /* Apex Modern Purple */
        --purple-dark: #5E50EE;
        --purple-light: #E0DBFD; 
        --purple-soft: #F4F1FD;
    }
    
    body {
        font-family: 'Poppins', sans-serif;
        background-color: #f8f8f8;
    }

    /* Backgrounds & Text */
    .bg-gradient-purple { 
        background: linear-gradient(118deg, #7367F0, rgba(115, 103, 240, 0.7)); 
        box-shadow: 0 4px 24px 0 rgba(115, 103, 240, 0.4) !important;
    }
    .bg-light-purple { background-color: var(--purple-soft) !important; }
    .text-purple { color: var(--purple) !important; }
    
    /* Buttons */
    .btn-purple { 
        background-color: var(--purple); 
        color: white; 
        border: none; 
        box-shadow: 0 2px 6px 0 rgba(115, 103, 240, 0.4);
        transition: all 0.3s ease;
    }
    .btn-purple:hover { 
        background-color: var(--purple-dark); 
        color: white; 
        transform: translateY(-2px); 
        box-shadow: 0 4px 12px 0 rgba(115, 103, 240, 0.6);
    }

    /* Badges */
    .badge-purple { background-color: var(--purple); color: white; }
    .badge-light-purple { background-color: rgba(115, 103, 240, 0.12); color: var(--purple); }

    /* Cards */
    .rounded-lg { border-radius: 12px !important; }
    .shadow-lg { box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1) !important; }
    
    /* Table Styling */
    .table thead th { 
        border-bottom: none; 
        padding: 1rem 0.75rem;
        letter-spacing: 0.5px;
    }
    .table td { 
        vertical-align: middle; 
        padding: 1rem 0.75rem;
        border-top: 1px solid #f2f2f2;
    }

    /* Icon Circles */
    .bg-white-20 { background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; padding: 10px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }

    /* Button Action Icon */
    .btn-light-danger { background-color: rgba(234, 84, 85, 0.12); color: #EA5455; border: none; }
    .btn-light-danger:hover { background-color: #EA5455; color: white; transform: translateY(-2px); }

    /* Select2 Modernization */
    .select2-container .select2-selection--single { 
        height: 45px !important; 
        display: flex; 
        align-items: center; 
        border-radius: 8px; 
        border: 1px solid #ced4da; /* Default border matching BS */
        background-color: #f8f9fa; /* Match bg-light */
        border: none;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow { top: 9px; }
    .select2-dropdown { border: 0; box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1); border-radius: 8px; }

    /* Utilities */
    .ls-1 { letter-spacing: 1px; }
    .transition-hover { transition: all 0.2s ease; }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('#tableTahfidz').DataTable({
            "language": { "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Indonesian.json" },
            "pageLength": 10,
            "lengthMenu": [10, 25, 50, 100],
            "dom": '<"d-flex justify-content-between align-items-center mb-3"fl>rt<"d-flex justify-content-between align-items-center mt-3"ip>'
        });
        $('.select2').select2({ dropdownParent: $('#modalSetoran') });
        @if ($errors->any())
            $('#modalSetoran').modal('show');
        @endif
    });
    
    @if(session('success'))
        Swal.fire({
            icon: 'success', 
            title: 'Berhasil', 
            text: '{{ session('success') }}',
            confirmButtonColor: '#7367F0',
            timer: 3000
        });
    @endif
</script>
@stop