@extends('template.layouts.template-base')
@section('title', 'Duplicate User Role')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
    <script>
        CKEDITOR.config.removePlugins = 'notification,notificationaggregator';
    </script>

@endsection

@section('content')
    <section class="product-page">
        <!-- Header -->
        <div class="page-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="page-title">
                            <a href="{{ route('backend.user-management.index') }}">User Management / <span
                                    class="breadcrumb-link">Duplicate User Role</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Container -->
        <div class="container-fluid p-0">
            <form id="productForm" method="POST" action="{{ route('backend.user-management.store') }}"
                enctype="multipart/form-data">
                @csrf
                <!-- Section 1: Product -->
                <div class="add-product-section">
                    <h2 class="section-title">Role Information</h2>

                    <div class="row">

                        <div class="col-lg-4">
                            <label>Role Name <span class="required">*</span></label>
                            <input type="text" name="name" placeholder="Role Name"
                                value="{{ old('name', $role->name . ' (Copy)') }}" required />
                        </div>

                        <div class="col-lg-4">
                            <label>Remarks</label>
                            <input type="text" name="remarks" placeholder="Type Here"
                                value="{{ old('remarks', $role->remarks ?? '') }}" />
                        </div>

                        <div class="col-lg-4">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="addStatusActive"
                                        value="1" {{ $role->status == 1 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="addStatusActive">Active</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="addStatusInactive"
                                        value="0" {{ $role->status == 0 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="addStatusInactive">Inactive</label>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="container-fluid product-table-sec user-management-page">
                    <div class="content-wrapper">
                        <div class="filter-section">
                            <div class="col">
                                <div class="page-title">
                                    <a href="javascript:void(0);">Permissions</a>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive table-card">
                                <table class="table align-middle mb-0 orders-table-container">
                                    <thead class="custom-table-header">
                                        <tr>
                                            <th scope="col">Modules</th>
                                            <th scope="col">Permissions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="categoryList">
                                        @foreach ($permissions as $page => $group)
                                            <tr>
                                                <td class="text-capitalize">{{ str_replace('_', ' ', $page) }}</td>
                                                <td>
                                                    <div class="d-flex flex-wrap gap-3">
                                                        @foreach ($group as $permission)
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="permissions[]" value="{{ $permission->id }}"
                                                                    id="perm_{{ $permission->id }}"
                                                                    @if ($role->permissions->contains('id', $permission->id)) checked @endif>
                                                                <label class="form-check-label"
                                                                    for="perm_{{ $permission->id }}">
                                                                    {{ $permission->name }}
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Action Buttons -->
                <div class="action-buttons py-4">
                    <a href="{{ route('backend.user-management.index') }}" class="btn btn-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary">Confirm Duplicate</button>
                </div>
            </form>
        </div>

    </section>


    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="createActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Created Successful</h6>
                    <p>The new role has been added successfully and is now available in the roles list.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="createInActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Created Successful</h6>
                    <p>The new role has been added successfully and is currently inactive. You can activate it anytime from
                        the roles list.</p>
                </div>
            </div>
        </div>
    </div>
    @include('template.layouts.error-modal')
@endsection

@section('scripts')
    <script>
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.category-checkbox');
        const bulkActions = document.getElementById('bulkActions');

        // Toggle buttons visibility
        function toggleBulkActions() {
            const anyChecked = [...checkboxes].some(cb => cb.checked);
            bulkActions.classList.toggle('d-none', !anyChecked);
        }

        // Select All checkbox
        selectAll?.addEventListener('change', function() {
            checkboxes.forEach(cb => cb.checked = this.checked);
            toggleBulkActions();
        });

        // Individual checkbox change
        checkboxes.forEach(cb => {
            cb.addEventListener('change', () => {
                selectAll.checked = [...checkboxes].every(c => c.checked);
                toggleBulkActions();
            });
        });
    </script>
@endsection