@extends('admin.layouts.master')
@section('title', 'Study Materials')

@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">
    <style>
        :root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --bg-body: #f8fafc;
            --border-color: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --danger: #ef4444;
        }

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

        /* --- Card & Layout --- */
        .saas-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .card-header-custom {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
        }

        .header-title h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-main);
            margin: 0;
        }

        .header-title p {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin: 2px 0 0 0;
        }

        /* --- Toolbar --- */
        .toolbar-container {
            padding: 1rem 1.5rem;
            background: #fff;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .search-wrapper {
            position: relative;
            width: 300px;
        }

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

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

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

        /* --- Table --- */
        .table-responsive {
            overflow-x: auto;
        }

        .saas-table {
            width: 100%;
            border-collapse: collapse;
        }

        .saas-table th {
            background: #f8fafc;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            font-weight: 700;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            text-align: left;
        }

        .saas-table td {
            padding: 1rem 1.5rem;
            vertical-align: middle;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.9rem;
            color: var(--text-main);
            transition: background 0.15s;
        }

        .saas-table tr:hover td {
            background-color: #f8fafc;
        }

        /* --- Icons & Badges --- */
        .resource-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .icon-pdf {
            background: #fef2f2;
            color: #ef4444;
            border: 1px solid #fee2e2;
        }

        .icon-video {
            background: #eef2ff;
            color: #4f46e5;
            border: 1px solid #e0e7ff;
        }

        .icon-link {
            background: #f0f9ff;
            color: #0ea5e9;
            border: 1px solid #e0f2fe;
        }

        .badge-format {
            font-size: 0.7rem;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .format-pdf {
            background: #fef2f2;
            color: #b91c1c;
            border: 1px solid #fca5a5;
        }

        .format-video {
            background: #eef2ff;
            color: #3730a3;
            border: 1px solid #c7d2fe;
        }

        .format-link {
            background: #f0f9ff;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }

        .meta-text {
            font-size: 0.8rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* --- Buttons --- */
        .btn-primary-custom {
            background-color: var(--primary);
            color: white;
            border-radius: 8px;
            padding: 0.6rem 1.2rem;
            font-weight: 600;
            border: none;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            transition: 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
        }

        .btn-primary-custom:hover {
            background-color: var(--primary-hover);
            color: white;
            transform: translateY(-1px);
        }

        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: 0.2s;
            background: transparent;
            border: 1px solid transparent;
            cursor: pointer;
        }

        .action-btn:hover {
            background: #fff;
            border-color: var(--border-color);
            color: var(--primary);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .action-btn.delete:hover {
            color: #ef4444;
            border-color: #fecaca;
            background: #fef2f2;
        }

        /* --- Footer Pagination --- */
        .pagination-container {
            padding: 1rem 1.5rem;
            background: #fff;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* --- Modal & Upload --- */
        .modal-content {
            border-radius: 16px;
            border: none;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            padding: 1.5rem 1.5rem 0.5rem;
            border: none;
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-footer {
            padding: 1.5rem;
            background: #f8fafc;
            border-top: 1px solid var(--border-color);
            border-radius: 0 0 16px 16px;
        }

        .upload-zone {
            border: 2px dashed var(--border-color);
            border-radius: 12px;
            padding: 2rem 1rem;
            text-align: center;
            background: #fafafa;
            transition: 0.2s;
            position: relative;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 160px;
        }

        .upload-zone:hover {
            border-color: var(--primary);
            background: #eef2ff;
        }

        .upload-zone input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 5;
        }

        /* Validation */
        .shake-field {
            animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
            border-color: var(--danger) !important;
            background-color: #fef2f2;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            20%,
            60% {
                transform: translateX(-4px);
            }

            40%,
            80% {
                transform: translateX(4px);
            }
        }

        .error-msg {
            color: var(--danger);
            font-size: 0.75rem;
            margin-top: 5px;
            font-weight: 600;
            display: none;
        }
    </style>
@endpush

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

        {{-- FULL WIDTH CARD --}}
        <div class="saas-card h-100">

            {{-- Header --}}
            <div class="card-header-custom">
                <div class="header-title">
                    <h4>Resource Library</h4>
                    <p>Manage study materials, PDFs, and external links.</p>
                </div>
                <button class="btn-primary-custom" onclick="openModal('create')">
                    <i class="ri-add-line fs-18"></i> <span>Add Material</span>
                </button>
            </div>

            @livewire('admin.resource.resource-manager')

        </div>
    </div>

    {{-- Modal (Same as before, abbreviated for brevity) --}}
    <div class="modal fade" id="resourceModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content" id="resourceForm" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="resource_id">
                <input type="hidden" id="method_spoof" name="_method" value="POST">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold text-dark" id="modalTitle">Upload Material</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    {{-- Form Fields (Same as provided previously) --}}
                    <div class="mb-3">
                        <label class="form-label text-muted small text-uppercase fw-bold">Title <span
                                class="text-danger">*</span></label>
                        <input type="text" name="title" id="title" class="form-control"
                            placeholder="e.g. Navigation Guide">
                        <div class="error-msg" id="error-title">Required</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small text-uppercase fw-bold">Type</label>
                        <select name="type" class="form-select" id="typeSelect">
                            <option value="pdf">📄 PDF Document</option>
                            <option value="video">🎥 Video Link</option>
                            <option value="link">🔗 Website Link</option>
                        </select>
                    </div>
                    <div class="mb-3" id="fileGroup">
                        <label class="form-label text-muted small text-uppercase fw-bold">File <span class="text-danger"
                                id="fileReq">*</span></label>
                        <div class="upload-zone" id="uploadZone">
                            <input type="file" name="file" id="fileInput" accept="application/pdf">
                            <i class="ri-upload-cloud-2-line upload-icon"></i>
                            <span class="fw-bold text-dark">Click to upload PDF</span>
                            <span class="text-primary small fw-bold mt-2 d-none" id="fileNameDisplay"></span>
                        </div>
                        <div class="error-msg" id="error-file"></div>
                        <div id="currentFileDisplay"
                            class="alert alert-success mt-2 py-1 px-2 d-flex align-items-center d-none small"><i
                                class="ri-check-line me-2"></i> File uploaded.</div>
                    </div>
                    <div class="mb-3 d-none" id="urlGroup">
                        <label class="form-label text-muted small text-uppercase fw-bold">URL <span
                                class="text-danger">*</span></label>
                        <input type="url" name="url" id="urlInput" class="form-control" placeholder="https://...">
                        <div class="error-msg" id="error-url">Invalid URL</div>
                    </div>
                    <div class="d-flex justify-content-between p-3 bg-light rounded border">
                        <span class="fw-bold fs-6 text-dark">Allow Download</span>
                        <div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox"
                                name="is_downloadable" id="is_downloadable" checked></div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-light border px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn-primary-custom px-4" id="saveBtn">Save</button>
                </div>
            </form>
        </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>
        const modalEl = document.getElementById('resourceModal');
        const modal = new bootstrap.Modal(modalEl);

        // --- 1. MODAL LOGIC ---
        window.openModal = function(mode, data = null) {
            // Reset Form & Errors
            $('#resourceForm')[0].reset();
            $('.is-invalid').removeClass('is-invalid'); // Remove red borders
            $('.shake-field').removeClass('shake-field'); // Remove animations
            $('.error-msg').hide(); // Hide messages

            $('#currentFileDisplay').addClass('d-none');
            $('#fileNameDisplay').addClass('d-none');
            $('.upload-zone').css('border-color', '#e2e8f0'); // Reset border color

            if (mode === 'create') {
                $('#modalTitle').text('Upload New Material');
                $('#saveBtn').text('Upload Resource');
                $('#resource_id').val('');
                $('#method_spoof').val('POST');
                $('#fileReq').show();
                toggleInputs('pdf');
            } else {
                $('#modalTitle').text('Edit Material');
                $('#saveBtn').text('Update Resource');
                $('#resource_id').val(data.id);
                $('#method_spoof').val('PUT');

                $('#title').val(data.title);
                $('#typeSelect').val(data.type);
                $('#is_downloadable').prop('checked', data.is_downloadable);

                toggleInputs(data.type);

                if (data.type === 'pdf') {
                    $('#fileReq').hide();
                    if (data.file_path) $('#currentFileDisplay').removeClass('d-none');
                } else {
                    $('#urlInput').val(data.url);
                }
            }
            modal.show();
        }

        // --- 2. DYNAMIC INPUTS ---
        function toggleInputs(type) {
            // Clear errors when switching types
            $('.is-invalid').removeClass('is-invalid');
            $('.error-msg').hide();

            if (type === 'pdf') {
                $('#fileGroup').fadeIn(200).removeClass('d-none');
                $('#urlGroup').hide().addClass('d-none');
            } else {
                $('#fileGroup').hide().addClass('d-none');
                $('#urlGroup').fadeIn(200).removeClass('d-none');
            }
        }

        $('#typeSelect').change(function() {
            toggleInputs($(this).val());
        });

        // --- 3. AUTO-CLEAN VALIDATION ON INPUT ---
        // This is the fix: Remove error styles immediately when user types/changes input
        $('input, select').on('input change', function() {
            $(this).removeClass('is-invalid shake-field');
            // Find the specific error message for this input
            if ($(this).attr('id') === 'title') $('#error-title').hide();
            if ($(this).attr('id') === 'urlInput') $('#error-url').hide();
        });

        // --- 4. FILE HANDLING ---
        $('#fileInput').change(function() {
            const file = this.files[0];
            const zone = $('#uploadZone');

            // Clear previous file errors
            zone.removeClass('is-invalid shake-field');
            $('#error-file').hide();

            if (file) {
                $('#fileNameDisplay').text(file.name).removeClass('d-none');

                if (file.type !== 'application/pdf') {
                    showError(zone, $('#error-file'), "Only PDF files allowed.");
                    this.value = '';
                    $('#fileNameDisplay').addClass('d-none');
                } else {
                    // Success State
                    zone.css('border-color', 'var(--primary)');
                }
            }
        });

        // Helper to show errors
        function showError(el, msgEl, text) {
            el.addClass('is-invalid shake-field'); // Add Red Border & Shake
            msgEl.text(text).slideDown();
            // Remove shake animation after 500ms but keep red border
            setTimeout(() => el.removeClass('shake-field'), 500);
        }

        // --- 5. AJAX SUBMIT ---
        $('#resourceForm').on('submit', function(e) {
            e.preventDefault();

            // Reset Errors before validating
            $('.is-invalid').removeClass('is-invalid');
            $('.error-msg').hide();

            let isValid = true;
            let id = $('#resource_id').val();
            let isEdit = !!id;

            // Title Check
            if (!$('#title').val().trim()) {
                showError($('#title'), $('#error-title'), "Title is required.");
                isValid = false;
            }

            let type = $('#typeSelect').val();

            // PDF Check
            if (type === 'pdf') {
                if (!isEdit && $('#fileInput')[0].files.length === 0) {
                    showError($('#uploadZone'), $('#error-file'), "Please upload a PDF.");
                    isValid = false;
                }
            }
            // URL Check
            else {
                let url = $('#urlInput').val();
                if (!url.trim()) {
                    showError($('#urlInput'), $('#error-url'), "Enter a valid URL.");
                    isValid = false;
                }
            }

            if (!isValid) return;

            let formData = new FormData(this);
            let url = isEdit ? "{{ route('admin.resources.update', ':id') }}".replace(':id', id) :
                "{{ route('admin.resources.store') }}";

            let btn = $('#saveBtn');
            let orgText = btn.text();
            btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Saving...');

            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(res) {
                    modal.hide();
                    Livewire.dispatch('refresh-resource-table');
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: 'Resource saved successfully.',
                        confirmButtonColor: '#4f46e5',
                        timer: 1500,
                        showConfirmButton: false
                    });
                    btn.prop('disabled', false).text(orgText);
                },
                error: function(err) {
                    btn.prop('disabled', false).text(orgText);

                    // Handle Backend Validation Errors
                    if (err.status === 422) {
                        let errors = err.responseJSON.errors;
                        if (errors.title) showError($('#title'), $('#error-title'), errors.title[0]);
                        if (errors.file) showError($('#uploadZone'), $('#error-file'), errors.file[0]);
                        if (errors.url) showError($('#urlInput'), $('#error-url'), errors.url[0]);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong.'
                        });
                    }
                }
            });
        });

        // --- 6. DELETE ---
        window.confirmDelete = function(id) {
            Swal.fire({
                title: 'Delete Resource?',
                text: "Cannot be undone.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                confirmButtonText: 'Delete'
            }).then((result) => {
                if (result.isConfirmed) {
                    Livewire.dispatch('delete-resource', {
                        id: id
                    });
                }
            });
        }

        // --- 7. LISTENERS ---
        document.addEventListener('livewire:initialized', () => {
            Livewire.on('swal:success', (data) => {
                Swal.fire({
                    icon: 'success',
                    title: data.title,
                    text: data.text,
                    timer: 1500,
                    showConfirmButton: false
                });
            });
        });
    </script>
@endpush