@extends('layouts.admin')

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

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

@section('content')
  <div class="container-fluid mt-4 seat-group-permissions">

    <!-- Header with buttons -->
    <div class="mb-3 d-flex align-items-center justify-content-between flex-wrap">
        <div>
            <h1 class="h3 d-inline align-middle">Manage Privileges for {{ $role->name }}</h1>
        </div>
        <div class="d-flex">
            <button type="button" id="save_permissions_top" class="btn btn-success">
                Save Changes
            </button>
            <a href="{{ url()->previous() }}" class="btn btn-primary ms-2">Back</a>
        </div>
    </div>

        <div class="row">
            <div class="col-12 mb-3">
                <form method="GET" action="" class="row g-3 mb-3">
                    <div class="col-md-4">
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control"
                            placeholder="Search permission name">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary">Search</button>
                        @if (request('search'))
                            <a href="{{ url()->current() }}" class="btn btn-outline-secondary">
                                Clear
                            </a>
                        @endif
                    </div>
                </form>
            </div>
        </div>
        {{-- EXISTING ROLE PERMISSIONS (for search-safe saving) --}}
        <div id="existing-permissions" style="display:none;">
            @foreach ($rolePermissions as $pid)
                <input type="hidden" class="existing-permission" value="{{ $pid }}">
            @endforeach
        </div>
        <div class="row align-items-stretch">

            <!--left-->
            <!-- LEFT BOX → MENU PERMISSIONS -->
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Menu Privileges</h4>
                    </div>
                    <div class="card-body pt-0">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <tbody>
                                    @php
                                        $menuPermissions = $permissions->where('type', 'menu');
                                    @endphp

                                    @if ($menuPermissions->count() > 0)
                                        @foreach ($menuPermissions as $permission)
                                            <tr>
                                                <td width="70%">{{ $permission->name }}</td>
                                                <td>
                                                    <label class="d-inline-flex align-items-center gap-2">
                                                        <input type="checkbox" class="form-check-input permission-checkbox"
                                                            value="{{ $permission->id }}"
                                                            {{ in_array($permission->id, $rolePermissions) ? 'checked' : '' }}>
                                                        <span class="text-success">Allow</span>
                                                    </label>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="2" class="text-center text-muted py-3">
                                                No Menu Privileges Found
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- RIGHT BOX → FUNCTION PERMISSIONS -->
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Function Privileges</h4>
                    </div>
                    <div class="card-body pt-0">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <tbody>
                                    @php
                                        $functionPermissions = $permissions->where('type', 'function');
                                    @endphp
                                    @if ($functionPermissions->count() > 0)
                                        @foreach ($functionPermissions as $permission)
                                            <tr>
                                                <td width="70%">{{ $permission->name }}</td>
                                                <td>
                                                    <label class="d-inline-flex align-items-center gap-2">
                                                        <input type="checkbox" class="form-check-input permission-checkbox"
                                                            value="{{ $permission->id }}"
                                                            {{ in_array($permission->id, $rolePermissions) ? 'checked' : '' }}>
                                                        <span class="text-success">Allow</span>
                                                    </label>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="2" class="text-center text-muted py-3">
                                                No Function Privileges Found
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SAVE BUTTONS -->
            <div class="col-12 mt-3">
                <button type="button" id="save_permissions" class="btn btn-primary me-2">
                    Save Changes
                </button>
                <button type="button" id="reset_permissions" class="btn btn-secondary">
                    Reset Changes
                </button>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {

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

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

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

            // Save Permissions — AJAX
            function updatePermissions() {

                // 1. Existing permissions (A, B, C, D, E)
                const existing = $('.existing-permission').map(function() {
                    return $(this).val();
                }).get();

                // 2. Visible permissions (search result: C, D)
                const visible = $('.permission-checkbox').map(function() {
                    return $(this).val();
                }).get();

                // 3. Checked permissions (after user action)
                const checked = $('.permission-checkbox:checked').map(function() {
                    return $(this).val();
                }).get();

                /*
                    LOGIC:
                    - Keep all existing permissions
                    - Remove only unchecked visible ones
                    - Add checked ones
                */

                const finalPermissions = existing
                    // remove unchecked visible permissions
                    .filter(id => !visible.includes(id) || checked.includes(id))
                    // add newly checked permissions
                    .concat(
                        checked.filter(id => !existing.includes(id))
                    );

                const formData = new FormData();
                finalPermissions.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 => res.json())
                    .then(data => {
                        if (data.status === 'success') {
                            showSwal('Permissions Updated Successfully!');
                        } else {
                            showSwal(data.message || 'Error updating permissions', 'error');
                        }
                    })
                    .catch(err => {
                        showSwal('AJAX Error: ' + err.message, 'error');
                        console.error(err);
                    });
            }


            // Save button click event
            $('#save_permissions').on('click', function() {
                confirmAction('Save selected permissions for this role?', updatePermissions);
            });

            $('#save_permissions_top').on('click', function() {
                confirmAction('Save selected permissions for this role?', updatePermissions);
            });

            $('#reset_permissions').on('click', function() {
                Swal.fire({
                    title: "Are you sure?",
                    text: "This will remove ALL permissions from this role.",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, Reset All",
                    cancelButtonText: "Cancel",
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#3085d6"
                }).then(result => {
                    if (result.isConfirmed) {

                        // Uncheck all checkboxes in UI
                        $('.permission-checkbox').prop('checked', false);

                        // Send empty permissions list to backend
                        const formData = new FormData(); // no permissions added

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

                        fetch(url, {
                                method: 'POST',
                                headers: {
                                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                                        'content'),
                                    "Accept": "application/json"
                                },
                                body: formData
                            })
                            .then(res => res.json())
                            .then(data => {
                                if (data.status === 'success') {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'All permissions removed!',
                                        timer: 1500,
                                        showConfirmButton: false
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: data.message ||
                                            "Failed to reset permissions",
                                    });
                                }
                            })
                            .catch(err => {
                                Swal.fire({
                                    icon: 'error',
                                    title: "AJAX Error",
                                    text: err.message
                                });
                            });
                    }
                });
            });


        });
    </script>
@endpush