@extends('template.layouts.template-base')
@section('title', 'Add 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">Add 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') }}"
                                required />
                        </div>

                        <div class="col-lg-4">
                            <label>Remarks</label>
                            <input type="text" name="remarks" placeholder="Type Here" value="{{ old('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" 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">
                                    <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 d-flex align-items-center justify-content-between">
                            <div class="page-title">
                                <a href="javascript:void(0);">Permissions</a>
                            </div>
                            <div class="d-flex gap-3 align-items-center">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="selectAllPermissions">
                                    <label class="form-check-label fw-bold" for="selectAllPermissions">Select All</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input type-master-check" type="checkbox" data-type="Read"
                                        id="selectRead">
                                    <label class="form-check-label text-primary" for="selectRead">Read All</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input type-master-check" type="checkbox" data-type="Create"
                                        id="selectCreate">
                                    <label class="form-check-label text-success" for="selectCreate">Add All</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input type-master-check" type="checkbox" data-type="Edit"
                                        id="selectEdit">
                                    <label class="form-check-label text-warning" for="selectEdit">Edit All</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input type-master-check" type="checkbox" data-type="Delete"
                                        id="selectDelete">
                                    <label class="form-check-label text-danger" for="selectDelete">Delete All</label>
                                </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" style="width: 200px;">Modules</th>
                                            <th scope="col">Permissions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="categoryList">
                                        @foreach ($permissions as $page => $group)
                                            <tr>
                                                <td class="text-capitalize fw-medium">{{ str_replace('_', ' ', $page) }}
                                                </td>
                                                <td>
                                                    <div class="d-flex flex-wrap gap-4">
                                                        @foreach ($group as $permission)
                                                            <div class="form-check">
                                                                <input
                                                                    class="form-check-input permission-checkbox type-{{ strtolower($permission->name) }}"
                                                                    type="checkbox" name="permissions[]"
                                                                    value="{{ $permission->id }}"
                                                                    data-type="{{ $permission->name }}"
                                                                    id="perm_{{ $permission->id }}">
                                                                <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">Save</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>
        document.addEventListener('DOMContentLoaded', function() {
            const selectAllMain = document.getElementById('selectAllPermissions');
            const typeChecks = document.querySelectorAll('.type-master-check');
            const permissionChecks = document.querySelectorAll('.permission-checkbox');

            // Select All (Master)
            selectAllMain?.addEventListener('change', function() {
                permissionChecks.forEach(cb => cb.checked = this.checked);
                typeChecks.forEach(cb => cb.checked = this.checked);
            });

            // Type-specific Select All
            typeChecks.forEach(typeMaster => {
                typeMaster.addEventListener('change', function() {
                    const type = this.getAttribute('data-type');
                    const targets = document.querySelectorAll(
                        `.permission-checkbox[data-type="${type}"]`);
                    targets.forEach(cb => cb.checked = this.checked);
                    updateMasterStatus();
                });
            });

            // Individual Permission Change
            permissionChecks.forEach(cb => {
                cb.addEventListener('change', function() {
                    updateTypeMasterStatus(this.getAttribute('data-type'));
                    updateMasterStatus();
                });
            });

            function updateTypeMasterStatus(type) {
                const typeMaster = document.querySelector(`.type-master-check[data-type="${type}"]`);
                if (typeMaster) {
                    const typePermissions = document.querySelectorAll(`.permission-checkbox[data-type="${type}"]`);
                    const allChecked = Array.from(typePermissions).every(cb => cb.checked);
                    typeMaster.checked = allChecked;
                }
            }

            function updateMasterStatus() {
                if (selectAllMain) {
                    const allChecked = Array.from(permissionChecks).every(cb => cb.checked);
                    selectAllMain.checked = allChecked;
                }
            }
        });
    </script>
@endsection