@extends('layouts.app')

@section('title', 'Permissions')

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <h4 class="mb-3 mb-md-0">Permission Management</h4>
        <p class="text-muted mb-0">Enable or disable permissions for each page action</p>
    </div>

    @include('partials.alerts')

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                    <tr>
                        <th style="width: 200px;">Page</th>
                        <th class="text-center" style="width: 120px;">View</th>
                        <th class="text-center" style="width: 120px;">Create</th>
                        <th class="text-center" style="width: 120px;">Update</th>
                        <th class="text-center" style="width: 120px;">Delete</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($pages as $page)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar me-3">
                                        <div class="avatar-initial bg-label-primary rounded">
                                            <i class="icon-base ti {{ $page['icon'] }}"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ $page['name'] }}</h6>
                                        <small class="text-muted">{{ $page['description'] }}</small>
                                    </div>
                                </div>
                            </td>
                            @foreach(['view', 'create', 'update', 'delete'] as $action)
                                @if(in_array($action, $page['actions']))
                                    <td class="text-center">
                                        <form action="{{ route('permissions.toggle') }}" method="POST" class="d-inline toggle-form" data-page-slug="{{ $page['slug'] }}" data-action="{{ $action }}">
                                            @csrf
                                            <input type="hidden" name="page_slug" value="{{ $page['slug'] }}">
                                            <input type="hidden" name="action" value="{{ $action }}">
                                            <input type="hidden" name="enabled" value="{{ $page['permissions'][$action]['exists'] ? '0' : '1' }}">
                                            <div class="form-check form-switch form-check-inline">
                                                <input class="form-check-input toggle-switch" 
                                                       type="checkbox" 
                                                       id="toggle-{{ $page['slug'] }}-{{ $action }}"
                                                       {{ $page['permissions'][$action]['exists'] ? 'checked' : '' }}
                                                       data-page-slug="{{ $page['slug'] }}"
                                                       data-action="{{ $action }}">
                                                <label class="form-check-label" for="toggle-{{ $page['slug'] }}-{{ $action }}"></label>
                                            </div>
                                        </form>
                                    </td>
                                @else
                                    <td class="text-center">
                                        <span class="text-muted">—</span>
                                    </td>
                                @endif
                            @endforeach
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.toggle-switch').forEach(function(switchElement) {
        switchElement.addEventListener('change', function() {
            const form = this.closest('.toggle-form');
            const enabledInput = form.querySelector('input[name="enabled"]');
            
            // Update the enabled value based on checkbox state
            // When checkbox is checked, we want to enable (value = '1')
            // When checkbox is unchecked, we want to disable (value = '0')
            enabledInput.value = this.checked ? '1' : '0';
            
            // Show loading state
            const originalChecked = this.checked;
            this.disabled = true;
            
            // Submit the form
            fetch(form.action, {
                method: 'POST',
                body: new FormData(form),
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                }
            })
            .then(response => {
                if (response.redirected) {
                    window.location.href = response.url;
                } else {
                    return response.json();
                }
            })
            .then(data => {
                if (data && data.success) {
                    // Success - reload page to show updated state
                    window.location.reload();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // Revert checkbox state on error
                this.checked = !originalChecked;
                this.disabled = false;
                alert('Error updating permission. Please try again.');
            });
        });
    });
});
</script>
@endpush