@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">Permissions</li>
                </ol>
            </div>
            <div class="col-sm-12">
                <h1 class="m-0">Permissions</h1>
            </div>
        </div>
        <div>
            <x-adminlte-button label="Add permission" data-toggle="modal" data-target="#createPermmodal" 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',
                'Permission',
                'Updated on',
                '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($permissions as $permission)
                    <tr>
                        <td>{{ $permission->id }}</td>
                        <td>{{ $permission->name }}</td>
                        <td>{{ Carbon::parse($permission->updated_at)->format("d-m-Y") }}</td>
                        <td>
                            <nobr>
                                <a href="{{ route('permission.edit', ['permission' => $permission->id ]) }}"
                                class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
                                    <i class="fa fa-lg fa-fw fa-pen"></i>
                                </a>

                                <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{{$permission->id}}').submit();
                                    }
                                    }
                                    submit()"><i class="fa fa-lg fa-fw fa-trash"></i></a>

                                <form
                                    id="form{{$permission->id}}"
                                    action="{{route("permission.destroy",$permission->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="createPermmodal" title="Add Permission" size="md" theme="teal"
                        icon="fas fa-bell" v-centered static-backdrop scrollable>

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

                <div style="height:400px;">

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

                    <x-adminlte-input required
                                    name="description"
                                    label="Description"
                                    placeholder="Permission description"
                                    value=""
                                    fgroup-class=""/>

                <x-adminlte-select required name="permission_type" label="Permission Category"
                                    id="permissiontype">
                            <option value="Client">Client</option>
                            <option value="Contract">Contract</option>
                            <option value="User">User</option>
                            <option value="User Groups">User Groups</option>
                            <option value="Reports">Reports</option>
                            <option value="System">System</option>
                            <option value="other">Other</option>
                </x-adminlte-select>

                    <x-adminlte-select required name="service_group_id" label="Service Group"
                                    id="service_group_id">
                        <option value="">N/A</option>
                        @foreach($serviceGroups as $serviceGroup)
                            <option value="{{ $serviceGroup->id }}">{{ $serviceGroup->service_name }}</option>
                        @endforeach

                    </x-adminlte-select>

                </div>

                <x-adminlte-button class="mr-auto" 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

