@php use App\Models\Client;use Carbon\Carbon; @endphp
@extends('adminlte::page')

@section('title', 'IPRS | Roles')

@section('content_header')
    <div class="col-10 offset-1 d-flex justify-content-between align-items-center">
        <div class="row">
            <div class="col-sm-8">
                <ol class="breadcrumb p-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Roles</li>
                </ol>
            </div>
            <div class="col-sm-12">
                <h1 class="m-0">Roles</h1>
            </div>
        </div>
        <div class="">
            <x-adminlte-button label="Add Role" data-toggle="modal" data-target="#createRolemodal" class="bg-primary"/>
        </div>
    </div>
@stop

@section('plugins.Datatables', true)

@section('content')
    <div class="col-10 offset-1">
        {{-- Setup data for datatables --}}
        @php
            $headings = [
                'ID',
                'Role Name',
                'Actions'
            ];
        @endphp

        <x-adminlte-card>
            {{-- Minimal example / fill data using the component slot --}}
            <x-adminlte-datatable id="clients-table" :heads="$headings" striped hoverable bordered>
                @foreach($roles as $role)
                    <tr>
                        <td>{{ $role->id }}</td>
                        <td>{{ $role->name }}</td>
                        <td>
                            <nobr>
                                <a href="#" class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete"
                                    onclick="function submit() {
                                    if (confirm('Are you sure you want to delete?')) {
                                            document.getElementById('form{{$role->id}}').submit();
                                            }
                                    } submit()">
                                    <i class="fa fa-lg fa-fw fa-trash"></i>
                                </a>

                                <a href="{{ route('role.show', ['role' => $role->id ]) }}"
                                class="btn btn-primary btn-sm text-white mx-1" title="Permissions">
                                    Permissions
                                </a>

                                <form
                                    id="form{{$role->id}}"
                                    action="{{route("role.destroy",$role->id)}}"
                                    method="post">
                                    @csrf
                                    {{method_field('DELETE')}}
                                </form>

                            </nobr>
                        </td>
                    </tr>
                @endforeach
            </x-adminlte-datatable>
        </x-adminlte-card>

        {{-- Create role modal --}}
        <x-adminlte-modal id="createRolemodal" title="Add a Role" size="md" theme="teal"
                        icon="fas fa-bell" v-centered static-backdrop scrollable>

            <form method="POST" action="{{ route('role.store') }}">
                @csrf
                @method("POST")

                <x-adminlte-input name="role_name" label="Title" placeholder="Role title"
                                  value=""
                                  fgroup-class=""/>

                <div class="icheck-primary" title="Check if role should be visible to contract admins?">
                    <input type="checkbox" name="for_contract"
                           id="show-in-contract">

                    <label for="show-in-contract" class="font-weight-normal">
                        Check if role should be visible to contract admins?
                    </label>
                </div>
                <x-adminlte-button class="mt-4" type="submit" theme="success" label="Save"/>
                <x-slot name="footerSlot">

                    <x-adminlte-button theme="danger" label="Dismiss" data-dismiss="modal"/>
                </x-slot>
            </form>

        </x-adminlte-modal>
    </div>
@stop

@section('css')
    <style>
        h3{
            margin-top: 1.5rem !important;
        }

        .content-header .breadcrumb{
            padding-left: 10px;
        }

    </style>
@stop

@section('js')

@stop

@section('plugins.iCheck', true)
