@extends('admin::layouts.admin')

@section('title', 'Manajemen Academy')

@section('content')
<div class="cms-page">
    {{-- Page Title --}}
    <h1 class="page-title-setting">Manajemen Academy</h1>

    {{-- Data Card --}}
    <div class="setting-card">
        {{-- Card Header with Gradient --}}
        <div class="setting-card-header">
            <div class="header-icon">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <span class="header-title">Data Video Academy</span>
        </div>

        {{-- Search and Add Section --}}
        <div class="setting-toolbar">
            <div class="search-section">
                <label class="search-label">Cari Data</label>
                <div class="search-input-wrapper">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="Cari video academy..." class="search-input" id="searchInput">
                </div>
            </div>
            <a href="{{ route('admin.academy.create') }}" class="btn-add-data">
                <i class="fas fa-plus"></i>
                Tambah Data
            </a>
        </div>

        {{-- Data Table --}}
        <div class="setting-table-wrapper">
            <table class="setting-table">
                <thead>
                    <tr>
                        <th>Thumbnail</th>
                        <th>Judul</th>
                        <th>Kategori</th>
                        <th>Level</th>
                        <th>Durasi</th>
                        <th>Views</th>
                        <th>Status</th>
                        <th>Order</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    @forelse($videos as $video)
                    <tr>
                        <td>
                            @if($video->thumbnail)
                                <img src="{{ asset('storage/' . $video->thumbnail) }}" alt="{{ $video->title }}" class="table-image">
                            @else
                                <div class="youtube-placeholder">
                                    <i class="fab fa-youtube"></i>
                                </div>
                            @endif
                        </td>
                        <td>
                            <strong>{{ $video->title }}</strong>
                            @if($video->youtube_video_id)
                                <br><small class="text-muted">ID: {{ $video->youtube_video_id }}</small>
                            @endif
                        </td>
                        <td>
                            <span class="badge badge-info">{{ ucfirst($video->category) }}</span>
                        </td>
                        <td>
                            <span class="badge badge-{{ $video->level == 'beginner' ? 'success' : ($video->level == 'intermediate' ? 'warning' : 'danger') }}">
                                {{ ucfirst($video->level) }}
                            </span>
                        </td>
                        <td>
                            @if($video->duration_minutes)
                                {{ $video->duration_minutes }} menit
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge badge-secondary">
                                <i class="fas fa-eye"></i> {{ $video->view_count ?? 0 }}
                            </span>
                        </td>
                        <td>
                            <span class="badge badge-{{ $video->status == 'published' ? 'success' : ($video->status == 'draft' ? 'secondary' : 'danger') }}">
                                {{ ucfirst($video->status) }}
                            </span>
                        </td>
                        <td>{{ $video->sort_order }}</td>
                        <td class="actions">
                            <a href="{{ route('admin.academy.edit', $video->id) }}" class="btn-action edit" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <button type="button" class="btn-action delete" onclick="confirmDelete({{ $video->id }}, '{{ $video->title }}')" title="Hapus">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center text-muted">Tidak ada data video academy</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div class="setting-pagination">
            <div class="showing-info">
                Showing {{ $videos->firstItem() ?? 0 }} to {{ $videos->lastItem() ?? 0 }} of {{ $videos->total() }} entries
            </div>
            <div class="pagination-wrapper">
                {{ $videos->links() }}
            </div>
        </div>
    </div>
</div>

{{-- Delete Form --}}
<form id="deleteForm" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

@endsection

@push('styles')
<style>
.youtube-placeholder {
    width: 80px;
    height: 45px;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.youtube-placeholder i {
    font-size: 1.5rem;
    color: white;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Search functionality
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        let searchTimeout;
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                const searchTerm = this.value.toLowerCase();
                const rows = document.querySelectorAll('#tableBody tr');
                
                rows.forEach(row => {
                    const text = row.textContent.toLowerCase();
                    row.style.display = text.includes(searchTerm) ? '' : 'none';
                });
            }, 300);
        });
    }
});

function confirmDelete(id, title) {
    Swal.fire({
        title: 'Hapus Video Academy?',
        html: `Apakah Anda yakin ingin menghapus video:<br><strong>${title}</strong>?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
        customClass: {
            popup: 'swal-popup',
            title: 'swal-title',
            htmlContainer: 'swal-text',
            confirmButton: 'swal-confirm',
            cancelButton: 'swal-cancel'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            const form = document.getElementById('deleteForm');
            form.action = `/admin/academy/${id}`;
            form.submit();
        }
    });
}
</script>
@endpush