@extends('layout.master')

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

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Daftar SATS-DN</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">Daftar SATS-DN </h6>
        <div class="table-responsive">
          <table id="dataTableExample" class="table">
            <thead>
              <tr>
                <th style="text-align: center">Nomor SATS-DN</th>
                <th style="text-align: center">Nama Pengirim</th>
                <th style="text-align: center">Nomor telepon (Pengirim)</th>
                <th style="text-align: center">Asal</th>
                <th style="text-align: center">Tujuan</th>
                <th style="text-align: center">Masa Berlaku</th>
                <th style="text-align: center">Action</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($data as $item )
              <tr>
                <td>{{ $item->nomor_satsdn }}</td>
                <td>{{ $item->nama_pengirim }}</td>
                <td style="text-align: center">
                  <a href="https://wa.me/{{ preg_replace('/\D/', '', $item->no_telp_pengirim) }}" target="_blank">
                      {{ $item->no_telp_pengirim }}
                  </a>
                </td>
                <td>{{ $item->satsdn_asal }}</td>
                <td>{{ $item->satsdn_tujuan }}</td>
                <td style="text-align: center">{{ $item->masa_berlaku }}</td>
                <td>
                  <a style="text-decoration: none; color:white;" href="{{ route('satsdn.show',['id' =>encrypt($item->id)]) }}">
                    <button type="button" class="btn btn-primary btn-print btn-sm" id="{{ $item->id_data }}">
                      <i style="width: 15px; height:15px;" class="btn-icon-prepend"  data-feather="printer"></i>
                      Cetak
                    </button>
                  </a>
                  @if (Auth::user()->id == $item->user_id || Auth::user()->is_admin == 1 )
                  <a style="text-decoration: none; color:white;" href="{{ route('satsdn.edit',['id' =>encrypt($item->id)]) }}">
                    <button type="button" class="btn btn-info btn-print btn-sm" id="{{ $item->id_data }}" style="color:white">
                      <i style="width: 15px; height:15px;" class="btn-icon-prepend"  data-feather="edit"></i>
                      Edit
                    </button>
                  </a>
                  @endif

                  {{-- <a style="text-decoration: none; color:white;" href="{{ route('satsdn.delete',['id' =>encrypt($item->id)]) }}"> --}}
                  @if (Auth::user()->id == $item->user_id || Auth::user()->is_admin == 1 )
                  <button type="button" class="btn btn-danger btn-delete btn-sm" id="{{ encrypt($item->id) }}" style="color:white">
                    <i style="width: 15px; height:15px;" class="btn-icon-prepend"  data-feather="trash"></i>
                    Delete
                  </button>
                  @endif
                  {{-- </a> --}}
                </td>
              </tr>
              @endforeach
            </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

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>


<script>
  
  $(document).ready(function() {
        $('#dataTableExample').DataTable({
      "aLengthMenu": [
        [10, 30, 50, -1],
        [10, 30, 50, "All"]
      ],
      "iDisplayLength": 10,
      "language": {
        search: ""
      }
    });
    
    $.ajaxSetup({
      headers: {
        "Authorization": "Bearer " + localStorage.getItem("token"),
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
      }
    });

    $('.btn-delete').on('click', function(event){
      event.preventDefault();

      let id = $(this).attr('id');
      let button = $(this);
      $.ajax({
        url: `/data-satsdn/${id}`,
        type: 'DELETE',
        success: function(response){
          showSwal(response.status,response.message, response.title);
          button.closest('tr').fadeOut(300, function(){
              $(this).remove();
          });
        },
        error: function(response){
          showSwal(response.status,response.message, response.title);
        }
      })

    })

    // $('.btn-print').on('click', function(event){
    //   event.preventDefault();

    //   let id = $(".btn-print").attr('id');

    //   $.ajax({
    //     url: `/data-satsdn/${id}`,
    //     type: 'GET',
    //     success: function(response){
    //       window.href.location = response.url;s
    //     },
    //     error: function(response){

    //       console.log('Error showing data', response.errors);
    //     }
    //   })
    //   console.log(id);
      
    // })

    

  })
</script>