@extends('layouts.app')
    @section('content')
    
    <section class="content">
        <div class="container-fluid">

            <div class="px-sm-4">
                @if(@$roleData->id)
                <form class="form" role="post-data" method="POST" action="/settings/update" redirect="/settings/user-management">
                    <input type="hidden" name="id" value="{{@$roleData->id}}">
                    @else

                    <form class="form" id="myForm" role="post-data" method="POST" action="/settings/store" redirect="/settings/user-management">
                        @endif
                        @csrf
                        <div class="row mt-2 mt-sm-3">
                            <div class="col-md-7 col-12">
                                <div class="top-head">
                                    <h1>Add/edit User</h1>
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="{{'/'}}">Settings</a></li>
                                            <li class="breadcrumb-item"><a href="{{'/settings'}}">User Management</a></li>
                                            <li class="breadcrumb-item active" aria-current="page">Add / Edit Role</li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                            <div class="col-md-5 text-sm-right text-left">
                                <a href="{{ url('settings') }}" type="button" class="btn cancel-btn mr-2">Cancel</a>
                                <a href="javascript:void(0)">
                                    <button type="button" onclick="validateCheckboxes()" data-request="ajax-submit" data-target="[role=post-data]" class="btn save-btn ">Save</button>
                                </a>
                            </div>
                        </div>
                        @if ($message = Session::get('success'))
                        <div class="alert alert-success">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            {{ session('success') }}
                        </div>
                        @endif
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <div class="user-editbox">

                                    <div class="row align-items-center">
                                        <div class="col-md-9">
                                            <div class="row align-items-center">
                                                <div class="col-md-2">
                                                    <div class="inner-head">
                                                        <p>Role name</p>
                                                    </div>
                                                </div>
                                                <div class="col-md-9 mb-3 mb-sm-0">
                                                    <div>
                                                        <input type="text" name="role_name" class="form-control edit-input" value="{{ @$roleData->name}}" required placeholder="eg: Manager">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="toogleSwitch float-sm-right">
                                                @if(@$roleData->id)
                                                <label class="switch">

                                                    <input type="checkbox" id="staus" name="status" value="{{ @$roleData->status }}" class="activeclass" onclick="{{ (@$roleData->status == 'active') ? 'inactive' : 'active' }}Staus()" {{ (@$roleData->status == 'active') ? 'checked' : '' }} />
                                                    <div class="slider round">
                                                        <span class="{{ (@$roleData->status == 'active') ? 'swactive' : 'swinactive'}}">
                                                            {{ ucFirst($roleData->status) }}
                                                        </span>
                                                    </div>
                                                </label>
                                                @else
                                                <label class="switch">
                                                    <input type="checkbox" id="staus" class="activeclass" onclick="inactiveStaus()" checked />
                                                    <div class="slider round">
                                                        <span class="swactive">Active</span>
                                                        <span class="swinactive">Inactive</span>
                                                    </div>
                                                </label>
                                                @endif

                                            </div>
                                            <input type="hidden" value="active" id="status" name="status">
                                        </div>
                                    </div>

                                    <div class="row mt-sm-5 mt-3">
                                        <div class="col-md-12">
                                            <div class="inner-head">
                                                <p>Set Permission *</p>
                                               
                                                <span class="warning" style="color: red;">(Please checked at least one checkbox .)</span>
                                              
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-sm-3 mt-2">
                                        <div class="col-md-6 mb-sm-0 mb-3">
                                            <label class="menu-label">Main Menu</label>
                                            @foreach($menus as $menu)
                                            @if($menu->type=='main')
                                            <div class="role-boxcontent mt-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-6 col-4">
                                                        <h6>{{ucfirst($menu->name)}}</h6>
                                                    </div>

                                                    <div class="col-md-6 col-8 text-right">
                                                        @php

                                                        $flag = 0;
                                                        if($roleData){
                                                        foreach($roleData->rolePermissions as $role){
                                                        if(@$menu->id == $role->menu->id){
                                                        $flag = 1;
                                                        }
                                                        }
                                                        }
                                                        @endphp

                                                        @if($flag)
                                                        <div class="filter-check">
                                                            <input type="checkbox" class="filled-in" checked name="{{$menu->name}}_{{$menu->id}}" id="{{$menu->name}}_{{$menu->id}}" value="{{$menu->id}}">
                                                            <label class="form-check-label project-label" for="{{$menu->name}}_{{$menu->id}}"></label>
                                                        </div>
                                                        @else
                                                        <div class="filter-check">
                                                            <input type="checkbox" class="filled-in" name="{{$menu->name}}_{{$menu->id}}" id="{{$menu->name}}_{{$menu->id}}" value="{{$menu->id}}">
                                                            <label class="form-check-label project-label" for="{{$menu->name}}_{{$menu->id}}"></label>
                                                        </div>
                                                        @endif

                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                            @endforeach
                                        </div>
                                        <div class="col-md-6">
                                            <label class="menu-label">Settings</label>
                                            @foreach($menus as $menu)
                                            @if($menu->type=='setting')
                                            <div class="role-boxcontent mt-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-6 col-4">
                                                        <h6>{{ucfirst($menu->name)}}</h6>
                                                    </div>

                                                    <div class="col-md-6 col-8 text-right">
                                                        @php
                                                        $flag = 0;
                                                        if($roleData){
                                                        foreach($roleData->rolePermissions as $role){
                                                        if(@$menu->id == $role->menu->id){
                                                        $flag = 1;
                                                        }
                                                        }
                                                        }
                                                        @endphp

                                                        @if($flag)
                                                        <div class="filter-check">
                                                            <input type="checkbox" class="filled-in" checked name="{{$menu->name}}_{{$menu->id}}" id="{{$menu->name}}_{{$menu->id}}" value="{{$menu->id}}">
                                                            <label class="form-check-label project-label" for="{{$menu->name}}_{{$menu->id}}"></label>
                                                        </div>
                                                        @else
                                                        <div class="filter-check">
                                                            <input type="checkbox" class="filled-in" name="{{$menu->name}}_{{$menu->id}}" id="{{$menu->name}}_{{$menu->id}}" value="{{$menu->id}}">
                                                            <label class="form-check-label project-label" for="{{$menu->name}}_{{$menu->id}}"></label>
                                                        </div>
                                                        @endif

                                                    </div>
                                                </div>
                                            </div>
                                            @endif

                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card p-2">
                                <div class="table-responsive">
                                    <table class="table dairy-table mb-0">
                                        <thead>
                                            <tr>
                                                <th>NAME</th>
                                                <th colspan="3">STATUS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($roles as $role)
                                            <tr>
                                                <td>{{ucfirst($role->name)}}</td>
                                                <td>
                                                    @if ($role->status == 'active')
                                                    <span class="badge badge-success">
                                                        {{ ucfirst($role->status) }}
                                                    </span>
                                                    @else
                                                    <span class="badge badge-warning">
                                                        {{ ucfirst($role->status) }}
                                                    </span>
                                                    @endif
                                                </td>
                                                <td>{{$role->active}}</td>
                                                <td class="text-center">
                                                    <a href="{{url('settings/edit/'.base64_encode($role->id))}}">
                                                        <span class="badge edit-box"><img src="{{asset('assets/img/edit.svg')}}" alt=""></span>
                                                    </a>
                                                </td>
                                            </tr>
                                            @endforeach



                                        </tbody>
                                    </table>
                                    @if (count($roles) == 0)
                                    <div>
                                        <center>No record(s) found!</center>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                   {{-- {{ $roles->appends(request()->input())->links('partials.pagination') }} --}}





            </div>

        </div>
    </section>
    @endsection

    @section('scripts')
    <script type="text/javascript">
        function activeStatus() {
            var status = 'active';
            $('#status').val(status);
            document.getElementById('staus').setAttribute('onclick', 'inactiveStaus()');
        }

        function inactiveStaus() {
            var status = 'inactive';
            $('#status').val(status);
            document.getElementById('staus').setAttribute('onclick', 'activeStatus()');
        }

        setTimeout(function() {
            $('.alert-success').css('display', 'none');
            //   Swal.fire('Alert!','Total Percentage is '+totalPaymentPercent, 'warning');
        }, 4000);


        function validateCheckboxes() {

            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            var checked = Array.prototype.slice.call(checkboxes).some(function(checkbox) {
                return checkbox.checked;
            });

            if (!checked) {

                alert('At least one checkbox must be checked.');
            }
            // // Get all checkboxes with a name attribute starting with "checkbox"
            // var checkboxes = document.querySelectorAll('input[type="checkbox"][name^="checkbox"]');

            // var isChecked = false;

            // // Check if at least one checkbox is checked
            // checkboxes.forEach(function(checkbox) {
            //     if (checkbox.checked) {
            //         isChecked = true;
            //         alert(isChecked);
            //     }
            // });

            // // Display an alert if no checkbox is checked
            // if (!isChecked) {
            //     alert("Please select at least one checkbox.");
            // } else {
            //     // Proceed with your form submission or other actions
            //     alert("Form submitted successfully!");
            // }
        }
    </script>

    @endsection