@extends('layouts.user_type.auth')

@section('rolePermissions')
    <div>
        <div class="row">
            <div class="col-12">
                @include('components.alert')
                <div class="card mb-4 mx-4">
                    <div class="card-header pb-0">
                        <div class="d-flex flex-row justify-content-between">
                            <h5 class="mb-0">Role Permissions</h5>
                            <a href="#" class="btn btn-primary"
                                data-bs-toggle="modal"data-bs-target="#rolePermissionModal" id="createButton">
                                + New Role Permission
                            </a>
                        </div>
                    </div>
                    <!-- Role Permission Table -->
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">ID
                                        </th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Role Type</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Status</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($rolePermissions as $index => $rolePermission)
                                        <tr>
                                            <td class="ps-4">
                                                <p class="text-xs font-weight-bold mb-0">
                                                    {{ $rolePermissions->firstItem() + $index }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">
                                                    {{ $rolePermission->role_type }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p
                                                    class="font-weight-bold mb-0 
                                                    @if ($rolePermission->status == 'active') badge badge-sm bg-gradient-info
                                                    @elseif($rolePermission->status == 'inactive')
                                                        badge badge-sm bg-gradient-warning @endif">
                                                    {{ ucfirst($rolePermission->status) }}
                                                </p>
                                            </td>
                                            <td class="text-center">
                                                @if ($rolePermission->status === 'active')
                                                    <a href="#" class="mx-3" data-bs-toggle="modal"
                                                        data-bs-target="#rolePermissionModal" title="Edit"
                                                        onclick="openEditModal({{ $rolePermission }})">
                                                        <i class="fas fa-edit text-secondary"></i>
                                                    </a>
                                                    <span>
                                                        <form method="POST"
                                                            action="{{ route('rolePermission.delete', $rolePermission->id) }}"
                                                            style="display:inline;">
                                                            @csrf
                                                            <button type="submit" title="Delete Role Permission"
                                                                style="background: none; border: none; padding: 0; cursor: pointer;"
                                                                onclick="return confirm('Are you sure you want to delete this Role Permission?');">
                                                                <i class="fas fa-trash text-secondary"
                                                                    data-bs-toggle="tooltip"></i>
                                                            </button>
                                                        </form>
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center py-5">
                                                <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data Found"
                                                    style="width: 200px; opacity: 0.6;">
                                                <p class="mt-2 text-muted">No data Found</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            @include('components.pagination', ['paginator' => $rolePermissions])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create/Edit Role Permissions -->
    <div class="modal fade" id="rolePermissionModal" tabindex="-1"
        aria-labelledby="rolePermissionModalLabel"aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rolePermissionModalLabel">Create New Role Permission</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('rolePermission.storeOrUpdate') }}" id="rolePermissionModalForm">
                    @csrf
                    <input type="hidden" name="id" id="id">
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Role Type</label>
                                    <select class="form-control" 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 mb-3">
                                    <label class="form-label">Status</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="table-responsive">
                                <table class="table table-bordered text-center align-middle">
                                    <thead>
                                        <tr>
                                            <th>Model Name</th>
                                            @php $permissions = ['view', 'insert', 'update', 'delete']; @endphp
                                            @foreach ($permissions as $perm)
                                                <th class="perm-header" data-perm="{{ $perm }}"
                                                    style="cursor: pointer;" title="Select All">
                                                    {{ ucfirst($perm) }}
                                                </th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $models = [
                                                'user',
                                                'packages',
                                                'subscriptionPackage',
                                                'companyProfile',
                                                'ticketSupport',
                                                'profile',
                                                'contactUs',
                                                'common',
                                                'marketingLabs',
                                                'rolePermission',
                                                'maintenance_mode',
                                                'faq',
                                                'loginLog',
                                                'cronLog',
                                                'visitorTracker',
                                                'activityLog',
                                                'laravelLog',
                                            ];
                                        @endphp

                                        @foreach ($models as $model)
                                            <tr>
                                                <th class="model-header" data-model="{{ $model }}"
                                                    title="Select All" style="cursor: pointer;">
                                                    {{ ucfirst(str_replace('_', ' ', $model)) }}
                                                </th>
                                                @foreach ($permissions as $perm)
                                                    <td class="border-start border-end">
                                                        <input type="checkbox"
                                                            class="check-{{ $model }} check-{{ $perm }}"
                                                            name="permissions[{{ $model }}][{{ $perm }}]"
                                                            {{ old("permissions.$model.$perm") ? 'checked' : '' }}>
                                                    </td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" id="submitButton" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        /* Disable text selection for headers */
        .model-header,
        .perm-header {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        /* Show pointer on hover */
        .model-header:hover,
        .perm-header:hover {
            background-color: rgb(15, 130, 231);
            color: black;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
    </style>

    <script>
        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;

            const permissions = rolePermission.permissions;
            Object.entries(permissions).forEach(([model, perms]) => {
                Object.entries(perms).forEach(([perm, value]) => {
                    const selector = `input[name="permissions[${model}][${perm}]"]`;
                    const checkbox = document.querySelector(selector);
                    if (checkbox) {
                        checkbox.checked = true;
                    }
                });
            });
        }

        document.addEventListener("DOMContentLoaded", function() {

            document.getElementById('createButton').addEventListener('click', function() {

                document.getElementById('rolePermissionModalLabel').innerText = 'Create Role Permission';
                document.getElementById('submitButton').innerText = 'Create';

                document.getElementById('id').value = '';
                document.getElementById('rolePermissionModalForm').reset();

                // Reset all checkboxes first
                document.querySelectorAll('input[type="checkbox"][name^="permissions"]').forEach(cb => cb
                    .checked = false);

            });

        });

        // Row toggle on model name click
        document.querySelectorAll('.model-header').forEach(function(header) {
            header.addEventListener('click', function() {
                const model = this.dataset.model;
                const checkboxes = document.querySelectorAll('.check-' + model);
                const allChecked = Array.from(checkboxes).every(chk => chk.checked);
                checkboxes.forEach(chk => chk.checked = !allChecked);
            });
        });

        // Column toggle on permission type click
        document.querySelectorAll('.perm-header').forEach(function(header) {
            header.addEventListener('click', function() {
                const perm = this.dataset.perm;
                const checkboxes = document.querySelectorAll('.check-' + perm);
                const allChecked = Array.from(checkboxes).every(chk => chk.checked);
                checkboxes.forEach(chk => chk.checked = !allChecked);
            });
        });
    </script>
@endsection