@extends('layouts.main')

@section('stylesheets')
    <link rel="stylesheet" href="{{asset('css/edit.css')}}"/>
@endsection

@section('content')
    <div class="main-wrapper">
        <div class="row justify-content-between Header mb-5">
            <div class="col-md-8 d-flex flex-column justify-content-center justify-content-md-start Header-breadcrumbs">
                {{ Breadcrumbs::render('createpermission') }}
                <h2 class="page-title">Create New Permission</h2>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end Header-buttons">
            </div>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{route('permissions.store')}}" method="POST">
            @csrf
            <div class="form-inner-container">
                <div class="form-group">
                    <label>Name:</label>
                    <input id="permission-name" type="text" name="name" class="form-control name" value="" readonly>
                </div>
                <div class="form-group">
                    <label>Microservice:</label>
                    <select class="form-select name" name="service_id" id="service_id">
                        @foreach($microservices as $microservice)
                            <option value="{{$microservice->id}}">{{$microservice->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Module:</label>
                    <select class="form-select name" name="module_id" id="module_id">
                        @foreach($modules as $module)
                            <option value="{{$module->id}}">{{$module->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Action:</label>
                    <select class="form-select name" name="permission_action_id" id="permission_action_id">
                        @foreach($permissionActions as $permissionAction)
                            <option value="{{$permissionAction->id}}"
                                    title="{{ $permissionAction->description }}">{{$permissionAction->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Description:</label>
                    <textarea class="form-control description" style="height:150px" name="description"
                              placeholder="Detail"></textarea>
                </div>
                <div class="form-group">
                    <label>View Name:</label>
                    <input type="text" name="view_name" class="form-control view_name" placeholder="View name">
                </div>

                <div class="form-group">
                    <label class="form-check-label">Can be Added to Quick Access :</label>
                    <input class="form-check-input disabled" type="checkbox" name="quick_access">
                </div>

                <div class="btn-container">
                    <button type="submit" class="btn">Submit</button>
                </div>
            </div>
        </form>
    </div>

@endsection

@section('javascripts')
    <script src="{{asset('js/permission-name-setter.js')}}"></script>
@endsection