@extends('app-new')
@section('content')
    <!-- BEGIN: Content-->
    <form class="ajax-input-form" id="menuForm" action="{{ route('admin.role-update', $role->id) }}" method="POST"
        redirect="{{ route('admin.role-permission') }}" enctype="multipart/form-data" role="post-data">
        @csrf
        @method('PUT')
        <div class="">
            <div class="content-overlay"></div>
            <div class="header-navbar-shadow"></div>
            <div class="content-wrapper container-xxl p-0">
                <div class="content-header pocreate-sticky">
                    <div class="row">
                        <div class="content-header-left col-md-6 mb-2">
                            <div class="row breadcrumbs-top">
                                <div class="col-12">
                                    <h2 class="content-header-title float-start mb-0">New Roles</h2>
                                    <div class="breadcrumb-wrapper">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="/">Home</a>
                                            </li>
                                            <li class="breadcrumb-item"><a href="/role-permissions">Roles</a>
                                            </li>
                                            <li class="breadcrumb-item active">Add New</li>


                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="content-header-right text-end col-md-6 col-6 mb-2 mb-sm-0">
                            <input type="hidden" id="document_status" name="document_status"
                                value="{{ $item->status ?? '' }}">
                            <div class="mt-3">
                                <button onClick="javascript: history.go(-1)" class="btn btn-secondary btn-sm"><i
                                        data-feather="arrow-left-circle"></i> Back</button>
                                <button type="submit" class="btn btn-primary btn-sm ms-1" data-request="ajax-submit"
                                    data-target="[role=post-data]"><i data-feather="check-circle"></i> Update</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-body">
                    <section id="basic-datatable">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body customernewsection-form">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="newheader border-bottom mb-2 pb-25">
                                                    <h4 class="card-title text-theme">Basic Information</h4>
                                                    <p class="card-text">Fill the details</p>
                                                </div>
                                            </div>

                                            <!-- Form Starts Here -->
                                            <div class="col-md-9">

                                                <!-- Role Name -->
                                                <div class="row align-items-center mb-1">
                                                    <input type = 'hidden' value = '{{ $user->group_id }}' name = 'group_id' />
                                                    <div class="col-md-3">
                                                        <label class="form-label">Role Name <span
                                                                class="text-danger">*</span></label>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <input type="text" class="form-control" name="name"
                                                            value="{{ $role->name }}" required />
                                                    </div>
                                                </div>

                                                <!-- Description -->
                                                <div class="row align-items-center mb-1">
                                                    <div class="col-md-3">
                                                        <label class="form-label">Role Description<span
                                                                class="text-danger">*</span></label>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <input type="text" class="form-control" name="description"
                                                            value="{{ $role->description }}" required />
                                                    </div>
                                                </div>
                                                <!-- Status -->
                                                <div class="row align-items-center mb-1">
                                                    <div class="col-md-3">
                                                        <label class="form-label">Status <span
                                                                class="text-danger">*</span></label>
                                                    </div>

                                                    <div class="col-md-5">
                                                        <div class="demo-inline-spacing">
                                                            <div class="form-check form-check-primary mt-25">
                                                                <input type="radio" id="activeStatus" name="status"
                                                                    value="active" class="form-check-input"
                                                                    {{ $role->status == 'active' ? 'checked' : '' }}>
                                                                <label class="form-check-label fw-bolder"
                                                                    for="activeStatus">Active</label>
                                                            </div>
                                                            <div class="form-check form-check-primary mt-25">
                                                                <input type="radio" id="inactiveStatus" name="status"
                                                                    value="inactive" class="form-check-input"
                                                                    {{ $role->status == 'inactive' ? 'checked' : '' }}>
                                                                <label class="form-check-label fw-bolder"
                                                                    for="inactiveStatus">Inactive</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Form Ends Here -->

                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
            <!-- END: Content-->

            <div class="sidenav-overlay"></div>
            <div class="drag-target"></div>

            <div class="modal fade" id="search-icon" tabindex="-1" aria-labelledby="searchIconLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" style="max-width: 1130px">
                    <div class="modal-content">
                        <div class="modal-header p-0 bg-transparent">
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body px-sm-4 mx-50 pb-2">
                            <h1 class="text-center mb-1" id="searchIconLabel">Search Icon</h1>
                            <p class="text-center">Search from the below list.</p>
                            <div class="row mt-2">
                                <section id="feather-icons">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="icon-search-wrapper my-2 mx-auto">
                                                <div class="mb-1 input-group input-group-merge">
                                                    <span class="input-group-text"><i data-feather="search"></i></span>
                                                    <input type="text" class="form-control" id="icons-search"
                                                        placeholder="Search Icons..." />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pt-2" style="max-height: 300px; overflow-y: scroll">
                                        <div class="d-flex flex-wrap" id="icons-container">
                                            <!-- Dynamic icons will be appended here -->
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="button" class="btn btn-outline-secondary me-1"
                                data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" id="select-icon">Select</button>
                        </div>
                    </div>
                </div>
            </div>
    </form>
    <!-- BEGIN: Vendor JS-->
    <script src="../../../app-assets/vendors/js/vendors.min.js"></script>
    <!-- BEGIN Vendor JS-->

    <!-- BEGIN: Page Vendor JS-->
    <script src="../../../app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/responsive.bootstrap5.min.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="../../../app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <script src="../../../app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="../../../app-assets/vendors/js/editors/quill/katex.min.js"></script>
    <script src="../../../app-assets/vendors/js/editors/quill/highlight.min.js"></script>
    <script src="../../../app-assets/vendors/js/editors/quill/quill.min.js"></script>
    <script src="../../../app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Theme JS-->
    <script src="../../../app-assets/js/core/app-menu.js"></script>
    <script src="../../../app-assets/js/core/app.js"></script>
    <!-- END: Theme JS-->

    <!-- BEGIN: Page JS-->
    <script src="../../../app-assets/js/scripts/forms/form-quill-editor.js"></script>
    <script src="../../../app-assets/js/scripts/forms/form-select2.js"></script>
    <script src="../../../app-assets/js/scripts/ui/ui-feather.js"></script>
    <!-- END: Page JS-->

    <script>
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        })

        $(function() {
            $("input[name='goodsservice']").click(function() {
                if ($("#service").is(":checked")) {
                    $(".hsn").hide();
                    $(".sac").show();
                } else {
                    $(".hsn").show();
                    $(".sac").hide();
                }
            });
        });

        $(".select2").select2({
            placeholder: "Select",
        });
    </script>
    <script>
        $(document).ready(function() {
            let selectedIcon = '';

            function loadIcons() {
                const icons = feather.icons;
                Object.keys(icons).forEach(icon => {
                    $('#icons-container').append(`
                        <div class="card icon-card cursor-pointer text-center mb-2 mx-50" data-icon="${icon}">
                            <div class="card-body">
                                <span class="icon-name">${icon}</span>
                            </div>
                        </div>
                    `);
                });
                bindIconClickEvents();
            }

            function bindIconClickEvents() {
                $('#icons-container').on('click', '.icon-card', function() {
                    selectedIcon = $(this).data('icon');
                    $('.icon-card').removeClass('selected');
                    $(this).addClass('selected');
                });
            }

            loadIcons();

            $('#select-icon').on('click', function() {
                if (selectedIcon) {
                    $('#icon-input').val(selectedIcon);
                    $('#search-icon').modal('hide');
                } else {
                    alert("Please select an icon.");
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // Your existing JavaScript code...
            $('input[name="icon_type"]').change(function() {
                if ($(this).val() === 'image') {
                    $('.sac').show();
                    $('.hsn').hide();
                } else {
                    $('.sac').hide();
                    $('.hsn').show();
                }
            });
        });
    </script>

    <style>
        .modal-backdrop {
            display: none;
            /* To remove blur effect */
        }
    </style>
@endsection