@extends('frontend.layouts.master')

      <link href="{{ asset('/assets/plugins/plugin.css') }}" rel="stylesheet">
      <style>
         th {
            background-color: #148AFB;
            color: white;
            }
      </style>
      <link href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
      <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
      

      
  {{-- sweet alert --}}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11">
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  
 
@section('content')
   <div class="container">
      <center>
         <h4>DATA TOKO</h4>
      </center>
   
   {{-- notifikasi form validasi --}}
   @if ($errors->has('file'))
   <span class="invalid-feedback" role="alert">
      <strong>{{ $errors->first('file') }}</strong>
   </span>
   @endif
   
   {{-- notifikasi sukses --}}
   @if ($sukses = Session::get('sukses'))
   <div class="alert alert-success alert-block">
      <button type="button" class="close" data-dismiss="alert">×</button> 
      <strong>{{ $sukses }}</strong>
   </div>
   @endif
   
   <a href="{{ url('addtoko') }}" class="btn btn-dark btn-md">Add Data Toko</a>
   
   <button type="button" class="btn btn-primary my-3" data-toggle="modal" data-target="#importExcel">
   IMPORT EXCEL
   </button>
   
   <!-- Import Excel -->
   <div class="modal fade" id="importExcel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
         <form method="post" action="/public/toko/import_excel" enctype="multipart/form-data">
            <div class="modal-content">
            <div class="modal-header">
               <h5 class="modal-title" id="exampleModalLabel">Import Excel</h5>
            </div>
            <div class="modal-body">
               {{ csrf_field() }}
               <label>Pilih file excel</label>
               <div class="form-group">
                  <input type="file" name="file" required="required">
               </div>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
               <button type="submit" class="btn btn-primary">Import</button>
            </div>
            </div>
         </form>
      </div>
   </div>
   
      <a href="toko/export_excel" class="btn btn-success my-3" target="_blank">EXPORT EXCEL</a>
   
      <div class="card" style="padding:10px">
         <table class='table table-bordered' id="myTable">
            <thead>
               <tr>
                  <th>Name</th>
                  <th>Accountnum Toko</th>
                  <th>Salesresponbility</th>
                  <th>NIK</th>
                  <th>Term of Payment</th>
                  <th style="text-align: center">Act</th>
               </tr>
            </thead>
            <tbody>
            @php $i=1 @endphp
            @foreach($toko as $s)
            <tr>
               <td>{{ $s->name }}</td>
               <td>{{ $s->accountnum }}</td>
               <td>{{ $s->salesresponbility }}</td>
               <td>{{ $s->nik}}</td>
               <td>{{ $s->payment_term_code }}</td>
               <td>
               <a href="{{ url('edittoko/'.$s->id) }}" class="btn btn-success btn-sm">Edit</a>
                  <form id="deleteForm_{{ $s->id }}" method="POST" action="{{ route('toko.destroy', $s->id)}}" style="display: inline">
                     @csrf
                     @method('DELETE')
                     <button class="btn btn-danger btn-dm delete-btn" data-id="{{ $s->id }}">Hapus</button>
                  </form>
               </td>
            </tr>
            @endforeach
            </tbody>
         </table>
      </div>
   </div>
   
@endsection

   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
   <script>
        $(document).ready( function () {
            $('#myTable').DataTable({
                "responsive": true,
                "width" : 15,
                paging: true, // Enable pagination
               lengthChange: false, // Disable number of rows per page dropdown
               pageLength: 10, // Set default number of rows per page
               searching: true, 
            });
        });
   </script>

   <script>
         document.addEventListener('DOMContentLoaded', function()
         {
            const deleteButtons = document.querySelectorAll('.delete-btn');

            deleteButtons.forEach(button => {
               button.addEventListener('click', function (event) {
                  event.preventDefault();
                  const formId = event.target.getAttribute('data-id');

                  Swal.fire({
                     title: 'Are you sure?',
                     text: 'You will not be able to recover this data!',
                     icon: 'warning',
                     showCancelButton: true,
                     confirmButtonText: 'Yes, Delete it!',
                     cancelButtonText: 'No, Cancel!',
                     reverseButtons: true
                  }).then((result) => {
                     if (result.isConfirmed) {
                        document.getElementById('deleteForm_' + formId).submit();
                     }
                  });
               });
            });
         });
    </script>
   </body>
</html>