@extends('layouts/layoutMaster')

@section('title', 'UAC — Modules')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/@form-validation/umd/styles/index.min.css') }}" />
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/bundle/popular.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-bootstrap5/index.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-auto-focus/index.min.js') }}"></script>
@endsection

@section('page-script')
    <script>
        var modulesDt = null;
        var filterState = { category: '', mode: '', status: '', menu: '' };

        window.openModuleModal = async function(id) {
            resetModuleForm();
            var data = await pdwl('api/module' + (id ? '/' + id : ''), {});
            if (!data) return;

            var d = data.data;
            var fd = data.formData || {};

            if (d && d.id) $('#m-id').val(d.id);
            $('#module-modal-title').text(d ? 'Edit Module' : 'Add Module');

            var catStr = '<option value="0">— None —</option>';
            (fd.categoriesSel || []).forEach(function(c) {
                catStr += '<option value="' + c.id + '"' + (d && d.module_category_id == c.id ? ' selected' : '') + '>' + c.name + '</option>';
            });
            $('#m-category').html(catStr);

            var modeStr = '<option value="">— Select mode —</option>';
            (fd.modesSel || []).forEach(function(m) {
                modeStr += '<option value="' + m.id + '"' + (d && d.mode_id == m.id ? ' selected' : '') + '>' + m.name + '</option>';
            });
            $('#m-mode').html(modeStr);

            var parStr = '<option value="0">— None (root module) —</option>';
            (fd.parentsSel || []).forEach(function(p) {
                if (d && p.id == d.id) return;
                parStr += '<option value="' + p.id + '"' + (d && d.parent_id == p.id ? ' selected' : '') + '>' + p.name + '</option>';
            });
            $('#m-parent').html(parStr);

            if (d) {
                $('#m-name').val(d.name || '');
                $('#m-description').val(d.description || '');
                $('#m-url').val(d.url || '');
                $('#m-slug').val(d.slug || '');
                $('#m-icon').val(d.icon || '');
                $('#m-order').val(d.order_sequence || 0);
                $('#m-with-child').val(d.with_child ? '1' : '0');
                $('#m-as-menu').val(d.as_menu ? '1' : '0');
                $('#m-external').val(d.external ? '1' : '0');
                $('#m-target-blank').val(d.target_blank ? '1' : '0');
                $('#m-status').val(d.status ? '1' : '0');
            }

            $('#module-modal').modal('show');
        };

        function resetModuleForm() {
            $('#m-id').val('');
            $('#m-name').val('');
            $('#m-description').val('');
            $('#m-url').val('');
            $('#m-slug').val('');
            $('#m-icon').val('');
            $('#m-order').val('0');
            $('#m-category').html('');
            $('#m-mode').html('');
            $('#m-parent').html('');
            $('#m-with-child').val('0');
            $('#m-as-menu').val('1');
            $('#m-external').val('0');
            $('#m-target-blank').val('0');
            $('#m-status').val('1');
        }

        window.saveModule = async function(e) {
            e.preventDefault();
            var id = $('#m-id').val();
            var payload = {
                name: $('#m-name').val(),
                description: $('#m-description').val(),
                moduleCategoryId: $('#m-category').val(),
                modeId: $('#m-mode').val(),
                parentId: $('#m-parent').val(),
                url: $('#m-url').val(),
                slug: $('#m-slug').val(),
                icon: $('#m-icon').val(),
                orderSequence: $('#m-order').val(),
                withChild: $('#m-with-child').val(),
                asMenu: $('#m-as-menu').val(),
                external: $('#m-external').val(),
                targetBlank: $('#m-target-blank').val(),
                status: $('#m-status').val(),
            };
            var url = id ? 'api/module/' + id + '/update' : 'api/module/create';
            var data = await pdwl(url, payload);
            if (data) {
                showResponse(data.message, data.success ? 'success' : 'error');
                if (data.success) {
                    $('#module-modal').modal('hide');
                    modulesDt.ajax.reload();
                }
            }
        };

        window.deleteModule = async function(id) {
            if (await showConfirmation()) {
                var data = await pdwl('api/module/' + id + '/delete', {});
                if (data) {
                    showResponse(data.message, data.success ? 'success' : 'error');
                    if (data.success) modulesDt.ajax.reload();
                }
            }
        };

        function getActiveFilterCount() {
            var count = 0;
            if (filterState.category) count++;
            if (filterState.mode) count++;
            if (filterState.status) count++;
            if (filterState.menu) count++;
            return count;
        }

        function updateFilterBadge() {
            var count = getActiveFilterCount();
            var $badge = $('#filter-count-badge');
            if (count > 0) {
                $badge.text(count).removeClass('d-none');
            } else {
                $badge.addClass('d-none');
            }
        }

        function applyFilters() {
            filterState.category = $('#filter-category').val();
            filterState.mode = $('#filter-mode').val();
            filterState.status = $('input[name="filterStatus"]:checked').val();
            filterState.menu = $('input[name="filterMenu"]:checked').val();
            modulesDt.draw();
            updateFilterBadge();
            bootstrap.Offcanvas.getInstance(document.getElementById('moduleFilters'))?.hide();
        }

        function resetFilters() {
            $('#filter-category').val('');
            $('#filter-mode').val('');
            $('input[name="filterStatus"][value=""]').prop('checked', true);
            $('input[name="filterMenu"][value=""]').prop('checked', true);
            filterState = { category: '', mode: '', status: '', menu: '' };
            modulesDt.draw();
            updateFilterBadge();
        }

        $(function() {

            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex, rowData) {
                if (settings.nTable.id !== 'modules-dt') return true;

                if (filterState.category && String(rowData.module_category_id) !== String(filterState.category)) return false;
                if (filterState.mode && String(rowData.mode_id) !== String(filterState.mode)) return false;
                if (filterState.status !== '' && filterState.status !== undefined && String(rowData.status) !== String(filterState.status)) return false;
                if (filterState.menu !== '' && filterState.menu !== undefined && String(rowData.as_menu) !== String(filterState.menu)) return false;

                return true;
            });

            modulesDt = $('#modules-dt').DataTable({
                processing: true,
                searching: true,
                ordering: false,
                ajax: {
                    url: baseUrl + 'api/modules',
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    dataSrc: function(json) {
                        var catOpts = '<option value="">All Categories</option>';
                        (json.filters?.categories || []).forEach(function(c) {
                            catOpts += '<option value="' + c.id + '">' + c.name + '</option>';
                        });
                        $('#filter-category').html(catOpts);

                        var modeOpts = '<option value="">All Modes</option>';
                        (json.filters?.modes || []).forEach(function(m) {
                            modeOpts += '<option value="' + m.id + '">' + m.name + '</option>';
                        });
                        $('#filter-mode').html(modeOpts);

                        return json.modules;
                    }
                },
                columns: [
                    { data: 'name' },
                    { data: 'category_name' },
                    { data: 'mode_name' },
                    { data: 'parent_name' },
                    { data: 'order_sequence' },
                    { data: 'as_menu' },
                    { data: 'status' },
                    { data: 'id' },
                ],
                columnDefs: [
                    {
                        targets: 0,
                        searchable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return full['name'];
                            var indent = full['is_child'] == 1 ? 'ps-3' : '';
                            var prefix = full['is_child'] == 1 ? '<span class="text-muted me-1">└</span>' : '';
                            var name = prefix + '<span class="fw-medium">' + full['name'] + '</span>';
                            if (full['description']) {
                                name += '<br><small class="text-muted ' + indent + '">' + full['description'] + '</small>';
                            }
                            if (full['url']) {
                                name += '<br><small class="text-muted font-monospace ' + indent + '">/' + full['url'] + '</small>';
                            }
                            return '<div class="' + indent + '">' + name + '</div>';
                        }
                    },
                    {
                        targets: 1,
                        searchable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return data || '';
                            return data ? '<span>' + data + '</span>' : '<span class="text-muted">—</span>';
                        }
                    },
                    {
                        targets: 2,
                        searchable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return data || '';
                            return data ? '<span class="text-uppercase small fw-medium">' + data + '</span>' : '<span class="text-muted">—</span>';
                        }
                    },
                    {
                        targets: 3,
                        searchable: true,
                        render: function(data, type, full) {
                            if (type !== 'display') return data || '';
                            return data ? '<span>' + data + '</span>' : '<span class="text-muted">—</span>';
                        }
                    },
                    {
                        targets: 4,
                        className: 'text-center',
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            return '<span>' + (data || 0) + '</span>';
                        }
                    },
                    {
                        targets: 5,
                        className: 'text-center',
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            return full['as_menu'] == 1
                                ? '<i class="ti ti-check"></i>'
                                : '<i class="ti ti-minus text-muted"></i>';
                        }
                    },
                    {
                        targets: 6,
                        className: 'text-center',
                        render: function(data, type, full) {
                            if (type !== 'display') return data;
                            return full['status'] == 1
                                ? '<span class="badge bg-label-success">Active</span>'
                                : '<span class="badge bg-label-warning">Inactive</span>';
                        }
                    },
                    {
                        targets: 7,
                        searchable: false,
                        className: 'text-nowrap',
                        render: function(data, type, full) {
                            if (type !== 'display') return '';
                            return '<button onclick="openModuleModal(\'' + full['id'] + '\')" class="btn btn-sm btn-icon me-1" title="Edit module"><i class="ti ti-edit"></i></button>' +
                                   '<button onclick="deleteModule(\'' + full['id'] + '\')" class="btn btn-sm btn-icon" title="Delete module"><i class="ti ti-trash"></i></button>';
                        }
                    },
                ],
            });
        });
    </script>
