@extends('layouts.app')

@section('title', 'Edit Role')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Edit Role</h3>
                    <div class="card-tools">
                        <a href="{{ route('roles.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Roles
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('roles.update', $role->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label for="name">Role Name <span class="text-danger">*</span></label>
                            <input type="text" 
                                   class="form-control @error('name') is-invalid @enderror" 
                                   id="name" 
                                   name="name" 
                                   value="{{ old('name', $role->name) }}" 
                                   placeholder="Enter role name (e.g., Manager, Supervisor)"
                                   required>
                            @error('name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="guard_name">Guard Name</label>
                            <select class="form-control @error('guard_name') is-invalid @enderror" 
                                    id="guard_name" 
                                    name="guard_name">
                                <option value="">Select Guard</option>
                                <option value="web" {{ old('guard_name', $role->guard_name) == 'web' ? 'selected' : '' }}>web</option>
                                <option value="api" {{ old('guard_name', $role->guard_name) == 'api' ? 'selected' : '' }}>api</option>
                            </select>
                            <small class="form-text text-muted">
                                Leave empty to use default 'web' guard
                            </small>
                            @error('guard_name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Permissions</label>
                            <div class="row">
                                @foreach($permissions as $group => $groupPermissions)
                                    <div class="col-md-6 mb-3">
                                        <div class="card">
                                            <div class="card-header d-flex justify-content-between align-items-center">
                                                <h6 class="card-title mb-0">{{ $group }}</h6>
                                                <div class="form-check">
                                                    <input class="form-check-input select-all-group"
                                                           type="checkbox"
                                                           id="select-all-{{ str_replace(' ', '-', strtolower($group)) }}"
                                                           data-group="{{ str_replace(' ', '-', strtolower($group)) }}">
                                                    <label class="form-check-label" for="select-all-{{ str_replace(' ', '-', strtolower($group)) }}">
                                                        Select All
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                @foreach($groupPermissions as $permission)
                                                    <div class="form-check">
                                                        <input class="form-check-input permission-checkbox"
                                                               type="checkbox"
                                                               name="permissions[]"
                                                               value="{{ $permission->id }}"
                                                               id="permission-{{ $permission->id }}"
                                                               data-group="{{ str_replace(' ', '-', strtolower($group)) }}"
                                                               {{ in_array($permission->id, $rolePermissions) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="permission-{{ $permission->id }}">
                                                            {{ $permission->name }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <small class="form-text text-muted">
                                Select the permissions you want to assign to this role
                            </small>
                            @error('permissions')
                                <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label>Role Information</label>
                                    <table class="table table-sm">
                                        <tr>
                                            <td><strong>ID:</strong></td>
                                            <td>{{ $role->id }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Created:</strong></td>
                                            <td>{{ $role->created_at->format('Y-m-d H:i:s') }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Updated:</strong></td>
                                            <td>{{ $role->updated_at->format('Y-m-d H:i:s') }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Update Role
                            </button>
                            <a href="{{ route('roles.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle select all checkboxes for each group
    document.querySelectorAll('.select-all-group').forEach(function(selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            const group = this.getAttribute('data-group');
            const isChecked = this.checked;

            // Find all permission checkboxes in this group
            document.querySelectorAll('.permission-checkbox[data-group="' + group + '"]').forEach(function(checkbox) {
                checkbox.checked = isChecked;
            });
        });
    });

    // Handle individual permission checkboxes to update select all state
    document.querySelectorAll('.permission-checkbox').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const group = this.getAttribute('data-group');
            const groupCheckboxes = document.querySelectorAll('.permission-checkbox[data-group="' + group + '"]');
            const selectAllCheckbox = document.querySelector('.select-all-group[data-group="' + group + '"]');

            // Check if all checkboxes in the group are checked
            const allChecked = Array.from(groupCheckboxes).every(cb => cb.checked);
            // Check if at least one checkbox in the group is checked
            const someChecked = Array.from(groupCheckboxes).some(cb => cb.checked);

            selectAllCheckbox.checked = allChecked;
            selectAllCheckbox.indeterminate = someChecked && !allChecked;
        });
    });

    // Initialize select all state on page load
    document.querySelectorAll('.select-all-group').forEach(function(selectAllCheckbox) {
        const group = selectAllCheckbox.getAttribute('data-group');
        const groupCheckboxes = document.querySelectorAll('.permission-checkbox[data-group="' + group + '"]');

        const allChecked = Array.from(groupCheckboxes).every(cb => cb.checked);
        const someChecked = Array.from(groupCheckboxes).some(cb => cb.checked);

        selectAllCheckbox.checked = allChecked;
        selectAllCheckbox.indeterminate = someChecked && !allChecked;
    });
});
</script>
@endsection