@extends('layouts.app')


@section('content')
    <div class="card">
        <div class="card-body">
            <div class="mb-4 clearfix">
                <h4 class="float-left">Modules</h4>
                <a class="float-right" href="{{ route('modules.index') }}"><button class="btn btn-primary btn-sm"><i class="fas fa-long-arrow-alt-left mr-2"></i>Go Back</button></a>
            </div>
            <form action="{{ isset($id)? route('modules.update',$module->id) : route('modules.store') }}"
                    method="POST">
                @csrf
                @if(isset($id))
                {{ method_field('PUT') }}
                @endif
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" name="name" class="form-control" placeholder="Name"
                                    value="{{ isset($id)? $module->name : '' }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Route</label>
                            <input type="text" name="route" class="form-control" placeholder="Route"
                                    value="{{ isset($id)? $module->route : '' }}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Icon</label>
                            <input type="text" name="icon" class="form-control" placeholder="Icon"
                                    value="{{ isset($id)? $module->icon : '' }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Identifier</label>
                            <input type="text" name="identifier" pattern="/^[a-z]+(?:-+[a-z]+)*$/," class="form-control" placeholder="Identifier"
                                    value="{{ isset($id)? $module->identifier : '' }}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Parent Id</label>
                            <select name="parent_id" class="form-control" id="parent_id">
                                <option value=""></option>
                                @foreach(App\Module::get() as $parentModule)
                                    <option value="{{ $parentModule->id }}">{{ $parentModule->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row" id="append_container">
                    @if(isset($id))
                                                <div class="col-md-12"><label>Required Permissions</label></div>
                        @foreach($moduleChilds as $moduleChild)
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="form-group col-md-11">
                                        <input type="text" name="required_permissions[]" class="form-control" placeholder="Required Permissions" value="{{ $moduleChild }}">
                                    </div>
                                    <div class="form-group col-md-1 d-flex">
                                        <i class="far fa-times-circle remove_btn mx-auto my-auto"></i>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" name="required_permissions[]" class="form-control" placeholder="Required Permissions">
                            </div>
                        </div>
                    @endif
                </div>
                <button type="button" class="btn btn-primary btn-sm" id="add_child"><i class="fas fa-plus"></i></button>
                <hr>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-round btn-sm">Save</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('#add_child').on('click', function () {
                $('#append_container').append('<div class="col-md-12"><div class="row"><div class="form-group col-md-11"><input type="text" name="required_permissions[]" class="form-control" placeholder="Required Permissions"></div><div class="form-group col-md-1 d-flex"><i class="far fa-times-circle remove_btn mx-auto my-auto"></i></div></div></div>');
            });
            $('body').delegate('.remove_btn', 'click', function () {
                $(this).parent().parent().parent().remove();
            });
        });
    </script>
    @if(isset($id))
    <script>
        $(document).ready(function(){
            $('#parent_id').val('{{ $module->parent_id }}');
        });
    </script>
    @endif
@endsection