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

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

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

@section('plugins.Datatables', true)

@section('content')
    <div class="d-flex justify-content-end align-content-end mb-3">
        <x-adminlte-button label="Add a Service" data-toggle="modal" data-target="#createServicemodal" class="bg-primary"/>
        <x-adminlte-button label="Add a Service Group" data-toggle="modal" data-target="#createServiceGroup" class="bg-primary"/>
    </div>

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

    <x-adminlte-card>
        {{-- Minimal example / fill data using the component slot --}}
        <x-adminlte-datatable id="clients-table" :heads="$headings" striped hoverable bordered>
            @foreach($services as $service)
                <tr>
                    <td>{{ $service->id }}</td>
                    <td>{{ $service->service_name }}</td>
                    <td>{{ $service->service_field_id }}</td>
                    <td>{{ $service->iprsNewServiceGroup->service_name }}</td>
                    <td>
                        <a href="{{ route('service.edit', ['service' => $service->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>
                    </td>
                </tr>
            @endforeach
        </x-adminlte-datatable>
    </x-adminlte-card>

    {{-- Create service modal --}}
    <x-adminlte-modal id="createServicemodal" title="Add a Service" size="md" theme="info"
                      icon="fas fa-bell" v-centered static-backdrop scrollable>
        <form method="POST" action="{{ route('service.store') }}">
            @csrf
            @method("POST")
            <div style="height:300px;">

                <x-adminlte-input name="service_name" label="Title" placeholder="Service title"
                                  value=""
                                  required
                                  fgroup-class=""/>

                <x-adminlte-input name="service_field_id" label="Field name" placeholder="Service field name"
                                  value=""
                                  required
                                  fgroup-class=""/>

                <x-adminlte-select name="service_group_id" label="Select a Service Group" placeholder="Select a Service Group"
                                   fgroup-class="col-md-6">

                    <option value="">Select a Service Group</option>

                            @foreach($service_groups as $service_group)
                                <option value="{{ $service_group->id }}">{{ $service_group->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>

    {{-- Create service modal --}}
    <x-adminlte-modal id="createServiceGroup" title="Add a Service Group" size="md" theme="info"
                      icon="fas fa-bell" v-centered static-backdrop scrollable>
        <form method="POST" action="{{ route('service-group.store') }}">
            @csrf
            @method("POST")
            <div style="height:200px;">

                <x-adminlte-input name="service_name" label="Title" placeholder="Service group title"
                                  value=""
                                  fgroup-class=""/>
                <x-adminlte-input name="service_group_id" label="Field id" placeholder="Field identifier"
                                  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

@section('js')

@stop
