@extends('layouts.user_type.auth')

@section('rolePermissions')
<div class="container-fluid py-4 px-4">
    @include('components.alert')

    <div id="tableView">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="mb-0" style="font-weight:700;">Role Permissions</h5>
                    <p class="mb-0" style="font-size:0.75rem;color:var(--grey);margin-top:2px;">Manage access control for each role type.</p>
                </div>
                <button class="qc-btn-create btn bg-gradient-primary btn-sm mb-0" onclick="clearForm(); toggleView('form')">
                    <i class="fas fa-plus me-1" style="font-size:0.72rem;"></i> New Role Permission
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="border:none; max-height:calc(100vh - 280px); overflow-y:auto;">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th style="padding-left:1.25rem; width:5%;">#</th>
                                <th class="text-center">Role Type</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rolePermissions as $index => $rolePermission)
                                <tr>
                                    <td style="padding-left:1.25rem;"><span class="mono" style="font-size:0.72rem;color:var(--grey);">{{ str_pad($rolePermissions->firstItem()+$index,2,'0',STR_PAD_LEFT) }}</span></td>
                                    <td class="text-center">
                                        <div class="d-flex align-items-center justify-content-center gap-2">
                                            <span style="width:26px;height:26px;border-radius:var(--r-sm);background:var(--g3);border:1px solid var(--border-m);display:inline-flex;align-items:center;justify-content:center;">
                                                <i class="fas fa-user-shield" style="font-size:0.68rem;color:var(--indigo);"></i>
                                            </span>
                                            <span style="font-weight:600;color:var(--heading);">{{ $rolePermission->role_type }}</span>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge @if($rolePermission->status=='active') bg-gradient-success @else bg-gradient-secondary @endif">
                                            {{ ucfirst($rolePermission->status) }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if ($rolePermission->status === 'active')
                                            <div class="d-flex justify-content-center gap-2">
                                                <a href="#" class="ia-edit" onclick="openEditModal({{ $rolePermission }});" title="Edit">
                                                    <i class="fas fa-pencil-alt" style="font-size:0.72rem;"></i>
                                                </a>
                                                <form method="POST" action="{{ route('rolePermission.delete', $rolePermission->id) }}" style="display:inline;">
                                                    @csrf
                                                    <button type="submit" class="ia-delete" onclick="return confirm('Delete this role permission?');" style="border:none;font-family:inherit;" title="Delete">
                                                        <i class="fas fa-trash-alt" style="font-size:0.72rem;"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="4"><div class="empty-state"><i class="fas fa-user-shield"></i><p>No role permissions found</p></div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="px-4 py-3" style="border-top:1px solid var(--border);">
                    @include('components.pagination', ['paginator' => $rolePermissions])
                </div>
            </div>
        </div>
    </div>

    <div id="formView" class="d-none">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    <h6 id="rolePermissionModalLabel" class="mb-0" style="font-weight:700;">Create Role Permission</h6>
                    <p class="mb-0" style="font-size:0.72rem;color:var(--grey);margin-top:2px;">Assign module access rights to a role</p>
                </div>
                <button class="qc-btn-dismiss btn btn-light btn-sm mb-0" onclick="toggleView('table')">
                    <i class="fas fa-arrow-left me-1" style="font-size:0.72rem;"></i> Back
                </button>
            </div>
            <form method="POST" action="{{ route('rolePermission.storeOrUpdate') }}" id="rolePermissionModalForm">
                @csrf
                <div class="card-body">
                    <input type="hidden" name="id" id="id">
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Role Type <span class="text-danger">*</span></label>
                            <select class="form-select" id="role_type" name="role_type" required>
                                <option value="" disabled selected>Select Type</option>
                                @foreach ($mastersData as $master)
                                    <option value="{{ $master->value }}">{{ ucfirst($master->code) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" id="status" class="form-select" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>

                    <div class="d-flex align-items-center gap-2 mb-3">
                        <p class="mb-0" style="font-size:0.8rem;font-weight:700;color:var(--heading);">Permissions Matrix</p>
                        <span style="font-size:0.67rem;color:var(--grey);background:var(--smoke);padding:2px 8px;border-radius:20px;border:1px solid var(--border);">Click row/column to toggle all</span>
                    </div>

                    <div style="border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;max-height:420px;overflow-y:auto;">
                        <table class="table table-bordered mb-0" style="font-size:0.77rem;">
                            <thead style="position:sticky;top:0;z-index:10;background:var(--smoke);">
                                <tr>
                                    <th style="padding:0.6rem 1rem;text-align:left;background:var(--smoke);border-bottom:1px solid var(--border-m);font-size:0.7rem;font-weight:800;">Module</th>
                                    @php $permissions = ['view','insert','update','delete']; @endphp
                                    @foreach ($permissions as $perm)
                                        <th class="perm-header text-center" data-perm="{{ $perm }}"
                                            style="cursor:pointer;padding:0.6rem;background:var(--smoke);border-bottom:1px solid var(--border-m);font-size:0.7rem;font-weight:800;min-width:80px;">
                                            <i class="fas @if($perm=='view') fa-eye @elseif($perm=='insert') fa-plus-circle @elseif($perm=='update') fa-pencil-alt @else fa-trash-alt @endif me-1" style="font-size:0.62rem;"></i>
                                            {{ ucfirst($perm) }}
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $models = ['user','packages','subscriptionPackage','companyProfile','ticketSupport','profile','marketingLabMailLog','contactUs','common','marketingLabs','rolePermission','maintenance_mode','faq','loginLog','cronLog','visitorTracker','activityLog','laravelLog','backupLog','systemHealth'];
                                @endphp
                                @foreach ($models as $model)
                                    <tr style="border-bottom:1px solid var(--border);">
                                        <th class="model-header" data-model="{{ $model }}"
                                            style="cursor:pointer;padding:0.5rem 1rem;font-weight:600;color:var(--heading);background:var(--white);font-size:0.77rem;border-right:1px solid var(--border);">
                                            {{ ucfirst(str_replace('_',' ',$model)) }}
                                        </th>
                                        @foreach ($permissions as $perm)
                                            <td style="text-align:center;padding:0.45rem;background:var(--white);border-right:1px solid var(--border);">
                                                <input type="checkbox"
                                                    class="form-check-input check-{{ $model }} check-{{ $perm }}"
                                                    name="permissions[{{ $model }}][{{ $perm }}]"
                                                    style="width:15px;height:15px;cursor:pointer;"
                                                    {{ old("permissions.$model.$perm") ? 'checked' : '' }}>
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end gap-2">
                    <button type="button" class="qc-btn-dismiss btn btn-light mb-0" onclick="toggleView('table')">Cancel</button>
                    <button type="submit" id="submitButton" class="qc-btn-confirm btn bg-gradient-primary mb-0">Save Permissions</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .model-header:hover { background: var(--g2) !important; color: var(--indigo) !important; }
    .perm-header:hover  { background: var(--g3) !important; color: var(--indigo) !important; }
</style>

<script>
    function toggleView(view) {
        if (view === 'form') {
            document.getElementById('tableView').classList.add('d-none');
            document.getElementById('formView').classList.remove('d-none');
        } else {
            document.getElementById('tableView').classList.remove('d-none');
            document.getElementById('formView').classList.add('d-none');
        }
    }

    function clearForm() {
        document.getElementById('rolePermissionModalLabel').innerText = 'Create Role Permission';
        document.getElementById('submitButton').innerText = 'Create';
        document.getElementById('id').value = '';
        document.getElementById('rolePermissionModalForm').reset();
        document.querySelectorAll('input[type="checkbox"][name^="permissions"]').forEach(cb => cb.checked = false);
    }

    function openEditModal(rolePermission) {
        document.getElementById('rolePermissionModalLabel').innerText = 'Update Role Permission';
        document.getElementById('submitButton').innerText = 'Update';
        document.getElementById('id').value = rolePermission.id;
        document.getElementById('role_type').value = rolePermission.role_type;
        document.getElementById('status').value = rolePermission.status;
        document.querySelectorAll('input[type="checkbox"][name^="permissions"]').forEach(cb => cb.checked = false);
        const permissions = rolePermission.permissions;
        Object.entries(permissions).forEach(([model, perms]) => {
            Object.entries(perms).forEach(([perm, value]) => {
                const cb = document.querySelector(`input[name="permissions[${model}][${perm}]"]`);
                if (cb) cb.checked = value == 1;
            });
        });
        toggleView('form');
    }

    document.querySelectorAll('.model-header').forEach(h => h.addEventListener('click', function() {
        const cbs = document.querySelectorAll('.check-'+this.dataset.model);
        const all = Array.from(cbs).every(c => c.checked);
        cbs.forEach(c => c.checked = !all);
    }));

    document.querySelectorAll('.perm-header').forEach(h => h.addEventListener('click', function() {
        const cbs = document.querySelectorAll('.check-'+this.dataset.perm);
        const all = Array.from(cbs).every(c => c.checked);
        cbs.forEach(c => c.checked = !all);
    }));
</script>
@endsection