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

@endsection
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Create Permission</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 Permission</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">Permission <span class="tf-color-1">*</span></div>
                <input class="" type="text" placeholder="Enter Permission" name="name" required>
            </fieldset>
            <fieldset>
                <div class="body-title mb-10">Module <span class="tf-color-1">*</span></div>
                <input class="" type="text" placeholder="Enter Module" name="module" required>
            </fieldset>
            <fieldset>
                <div class="body-title mb-10">Slug <span class="tf-color-1">*</span></div>
                <input class="" type="text" placeholder="Enter Slug" name="slug" required>
            </fieldset>
        </div>
        <div class="d-flex justify-content-between mb-0">
                                
            <h5>Special Conditions</h5>
            <div class="d-flex justify-content-end">
                <div>
                    <a href="#" onclick="addPermission()" class="fs-5 text-primary">Add</a>
                </div>
            </div>
        </div>
        <div id="special_permissions">
        </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");
    $(".permission-add").addClass("active");
    
    var old_slug = ""
    $('#permission_slug').on('input',function(e){
        $(this).val(old_slug);
    })
    $('#permission_slug').on('click',function(e){
        old_slug = $(this).val()
    })
    $(".permission_input").on('input',function(){
        let form        = $("#permission_form");
        let pattern     = /[^a-zA-Z0-9\s\-\_]/g;
        let pattern2    = /[\s\-\_]/g;
        let pattern3    = /[\-\-\-]+/g;
        $(this).val($(this).val().replace(pattern, ''));
        
        let module      = form.find('[name="module"]');
        let name        = form.find('[name="name"]');
        let module_slug = module.val().replace(pattern2,'-').replace(pattern3,'-').toLowerCase()
        let name_slug   = name.val().replace(pattern2,'-').replace(pattern3,'-').toLowerCase()
        
        $("#permission_slug").val(name_slug + "." + module_slug)
    });
    function cleanInput(el){
        let form        = $("#permission_form");
        let pattern     = /[^a-zA-Z0-9\s\-\_]/g;
        let pattern2    = /[\s\-\_]/g;
        let pattern3    = /[\_\_\_]+/g;
        $(el).val($(el).val().replace(pattern, '').replace(pattern2,'_').replace(pattern3,'_').toLowerCase());
        
        
    }
    function addPermission(){
        let container   = $("#special_permissions")
        container.append(`
                <div class="position-relative">
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="mb-4">
                                <fieldset>
                                    <div class="body-title mb-10">{{__('Name')}}</div>
                                    <input type="text" name="special_permission_name[]"
                                    class="form-control special_permission_input" oninput="cleanInput(this)">
                                </fieldset>    
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-4">
                                <fieldset>
                                    <div class="body-title mb-10">{{__('Default Value')}}</div>
                                    <input type="text" name="special_permission_value[]"
                                    class="form-control special_permission_input" >
                                </fieldset>   
                            </div>
                        </div>
                    </div>
                        <a href="#" class="position-absolute fs-5 text-danger" style="top:5px;right:5px" onclick="$(this).parent().remove()">
                            Delete
                        </a>
                </div>
        
        
        `)
    }
</script>
@endsection                                  
<!-- App js -->