@extends('admin.layouts.master')

@section('title', 'Manage Widgets')

@section('page_title')
    <div style="display: flex; align-items: center; gap: 10px;">
        <i class="fas fa-cube" style="color: var(--acc); font-size: 18px;"></i>
        <div>
            <h5 style="margin: 0; font-weight: 700; color: var(--ink);">Widgets Management</h5>
            <small style="color: var(--muted);">Manage all your website widgets</small>
        </div>
    </div>
@endsection

@section('css')
    <link rel="stylesheet" href="{{asset('/admin/')}}/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="{{asset('/admin/')}}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <style>
/* ════════════════════════════════════════════════════════════════
   WIDGETS MANAGEMENT - NC THEME MINIMAL
════════════════════════════════════════════════════════════════ */

* {
    box-sizing: border-box;
}

body {
    background: var(--surface);
}

/* ── HEADER ── */
.page-header {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-header-left h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header-left h1 i {
    color: var(--acc);
}

.page-header-left p {
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0 0;
}

.page-header-right {
    display: flex;
    gap: 10px;
}

.btn {
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary {
    background: var(--acc);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--acc-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(90, 103, 216, 0.2);
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── CARD ── */
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.card-body {
    padding: 0;
}

/* ── TABLE STYLING ── */
.table {
    margin-bottom: 0;
}

.table thead th {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: var(--surface);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* ── CHECKBOX ── */
input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--acc);
}

/* ── BADGE ── */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-danger {
    background: #fee2e2;
    color: #7f1d1d;
}

.badge-primary {
    background: var(--acc-soft);
    color: var(--acc);
}

/* ── ACTION BUTTONS ── */
.action-buttons {
    display: flex;
    gap: 5px;
}

.btn-sm {
    padding: 5px 8px;
    font-size: 11px;
}

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--sb-hover-bg);
    border-color: var(--acc);
    color: var(--acc);
}

.btn-info {
    background: var(--acc-soft);
    color: var(--acc);
    border: 1px solid var(--acc-mid);
}

.btn-info:hover:not(:disabled) {
    background: var(--acc);
    color: white;
}

/* ── DROPDOWN MENU ── */
.dropdown-menu {
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.dropdown-item {
    color: var(--ink) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    transition: all 0.2s;
}

.dropdown-item:hover {
    background: var(--surface) !important;
    color: var(--acc) !important;
}

.dropdown-item.text-danger:hover {
    background: #fee2e2 !important;
    color: #dc3545 !important;
}

.dropdown-divider {
    border-color: var(--line) !important;
}

/* ── FIXED DELETE BUTTON ── */
#delete-selected {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
    display: none;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#delete-selected.show {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

#delete-selected:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.35);
}

.selected-count {
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ── DATATABLE CUSTOMIZATION ── */
.dataTables_wrapper {
    padding: 16px;
}

.dataTables_info {
    font-size: 12px;
    color: var(--muted);
}

.dataTables_paginate {
    display: flex;
    gap: 4px;
    margin-top: 16px;
}

.paginate_button {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 12px;
}

.paginate_button:hover {
    background: var(--sb-hover-bg);
    color: var(--acc);
    border-color: var(--acc);
}

.paginate_button.current {
    background: var(--acc);
    color: white;
    border-color: var(--acc);
}

.dataTables_length {
    font-size: 12px;
}

.dataTables_length select {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}

/* ── SEARCH BOX ── */
.dataTables_filter input {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}

.dataTables_filter input:focus {
    border-color: var(--acc) !important;
    box-shadow: 0 0 0 2px rgba(90, 103, 216, 0.1) !important;
}

/* ── TOAST NOTIFICATION ── */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
}

.toast-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--acc);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 350px;
    animation: slideIn 0.3s ease;
    pointer-events: auto;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-item.success {
    border-left-color: #10b981;
}

.toast-item.success i {
    color: #10b981;
}

.toast-item.error {
    border-left-color: #dc3545;
}

.toast-item.error i {
    color: #dc3545;
}

.toast-item.warning {
    border-left-color: #f59e0b;
}

.toast-item.warning i {
    color: #f59e0b;
}

.toast-item.info {
    border-left-color: var(--acc);
}

.toast-item.info i {
    color: var(--acc);
}

.toast-message {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.toast-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    width: 20px;
    height: 20px;
}

.toast-close:hover {
    color: var(--ink);
}

/* ── RESPONSIVE ── */
@media(max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header-right {
        width: 100%;
    }

    .page-header-right .btn {
        width: 100%;
        justify-content: center;
    }

    .table {
        font-size: 12px;
    }

    .table thead th,
    .table tbody td {
        padding: 8px;
    }

    .action-buttons {
        flex-wrap: wrap;
    }

    #delete-selected {
        bottom: 20px;
        right: 20px;
    }
}
    </style>
@endsection

@section('content')
    {{-- PAGE HEADER --}}
    <div class="page-header">
        <div class="page-header-left">
            <h1>
                <i class="fas fa-cube"></i>
                Widgets Management
            </h1>
            <p>Manage all website widgets and their settings</p>
        </div>
        <div class="page-header-right">
            <a href="{{ route('widgets.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Add New Widget
            </a>
        </div>
    </div>

    {{-- FIXED DELETE BUTTON --}}
    <button class="btn btn-danger" id="delete-selected">
        <i class="fas fa-trash"></i> Delete Selected
        <span class="selected-count">0</span>
    </button>

    {{-- TOAST CONTAINER --}}
    <div class="toast-container" id="toastContainer"></div>

    {{-- CONTENT --}}
    <section class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-body">
                    <table id="widgetsTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th style="width: 40px;"><input type="checkbox" id="select-all"></th>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Type</th>
                                <th>Position</th>
                                <th>Order</th>
                                <th>Status</th>
                                <th style="width: 120px;">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script src="{{asset('/admin/')}}/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>

    <script>
