@extends('admin.layouts.master')
@section('title', 'Assign Resources')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />

    <style>
        :root {
            --primary: #4f46e5;
            --bg-body: #f8fafc;
            --border: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;
        }

        body {
            background-color: var(--bg-body);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
        }

        /* --- Cards --- */
        .sidebar-card,
        .main-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .sidebar-card {
            padding: 1.5rem;
        }

        /* Select2 */
        .select2-container--bootstrap-5 .select2-selection {
            border-color: var(--border) !important;
            border-radius: 8px !important;
            min-height: 48px !important;
            padding: 0.5rem !important;
        }

        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
            white-space: normal !important;
            word-wrap: break-word !important;
            line-height: 1.4 !important;
            color: var(--text-main) !important;
        }

        /* Main Content */
        .content-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 12px 12px 0 0;
        }

        .material-grid {
            padding: 1.5rem;
            overflow-y: auto;
            flex-grow: 1;
            background: #fcfcfd;
            max-height: calc(100vh - 240px);
        }

        /* Material Card */
        .material-label {
            display: block;
            position: relative;
            cursor: pointer;
            height: 100%;
        }

        .material-checkbox {
            position: absolute;
            opacity: 0;
        }

        .material-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1rem;
            transition: all 0.2s;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .material-label:hover .material-card {
            transform: translateY(-3px);
            border-color: #cbd5e1;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .material-checkbox:checked+.material-card {
            border: 1.5px solid var(--primary);
            background: #f5f8ff;
        }

        .material-checkbox:checked+.material-card::after {
            content: "\eb7b";
            font-family: remixicon;
            position: absolute;
            top: 8px;
            right: 8px;
            background: var(--primary);
            color: #fff;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        /* Icons */
        .type-icon {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin-bottom: 0.75rem;
            flex-shrink: 0;
        }

        .bg-pdf {
            background: #fee2e2;
            color: #ef4444;
        }

        .bg-video {
            background: #e0e7ff;
            color: #4f46e5;
        }

        .bg-link {
            background: #f0f9ff;
            color: #0ea5e9;
        }

        /* Search */
        .search-box {
            position: relative;
            width: 300px;
        }

        .search-box i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
        }

        .search-box input {
            padding-left: 2.2rem;
            border-radius: 8px;
            border: 1px solid var(--border);
            height: 40px;
            font-size: 0.9rem;
            width: 100%;
            background: #f8fafc;
            transition: all 0.2s;
        }

        .search-box input:focus {
            background: #fff;
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px #e0e7ff;
        }

        /* Sticky Footer */
        .sticky-footer {
            background: #fff;
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 5;
            border-radius: 0 0 12px 12px;
        }

        .btn-primary-custom {
            background: var(--primary);
            color: #fff;
            border: none;
            padding: 0.6rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            transition: 0.2s;
        }

        .btn-primary-custom:hover {
            background: #4338ca;
            transform: translateY(-1px);
        }

        .btn-primary-custom:disabled {
            background: #9ca3af;
            cursor: not-allowed;
        }

        .loader-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.85);
            z-index: 20;
            display: none;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(2px);
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--text-muted);
            text-align: center;
            min-height: 400px;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid px-4 py-4" style="height: calc(100vh - 80px);">
        <div class="row h-100 g-4">

            {{-- 1. LEFT SIDEBAR (Course Select) --}}
            <div class="col-xl-3 col-lg-4 d-flex flex-column">
                <aside class="sidebar-card">
                    <h5 class="fw-bold text-dark mb-1">Assign Resources</h5>
                    <p class="small text-muted mb-4">Select a course to manage its learning materials.</p>

                    {{-- Select2 Dropdown --}}
                    <div class="mb-4">
                        <label class="form-label small fw-bold text-uppercase text-muted">Course</label>
                        <select id="courseSelect" class="form-select w-100">
                            <option></option>
                            @foreach ($courses as $course)
                                <option value="{{ $course->uuid }}">{{ $course->name }} ({{ $course->code }})</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Legend --}}
                    <div class="mt-auto pt-4 border-top">
                        <p class="small fw-bold text-muted mb-3 text-uppercase">Material Types</p>
                        <div class="d-flex align-items-center gap-3 mb-2">
                            <div class="type-icon bg-pdf" style="width:28px;height:28px;font-size:0.9rem;margin:0"><i
                                    class="ri-file-pdf-line"></i></div>
                            <span class="small text-dark fw-medium">PDF Documents</span>
                        </div>
                        <div class="d-flex align-items-center gap-3 mb-2">
                            <div class="type-icon bg-video" style="width:28px;height:28px;font-size:0.9rem;margin:0"><i
                                    class="ri-video-line"></i></div>
                            <span class="small text-dark fw-medium">Video Content</span>
                        </div>
                        <div class="d-flex align-items-center gap-3">
                            <div class="type-icon bg-link" style="width:28px;height:28px;font-size:0.9rem;margin:0"><i
                                    class="ri-link"></i></div>
                            <span class="small text-dark fw-medium">External Links</span>
                        </div>
                    </div>
                </aside>
            </div>

            {{-- 2. MAIN CONTENT (Grid) --}}
            <div class="col-xl-9 col-lg-8 d-flex flex-column">
                <main class="main-card position-relative">

                    {{-- Loader --}}
                    <div class="loader-overlay" id="loader">
                        <div class="spinner-border text-primary" role="status"></div>
                    </div>

                    {{-- Empty State --}}
                    <div id="initialState" class="empty-state">
                        <div class="bg-light rounded-circle p-4 mb-3 border">
                            <i class="ri-book-mark-line fs-1 text-primary"></i>
                        </div>
                        <h5 class="fw-bold text-dark">No Course Selected</h5>
                        <p class="small mb-0">Please select a course from the sidebar to begin assigning materials.</p>
                    </div>

                    {{-- Form Container --}}
                    <form id="assignForm" class="d-none h-100 d-flex flex-column">
                        @csrf
                        <input type="hidden" name="course_uuid" id="selectedCourseUuid">

                        {{-- Toolbar --}}
                        <div class="content-header">
                            <div>
                                <h5 class="fw-bold text-dark m-0">Library Materials</h5>
                                <p class="small text-muted m-0">Check the items you want to assign.</p>
                            </div>
                            <div class="search-box">
                                <i class="ri-search-2-line"></i>
                                <input type="text" id="searchMat" placeholder="Filter by title...">
                            </div>
                        </div>

                        {{-- Grid --}}
                        <div class="material-grid">
                            <div class="row g-3" id="materialContainer">
                                @foreach ($materials as $mat)
                                    <div class="col-xxl-3 col-xl-4 col-sm-6 mat-item"
                                        data-title="{{ strtolower($mat->title) }}">
                                        <label class="material-label">
                                            <input type="checkbox" name="materials[]" value="{{ $mat->id }}"
                                                class="material-checkbox">
                                            <div class="material-card">
                                                <div class="d-flex justify-content-between align-items-start w-100">
                                                    <div
                                                        class="type-icon {{ $mat->type == 'pdf' ? 'bg-pdf' : ($mat->type == 'video' ? 'bg-video' : 'bg-link') }}">
                                                        @if ($mat->type == 'pdf')
                                                            <i class="ri-file-pdf-2-fill"></i>
                                                        @elseif($mat->type == 'video')
                                                            <i class="ri-video-fill"></i>
                                                        @else
                                                            <i class="ri-link"></i>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="fw-bold text-dark mb-1 text-truncate"
                                                    title="{{ $mat->title }}">{{ $mat->title }}</div>
                                                <div
                                                    class="mt-auto d-flex justify-content-between align-items-center pt-2 border-top border-light">
                                                    <span class="small text-muted text-uppercase fw-bold"
                                                        style="font-size:0.65rem">{{ $mat->type }}</span>
                                                    @if ($mat->type == 'pdf')
                                                        <span class="small text-muted d-flex align-items-center gap-1"><i
                                                                class="ri-hard-drive-2-line"></i>
                                                            {{ $mat->file_size ?? 'N/A' }}</span>
                                                    @else
                                                        <span class="small text-muted d-flex align-items-center gap-1"><i
                                                                class="ri-external-link-line"></i> Link</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                @endforeach
                            </div>

                            {{-- No Search Results --}}
                            <div id="noResults" class="text-center py-5 d-none">
                                <div class="text-muted opacity-50 mb-2"><i class="ri-search-eye-line fs-1"></i></div>
                                <p class="text-muted small">No materials found matching your search.</p>
                            </div>
                        </div>

                        {{-- Sticky Footer --}}
                        <div class="sticky-footer">
                            <div class="text-muted small fw-medium">
                                <span class="badge bg-primary rounded-pill me-1" id="countBadge">0</span> materials selected
                            </div>
                            <button type="submit" class="btn-primary-custom shadow-sm" id="saveBtn">
                                <i class="ri-save-3-line me-1"></i> Save Assignments
                            </button>
                        </div>
                    </form>
                </main>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {

            // --- 1. Init Select2 ---
            $('#courseSelect').select2({
                theme: 'bootstrap-5',
                placeholder: "Select or search a course...",
                width: '100%',
                allowClear: true
            });

            // --- 2. Filter Logic ---
            $('#searchMat').on('keyup', function() {
                let val = $(this).val().toLowerCase();
                let hasVisible = false;

                $('.mat-item').each(function() {
                    let title = $(this).data('title');
                    if (title.indexOf(val) > -1) {
                        $(this).show();
                        hasVisible = true;
                    } else {
                        $(this).hide();
                    }
                });

                if (!hasVisible) $('#noResults').removeClass('d-none');
                else $('#noResults').addClass('d-none');
            });

            // --- 3. Update Count & Validation Visuals ---
            $(document).on('change', '.material-checkbox', function() {
                updateCount();
            });

            function updateCount() {
                let count = $('.material-checkbox:checked').length;
                $('#countBadge').text(count);
            }

            // --- 4. Course Selection Event ---
            $('#courseSelect').on('select2:select', function(e) {
                loadCourseData(e.params.data.id);
            });

            $('#courseSelect').on('select2:clear', function(e) {
                $('#assignForm').removeClass('d-flex').addClass('d-none');
                $('#initialState').removeClass('d-none');
            });

            // Load Data Function
            function loadCourseData(uuid) {
                let form = $('#assignForm');
                let initial = $('#initialState');
                let loader = $('#loader');

                initial.addClass('d-none');
                form.addClass('d-none').removeClass('d-flex');
                loader.css('display', 'flex');
                $('#selectedCourseUuid').val(uuid);

                $.ajax({
                    url: "{{ url('admin/resources/assign/fetch') }}/" + uuid,
                    type: 'GET',
                    success: function(res) {
                        $('.material-checkbox').prop('checked', false); // Reset all

                        if (res.assigned_ids && res.assigned_ids.length > 0) {
                            res.assigned_ids.forEach(id => {
                                $(`input[value="${id}"]`).prop('checked', true);
                            });
                        }
                        updateCount();
                        loader.fadeOut(200);
                        form.removeClass('d-none').addClass('d-flex');
                    },
                    error: function() {
                        loader.hide();
                        initial.removeClass('d-none');
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Could not fetch course data.'
                        });
                    }
                });
            }

            // --- 5. Save with Validation ---
            $('#assignForm').on('submit', function(e) {
                e.preventDefault();

                // Validation 1: Course Selected?
                if (!$('#selectedCourseUuid').val()) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Missing Info',
                        text: 'Please select a course first.'
                    });
                    return;
                }

                // Validation 2: At least one material? (Optional logic, remove if unassigning all is allowed)
                // If you want to allow unassigning all (count 0), remove this check.
                // let count = $('.material-checkbox:checked').length;
                // if(count === 0) {
                //    Swal.fire({ icon: 'warning', title: 'No Selection', text: 'Please select at least one material.' });
                //    return;
                // }

                let btn = $('#saveBtn');
                let orgText = btn.html();

                btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-2"></span> Saving...');

                $.ajax({
                    url: "{{ route('admin.resources.assign.store') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function(res) {
                        btn.prop('disabled', false).html(orgText);

                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                            didOpen: (toast) => {
                                toast.onmouseenter = Swal.stopTimer;
                                toast.onmouseleave = Swal.resumeTimer;
                            }
                        });
                        Toast.fire({
                            icon: 'success',
                            title: 'Assignments updated successfully'
                        });
                    },
                    error: function(err) {
                        btn.prop('disabled', false).html(orgText);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong.'
                        });
                    }
                });
            });
        });
    </script>
@endpush