@extends('admin.layouts.master')

@section('title', 'Course Categories')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        :root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --bg-body: #f8fafc;
            --border: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --danger: #ef4444;
        }

        /* --- SaaS Table Styles --- */
        .saas-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .card-toolbar {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .search-box {
            position: relative;
            width: 100%;
            max-width: 300px;
        }

        .search-box i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
        }

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

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

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

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

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

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

        .cat-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 1.2rem;
            flex-shrink: 0;
            overflow: hidden;
            border: 1px solid var(--border);
        }

        .cat-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .status-badge {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .status-active {
            background: #ecfdf5;
            color: #166534;
            border: 1px solid #d1fae5;
        }

        .status-inactive {
            background: #fef2f2;
            color: #991b1b;
            border: 1px solid #fee2e2;
        }

        .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
        }

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

        .action-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: #f5f3ff;
        }

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

        /* --- Professional Modal Styles --- */
        .modal-content {
            border-radius: 16px;
            border: none;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .modal-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            background: #fff;
        }

        .modal-body {
            padding: 1.5rem;
            background: #fff;
        }

        /* Clean white background */
        .modal-footer {
            padding: 1rem 1.5rem;
            background: #f8fafc;
            border-top: 1px solid var(--border);
        }

        .modal-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #334155;
            margin-bottom: 0.4rem;
        }

        .modal-input {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.65rem 1rem;
            font-size: 0.925rem;
            width: 100%;
            transition: all 0.2s;
            background: #fff;
        }

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

        .modal-input[readonly] {
            background-color: #f8fafc;
            color: #64748b;
        }

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

        @keyframes shake {

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

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

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

        .error-msg {
            color: #ef4444;
            font-size: 0.75rem;
            margin-top: 4px;
            display: none;
            font-weight: 600;
        }

        .is-invalid {
            border-color: #ef4444 !important;
            background-image: none !important;
        }

        /* Image Upload */
        .modal-upload-zone {
            border: 2px dashed var(--border);
            border-radius: 10px;
            padding: 1.5rem;
            text-align: center;
            cursor: pointer;
            background: #f8fafc;
            transition: 0.2s;
            position: relative;
            overflow: hidden;
            height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

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

        #previewImg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
            display: none;
        }
    </style>
@endpush

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

        {{-- Header --}}
        <div class="d-flex align-items-center justify-content-between mb-4">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-1">
                        <li class="breadcrumb-item"><a href="#" class="text-muted text-decoration-none">Academic</a></li>
                        <li class="breadcrumb-item active fw-medium text-primary">Categories</li>
                    </ol>
                </nav>
                <h2 class="fw-bold text-dark m-0">Category Manager</h2>
            </div>
            <button class="btn btn-primary px-4 py-2 d-flex align-items-center gap-2 shadow-sm" style="border-radius: 10px;"
                onclick="openModal('create')">
                <i class="ri-add-line fs-18"></i> New Category
            </button>
        </div>

        {{-- Livewire Component --}}
        @livewire('admin.course.category-manager')
    </div>

    {{-- UNIVERSAL CENTERED MODAL --}}
    <div class="modal fade" id="categoryModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="categoryForm" enctype="multipart/form-data" novalidate>
                    @csrf
                    <input type="hidden" id="category_id" name="id">

                    <div class="modal-header">
                        <h5 class="modal-title fw-bold text-dark" id="modalTitle">New Category</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        {{-- Name --}}
                        <div class="mb-3">
                            <label class="modal-label">Category Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="name" class="modal-input"
                                placeholder="e.g. Marine Engineering">
                            <div class="error-msg" id="nameError">Category name is required.</div>
                        </div>

                        {{-- Slug --}}
                        <div class="mb-3">
                            <label class="modal-label">Slug</label>
                            <input type="text" name="slug" id="slug" class="modal-input" readonly>
                        </div>

                        {{-- Parent --}}
                        <div class="mb-3">
                            <label class="modal-label">Parent Category</label>
                            <select name="parent_id" id="parent_id" class="modal-input form-select">
                                <option value="">No Parent (Top Level)</option>
                                {{-- Populated via JS --}}
                            </select>
                        </div>

                        {{-- Image --}}
                        <div class="mb-3">
                            <label class="modal-label">Cover Image</label>
                            <div class="modal-upload-zone" id="dropArea">
                                <input type="file" name="cover_image" id="cover_image" accept="image/*"
                                    onchange="previewFile(this)">
                                <div id="uploadPlaceholder">
                                    <div class="mb-2"><i class="ri-image-add-line fs-2 text-primary opacity-50"></i></div>
                                    <p class="mb-0 fs-13 fw-medium text-dark">Upload Image</p>
                                    <span class="text-muted text-xs">JPG, PNG (Max 2MB)</span>
                                </div>
                                <img id="previewImg" src="">
                            </div>
                        </div>

                        {{-- Status Switch --}}
                        <div class="p-3 bg-light border rounded-3 d-flex align-items-center justify-content-between">
                            <div>
                                <span class="d-block fw-bold text-dark fs-14">Active Status</span>
                                <span class="d-block text-muted text-xs">Visible on frontend</span>
                            </div>
                            <div class="form-check form-switch m-0">
                                <input class="form-check-input" type="checkbox" name="is_active" id="is_active" checked
                                    style="width: 2.5em; height: 1.5em; cursor: pointer;">
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-white border fw-medium px-4"
                            data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary fw-bold px-4 shadow-sm" id="saveBtn">Save
                            Category</button>
                    </div>
                </form>
            </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>
        let isEditMode = false;
        let parents = @json($parents ?? []);

        // --- 1. Populate Dropdown ---
        function populateParents() {
            let options = '<option value="">No Parent (Top Level)</option>';
            parents.forEach(p => {
                options += `<option value="${p.id}">${p.name}</option>`;
            });
            $('#parent_id').html(options);
        }

        // --- 2. Open Modal ---
        window.openCanvas = function(mode, data = null) {
            openModal(mode, data);
        }

        function openModal(mode, data = null) {
            isEditMode = (mode === 'edit');
            $('#categoryForm')[0].reset();
            resetValidation();
            $('#previewImg').hide();
            $('#uploadPlaceholder').show();
            populateParents();

            const modal = new bootstrap.Modal(document.getElementById('categoryModal'));

            if (isEditMode && data) {
                $('#modalTitle').text('Edit Category');
                $('#category_id').val(data.uuid);
                $('#name').val(data.name);
                $('#slug').val(data.slug);
                $('#parent_id').val(data.parent_id);
                $('#is_active').prop('checked', data.is_active);

                if (data.cover_image_url) {
                    $('#previewImg').attr('src', data.cover_image_url).show();
                    $('#uploadPlaceholder').hide();
                }
                $('#saveBtn').text('Update Changes');
            } else {
                $('#modalTitle').text('Create New Category');
                $('#category_id').val('');
                $('#saveBtn').text('Create Category');
            }
            modal.show();
        }

        // --- 3. Validation Helpers ---
        $('#name').on('input', function() {
            let slug = $(this).val().toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(
                /^-+|-+$/g, '');
            $('#slug').val(slug);
            $(this).removeClass('shake-field is-invalid');
            $('#nameError').hide();
        });

        window.previewFile = function(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#previewImg').attr('src', e.target.result).show();
                    $('#uploadPlaceholder').hide();
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        function resetValidation() {
            $('.shake-field').removeClass('shake-field is-invalid');
            $('.error-msg').hide();
        }

        // --- 4. AJAX SUBMIT (Create & Update) ---
        $('#categoryForm').on('submit', function(e) {
            e.preventDefault();
            resetValidation();

            let isValid = true;
            if (!$('#name').val().trim()) {
                $('#name').addClass('shake-field is-invalid');
                $('#nameError').text('Category Name is required').show();
                isValid = false;
            }
            if (!isValid) return;

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

            let formData = new FormData(this);
            let url = isEditMode ? "{{ route('admin.categories.update', ':id') }}".replace(':id', $('#category_id')
                    .val()) :
                "{{ route('admin.categories.store') }}";
            if (isEditMode) formData.append('_method', 'PUT');

            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(res) {
                    // 1. Hide Modal
                    bootstrap.Modal.getInstance(document.getElementById('categoryModal')).hide();

                    // 2. CRITICAL: Refresh Livewire Table
                    Livewire.dispatch('refresh-table');

                    // 3. Show Success Alert
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: res.message,
                        confirmButtonColor: '#4f46e5',
                        timer: 1500,
                        showConfirmButton: false
                    });
                    btn.text(originalText).prop('disabled', false);
                },
                error: function(err) {
                    btn.text(originalText).prop('disabled', false);
                    if (err.status === 422) {
                        let errors = err.responseJSON.errors;
                        if (errors.name) {
                            $('#name').addClass('shake-field is-invalid');
                            $('#nameError').text(errors.name[0]).show();
                        }
                        if (errors.slug) {
                            $('#name').addClass('shake-field is-invalid');
                            $('#nameError').text('Category name already taken.').show();
                        }
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong.'
                        });
                    }
                }
            });
        });

        function confirmDelete(id) {
            Swal.fire({
                title: 'Delete Category?',
                text: "This cannot be undone!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#f8fafc',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: '<span style="color:#333">Cancel</span>'
            }).then((result) => {
                if (result.isConfirmed) {
                    Livewire.dispatch('delete-category', {
                        id: id
                    });
                }
            });
        }
        document.addEventListener('livewire:initialized', () => {
            Livewire.on('swal:success', (data) => {
                Swal.fire({
                    icon: 'success',
                    title: data.title,
                    text: data.text,
                    confirmButtonColor: '#4f46e5',
                    timer: 1500,
                    showConfirmButton: false
                });
            });

            Livewire.on('swal:error', (data) => {
                Swal.fire({
                    icon: 'error',
                    title: data.title,
                    text: data.text,
                    confirmButtonColor: '#ef4444'
                });
            });
        });
    </script>
@endpush