@extends("admin.layouts.admin")

@section("title","Create Group")

@section("css")
    <style>
        .list-container {
            display: flex;
            gap: 20px;
        }
        .list-box {
            flex: 1;
            border-radius: 10px;
            min-height: 350px;
            padding: 10px;
            background: linear-gradient(135deg, #fdfbfb, #ebedee);
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .list-box strong {
            display: block;
            text-align: center;
            padding: 10px;
            background: #4a90e2;
            color: #fff;
            border-radius: 6px;
            margin-bottom: 10px;
            font-size: 16px;
        }
        .list-item {
            padding: 10px 12px;
            background: #fff;
            border: 1px solid #ddd;
            margin-bottom: 6px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .list-item:hover {
            background: #f0f8ff;
            transform: translateX(3px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.08);
        }
        .list-item .icon {
            font-size: 14px;
            color: #4a90e2;
            margin-left: 8px;
        }
        /* Selected box styling */
        #selected-permissions strong {
            background: #27ae60;
        }
        #selected-permissions .list-item:hover {
            background: #eafaf1;
        }
    </style>
@endsection

@section("content")
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="text-left">
                    Create Group
                    <a href="{{ route('group.index') }}" class="btn btn-primary" style="float: right">
                        <span class="fa fa-list"></span> All Groups
                    </a>
                </h3>
            </div>
            <div class="card-body">

                {{ Form::open(['route' => 'group.store', 'method' => 'POST']) }}
                <div class="row mb-3">
                    <div class="col-lg-4">
                        {{ Form::label('name','Group Name') }}
                        {{ Form::text('name',null,['class'=>'form-control','placeholder'=>'Ex. Dashboard','required']) }}
                    </div>
                </div>

                <div class="list-container">
                    {{-- Left: All Permissions --}}
                    <div class="list-box" id="available-permissions">
                        <strong>Available Permissions</strong>
                        @foreach($permissions as $permission)
                            <div class="list-item" data-id="{{ $permission->id }}">
                                {{ $permission->display_name }}
                                <span class="icon">➕</span>
                            </div>
                        @endforeach
                    </div>

                    {{-- Right: Selected Permissions --}}
                    <div class="list-box" id="selected-permissions">
                        <strong>Selected Permissions</strong>
                        {{-- Hidden inputs will be inserted here --}}
                    </div>
                </div>

                <div class="mt-3">
                    {{ Form::submit('Save',['class'=>'btn btn-success']) }}
                </div>

                {{ Form::close() }}

            </div>
        </div>
    </div>
</div>
@endsection

@section("js")
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
    <script>
        $(document).ready(function() {

            // Move from available to selected
            $('#available-permissions').on('click', '.list-item', function() {
                let id = $(this).data('id');
                let name = $(this).clone().children().remove().end().text().trim();

                $('#selected-permissions').append(`
                    <div class="list-item" data-id="${id}">
                        ${name}
                        <input type="hidden" name="permission_id[]" value="${id}">
                        <span class="icon">❌</span>
                    </div>
                `);

                $(this).remove();
            });

            // Move from selected back to available
            $('#selected-permissions').on('click', '.list-item', function() {
                let id = $(this).data('id');
                let name = $(this).clone().children().remove().end().text().trim();

                $('#available-permissions').append(`
                    <div class="list-item" data-id="${id}">
                        ${name}
                        <span class="icon">➕</span>
                    </div>
                `);

                $(this).remove();
            });

            // Make selected list sortable
            Sortable.create(document.getElementById('selected-permissions'), {
                animation: 150
            });
        });
    </script>
@endsection