@extends('layouts.admin')

@php
    use Illuminate\Support\Facades\Crypt;
@endphp

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

@section('content')
    <div class="container-fluid mt-4">
        <div class="row">
            <div class="col-12">

                {{-- Alert placeholder --}}
                <div id="alert-placeholder"></div>

                <div class="card shadow-sm">
                    <div class="card-header text-white bg-dark">
                        <h6 class="mb-0 text-white">Manage Permissions for Role: {{ $role->name }}</h6>
                    </div>
                    <div class="card-body">

                        <div class="row">
                            <!-- Left Box: Assigned -->
                            <div class="col-md-5">
                                <h6 class="mb-2">Assigned Permissions</h6>
                                <select id="assigned_permissions" multiple class="form-control" size="10"
                                    style="min-height: 250px;">
                                    @foreach ($permissions as $permission)
                                        @if (in_array($permission->id, $rolePermissions))
                                            <option value="{{ $permission->id }}">{{ $permission->name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <button type="button" id="remove_permission" class="btn btn-danger mt-3 w-100">
                                    Remove Selected
                                </button>
                            </div>

                            <!-- Middle Column -->
                            <div class="col-md-2 d-flex flex-column justify-content-center align-items-center">
                                <button type="button" id="add_permission" class="btn btn-primary mb-3 w-100">
                                    << Add Selected </button>
                            </div>

                            <!-- Right Box: Available -->
                            <div class="col-md-5">
                                <h6 class="mb-2">Available Permissions</h6>
                                <select id="available_permissions" multiple class="form-control" size="10"
                                    style="min-height: 250px;">
                                    @foreach ($permissions as $permission)
                                        @if (!in_array($permission->id, $rolePermissions))
                                            <option value="{{ $permission->id }}">{{ $permission->name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="mt-4">
                            <a href="{{ route('admin.seatgroups') }}" class="btn btn-secondary">Back</a>
                        </div>

                    </div>
                </div>

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

@push('scripts')
    <script>
        $(document).ready(function() {
            const addBtn = $('#add_permission');
            const removeBtn = $('#remove_permission');
            const assignedSelect = $('#assigned_permissions');
            const availableSelect = $('#available_permissions');

            const roleId = '{{ Crypt::encryptString($role->id) }}';
            const csrfToken = $('meta[name="csrf-token"]').attr('content');

            // Show alert (SweetAlert)
            function showSwal(message, type = 'success') {
                Swal.fire({
                    icon: type,
                    title: message,
                    showConfirmButton: false,
                    timer: 1500
                });
            }

            // Confirmation Popup
            function confirmAction(message, callback) {
                Swal.fire({
                    title: message,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, proceed',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33'
                }).then((result) => {
                    if (result.isConfirmed) callback();
                });
            }

            // AJAX Call to Update Permissions
            function updatePermissionsAjax() {
                const permissions = assignedSelect.find('option').map(function() {
                    return $(this).val();
                }).get();

                const formData = new FormData();
                permissions.forEach(p => formData.append('permissions[]', p));

                const url = "{{ route('admin.seatgroups.permissions.update', Crypt::encryptString($role->id)) }}";

                fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        },
                        body: formData
                    })
                    .then(res => {
                        if (!res.ok) throw new Error('HTTP error ' + res.status);
                        return res.json();
                    })
                    .then(data => {
                        // ✅ Updated condition to match backend keys
                        if (data.status === 'success') {
                            showSwal('Permissions updated successfully', 'success');
                        } else if (data.status === 'error') {
                            showSwal(data.message || 'Error updating permissions', 'error');
                        } else {
                            showSwal('Unexpected response from server', 'error');
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        showSwal('AJAX request failed: ' + err.message, 'error');
                    });
            }

            // Add Permission
            addBtn.on('click', function() {
                confirmAction('Are you sure you want to assign selected permissions?', function() {
                    availableSelect.find(':selected').appendTo(assignedSelect);
                    updatePermissionsAjax();
                });
            });

            // Remove Permission
            removeBtn.on('click', function() {
                confirmAction('Are you sure you want to remove selected permissions?', function() {
                    assignedSelect.find(':selected').appendTo(availableSelect);
                    updatePermissionsAjax();
                });
            });
        });
    </script>
@endpush