@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 DISKON</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('additem') }}" class="btn btn-dark btn-md">Add Data Item</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="itemDiskon/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="itemMaster/export_excel" class="btn btn-success my-3" target="_blank">EXPORT EXCEL</a>
   
   <div class="card" style="padding: 10px">
   <table class='table table-bordered table-responsive' id="myTable">
      <thead>
         <tr>
            <th>No</th>
            <th>Accountnum</th>
            <th>Toko</th>
            <th>Group</th>
            <th>Item</th>
            <th>Disc Max</th>
            <th>Periode Start</th>
            <th>Periode End</th>
            <th>Act</th>
         </tr>
      </thead>
      <tbody>
      @php $i=1 @endphp
      @foreach($itemMasterData as $item)
        <tr>
            <td>{{ $i++}}</td>
            <td>{{ $item->accountnum }}</td>
            <td>{{ $item->name}}</td>
            <td>{{ $item->group }}</td>
            <td>{{ $item->item_id }}</td>
            <td>{{ $item->disc_max }}%</td>
            <td>{{ $item->periode_start}}</td>
            <td>{{ $item->periode_end}}</td>
            <td>
               <a href="{{ url('edititem/'.$item->id) }}" class="btn btn-success btn-sm">Edit</a>
               <form id="deleteForm_{{ $item->id }}" method="POST" action="{{ route('item.destroy', $item->id) }}" style="display: inline;">
                  @csrf
                  @method('DELETE')
                  <button type="button" class="btn btn-danger btn-sm delete-btn" data-id="{{ $item->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: 25, // 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>