@extends('adminlte::page')

@section('title', 'Bank Materi')

@section('plugins.Datatables', true)

@push('css')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
    /* =========================================
       THEME VARIABLES
       ========================================= */
    :root {
        --font-main: 'Plus Jakarta Sans', sans-serif;
        --color-bg: #F8FAFC;
        --color-card: #FFFFFF;
        --primary: #4F46E5;
        --text-dark: #0F172A;
        --text-muted: #64748B;
        --border-color: #E2E8F0;
        --radius: 12px;
        --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    }

    body {
        font-family: var(--font-main) !important;
        background-color: var(--color-bg);
        color: var(--text-dark);
    }

    .content-wrapper { background-color: var(--color-bg) !important; }

    /* =========================================
       COMPONENTS
       ========================================= */
    
    /* Stats Card */
    .stat-card {
        background: var(--color-card);
        border-radius: var(--radius);
        padding: 1.5rem;
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        transition: transform 0.2s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }
    .stat-card:hover { transform: translateY(-3px); }
    .stat-icon {
        width: 48px; height: 48px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.5rem; margin-right: 1rem;
    }
    .stat-info h6 { font-size: 0.85rem; color: var(--text-muted); margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    .stat-info h3 { font-size: 1.75rem; color: var(--text-dark); margin: 0; font-weight: 700; }

    /* Table Modernization */
    .card-modern {
        background: var(--color-card);
        border: none;
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
    }

    .table-modern { width: 100% !important; border-collapse: separate; border-spacing: 0; }
    .table-modern thead th {
        background-color: #F8FAFC;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 1.2rem 1.5rem;
        border-bottom: 1px solid var(--border-color);
        font-weight: 700;
    }
    .table-modern tbody td {
        padding: 1.2rem 1.5rem;
        vertical-align: middle;
        border-bottom: 1px solid #F1F5F9;
        font-size: 0.95rem;
    }
    .table-modern tr:last-child td { border-bottom: none; }
    .table-modern tr:hover td { background-color: #FAFAFA; }

    /* Thumbnail & Icons */
    .media-preview {
        width: 80px; height: 55px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        background: #F1F5F9;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid var(--border-color);
    }
    .media-preview img { width: 100%; height: 100%; object-fit: cover; }
    .icon-preview { font-size: 1.8rem; }
    
    /* Badges */
    .badge-soft { padding: 0.35rem 0.8rem; border-radius: 6px; font-weight: 600; font-size: 0.75rem; }
    .badge-video { background: #FEF2F2; color: #EF4444; }
    .badge-doc { background: #EFF6FF; color: #3B82F6; }
    .badge-pdf { background: #FFF7ED; color: #F97316; }
    
    .status-active { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
    .status-draft { background: #F3F4F6; color: #64748B; border: 1px solid #E2E8F0; }

    /* Text Styling */
    .title-link { color: var(--text-dark); font-weight: 700; text-decoration: none; font-size: 1rem; display: block; margin-bottom: 4px; }
    .title-link:hover { color: var(--primary); }
    .meta-info { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 10px; }
    .meta-divider { width: 4px; height: 4px; background: #CBD5E1; border-radius: 50%; }

    /* Action Buttons */
    .btn-icon {
        width: 32px; height: 32px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 8px;
        color: var(--text-muted);
        transition: all 0.2s;
        background: transparent;
        border: 1px solid transparent;
    }
    .btn-icon:hover { background: #F1F5F9; color: var(--primary); border-color: var(--border-color); }
    .btn-icon.delete:hover { background: #FEF2F2; color: #EF4444; border-color: #FECACA; }

    /* DataTable Search Styling */
    div.dataTables_wrapper div.dataTables_filter input {
        border-radius: 8px;
        border: 1px solid var(--border-color);
        padding: 6px 12px;
        outline: none;
        font-size: 0.9rem;
    }
    div.dataTables_wrapper div.dataTables_filter input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }
</style>
@endpush

@section('content')
<div class="container-fluid pt-4 pb-5">

    {{-- HEADER SECTION --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4">
        <div>
            <h1 class="font-weight-bold text-dark mb-1" style="font-size: 1.75rem;">Bank Materi</h1>
            <p class="text-muted mb-0">Kelola bahan ajar digital Anda di satu tempat.</p>
        </div>
        <div class="mt-3 mt-md-0">
            <a href="{{ route('elearning.materi.create') }}" class="btn btn-primary shadow-sm px-4 py-2" style="border-radius: 10px; font-weight: 600;">
                <i class="fas fa-plus mr-2"></i> Upload Materi
            </a>
        </div>
    </div>

    {{-- STATS SECTION --}}
    <div class="row mb-4">
        <div class="col-md-4 col-sm-12">
            <div class="stat-card">
                <div class="stat-icon bg-indigo-light text-indigo" style="background: #EEF2FF; color: #4F46E5;">
                    <i class="fas fa-layer-group"></i>
                </div>
                <div class="stat-info">
                    <h6>Total Materi</h6>
                    <h3>{{ $materis->count() }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-12">
            <div class="stat-card">
                <div class="stat-icon bg-red-light text-danger" style="background: #FEF2F2; color: #EF4444;">
                    <i class="fab fa-youtube"></i>
                </div>
                <div class="stat-info">
                    <h6>Video / Youtube</h6>
                    <h3>{{ $materis->where('type', 'youtube')->count() }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-12">
            <div class="stat-card">
                <div class="stat-icon bg-blue-light text-primary" style="background: #EFF6FF; color: #3B82F6;">
                    <i class="fas fa-file-alt"></i>
                </div>
                <div class="stat-info">
                    <h6>Dokumen (PDF/Doc)</h6>
                    <h3>{{ $materis->whereIn('type', ['pdf', 'file'])->count() }}</h3>
                </div>
            </div>
        </div>
    </div>

    {{-- TABLE CARD --}}
    <div class="card-modern">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="table-materi" class="table table-modern w-100">
                    <thead>
                        <tr>
                            <th width="5%">#</th>
                            <th width="45%">Konten Materi</th>
                            <th width="20%">Target Kelas</th>
                            <th width="15%">Status</th>
                            <th width="15%" class="text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($materis as $index => $materi)
                        <tr>
                            <td class="text-center text-muted font-weight-bold">{{ $index + 1 }}</td>
                            
                            {{-- KONTEN MATERI (Rich Cell) --}}
                            <td>
                                <div class="d-flex align-items-center">
                                    {{-- Thumbnail --}}
                                    <div class="media-preview mr-3 flex-shrink-0">
                                        @if($materi->type == 'youtube')
                                            <img src="{{ $materi->youtube_thumbnail }}" alt="YT">
                                            <div class="position-absolute" style="background: rgba(0,0,0,0.5); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                                                <i class="fas fa-play text-white" style="font-size: 1rem;"></i>
                                            </div>
                                        @elseif($materi->type == 'pdf')
                                            <i class="fas fa-file-pdf text-danger icon-preview"></i>
                                        @else
                                            <i class="fas fa-file-word text-primary icon-preview"></i>
                                        @endif
                                    </div>

                                    {{-- Detail --}}
                                    <div>
                                        @php
                                            $badgeClass = match($materi->type) {
                                                'youtube' => 'badge-video',
                                                'pdf' => 'badge-pdf',
                                                default => 'badge-doc'
                                            };
                                            $typeLabel = match($materi->type) {
                                                'youtube' => 'Video Pembelajaran',
                                                'pdf' => 'E-Book / PDF',
                                                default => 'Dokumen'
                                            };
                                        @endphp
                                        
                                        <span class="badge-soft {{ $badgeClass }} mb-1 d-inline-block">
                                            {{ $typeLabel }}
                                        </span>
                                        
                                        <a href="{{ route('elearning.materi.show', $materi->id) }}" class="title-link text-truncate" style="max-width: 350px;">
                                            {{ $materi->title }}
                                        </a>
                                        
                                        <div class="meta-info">
                                            <span><i class="fas fa-book mr-1"></i> {{ $materi->subject->nama_mapel ?? 'Umum' }}</span>
                                            <span class="meta-divider"></span>
                                            <span>{{ $materi->created_at->diffForHumans() }}</span>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            {{-- TARGET KELAS --}}
                            <td>
                                @if($materi->classLevel)
                                    <div class="d-flex align-items-center">
                                        <div class="bg-light text-dark font-weight-bold rounded-circle d-flex align-items-center justify-content-center mr-2" style="width: 32px; height: 32px; font-size: 0.8rem;">
                                            {{ substr($materi->classLevel->nama_kelas, 0, 2) }}
                                        </div>
                                        <span class="text-dark font-weight-500">{{ $materi->classLevel->nama_kelas }}</span>
                                    </div>
                                @else
                                    <span class="badge badge-light border px-2">Semua Kelas</span>
                                @endif
                            </td>

                            {{-- STATUS --}}
                            <td>
                                @if($materi->is_active)
                                    <span class="badge-soft status-active">
                                        <i class="fas fa-check-circle mr-1"></i> Dipublikasikan
                                    </span>
                                @else
                                    <span class="badge-soft status-draft">
                                        <i class="fas fa-archive mr-1"></i> Draft
                                    </span>
                                @endif
                            </td>

                            {{-- AKSI --}}
                            <td class="text-right">
                                <a href="{{ route('elearning.materi.show', $materi->id) }}" class="btn-icon" title="Preview">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                                <a href="{{ route('elearning.materi.edit', $materi->id) }}" class="btn-icon" title="Edit">
                                    <i class="far fa-edit"></i>
                                </a>
                                <button type="button" class="btn-icon delete btn-delete" data-id="{{ $materi->id }}" data-title="{{ $materi->title }}" title="Hapus">
                                    <i class="far fa-trash-alt"></i>
                                </button>

                                <form id="delete-form-{{ $materi->id }}" action="{{ route('elearning.materi.destroy', $materi->id) }}" method="POST" style="display: none;">
                                    @csrf @method('DELETE')
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @if($materis->isEmpty())
        <div class="text-center py-5 mt-4">
            <img src="https://cdni.iconscout.com/illustration/premium/thumb/empty-state-concept-illustration-download-in-svg-png-gif-file-formats--no-data-search-result-results-found-user-interface-pack-design-development-illustrations-6288226.png" style="width: 150px; opacity: 0.8;">
            <h5 class="font-weight-bold text-dark mt-3">Belum Ada Materi</h5>
            <p class="text-muted">Mulai bagikan ilmu dengan mengupload materi pertama Anda.</p>
        </div>
    @endif

</div>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function () {
        // Konfigurasi DataTables Modern
        $('#table-materi').DataTable({
            "paging": true,
            "lengthChange": false, // Hilangkan opsi "Show 10 entries" agar lebih bersih
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "pageLength": 10,
            "language": {
                "search": "", 
                "searchPlaceholder": "Cari judul materi...",
                "paginate": {
                    "previous": "<i class='fas fa-chevron-left'></i>",
                    "next": "<i class='fas fa-chevron-right'></i>"
                }
            },
            "dom": '<"d-flex justify-content-between align-items-center p-3"f>t<"d-flex justify-content-between align-items-center p-3"ip>',
            "columnDefs": [
                { "orderable": false, "targets": [0, 4] }
            ]
        });

        // Delete Logic
        $(document).on('click', '.btn-delete', function(e) {
            e.preventDefault();
            let id = $(this).data('id');
            let title = $(this).data('title');
            
            Swal.fire({
                title: 'Hapus Materi?',
                text: `"${title}" akan dihapus permanen.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#EF4444',
                cancelButtonColor: '#64748B',
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                customClass: {
                    popup: 'rounded-xl border-0',
                    confirmButton: 'px-4 py-2 rounded-lg',
                    cancelButton: 'px-4 py-2 rounded-lg'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#delete-form-' + id).submit();
                }
            });
        });
    });
</script>
@stop