@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh;">
    <div class="container">
        {{-- Header Section --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h1 class="display-5 fw-bold mb-2">
                            <span class="text-primary">Role & Permissions</span>
                        </h1>
                        <p class="text-muted mb-0">Manage roles and assign permissions to control access</p>
                    </div>
                    <a href="{{ route('roles.index') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-2"></i>Back to Roles
                    </a>
                </div>
            </div>
        </div>

        <div class="row">
            {{-- Main Form Section --}}
            <div class="col-lg-8 mb-4">
                <div class="card shadow-lg border-0 rounded-4 overflow-hidden">
                    {{-- Success/Error Messages
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show m-4 rounded-3 border-0 shadow-sm" role="alert">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-check-circle-fill fs-4 me-3"></i>
                                <div>
                                    <strong>Success!</strong> {{ session('success') }}
                                </div>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show m-4 rounded-3 border-0 shadow-sm" role="alert">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
                                <div>
                                    <strong>Error!</strong> {{ session('error') }}
                                </div>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show m-4 rounded-3 border-0 shadow-sm" role="alert">
                            <div class="d-flex align-items-start">
                                <i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
                                <div>
                                    <strong>Please fix the following errors:</strong>
                                    <ul class="mb-0 mt-2">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                     --}}

                    <form action="{{ route('role-permissions.store') }}" method="POST" id="rolePermissionForm">
                        @csrf

                        {{-- Role Selection --}}
                        <div class="card-header bg-gradient textte py-4" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <h5 class="mb-0 d-flex align-items-center">
                                <i class="bi bi-person-badge me-2"></i>
                                Select Role
                            </h5>
                        </div>
                        <div class="card-body bg-light">
                            <div class="mb-0">
                                <label for="role_id" class="form-label fw-semibold">
                                    Choose Role <span class="text-danger">*</span>
                                </label>
                                <select name="role_id" id="role_id" 
                                        class="form-select form-select-lg shadow-sm"
                                        {{ isset($role) ? 'disabled' : '' }}
                                        required>
                                    <option value="">🎯 Select a Role</option>
                                    @foreach($roles as $r)
                                        <option value="{{ $r->id }}" 
                                                {{ (isset($role) && $role->id == $r->id) || old('role_id') == $r->id ? 'selected' : '' }}>
                                            {{ $r->name }} ({{ $r->permissions->count() }} permissions)
                                        </option>
                                    @endforeach
                                </select>
                                @if(isset($role))
                                    <input type="hidden" name="role_id" value="{{ $role->id }}">
                                @endif
                            </div>
                        </div>

                        {{-- Permissions Section --}}
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
                                <div>
                                    <h5 class="mb-1 fw-bold">Assign Permissions</h5>
                                    <small class="text-muted">Select the permissions for this role</small>
                                </div>
                                <div class="btn-group shadow-sm" role="group">
                                    <button type="button" onclick="selectAll()" class="btn btn-success btn-sm">
                                        <i class="bi bi-check-all me-1"></i>Select All
                                    </button>
                                    <button type="button" onclick="deselectAll()" class="btn btn-secondary btn-sm">
                                        <i class="bi bi-x-lg me-1"></i>Clear All
                                    </button>
                                </div>
                            </div>

                            <div id="permissionsContainer">
                                @if($permissions->count() > 0)
                                    @foreach($permissions as $group => $groupPermissions)
                                        <div class="card mb-3 border-0 shadow-sm hover-card">
                                            <div class="card-header bg-gradient text-white d-flex justify-content-between align-items-center py-3" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                                                <h6 class="mb-0 text-uppercase fw-bold d-flex align-items-center">
                                                    <span class="badge bg-white text-primary me-2">{{ $groupPermissions->count() }}</span>
                                                    {{ $group ?: 'General Permissions' }}
                                                </h6>
                                                <button type="button" 
                                                        onclick="toggleGroup('{{ $group }}')"
                                                        class="btn btn-light btn-sm shadow-sm">
                                                    <i class="bi bi-arrow-down-up"></i> Toggle
                                                </button>
                                            </div>
                                            
                                            <div class="card-body p-4 bg-light-subtle">
                                                <div class="row g-3">
                                                    @foreach($groupPermissions as $permission)
                                                        <div class="col-md-6 col-lg-4">
                                                            <div class="form-check p-3 border rounded-3 bg-white hover-permission h-100">
                                                                <input class="form-check-input permission-checkbox" 
                                                                       type="checkbox" 
                                                                       name="permissions[]" 
                                                                       value="{{ $permission->id }}"
                                                                       id="permission_{{ $permission->id }}"
                                                                       data-group="{{ $group }}"
                                                                       {{ (isset($role) && $role->hasPermissionTo($permission->name)) || (is_array(old('permissions')) && in_array($permission->id, old('permissions'))) ? 'checked' : '' }}>
                                                                <label class="form-check-label w-100 user-select-none" for="permission_{{ $permission->id }}" style="cursor: pointer;">
                                                                    <span class="fw-medium">{{ $permission->name }}</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body text-center py-5">
                                            <i class="bi bi-inbox fs-1 text-muted mb-3 d-block"></i>
                                            <h5 class="text-muted">No permissions available</h5>
                                            <p class="text-muted mb-0">Please create permissions first to assign them to roles</p>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        {{-- Action Buttons --}}
                        <div class="card-footer bg-light border-0 d-flex justify-content-end gap-2 py-3">
                            <a href="{{ route('roles.index') }}" class="btn btn-outline-secondary px-4">
                                <i class="bi bi-x-circle me-2"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary px-4 shadow-sm">
                                <i class="bi bi-check-circle me-2"></i>
                                {{ isset($role) ? 'Update Permissions' : 'Assign Permissions' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Sidebar - Quick Access Roles --}}
            <div class="col-lg-4 mb-4">
                <div class="card shadow-lg border-0 rounded-4 sticky-top" style="top: 20px;">
                    <div class="card-header bg-gradient text py-4" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                        <h5 class="mb-1 fw-bold d-flex align-items-center">
                            <i class="bi bi-people-fill me-2"></i>
                            All Roles
                        </h5>
                        <small class="opacity-75">Quick access to manage permissions</small>
                    </div>
                    <div class="card-body p-3 role-list-container">
                        <div class="list-group list-group-flush">
                            @foreach($roles as $r)
                                <a href="{{ route('role-permissions.edit', $r->id) }}" 
                                   class="list-group-item list-group-item-action border rounded-3 mb-2 role-item {{ (isset($role) && $role->id == $r->id) ? 'active' : '' }}">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1 fw-bold {{ (isset($role) && $role->id == $r->id) ? 'text-white' : '' }}">
                                                <i class="bi bi-circle-fill me-2" style="font-size: 0.5rem;"></i>
                                                {{ $r->name }}
                                            </h6>
                                            <small class="{{ (isset($role) && $role->id == $r->id) ? 'text-white opacity-75' : 'text-muted' }}">
                                                <i class="bi bi-shield-lock me-1"></i>
                                                {{ $r->permissions->count() }} permissions
                                            </small>
                                        </div>
                                        <i class="bi bi-chevron-right {{ (isset($role) && $role->id == $r->id) ? 'text-white' : 'text-muted' }}"></i>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Hover Effects */
    .hover-card {
        transition: all 0.3s ease;
    }
    .hover-card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-2px);
    }
    
    .hover-permission {
        transition: all 0.3s ease;
    }
    .hover-permission:hover {
        border-color: #0d6efd !important;
        background-color: rgba(13, 110, 253, 0.05) !important;
    }
    
    /* Form Check Styling */
    .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
    
    /* Active Role Item */
    .role-item.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: #667eea !important;
    }
    
    /* Custom Scrollbar */
    .role-list-container {
        max-height: 600px;
        overflow-y: auto;
    }
    .role-list-container::-webkit-scrollbar {
        width: 8px;
    }
    .role-list-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    .role-list-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }
    .role-list-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* Alert Animation */
    .alert {
        animation: slideIn 0.3s ease-out;
    }
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Rounded Corners */
    .rounded-4 {
        border-radius: 1rem !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Load role permissions when role is selected
        const roleSelect = document.getElementById('role_id');
        if (roleSelect) {
            roleSelect.addEventListener('change', function() {
                const roleId = this.value;
                
                if (roleId) {
                    // Deselect all first
                    document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
                        checkbox.checked = false;
                    });

                    // Fetch and select role permissions
                    fetch(`/role-permissions/${roleId}/permissions`)
                        .then(response => response.json())
                        .then(permissionIds => {
                            permissionIds.forEach(id => {
                                const checkbox = document.getElementById(`permission_${id}`);
                                if (checkbox) {
                                    checkbox.checked = true;
                                }
                            });
                        })
                        .catch(error => console.error('Error loading permissions:', error));
                } else {
                    deselectAll();
                }
            });
        }
    });

    function selectAll() {
        document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
            checkbox.checked = true;
        });
    }

    function deselectAll() {
        document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
            checkbox.checked = false;
        });
    }

    function toggleGroup(group) {
        const checkboxes = document.querySelectorAll(`.permission-checkbox[data-group="${group}"]`);
        const allChecked = Array.from(checkboxes).every(cb => cb.checked);
        
        checkboxes.forEach(checkbox => {
            checkbox.checked = !allChecked;
        });
    }
</script>

@endsection