@extends('layouts.app')

@section('content')
      <!-- breadcrumb -->
      <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
          <h4 class="page-title">Add Permission</h4>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('backend.dashboard')}}">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0);">Add Permission</a></li>
          </ol>
        </div>
      </div>
      <!-- breadcrumb -->

      <!--Row-->
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Add Permission</h3>
            </div>
            <div class="card-body">
              <form method="POST" action="{{url('admin/permission/create')}}" class="form-horizontal" id="userForm" role="form" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label for="name" class="form-label">Permission</label> <span class="required_compulsary">*</span>
                            <input type="text" id="permission" name="permission" placeholder="Permission Name" required class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label for="name" class="form-label">Assigned to Role</label> <span class="required_compulsary">*</span>
                            <select class="js-example-basic-multiple form-control" name="roles[]" multiple="multiple">
                                @foreach ($roles as $role)
                                  <option value="{{ $role->id }}">{{ $role->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="mb-3">
                            <button type="submit" id="createBtn" class="btn btn-primary submit">Submit</button>
                            <button type="button" class="btn btn-danger" id="cancelBtn">Cancel</button>
                        </div>
                    </div>
                </div>
            </form>
            </div>
          </div>
        </div>
      </div>
      <!--/Row-->

      <!-- Row -->
        <div class="row row-sm">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Role Management</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table border-top-0 table-bordered text-nowrap border-bottom" id="PermissionDataTable">
                                <thead>
                                    <tr>
                                        <th title="Permission">Permission</th>
                                        <th title="Assigned Role">Assigned Role</th>
                                        <th title="Action">Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Row -->
    @push('scripts')
    <script type="text/javascript">

        $("#cancelBtn").click(function () {
            window.location.href = "{{url('/permission')}}";
        });

        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
            $('#PermissionDataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('permission.index') }}",
                columns: [
                    { data: 'name', name: 'name' },
                    { data: 'assigned_role', name: 'assigned_role' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
        });
    
        var SITE_URL = "