@extends('layouts.app')
@section('content')
<div class="container-fluid py-3">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-key me-2"></i>Permissions Management</h5>
                </div>
                <div class="card-body">
                    <!-- User Selection Form -->
                    <form method="GET" action="{{ route('permissions.index') }}" class="mb-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="user_id" class="form-label"><strong>Select User</strong></label>
                                <select class="form-control" id="user_id" name="user_id" onchange="this.form.submit()">
                                    <option value="">Choose a user...</option>
                                    @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ $selectedUser && $selectedUser->id == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }} ({{ $user->email }})
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="module" class="form-label"><strong>Filter by Module</strong></label>
                                <select class="form-control" id="module" name="module" onchange="this.form.submit()">
                                    <option value="">All Modules</option>
                                    @foreach($modules as $module)
                                    <option value="{{ $module }}" {{ request('module') == $module ? 'selected' : '' }}>
                                        {{ ucfirst($module) }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </form>

                    @if($selectedUser)
                    <!-- Permissions Assignment Form -->
                    <form method="POST" action="{{ route('permissions.assign') }}">
                        @csrf
                        <input type="hidden" name="user_id" value="{{ $selectedUser->id }}">

                        <div class="row">
                            <div class="col-12">
                                <h6 class="mb-3">Assign Permissions to: <strong>{{ $selectedUser->name }}</strong></h6>

                                @foreach($permissions->groupBy('module') as $module => $modulePermissions)
                                <div class="module-container mb-4">
                                    <div class="module-header d-flex justify-content-between align-items-center bg-primary text-white p-3 rounded-top">
                                        <h5 class="mb-0">{{ ucfirst($module) }}</h5>
                                        <div class="form-check">
                                            <input class="form-check-input select-all-module" type="checkbox" id="select-all-{{ $module }}">
                                            <label class="form-check-label fw-bold" for="select-all-{{ $module }}">
                                                Select All in {{ ucfirst($module) }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="module-body bg-light p-3 rounded-bottom">
                                        @foreach($modulePermissions as $permission)
                                        <div class="feature-item mb-3 p-3 bg-white rounded shadow-sm">
                                            <h6 class="feature-title mb-3 text-primary">{{ $permission->feature }}</h6>
                                            <small class="text-muted d-block mb-3">{{ $permission->description }}</small>
                                            <div class="actions-grid">
@php
                                                    $userPermission = $userPermissions->firstWhere('permission_id', $permission->id);
                                                    $userActions = $userPermission ? (is_array($userPermission->actions) ? $userPermission->actions : json_decode($userPermission->actions, true)) : [];
                                                    $rawActions = $permission->actions;
                                                    $availableActions = is_string($rawActions) ? json_decode($rawActions, true) : $rawActions;
                                                    if (!is_array($availableActions)) {
                                                        $availableActions = [];
                                                    }
                                                @endphp

                                                @foreach($availableActions as $action)
                                                <div class="action-item">
                                                    <div class="form-check">
                                                        <input class="form-check-input permission-checkbox" type="checkbox"
                                                               name="permissions[{{ $permission->id }}][{{ $action }}]"
                                                               value="1"
                                                               id="perm_{{ $permission->id }}_{{ $action }}"
                                                               data-module="{{ $module }}"
                                                               {{ in_array($action, $userActions) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="perm_{{ $permission->id }}_{{ $action }}">
                                                            {{ ucfirst($action) }}
                                                        </label>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                @endforeach

                                <div class="text-center mt-4">
                                    <button type="submit" class="btn btn-success btn-lg">
                                        <i class="fas fa-save me-2"></i> Save Permissions
                                    </button>
                                    <a href="{{ route('permissions.index') }}" class="btn btn-outline-secondary btn-lg ms-2">
                                        <i class="fas fa-times me-2"></i> Cancel
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                    @else
                    <!-- Permissions List -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="bg-success text-white">
                                <tr>
                                    <th>Module</th>
                                    <th>Feature</th>
                                    <th>Slug</th>
                                    <th>Actions</th>
                                    <th style="width:120px">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($permissions as $permission)
                                <tr>
                                    <td>{{ ucfirst($permission->module) }}</td>
                                    <td>{{ $permission->feature }}</td>
                                    <td><code>{{ $permission->slug }}</code></td>
                                    <td>
                                        @php
                                            $rawActions = $permission->actions;
                                            $actions = is_string($rawActions) ? json_decode($rawActions, true) : $rawActions;
                                            if (!is_array($actions)) {
                                                $actions = [];
                                            }
                                        @endphp
                                        @foreach($actions as $action)
                                        <span class="badge bg-secondary me-1">{{ $action }}</span>
                                        @endforeach
                                    </td>
                                    <td class="text-center">
                                        @if(Auth::user()->hasPermission('permissions.manage', 'edit'))
                                        <a href="{{ route('permissions.edit', $permission) }}"
                                           class="btn btn-sm btn-warning" title="Edit Permission">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        @endif
                                        @if(Auth::user()->hasPermission('permissions.manage', 'delete'))
                                        <form method="POST" action="{{ route('permissions.destroy', $permission) }}"
                                              style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this permission?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger ms-1" title="Delete Permission">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="mt-3">
                        {{ $permissions->appends(request()->query())->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.table th {
    background-color: #f8f9fa;
}
.badge {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85em;
}
.pagination {
    margin-bottom: 0;
}
.btn-light {
    background-color: #fff;
    border-color: #fff;
    color: #28a745;
}
.btn-light:hover {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: #28a745;
}
.form-check {
    margin-bottom: 0.5rem;
}
.form-check-input:checked {
    background-color: #ffc107;
    border-color: #ffc107;
}

/* New styles for improved permissions layout */
.module-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.module-header {
    background: linear-gradient(135deg, #198754 0%, #11998e 100%);
    border: none;
}

.module-body {
    border: 1px solid #dee2e6;
    border-top: none;
}

.feature-item {
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.feature-title {
    font-weight: 600;
    margin-bottom: 10px;
    color: #198754 !important;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
}

.action-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.action-item:hover {
    background: #e9ecef;
}

.action-item .form-check {
    margin: 0;
}

.action-item .form-check-input {
    margin: 0 auto;
}

.action-item .form-check-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
}

.select-all-module {
    transform: scale(1.2);
}

.select-all-module:checked {
    background-color: #fff;
    border-color: #fff;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle "Select All" functionality for each module
    document.querySelectorAll('.select-all-module').forEach(function(selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            const module = this.id.replace('select-all-', '');
            const isChecked = this.checked;

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

    // Update "Select All" checkbox when individual permissions change
    document.querySelectorAll('.permission-checkbox').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const module = this.getAttribute('data-module');
            const selectAllCheckbox = document.getElementById(`select-all-${module}`);

            if (selectAllCheckbox) {
                const moduleCheckboxes = document.querySelectorAll(`.permission-checkbox[data-module="${module}"]`);
                const checkedCount = document.querySelectorAll(`.permission-checkbox[data-module="${module}"]:checked`).length;
                const totalCount = moduleCheckboxes.length;

                selectAllCheckbox.checked = checkedCount === totalCount;
                selectAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < totalCount;
            }
        });
    });
});
</script>
@endsection