@extends('user.template-user')
@section('title',$title)
@section('head')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.13.1/datatables.min.css"/>

@endsection
@section('content')
<div class="app-main__inner">
  <div class="app-page-title">
      <div class="container fiori-container">
          <div class="page-title-wrapper">
              <div class="page-title-heading">
                  <div>
                      <div class="page-title-head center-elem">
                          <span class="d-inline-block pr-2">
                          <i class=""></i>
                          </span>
                          <span class="d-inline-block">{{$title}}</span>
                      </div>
                      <div class="page-title-subheading opacity-10">
                          <nav class="ml-2" aria-label="breadcrumb">
                              <ol class="breadcrumb">
                                  <li class="breadcrumb-item" aria-current="page"><a href="{{route('user.home')}}"> Dashboard </a></li>
                                  <li class="active breadcrumb-item" aria-current="page"> Surat Tugas </li>
                                  <li class="active breadcrumb-item" aria-current="page"> {{$st->nomor}} </li>
                              </ol>
                          </nav>
                      </div>
                  </div>
              </div>
              <div class="page-title-actions">
                  
              </div>
          </div>
      </div>

      
  </div>

  <div class="app-inner-bar">
    <div class="container fiori-container">
      <div class="inner-bar-center">
      <ul class="nav">
        <li class="nav-item">
          <a role="tab" data-toggle="tab" id="tab-nav-0" class="nav-link active" href="#roomSuratTugas">
            <span>Surat Tugas</span>
          </a>
        </li>
        <li class="nav-item">
          <a role="tab" data-toggle="tab" id="tab-nav-1" class="nav-link" href="#roomAreas">
            <span>Area Cakupan</span>
          </a>
        </li>
        <li class="nav-item">
          <a role="tab" data-toggle="tab" id="tab-nav-1" class="nav-link" href="#roomAnggota">
            <span>Anggota</span>
          </a>
        </li>
      </ul>
      </div>
    </div>
  </div>


  <div class="container mt-4">
    <div class="tab-content">
    <div class="tab-pane tabs-animation fade active show" id="roomSuratTugas" role="tabpanel">
      <div class="card mb-4">
        <div class="card-body">
          <small>Detail Surat Tugas</small>
          <p class="mb-0 font-weight-bold">Nomor {{$st->nomor}}</p> <br>

          <table class="table table-sm">
            <tr> <td style="width: 200px">Tanggal Dibuat</td> <td>: {{$st->dibuat}}</td> </tr>
            <tr> <td>Nomor Surat</td> <td>: {{$st->nomor}}</td> </tr>
            <tr> <td>No. HP</td> <td>: {{$st->hp}}</td> </tr>
            <tr> <td>Tanggal Mulai</td> <td>: {{$st->mulai}}</td> </tr>
            <tr> <td>Tanggal Selesai</td> <td>: {{$st->selesai}}</td> </tr>
            <tr> <td>Uraian</td> <td>: {{$st->uraian}}</td> </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="tab-pane tabs-animation fade" id="roomAreas" role="tabpanel">
        <div class="card mb-3">
          
          <div class="card-body">
            <small>Area Cakupan Surat Tugas</small>
            <p class="font-weight-bold"></p>

              <div class="table-responsive">
                  <table class="table table-sm">
                    <thead>
                      <tr>
                        <th style="width: 10px">No</th>
                        <th>Kode Desa</th>
                        <th>Nama Desa</th>
                        <th>Skor</th>
                        <th>Keterangan</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach ($areas as $no => $area)
                          <tr>
                              <td>{{$no+1}} </td>
                              <td>{{$area->kd_desa}}</td>
                              <td>{{$area->nama_pemdes}}</td>
                              <td>{{$area->skor}}</td>
                              <td>{{$area->keterangan}}</td>
                              <td><a href="{{route('user.surat.tugas.area',['area_id'=>$area->id])}}" class="btn btn-primary btn-sm">Masuk</a></td>
                          </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
          </div>
        </div>
    </div>
    <div class="tab-pane tabs-animation fade" id="roomAnggota" role="tabpanel">
      <p><small>Daftar Anggota Terkait</small>     </p>
              <div class="table-responsive">
                <table class="table table-sm">
                  <thead>
                    <tr>
                      <th style="width: 10px"></th>
                      <th>Nama</th>
                      <th>NIP</th>
                      <th>Pangkat</th>
                      <th>Jabatan</th>
                      <th>Peran</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($pegawais as $no => $pegawai)
                        <tr>
                            <td> {{$no+1}} </td>
                            <td>{{$pegawai->nama}}</td>
                            <td>{{$pegawai->nip}}</td>
                            <td>{{$pegawai->pangkat}}</td>
                            <td>{{$pegawai->jabatan}}</td>
                            <td>{{$pegawai->peran}}</td>
                        </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
    </div>
  </div>
</div>
@endsection

@section('script')
@endsection