// ════════════════════════════════════════
// TOAST NOTIFICATION SYSTEM
// ════════════════════════════════════════
function showToast(type, message) {
    const container = document.getElementById('toastContainer');
    const toast = document.createElement('div');
    toast.className = `toast-item ${type}`;

    const icons = {
        success: 'fa-check-circle',
        error: 'fa-exclamation-circle',
        warning: 'fa-exclamation-triangle',
        info: 'fa-info-circle'
    };

    toast.innerHTML = `
        <i class="fas ${icons[type]}"></i>
        <span class="toast-message">${message}</span>
        <button class="toast-close">×</button>
    `;

    container.appendChild(toast);

    const closeBtn = toast.querySelector('.toast-close');
    closeBtn.addEventListener('click', () => {
        toast.style.opacity = '0';
        setTimeout(() => toast.remove(), 300);
    });

    setTimeout(() => {
        if (toast.parentElement) {
            toast.style.opacity = '0';
            setTimeout(() => toast.remove(), 300);
        }
    }, 4000);
}

// ════════════════════════════════════════
// DATATABLE INITIALIZATION
// ════════════════════════════════════════
$(function () {
    var table = $("#widgetsTable").DataTable({
        "processing": true,
        "serverSide": true,
        "responsive": true,
        "lengthChange": true,
        "autoWidth": false,
        "pageLength": 10,
        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        "ajax": {
            "url": "{{ route('widgets.index') }}",
            "type": "GET",
            "error": function(xhr, error, thrown) {
                showToast('error', '❌ Failed to load widgets!');
            }
        },
        "columns": [
            {
                "data": "id",
                "render": function(data) {
                    return '<input type="checkbox" class="widget-checkbox" value="' + data + '">';
                },
                "orderable": false,
                "searchable": false
            },
            { "data": "id" },
            { "data": "title" },
            { "data": "type" },
            { "data": "position" },
            { "data": "order" },
            {
                "data": "is_active",
                "render": function(data) {
                    return data == 1
                        ? '<span class="badge badge-success">✓ Active</span>'
                        : '<span class="badge badge-danger">✕ Inactive</span>';
                }
            },
            {
                "data": "action",
                "orderable": false,
                "searchable": false
            }
        ],
        "order": [[5, 'asc']],
        "language": {
            "paginate": {
                "previous": "<i class='fas fa-angle-left'></i>",
                "next": "<i class='fas fa-angle-right'></i>"
            },
            "lengthMenu": "Show _MENU_ entries",
            "info": "Showing _START_ to _END_ of _TOTAL_ widgets",
            "infoEmpty": "No widgets found",
            "infoFiltered": "(filtered from _MAX_ total widgets)",
            "search": "Search widgets..."
        }
    });

    // Select All Checkbox
    $('#select-all').on('click', function() {
        var rows = table.rows({ 'search': 'applied' }).nodes();
        $('input[type="checkbox"]', rows).prop('checked', this.checked);
        toggleDeleteButton();
    });

    // Individual Checkbox
    $('#widgetsTable tbody').on('change', '.widget-checkbox', function() {
        if (!this.checked) {
            $('#select-all').prop('checked', false);
        }
        toggleDeleteButton();
    });

    // Toggle Delete Button
    function toggleDeleteButton() {
        var checked = $('.widget-checkbox:checked').length;
        if (checked > 0) {
            $('#delete-selected').addClass('show');
            $('#delete-selected .selected-count').text(checked);
        } else {
            $('#delete-selected').removeClass('show');
            $('#select-all').prop('checked', false);
        }
    }

    // Delete Selected
    $('#delete-selected').on('click', function() {
        var selectedIds = [];
        $('.widget-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });

        if (selectedIds.length > 0) {
            if (!confirm('🗑️ Delete ' + selectedIds.length + ' widget(s)? This cannot be undone.')) return;

            $(this).prop('disabled', true);
            $.ajax({
                url: "{{ route('widgets.index') }}",
                type: "POST",
                data: {
                    selected_ids: selectedIds,
                    _method: 'POST',
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    showToast('success', '✅ ' + selectedIds.length + ' widget(s) deleted successfully!');
                    table.ajax.reload();
                    $('#delete-selected').removeClass('show').prop('disabled', false);
                },
                error: function(xhr) {
                    showToast('error', '❌ Failed to delete widgets!');
                    $('#delete-selected').prop('disabled', false);
                }
            });
        }
    });

    // Single Delete
    $('#widgetsTable tbody').on('click', '.delete-btn', function() {
        var id = $(this).data('id');
        if (!confirm('🗑️ Delete this widget? This cannot be undone.')) return;

        $.ajax({
            url: "{{ route('widgets.destroy', ':id') }}".replace(':id', id),
            type: "DELETE",
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                showToast('success', '✅ Widget deleted successfully!');
                table.ajax.reload();
            },
            error: function() {
                showToast('error', '❌ Failed to delete widget!');
            }
        });
    });

    // Toggle Status
    $('#widgetsTable tbody').on('click', '.toggle-status-btn', function() {
        var id = $(this).data('id');
        $.ajax({
            url: "{{ route('widgets.index') }}",
            type: "POST",
            data: {
                toggle_status: true,
                widget_id: id,
                _method: 'POST',
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                showToast('success', '✅ Status updated!');
                table.ajax.reload();
            },
            error: function() {
                showToast('error', '❌ Failed to update status!');
            }
        });
    });

    // Reload on dataTable draw
    table.on('draw.dt', function() {
        $('#select-all').prop('checked', false);
        toggleDeleteButton();
    });
});
    </script>
@endsection