@extends('layouts.app')
@section('page_head')
@parent

@endsection
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Create Role</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Create Role</div>
        </li>
    </ul>
</div>
<!-- form-add-product -->
<form class="form-add-product" method="POST" action="" enctype="multipart/form-data">
    @csrf
    @honeypot
    <div class="wg-box mb-30">
        <div class="cols gap22">
            <fieldset>
                <div class="body-title mb-10">Role Name <span class="tf-color-1">*</span></div>
                <input class="" type="text" placeholder="Enter Permission" name="name" required>
            </fieldset>
        </div>
        <div class="d-flex justify-content-between mb-0">
                            
            <h5>Permissions</h5>
            <div class="d-flex justify-content-end">
                <div>
                    <a href="#" onclick="$('input[type=\'checkbox\']').attr('checked',true);" class="fs-5 text-primary">Select All</a> | 
                    <a href="#" onclick="$('input[type=\'checkbox\']').removeAttr('checked',true);" class="fs-5 text-primary">Deselect All</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="">
                    <div class=" card-body">
                        <div class="row">
                        @foreach($permissions as $key => $module)
                            <div class="col-md-2 col-12 mb-2">
                            <label class="form-label mb-0 fs-5 mb-10 mt-5">{{$module->module}}</label>
                            <div class="separator separator-dashed mb-4"></div>
                                <div class="row mb-4">
                                    @foreach($module->permission as $permission)
                                    <div class="col-12">
                                        
                                        <div class="form-check form-check-inline mb-5">
                                            <fieldset>
                                                <input lass="form-check-input" type="checkbox" name="permissions[{{$permission->id}}]" id="permission_read_write_{{$permission->id}}" value="1" {{$permission->status === 1? 'checked' : ''}}>
                                                <label class="form-check-label fs-5" style="padding-top:8px;padding-left:5px" for="permission_read_write_{{$permission->id}}">{{$permission->name}}</label>
                                            </fieldset>
                                        </div>
                                        @if(!empty($permission->special_conditions))
                                        
                                            <div class="d-flex justify-content-between mb-0">
                                            
                                                <h6 class='text-muted'>{{$permission->name}} - Special Conditions</h6>
                                            </div>
                                            <div class="separator separator-dashed mb-3"></div>
                                        @endif
                                        @foreach(json_decode($permission->special_conditions) ?? [] as $condition_name => $special_condition)
                                            <div class="mb-4 ms-5">
                                                <label class="form-check-label">{{$condition_name}}:</label>
                                                <input type="text" name="special_conditions[{{$permission->id}}][{{$condition_name}}]"
                                                    class="form-control" value="{{$special_condition}}">
                                            </div>
                                        @endforeach
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="cols gap10">
        <button class="tf-button w380" type="submit">Submit</button>
    </div>
</form>
<!-- /form-add-product -->             
@endsection           
@section('page_script') 
@parent
<script>
    $(".roles-and-permissions-menu").addClass("active");
    $(".role-add").addClass("active");
</script>
@endsection                                  
<!-- App js -->