@extends('layouts.admin.index')

@section('content')
  <div id="main-wrapper">
    <!-- Sidebar -->
    @include('layouts.admin.sidebar')
    <div class="page-wrapper">
      <!--  Header -->
      @include('layouts.admin.header')

      <div class="body-wrapper">
        <div class="container-fluid">
          {{ \Diglactic\Breadcrumbs\Breadcrumbs::render('MetadataGoals') }}
          <div class="card w-100 position-relative overflow-hidden">
            <div class="card-body p-4">
              <div class="row">
                <div class="col-12 mb-2">
                  <form action="{{ route('metadata-goals') }}" method="get" id="form-search">
                    <div class="row">
                      <div class="col-3">
                        <div class="input-group">
                          <span class="input-group-text rounded-start-pill bg-transparent">
                            <i class="ti ti-search"></i>
                          </span>
                          <input name="s" type="text" value="{{ $q }}" class="form-control rounded-end-pill" placeholder="Cari Indikator...">
                        </div>
                      </div>
                      <div class="col-5">
                        <select class="form-select rounded-pill" name="v" id="version">
                          <option value="">Pilih Edisi</option>
                          @foreach($versions as $r)
                            <option value="{{ $r->metadata_version }}" @selected($r->metadata_version == $v)>{{ $r->metadata_version }}</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="col-12 mb-4">
                  <div class="table-responsive mb-4 border rounded-1">
                    <table class="table mb-0 align-middle">
                      <thead class="bg-inverse text-white table-dark fs-4">
                      <tr>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0 text-white">No</h6>
                        </th>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0 text-white">Indikator</h6>
                        </th>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0 text-white">Target</h6>
                        </th>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0 text-white">Tujuan</h6>
                        </th>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0 text-white">Pillar</h6>
                        </th>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0 text-white">Edisi</h6>
                        </th>
                      </tr>
                      </thead>
                      <tbody>
                      @foreach($data->items() as $d)
                        <tr>
                          <td>{{ $loop->index + $data->firstItem() }}</td>
                          <td><strong>[{{ $d->code }}]</strong> {{ $d->name}}</td>
                          <td><strong>[{{ $d->metadataTarget->code }}]</strong> {{ $d->metadataTarget->name}}</td>
                          <td><strong>[{{ $d->metadataTarget->metadataPurpose->code }}]</strong> {{ $d->metadataTarget->metadataPurpose->name}}</td>
                          <td>{{ $d->metadataTarget->metadataPurpose->pillar->name}}</td>
                          <td>{{ $d->metadata_version}}</td>
                        </tr>
                      @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
                {{ $data->links() }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
  <script>
    document.getElementById('version').addEventListener('change', function() {
      document.getElementById('form-search').submit();
    });
  </script>
@endpush