@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <style>
    tr {
  cursor: pointer;
}
    </style>
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">SATS-DN Masuk</a></li>
    <li class="breadcrumb-item active" aria-current="page">Monitoring</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Monitoring SATS-DN Masuk</h6>
        <p class="text-muted mb-3">Berikut ini Data SATS-DN yang akan masuk ke wilayah kerja UPT.</p>
        <div class="table-responsive">
          <table id="dataTableExample" class="table table-hover">
            <thead>
              <tr>
                <th>Nomor SATSDN</th>
                <th>Tujuan</th>
                <th>Pengirim</th>
                <th>Penerima</th>
  
                <th>Asal Keberangkatan</th>
              </tr>
            </thead>
            <tbody>
                
                @foreach($data as $item)
              <tr data-url="{{ route('satsdn.show', ['id' => encrypt($item->id)]) }}">
                <td>{{ $item->nomor_satsdn }}
   
                </td>
                <td>{{ $item->satsdn_tujuan }}</td>
                <td>{{ $item->nama_pengirim }}</td>
                <td>{{ $item->nama_tujuan }}</td>
              
                <td>{{ $item->satsdn_asal_prov }} - {{ $item->satsdn_asal }}</td>
               
 @endforeach
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script>
$(document).ready(function () {
  var table = $('#dataTableExample').DataTable({
    responsive: true,
     "language": {
        search: ""
      }
  });

  // Klik baris
  $('#dataTableExample tbody').on('click', 'tr:not(.child)', function () {
    var url = $(this).data('url');
    if (url) {
      window.location.href = url;
    }
  });
});


  </script>
@endpush