@extends('backend.template.layouts.template-base')
@section('title', 'Manage Users - Roles & Permissions - Duplicate Role')

@section('content')

    <section>
        <div class="page-head-title mb-3">
            <a href="{{ route('backend.template.manage-users.roles.role-view') }}" class="d-inline-block">
                <h2 class="text-title fw-semibold mb-0"><i class=" ri-arrow-left-s-line"></i> New Role - [Role X’s
                    Duplication]
                </h2>
            </a>
        </div>

        {{-- card start --}}
        <div class="card-border p-3">

            <div class="row g-3">

                <div class="col-md-4">
                    <label for="roleName" class="form-label-modal">
                        Role Name <span class="color-red">*</span>
                    </label>
                    <input type="text" id="roleName" class="form-control" placeholder="Enter role name" value="Role X">
                </div>

                <div class="col-md-4">
                    <label class="form-label-modal d-block">
                        Role Status
                    </label>
                    <div class="d-flex align-items-center gap-4 mt-3">
                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                            <input class="form-check-input" type="radio" name="status" id="roleActiveStatus" checked>
                            <label class="form-label-modal mb-0" for="roleActiveStatus">Active</label>
                        </div>
                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                            <input class="form-check-input" type="radio" name="status" id="roleInactiveStatus">
                            <label class="form-label-modal mb-0" for="roleInactiveStatus">Inactive</label>
                        </div>
                    </div>
                </div>



                <div class="col-12">
                    <h4 class="table-text mb-3">Permissions</h4>
                    <div class="table-responsive mt-3">

                        <table class="table table-nowrap align-middle">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">
                                    <th class="p-3 table-head-content"></th>
                                    <th scope="col" class="p-3" style="width: 25px;">
                                        <div class="form-check text-end">
                                            <input class="form-check-input" type="checkbox" id="checkAll" value="option">
                                        </div>
                                    </th>
                                    <th class="p-3 table-head-content">Modules</th>
                                    <th colspan="4" class="p-3 table-head-content">Permissions</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all sortable-table">
                                <tr class="" data-id="1">
                                    <td class="table-body-content p-3"></td>
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll" value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Dashboard</td>
                                    <td class="permission  p-3">
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="createDashboard" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="createDashboard"
                                                class="table-body-content fw-400  mb-0">Create</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="readDashboard" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="readDashboard" class="table-body-content fw-400  mb-0">Read</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="UpdateDashboard" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="UpdateDashboard"
                                                class="table-body-content fw-400  mb-0">Update</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="DeleteDashboard" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="DeleteDashboard"
                                                class="table-body-content fw-400 mb-0">Delete</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="parent-row" data-id="1">
                                    <td class="table-body-content p-3">
                                        <img loading="lazy" class="toggle-arrow"
                                            src="{{ asset('backend/template/images/svg/down-arrow.svg') }}"
                                            alt="">
                                    </td>
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Product Management</td>
                                    <td class="table-body-content p-3 w-100"></td>
                                </tr>
                                <tr class="child-row child-1 d-none border-bottom-none bg-color" data-id="1">
                                    <td class="table-body-content p-3"></td>
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Manage Inventory</td>
                                    <td class="permission  p-3">
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="createManageInventory" class="form-check-input"
                                                    type="checkbox" name="checkAll" value="option1">
                                            </div>
                                            <label for="createManageInventory"
                                                class="table-body-content fw-400  mb-0">Create</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="readManageInventory" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="readManageInventory"
                                                class="table-body-content fw-400  mb-0">Read</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="UpdateManageInventory" class="form-check-input"
                                                    type="checkbox" name="checkAll" value="option1">
                                            </div>
                                            <label for="UpdateManageInventory"
                                                class="table-body-content fw-400  mb-0">Update</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="DeleteManageInventory" class="form-check-input"
                                                    type="checkbox" name="checkAll" value="option1">
                                            </div>
                                            <label for="DeleteManageInventory"
                                                class="table-body-content fw-400 mb-0">Delete</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="child-row child-1 d-none border-bottom-none bg-color" data-id="1">
                                    <td class="table-body-content p-3"></td>
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Manage Orders</td>
                                    <td class="permission  p-3">
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="createManageOrders" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="createManageOrders"
                                                class="table-body-content fw-400  mb-0">Create</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="readManageOrders" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="readManageOrders"
                                                class="table-body-content fw-400  mb-0">Read</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="UpdateManageOrders" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="UpdateManageOrders"
                                                class="table-body-content fw-400  mb-0">Update</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="DeleteManageOrders" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="DeleteManageOrders"
                                                class="table-body-content fw-400 mb-0">Delete</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="child-row child-1 d-none bg-color" data-id="1">
                                    <td class="table-body-content p-3"></td>
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Delivery Team</td>
                                    <td class="permission p-3">
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="createDeliveryTeam" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="createDeliveryTeam"
                                                class="table-body-content fw-400  mb-0">Create</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="readDeliveryTeam" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="readDeliveryTeam"
                                                class="table-body-content fw-400  mb-0">Read</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="UpdateDeliveryTeam" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="UpdateDeliveryTeam"
                                                class="table-body-content fw-400  mb-0">Update</label>
                                        </div>
                                        <div class="d-flex flex-row gap-2 align-items-center">
                                            <div class="form-check">
                                                <input id="DeleteDeliveryTeam" class="form-check-input" type="checkbox"
                                                    name="checkAll" value="option1">
                                            </div>
                                            <label for="DeleteDeliveryTeam"
                                                class="table-body-content fw-400 mb-0">Delete</label>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                </div>

            </div>


        </div>
        {{-- card end --}}

        <div class="my-3 d-flex justify-content-end gap-2">
            <button type="button" class="button-green-text">Save as Draft</button>
            <a href="{{ route('backend.template.manage-users.roles.role-view') }}"
                class="button-outline-green w-button">Cancel</a>
            <button data-bs-toggle="modal" data-bs-target="#DuplicateRoleModal" type="button" class="button-green"
                data-bs-toggle="modal" data-bs-target="#CreateSectionModal">Create Role</button>
        </div>




    </section>

    {{-- Duplicate Role modal --}}
    <div class="modal fade" id="DuplicateRoleModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">

                <div class="modal-header bg-color-lightGreen">
                    <h3 class="color-green modal-title mb-0">Duplicate Role</h3>
                    <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <p class="mb-0 text-title">Are you sure you want to duplicate
                        <span class="fw-semibold">"Role X"</span>
                        permissions to
                        <span class="fw-semibold">“Role Y”?</span>
                    </p>

                    <p class="mb-0 secondary-text mt-1">This will create a new role with the same permissions as the
                        selected role.</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-green ">Yes, Duplicate</button>
                </div>

            </div>
        </div>
    </div>

@endsection


@section('scripts')

    <script>
        document.querySelectorAll('.toggle-arrow').forEach(arrow => {
            arrow.addEventListener('click', function() {

                // Get parent row
                let parentRow = this.closest('tr');
                let id = parentRow.getAttribute('data-id');

                // Get all child rows
                let childRows = document.querySelectorAll('.child-' + id);

                childRows.forEach(row => {
                    row.classList.toggle('d-none');
                });

                // Optional: rotate arrow
                this.classList.toggle('rotate');
            });
        });
    </script>

@endsection