@extends('admin.layouts.master')

@section('title', 'Manage Groups & Permissions')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
    .groups-list, .group-details {
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        max-height: 80vh;
        overflow-y: auto;
    }
    .group-item {
        background: #f8f9fa;
        margin-bottom: 10px;
        border-left: 4px solid #0d6efd;
        border-radius: 8px;
    }
    .group-header {
        padding: 10px 15px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #dee2e6;
        border-radius: 8px 8px 0 0;
    }
    .group-submenu {
        display: none;
        padding: 10px 15px;
        background: #e9ecef;
        border-radius: 0 0 8px 8px;
        min-height: 50px;
    }
    .permission-item {
        background: #0d6efd;
        color: #fff;
        margin: 5px 0;
        padding: 8px 12px;
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        cursor: move;
    }
    .btn-add-perm, .btn-remove-perm {
        border: none;
        border-radius: 5px;
        padding: 0 6px;
        cursor: pointer;
    }
    .btn-add-perm { background: #198754; color: #fff; }
    .btn-remove-perm { background: #dc3545; color: #fff; }
    #btnUpdateAll {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: none;
    }
    i.fas.fa-toggle-off { color: red; }

    span.select2-selection.select2-selection--single {
        height: 100%;
        padding: 6px;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-md-4">
        <div class="groups-list">
            <h4>Menu & Submenus</h4>
            <div id="groupsSortable">
                @foreach ($groups as $group)
                    @php $permissions = json_decode($group->permissions,true) ?? []; @endphp
                    <div class="group-item" data-id="{{ $group->id }}">
                        <div class="group-header d-flex justify-content-between align-items-center">
                        <span>{{ $group->name }}</span>
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-success me-1 toggle-status-btn"
                                data-id="{{ $group->id }}"
                                data-status="{{ $group->status == 1 ? 'active' : 'inactive' }}">
                                <i class="fas {{ $group->status == 1 ? 'fa-toggle-on' : 'fa-toggle-off' }}"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-primary update-btn" data-id="{{ $group->id }}">
                                <i class="fas fa-pen"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-danger delete-btn" data-id="{{ $group->id }}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                        <div class="group-submenu" id="groupSubmenu_{{ $group->id }}">
                            @forelse($permissions as $perm)
                                <div class="permission-item" data-id="{{ is_array($perm) ? $perm['id'] : $perm }}">
                                    <span>{{ is_array($perm) ? $perm['display_name'] : $perm }}</span>
                                    <button class="btn-remove-perm">&times;</button>
                                </div>
                            @empty
                                <div class="text-muted">No permissions</div>
                            @endforelse
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="group-details">
            <h4>Submenu</h4>

            <!-- Search Input -->
            <input type="text" id="searchPermissions" class="form-control mb-2" placeholder="Search permissions...">

            <div id="availablePermissions">
                @foreach ($all_permissions as $perm)
                    <div class="permission-item" data-id="{{ $perm->id }}">
                        <span>{{ $perm->display_name }}</span>
                        <button class="btn-add-perm">+</button>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="group-details">
            <h4>Create New Menu</h4>
            <form id="createGroupForm" method="POST" action="{{ route('group.store') }}">
                @csrf
                <input type="text" class="form-control mb-2" name="name" placeholder="Group Name" required>

                <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
                <select class="form-control mb-2 select2" name="route">
                    <option value="">Select Route</option>
                    @foreach ($routes as $route)
                        <option value="{{ $route['route'] }}">{{ $route['display_name'] }}</option>
                    @endforeach
                </select>

                <input type="text" class="form-control mb-2 mt-2" name="icon" placeholder="Icon">

                <div id="createGroupPermissions" class="border p-2 mb-2" style="min-height:150px; background:#f9f9f9;">
                    <p class="text-muted">Drag permissions here</p>
                </div>

                <input type="hidden" name="permission_id" id="groupPermissionsInput">
                <button type="submit" class="btn btn-primary">Create Group</button>
            </form>
        </div>
    </div>
</div>

<button id="btnUpdateAll" class="btn btn-primary">Update Changes</button>

<!-- Update Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Group</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="updateGroupForm">
                    <input type="hidden" name="group_id" id="modalGroupId">
                    <div class="mb-3">
                        <label for="groupName" class="form-label">Group Name</label>
                        <input type="text" class="form-control" id="groupName" name="group_name">
                    </div>
                    <div class="mb-3">
                        <label for="groupRoute" class="form-label">Route</label>
                        <select class="form-control update-select2" id="groupRoute" name="route">
                            <option value="">Select Route</option>
                            @foreach ($routes as $route)
                                <option value="{{ $route['route'] }}">{{ $route['display_name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="groupIcon" class="form-label">Icon</label>
                        <input type="text" class="form-control" id="groupIcon" name="icon">
                    </div>
                    <div class="mb-3">
                        <label for="groupStatus" class="form-label">Status</label>
                        <select class="form-control" id="groupStatus" name="status">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveUpdateBtn">Save changes</button>
            </div>
        </div>
    </div>
</div>


@endsection

@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function() {
    $('.select2').select2({ placeholder: "Select Route", allowClear: true, width: '100%' });
    $('.update-select2').select2({ placeholder: "Select Route", allowClear: true, width: '100%' });

    let currentGroupId = null;

    function showUpdate() { $('#btnUpdateAll').fadeIn(); }

    // Toggle submenu
    $(document).on('click', '.group-header', function() {
        $(this).siblings('.group-submenu').slideToggle(200);
        currentGroupId = $(this).closest('.group-item').data('id');
    });

    // Sortable: Groups
    new Sortable(document.getElementById('groupsSortable'), { animation: 200, handle: '.group-header', onEnd: showUpdate });

    // Sortable: Available Permissions (clone only)
    new Sortable(document.getElementById('availablePermissions'), { group: { name: 'permissions', pull: 'clone', put: false }, sort: false, animation: 150 });

    // Sortable: Group Submenus
    $('.group-submenu').each(function() {
        new Sortable(this, {
            group: 'permissions',
            animation: 150,
            fallbackOnBody: true,
            onAdd: function(evt) {
                let submenu = $(evt.to), $item = $(evt.item), id = $item.data('id');
                if (submenu.find('.permission-item[data-id="' + id + '"]').length > 1) {
                    $item.remove();
                    showToast('warning','Permission already exists in this group!');
                    return;
                }
                submenu.find('div.text-muted').remove();
                $item.find('.btn-add-perm').remove();
                if ($item.find('.btn-remove-perm').length === 0) $item.append('<button class="btn-remove-perm">&times;</button>');
                showUpdate();
            },
            onUpdate: showUpdate
        });
    });

    // Sortable: Create Group Permissions
    new Sortable(document.getElementById('createGroupPermissions'), {
        group: 'permissions',
        animation: 150,
        onAdd: function(evt) {
            let $item = $(evt.item), id = $item.data('id'), container = $(evt.to);
            if (container.find('.permission-item[data-id="' + id + '"]').length > 1) {
                 showToast('warning','Permission already added!');
                 $item.remove();
                 return;
            }
            container.find('p.text-muted').remove();
            $item.find('.btn-add-perm').remove();
            if ($item.find('.btn-remove-perm').length === 0) $item.append('<button class="btn-remove-perm">&times;</button>');
        }
    });

    // Add permission by button
    $(document).on('click', '.btn-add-perm', function() {
        if (!currentGroupId) { showToast('warning','Open a group first'); return; }
        let id = $(this).closest('.permission-item').data('id');
        let submenu = $('#groupSubmenu_' + currentGroupId);
        if (submenu.find('.permission-item[data-id="' + id + '"]').length > 0) {
            showToast('warning','Already added'); return;
        }
        let div = $(this).closest('.permission-item').clone().find('.btn-add-perm').remove().end();
        div.append('<button class="btn-remove-perm">&times;</button>');
        submenu.append(div);
        submenu.find('div.text-muted').remove();
        showUpdate();
    });

    // Remove permission
    $(document).on('click', '.btn-remove-perm', function() {
        let parent = $(this).closest('.group-submenu, #createGroupPermissions');
        $(this).closest('.permission-item').remove();
        if (parent.is('#createGroupPermissions') && parent.find('.permission-item').length === 0)
            parent.html('<p class="text-muted">Drag permissions here</p>');
        if (parent.hasClass('group-submenu') && parent.find('.permission-item').length === 0)
            parent.html('<div class="text-muted">No permissions</div>');
        showUpdate();
    });

    // Update all groups
    $('#btnUpdateAll').click(function() {
        let order = $('#groupsSortable .group-item').map(function() { return $(this).data('id'); }).get();
        let perms = {};
        $('#groupsSortable .group-item').each(function() {
            let g = $(this).data('id');
            perms[g] = $(this).find('.group-submenu .permission-item').map(function() { return $(this).data('id'); }).get();
        });
        $.post("{{ url('group/update-all') }}", { _token: '{{ csrf_token() }}', order: order, permissions: perms })
        .done(function(){
             showToast('success','Updated!'); $('#btnUpdateAll').fadeOut();
             location.reload()
            })
        .fail(function(){ showToast('error','Failed to update!'); });
    });

    // Create group submit
    $('#createGroupForm').submit(function() {
        let perms = $('#createGroupPermissions .permission-item').map(function() { return $(this).data('id'); }).get();
        $('#groupPermissionsInput').val(JSON.stringify(perms));
    });

    // Toggle status
    $(document).on('click', '.toggle-status-btn', function(e){
        e.stopPropagation();
        let $btn = $(this), $icon = $btn.find('i'), id = $btn.data('id');
        let currentStatus = $btn.data('status'), newStatus = currentStatus==='active'?'inactive':'active';
        $.post('group/change-status', { id:id, status:newStatus, _token:'{{ csrf_token() }}' }, function(res){
            if(res.success){
                $btn.data('status', newStatus);
                if(newStatus==='active'){ $btn.removeClass('btn-outline-secondary').addClass('btn-outline-success'); $icon.removeClass('fa-toggle-off').addClass('fa-toggle-on'); }
                else { $btn.removeClass('btn-outline-success').addClass('btn-outline-secondary'); $icon.removeClass('fa-toggle-on').addClass('fa-toggle-off'); }
                showToast('success','Status updated!');
            } else showToast('error','Failed to update status.');
        }).fail(function(){ showToast('error','Something went wrong.'); });
    });

    $(document).on('click', '.update-btn', function(e) {
        e.stopPropagation();
        let groupId = $(this).data('id');

        $.get('/group/' + groupId, function(res) {
            $('#modalGroupId').val(groupId);
            $('#groupName').val(res.name);
            $('#groupIcon').val(res.icon);
            $('#groupStatus').val(res.status ? '1' : '0');

            // Destroy previous Select2 if exists
            if ($('#groupRoute').hasClass("select2-hidden-accessible")) {
                $('#groupRoute').select2('destroy');
            }

            // Initialize Select2 inside modal
            $('#groupRoute').select2({
                placeholder: "Select Route",
                width: '100%',
                dropdownParent: $('#updateModal')
            });
            console.log(res)
            // Set the previously selected value and trigger change
            $('#groupRoute').val(res.route).trigger('change');

            // Show the modal
            let updateModalEl = document.getElementById('updateModal');
            let updateModal = new bootstrap.Modal(updateModalEl);
            updateModal.show();

        }).fail(function() {
            alert('Failed to fetch group data.');
        });
    });



    // Save update
    $('#saveUpdateBtn').click(function(){
        let formData = $('#updateGroupForm').serialize();
        $.post('/group/update', formData + '&_token={{ csrf_token() }}', function(res){
            if(res.success){ showToast('success','Group updated successfully!'); $('#updateModal').modal('hide'); }
            else showToast('error','Failed to update group.');
        }).fail(function(){ showToast('error','Something went wrong.'); });
    });

    // Search permissions
    $('#searchPermissions').on('keyup', function() {
        let value = $(this).val().toLowerCase();
        $('#availablePermissions .permission-item').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });
});

// Delete group
$(document).on('click', '.delete-btn', function(e){
    e.stopPropagation();
    let groupId = $(this).data('id');
    if(!confirm('Are you sure you want to delete this group?')) return;

    $.ajax({
        url: '/group/' + groupId,
        type: 'DELETE',
        data: { _token: '{{ csrf_token() }}' },
        success: function(res) {
            if(res.success){
                showToast('success', 'Group deleted successfully!');
                $('.group-item[data-id="' + groupId + '"]').remove();
            } else {
                showToast('error', 'Failed to delete group!');
            }
        },
        error: function(){
            showToast('error', 'Something went wrong!');
        }
    });
});

</script>
@endsection