@endsection

@section('content')
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">User Access Control</h4>
                    <p class="text-muted mb-0">Manage default roles, custom roles, and system module access.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Settings</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Modules</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @include('uac._nav', ['activePage' => 'modules'])

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div>
                    <h5 class="card-title mb-0">System Modules</h5>
                    <small class="text-muted">Manage system modules, their hierarchy, URLs, and menu visibility.</small>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-icon btn-outline-secondary position-relative" style="overflow: visible;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Filters" onclick="new bootstrap.Offcanvas(document.getElementById('moduleFilters')).show()">
                        <i class="ti ti-filter"></i>
                        <span id="filter-count-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none" style="font-size: 0.6rem; min-width: 18px; padding: 0.25em 0.4em; line-height: 1;">0</span>
                    </button>
                    <button onclick="openModuleModal()" type="button" class="btn btn-primary">
                        Add Module
                    </button>
                </div>
            </div>
        </div>
        <div class="card-datatable table-responsive">
            <table id="modules-dt" class="table border-top">
                <thead>
                    <tr>
                        <th>Module</th>
                        <th>Category</th>
                        <th>Mode</th>
                        <th>Parent</th>
                        <th class="text-center">Order</th>
                        <th class="text-center">Menu</th>
                        <th class="text-center">Status</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="moduleFilters" aria-labelledby="moduleFiltersLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="moduleFiltersLabel" class="offcanvas-title">Filter Modules</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">

            <div class="mb-4">
                <label class="form-label fw-semibold">Category</label>
                <select class="form-select" id="filter-category">
                    <option value="">All Categories</option>
                </select>
            </div>

            <hr class="my-3">

            <div class="mb-4">
                <label class="form-label fw-semibold">Mode</label>
                <select class="form-select" id="filter-mode">
                    <option value="">All Modes</option>
                </select>
            </div>

            <hr class="my-3">

            <div class="mb-4">
                <label class="form-label fw-semibold">Status</label>
                <div class="d-flex flex-column gap-2">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterStatus" id="statusAll" value="" checked>
                        <label class="form-check-label" for="statusAll">All</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterStatus" id="statusActive" value="1">
                        <label class="form-check-label" for="statusActive">Active</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterStatus" id="statusInactive" value="0">
                        <label class="form-check-label" for="statusInactive">Inactive</label>
                    </div>
                </div>
            </div>

            <hr class="my-3">

            <div class="mb-4">
                <label class="form-label fw-semibold">Menu Visibility</label>
                <div class="d-flex flex-column gap-2">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterMenu" id="menuAll" value="" checked>
                        <label class="form-check-label" for="menuAll">All</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterMenu" id="menuYes" value="1">
                        <label class="form-check-label" for="menuYes">Shown as Menu</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterMenu" id="menuNo" value="0">
                        <label class="form-check-label" for="menuNo">Not in Menu</label>
                    </div>
                </div>
            </div>

        </div>
        <div class="offcanvas-footer border-top p-3">
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-primary flex-grow-1" onclick="applyFilters()">
                    Apply Filters
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="resetFilters()">
                    Reset
                </button>
            </div>
        </div>
    </div>

    <div class="modal fade" id="module-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header border-bottom">
                    <div>
                        <h5 class="modal-title mb-0" id="module-modal-title">Add Module</h5>
                        <small class="text-muted">Configure module details, hierarchy, URL, and visibility.</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-3">
                    <form id="module-form" onsubmit="saveModule(event)" method="POST">
                        <input type="hidden" id="m-id" />

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label" for="m-name">Module Name <span class="text-danger">*</span></label>
                                <input class="form-control" type="text" id="m-name" placeholder="e.g. Dashboard" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="m-description">Description</label>
                                <input class="form-control" type="text" id="m-description" placeholder="Short description">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label" for="m-category">Category</label>
                                <select class="form-select" id="m-category"></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="m-mode">Mode <span class="text-danger">*</span></label>
                                <select class="form-select" id="m-mode" required></select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-8">
                                <label class="form-label" for="m-parent">Parent Module</label>
                                <select class="form-select" id="m-parent"></select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="m-order">Order Sequence</label>
                                <input class="form-control" type="number" id="m-order" min="0" step="1" value="0">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label" for="m-url">URL <span class="text-danger">*</span></label>
                                <input class="form-control font-monospace" type="text" id="m-url" placeholder="e.g. dashboard" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="m-slug">Slug / Route Name <span class="text-danger">*</span></label>
                                <input class="form-control font-monospace" type="text" id="m-slug" placeholder="e.g. dashboard.index" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label" for="m-icon">Icon Class</label>
                                <input class="form-control font-monospace" type="text" id="m-icon" placeholder="e.g. menu-icon tf-icons ti ti-layout-dashboard">
                            </div>
                        </div>

                        <hr class="my-3">

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label" for="m-with-child">Has Children</label>
                                <select class="form-select" id="m-with-child">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label" for="m-as-menu">Show as Menu</label>
                                <select class="form-select" id="m-as-menu">
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label" for="m-external">External Link</label>
                                <select class="form-select" id="m-external">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label" for="m-target-blank">New Tab</label>
                                <select class="form-select" id="m-target-blank">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label" for="m-status">Status</label>
                                <select class="form-select" id="m-status">
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary" form="module-form" type="submit">Save Module</button>
                </div>
            </div>
        </div>
    </div>

@endsection