@extends('layouts.main')

@section('title', 'Contracted Services')

@section('breadcrumb')
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <h4 class="page-title">Contracted Services</h4>
                <ol class="breadcrumb float-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Contracted Services</li>
                </ol>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="content-body">
      <div class="content-body">
        <div class="card-box">
        <section class="dashboards-skeleton m-t-15">
                <div class="row">
                  <div class="col-sm-12 data-table-padding" >
                    <table class="table table-chrome table-striped not-wrapped-results" id="data-table">
                        <thead>

                        <tr>
                          <th>Service Name</th>
                            <th>Short Name</th>
                            <th>Period</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($services as $service)

                            <tr>
                              <td>
                                  <a href="/{{$service->splunk_dashboard}}">{{ $service->name }}</a>
                              </td>
                                <td>
                                    <a href="/{{$service->splunk_dashboard}}">{{ $service->short_name }}</a>
                                </td>
                                <td>
                                    <span>{{ $service->date_start }} - {{ $service->date_end }}</span>
                                </td>
                                <td>
                                    <span>
                                        {{ \App\Models\Service::$statuses[$service->status] }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                  </div>

                </div>
        </section>

      </div>
    </div>
    </div>

@endsection
@section('footer_scripts')
    <script>
      var dataTable = new DataTable(document.querySelector('#data-table'), {perPageSelect: [5, 15, 25, 50, 100],perPage: 15,});
    </script>
@endsection