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

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

@section('content_header')
    <h3>All Services Groups</h3>
@stop

@section('plugins.Datatables', true)

@section('content')

    <div class="d-flex justify-content-end align-content-end mb-3">
        <x-adminlte-button label="Service Group" data-toggle="modal" data-target="#modalServiceGroup" class="bg-primary"/>
        <a href="{{ route('service-group.create') }}" class="btn btn-primary">Add a Service Group</a>
    </div>

    {{-- Setup data for datatables --}}
    @php
        $headings = [
            'ID',
            'Service Group',
            'Created'
        ];
    @endphp

    <x-adminlte-card>
        {{-- Minimal example / fill data using the component slot --}}
        <x-adminlte-datatable id="clients-table" :heads="$headings" striped hoverable bordered>
            @foreach($serviceGroup as $service)
                <tr>
                    <td>{{ $service->id }}</td>
                    <td>{{ $service->service_name }}</td>
                    <td>{{ $service->created_at }}</td>
                </tr>
            @endforeach
        </x-adminlte-datatable>
    </x-adminlte-card>

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

        <form method="POST" action="{{ route('service-group.store') }}">
            @csrf
            @method("POST")
            <div style="height:100px;">

                <x-adminlte-input name="role_name" label="Title" placeholder="Service Group title"
                                  value=""
                                  fgroup-class=""/>
            </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>
@stop
