@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <!-- Header Card -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-gradient-green text-white py-3 border-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-0 fw-bold">
                                <i class="fas fa-shield-alt me-2"></i>Permissions Management
                            </h4>
                            <p class="mb-0 mt-2 opacity-75">Manage user permissions and access controls</p>
                        </div>
                        @if($selectedUser)
                        <div class="user-context-badge">
                            <i class="fas fa-user-circle me-1"></i>
                            <strong>{{ $selectedUser->name }}</strong>
                        </div>
                        @endif
                    </div>
                </div>

                <div class="card-body">
                    <!-- User Selection -->
                    <form method="GET" action="{{ route('permissions.index') }}" id="filterForm">
                        <div class="row g-3 mb-4">
                            <div class="col-md-6 mx-auto">
                                <div class="search-box">
                                    <label class="form-label fw-semibold">
                                        <i class="fas fa-user me-1"></i>Select User
                                    </label>
                                    <select class="form-select form-select-lg border-2" style="border-color: #198754;" 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>
                        </div>
                    </form>

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

                        <!-- Action Bar -->
                        <div class="action-bar bg-light p-3 rounded mb-4 sticky-top shadow-sm">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-success" id="selectAllBtn">
                                            <i class="fas fa-check-double me-1"></i> Select All
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" id="deselectAllBtn">
                                            <i class="fas fa-times-circle me-1"></i> Deselect All
                                        </button>
                                        <button type="button" class="btn btn-outline-success" id="expandAllBtn">
                                            <i class="fas fa-expand me-1"></i> Expand All
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-6 text-end">
                                    <div class="progress-permission-info">
                                        <span class="fw-semibold" id="selectedCount">0</span> permissions selected
                                        <div class="progress mt-1" style="height: 6px;">
                                            <div id="progressBar" class="progress-bar bg-success" style="width: 0%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Permissions Grid -->
                        <div class="permissions-grid">
                            @foreach($permissions->groupBy('module') as $module => $modulePermissions)
                            <div class="module-card card mb-4 border-0 shadow-sm" data-module="{{ $module }}">
                                <div class="module-card-header card-header bg-gradient-green text-white p-3">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="module-info">
                                            <i class="fas fa-cubes me-2"></i>
                                            <h5 class="mb-0 d-inline-block">{{ ucfirst($module) }} Module</h5>
                                            <span class="badge bg-light text-success ms-2">
                                                {{ $modulePermissions->count() }} features
                                            </span>
                                        </div>
                                        <div class="module-actions">
                                            <label class="module-select-all-label me-3 text-white">
                                                <input type="checkbox" class="module-select-all me-2">
                                                <span class="fw-semibold">Select All</span>
                                            </label>
                                            <button type="button" class="btn btn-sm btn-light toggle-module">
                                                <i class="fas fa-chevron-up"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="module-body collapse show">
                                    <div class="card-body bg-light">
                                        <div class="row g-3">
                                            @foreach($modulePermissions as $permission)
                                            @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
                                            <div class="col-md-6 col-lg-4">
                                                <div class="feature-card card h-100 border-0 shadow-sm">
                                                    <div class="card-body p-3">
                                                        <div class="feature-header d-flex justify-content-between align-items-start mb-2">
                                                            <h6 class="feature-title mb-0 fw-bold text-success">
                                                                <i class="fas fa-cog text-success me-2"></i>
                                                                {{ $permission->feature }}
                                                            </h6>
                                                            @if(count($availableActions) > 3)
                                                            <span class="badge bg-success">{{ count($availableActions) }} actions</span>
                                                            @endif
                                                        </div>

                                                        @if($permission->description)
                                                        <p class="small text-muted mb-3">{{ $permission->description }}</p>
                                                        @endif

                                                        <div class="actions-group mt-2">
                                                            <div class="row g-2">
                                                                @foreach($availableActions as $action)
                                                                <div class="col-6">
                                                                    <div class="action-checkbox-item border rounded p-2">
                                                                        <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 }}"
                                                                                   data-permission="{{ $permission->id }}"
                                                                                   {{ in_array($action, $userActions) ? 'checked' : '' }}>
                                                                            <label class="form-check-label" for="perm_{{ $permission->id }}_{{ $action }}">
                                                                                <i class="fas fa-{{ $action === 'view' ? 'eye' : ($action === 'create' ? 'plus-circle' : ($action === 'edit' ? 'edit' : ($action === 'delete' ? 'trash' : 'check'))) }} me-1 text-success"></i>
                                                                                {{ ucfirst($action) }}
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                @endforeach
                                                            </div>
                                                        </div>

                                                        <!-- Quick actions indicator -->
                                                        @if(count($userActions) > 0)
                                                        <div class="mt-2 pt-2 border-top">
                                                            <small class="text-success">
                                                                <i class="fas fa-check-circle me-1"></i>
                                                                {{ count($userActions) }} action(s) assigned
                                                            </small>
                                                        </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <!-- Form Actions -->
                        <div class="form-actions sticky-bottom bg-white p-3 mt-4 rounded shadow-sm border-top border-success border-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <button type="submit" class="btn btn-success btn-lg px-4" id="saveBtn">
                                        <i class="fas fa-save me-2"></i> Save Permissions
                                    </button>
                                    <a href="{{ route('permissions.index') }}" class="btn btn-outline-secondary btn-lg px-4 ms-2">
                                        <i class="fas fa-times me-2"></i> Cancel
                                    </a>
                                </div>
                                <div class="text-muted">
                                    <small><i class="fas fa-info-circle me-1 text-success"></i> Changes are saved immediately</small>
                                </div>
                            </div>
                        </div>
                    </form>
                    @else
                    <!-- Permissions List View -->
                    <div class="permissions-list-view">
                        <div class="row mb-3">
                            <div class="col-12">
                                <h5 class="mb-0 text-success">All System Permissions</h5>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover table-striped align-middle">
                                <thead class="bg-success text-white">
                                    <tr>
                                        <th><i class="fas fa-cubes me-1"></i> Module</th>
                                        <th><i class="fas fa-cog me-1"></i> Feature</th>
                                        <th><i class="fas fa-tag me-1"></i> Slug</th>
                                        <th><i class="fas fa-bolt me-1"></i> Actions</th>
                                        <th style="width: 120px"><i class="fas fa-wrench me-1"></i> Manage</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($permissions as $permission)
                                    <tr>
                                        <td>
                                            <span class="badge bg-success">{{ ucfirst($permission->module) }}</span>
                                        </td>
                                        <td>
                                            <strong class="text-success">{{ $permission->feature }}</strong>
                                            @if($permission->description)
                                            <br><small class="text-muted">{{ $permission->description }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            <code class="small bg-light p-1 rounded">{{ $permission->slug }}</code>
                                        </td>
                                        <td>
                                            @php
                                                $rawActions = $permission->actions;
                                                $actions = is_string($rawActions) ? json_decode($rawActions, true) : $rawActions;
                                                if (!is_array($actions)) {
                                                    $actions = [];
                                                }
                                            @endphp
                                            <div class="actions-badge-group">
                                                @foreach($actions as $action)
                                                <span class="badge bg-success bg-opacity-75">
                                                    <i class="fas fa-{{ $action === 'view' ? 'eye' : ($action === 'create' ? 'plus' : ($action === 'edit' ? 'pencil' : ($action === 'delete' ? 'trash' : 'check'))) }} me-1"></i>
                                                    {{ ucfirst($action) }}
                                                </span>
                                                @endforeach
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            @if(Auth::user()->hasPermission('permissions.manage', 'edit'))
                                            <a href="{{ route('permissions.edit', $permission) }}"
                                               class="btn btn-sm btn-warning"
                                               data-bs-toggle="tooltip"
                                               title="Edit Permission">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            @endif
                                            @if(Auth::user()->hasPermission('permissions.manage', 'delete'))
                                            <button type="button"
                                                    class="btn btn-sm btn-danger ms-1"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#deleteModal{{ $permission->id }}"
                                                    title="Delete Permission">
                                                <i class="fas fa-trash"></i>
                                            </button>

                                            <!-- Delete Modal -->
                                            <div class="modal fade" id="deleteModal{{ $permission->id }}" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header bg-success text-white">
                                                            <h5 class="modal-title">Confirm Delete</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            Are you sure you want to delete permission <strong class="text-success">{{ $permission->feature }}</strong>?
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                            <form method="POST" action="{{ route('permissions.destroy', $permission) }}" style="display: inline;">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-success">Delete</button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination (if using pagination) -->
                        @if(method_exists($permissions, 'links'))
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                Showing {{ $permissions->firstItem() }} to {{ $permissions->lastItem() }} of {{ $permissions->total() }} permissions
                            </div>
                            <div>
                                {{ $permissions->appends(request()->query())->links() }}
                            </div>
                        </div>
                        @endif
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Modern Green Color Scheme */
:root {
    --primary-green: #198754;
    --primary-green-dark: #0f5c3a;
    --primary-green-light: #d1e7dd;
    --primary-green-bg: #f8faf8;
}

.bg-gradient-green {
    background: linear-gradient(135deg, #198754 0%, #0f5c3a 100%);
}

.bg-light-green {
    background-color: var(--primary-green-light);
}

.text-success {
    color: var(--primary-green) !important;
}

.btn-success {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.btn-success:hover {
    background-color: var(--primary-green-dark);
    border-color: var(--primary-green-dark);
}

.btn-outline-success {
    color: var(--primary-green);
    border-color: var(--primary-green);
}

.btn-outline-success:hover {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.badge.bg-success {
    background-color: var(--primary-green) !important;
}

/* Module Card Styling */
.module-card {
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(25, 135, 84, 0.15) !important;
}

.module-card-header {
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #198754 0%, #0f5c3a 100%);
}

.module-card-header:hover {
    background: linear-gradient(135deg, #0f5c3a 0%, #198754 100%);
}

/* Feature Card Styling */
.feature-card {
    transition: all 0.3s ease;
    border-radius: 10px;
    background: #fff;
    border-left: 3px solid var(--primary-green) !important;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.12) !important;
}

.feature-title {
    color: var(--primary-green);
    font-size: 1rem;
}

/* Action Checkbox Styling */
.action-checkbox-item {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 6px 10px;
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
}

.action-checkbox-item:hover {
    background: var(--primary-green-light);
    transform: translateX(2px);
    border-color: var(--primary-green);
}

.form-check-input:checked {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.form-check-input:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

/* Action Bar Sticky */
.action-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--primary-green);
    background-color: #f8f9fa !important;
}

.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background: white;
    border-top: 2px solid var(--primary-green);
}

/* Permission Badges */
.actions-badge-group .badge {
    margin: 2px;
    padding: 6px 10px;
    font-size: 0.75rem;
}

/* User Context Badge */
.user-context-badge {
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
}

/* Progress Bar */
.progress-permission-info {
    min-width: 200px;
}

.progress-bar.bg-success {
    background-color: var(--primary-green) !important;
}

/* Table Styling */
.table thead.bg-success {
    background-color: var(--primary-green) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--primary-green-light);
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.module-card {
    animation: fadeIn 0.5s ease-out;
}

/* Form Select Focus */
.form-select:focus, .form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

/* Card Borders */
.card {
    border-radius: 12px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .action-bar .row > div {
        margin-bottom: 10px;
    }

    .action-bar .text-end {
        text-align: left !important;
    }

    .form-actions .d-flex {
        flex-direction: column;
        gap: 10px;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-green);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-green-dark);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Update selected count and progress bar
    function updateSelectionStats() {
        const totalCheckboxes = document.querySelectorAll('.permission-checkbox').length;
        const checkedCheckboxes = document.querySelectorAll('.permission-checkbox:checked').length;
        const percentage = totalCheckboxes > 0 ? (checkedCheckboxes / totalCheckboxes) * 100 : 0;

        const selectedCountSpan = document.getElementById('selectedCount');
        const progressBar = document.getElementById('progressBar');

        if (selectedCountSpan) {
            selectedCountSpan.textContent = checkedCheckboxes;
        }

        if (progressBar) {
            progressBar.style.width = percentage + '%';
        }
    }

    // Initialize stats
    updateSelectionStats();

    // Module toggle functionality
    document.querySelectorAll('.toggle-module').forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            const moduleBody = this.closest('.module-card').querySelector('.module-body');
            const icon = this.querySelector('i');

            if (moduleBody.classList.contains('show')) {
                moduleBody.classList.remove('show');
                if (icon) {
                    icon.classList.remove('fa-chevron-up');
                    icon.classList.add('fa-chevron-down');
                }
            } else {
                moduleBody.classList.add('show');
                if (icon) {
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-up');
                }
            }
        });
    });

    // Also toggle when clicking on module header
    document.querySelectorAll('.module-card-header').forEach(header => {
        header.addEventListener('click', function(e) {
            // Don't trigger if clicking on checkbox or button
            if (e.target.type === 'checkbox' || e.target.classList.contains('toggle-module') || e.target.closest('.toggle-module')) {
                return;
            }

            const moduleBody = this.closest('.module-card').querySelector('.module-body');
            const icon = this.querySelector('.toggle-module i');

            if (moduleBody.classList.contains('show')) {
                moduleBody.classList.remove('show');
                if (icon) {
                    icon.classList.remove('fa-chevron-up');
                    icon.classList.add('fa-chevron-down');
                }
            } else {
                moduleBody.classList.add('show');
                if (icon) {
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-up');
                }
            }
        });
    });

    // Module "Select All" functionality
    document.querySelectorAll('.module-select-all').forEach(selectAllCheckbox => {
        selectAllCheckbox.addEventListener('change', function(e) {
            e.stopPropagation();
            const moduleCard = this.closest('.module-card');
            const isChecked = this.checked;

            moduleCard.querySelectorAll('.permission-checkbox').forEach(checkbox => {
                checkbox.checked = isChecked;
            });

            updateSelectionStats();
        });
    });

    // Global Select All
    const selectAllBtn = document.getElementById('selectAllBtn');
    if (selectAllBtn) {
        selectAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
                checkbox.checked = true;
            });
            document.querySelectorAll('.module-select-all').forEach(selectAll => {
                selectAll.checked = true;
            });
            updateSelectionStats();
        });
    }

    // Global Deselect All
    const deselectAllBtn = document.getElementById('deselectAllBtn');
    if (deselectAllBtn) {
        deselectAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
                checkbox.checked = false;
            });
            document.querySelectorAll('.module-select-all').forEach(selectAll => {
                selectAll.checked = false;
            });
            updateSelectionStats();
        });
    }

    // Expand All
    const expandAllBtn = document.getElementById('expandAllBtn');
    if (expandAllBtn) {
        expandAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.module-body').forEach(body => {
                body.classList.add('show');
            });
            document.querySelectorAll('.toggle-module i').forEach(icon => {
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
            });
        });
    }

    // Individual checkbox change
    document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const moduleCard = this.closest('.module-card');
            if (moduleCard) {
                const moduleSelectAll = moduleCard.querySelector('.module-select-all');
                if (moduleSelectAll) {
                    const moduleCheckboxes = moduleCard.querySelectorAll('.permission-checkbox');
                    const checkedCount = moduleCard.querySelectorAll('.permission-checkbox:checked').length;
                    moduleSelectAll.checked = checkedCount === moduleCheckboxes.length;
                    moduleSelectAll.indeterminate = checkedCount > 0 && checkedCount < moduleCheckboxes.length;
                }
            }

            updateSelectionStats();
        });
    });

    // Save confirmation for form submission
    const permissionsForm = document.getElementById('permissionsForm');
    if (permissionsForm) {
        permissionsForm.addEventListener('submit', function(e) {
            const selectedCount = document.querySelectorAll('.permission-checkbox:checked').length;
            if (selectedCount === 0) {
                if (!confirm('No permissions selected. Do you want to proceed?')) {
                    e.preventDefault();
                }
            } else {
                // Show loading state
                const saveBtn = document.getElementById('saveBtn');
                if (saveBtn) {
                    const originalText = saveBtn.innerHTML;
                    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Saving...';
                    saveBtn.disabled = true;

                    // Re-enable after form submission
                    setTimeout(() => {
                        saveBtn.innerHTML = originalText;
                        saveBtn.disabled = false;
                    }, 3000);
                }
            }
        });
    }

    // Tooltips initialization (if Bootstrap is available)
    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
});
</script>
@endsection