@extends('laundry::layouts/contentLayoutMaster')

@section('title', __('History') )

@section('vendor-style')
  {{-- vendor css files --}}
  <link rel="stylesheet" href="{{ asset(('laundry-files/vendors/css/tables/datatable/dataTables.bootstrap4.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(('laundry-files/vendors/css/tables/datatable/responsive.bootstrap4.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(('laundry-files/vendors/css/tables/datatable/buttons.bootstrap4.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(('laundry-files/vendors/css/tables/datatable/rowGroup.bootstrap4.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(('laundry-files/vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  
  @livewireStyles
@endsection
@section('page-style')
  <!-- Page css files -->
  <style>
    .dataTables_info{
      padding-left: 15px;
    }
    .dataTables_length{
      padding-left: 15px;
    }
    .pagination{
      padding-right: 15px;
    }
    .dataTables_filter{
      padding-right: 15px;
    }
    .buttons-copy{
      margin-left: 15px;
    }
    .buttons-html5{
      margin-top: 15px;
      box-shadow: none;
      display: inline-block;
      font-weight: 400;
      color: #6e6b7b;
      text-align: center;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-color: transparent;
      border: 1px solid transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
      padding: 0.786rem 1.5rem;
      font-size: 1rem;
      line-height: 1;
      border-radius: 0.358rem;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0s, border 0s;
      border-color: #7367f0 !important;
      background-color: #7367f0 !important;
      color: #fff !important;
    }
    </style>
  @endsection

  

@section('content')
@if(session()->has('message'))
    <div class="alert alert-success p-2" role="alert">
        {{ session()->get('message') }}
    </div>
@endif


<!-- Basic table -->
<section id="basic-datatable">
  <div class="row">
    <div class="col-12">
      <div class="card">

        <table id="mytable" class="table" style="width:100%">
          <thead>
              <tr>
                  <th>{{ __('ID') }}</th>
                  <th>{{ __('Category') }}</th>
                  <th>{{ __('Sub Category') }}</th>
                  <th>{{ __('Customer') }}</th>
                  <th>{{ __('Quantity') }}</th>
                  <th>{{ __('Action') }}</th>
              </tr>
          </thead>
          <tbody>
            @foreach($inventories as $inventory)
              <livewire:stock-launder-table-row :rowVar="$inventory" :table="$table"/>
              <tr id="rowid{{$inventory->id}}">
                <td>{{ $inventory->id }}</td>
                <td>{{ $inventory->category->name }}</td>
                <td>{{ $inventory->subcategory->name }}</td>
                <td>{{ $inventory->customer->name }}</td>
                <td>{{ $inventory->quantity }}</td>
                
                <td><a href="{{ url('/laundry/launder-stock/add/'.$inventory->id) }}"><i class="fas fa-edit text-primary mr-1 cursor-pointer"></a></i>

            </td>
            </tr>

            @endforeach
          </tbody>
        </table>

      </div>
    </div>
  </div>
</section>
<!--/ Basic table -->



@endsection


@section('vendor-script')
  @livewireScripts
  {{-- vendor files --}}
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/responsive.bootstrap4.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/datatables.checkboxes.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/jszip.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
  <script src="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css"></script>
  
  
@endsection
@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(('laundry-files/js/scripts/tables/table-datatables-basic.js')) }}"></script>
  <script>
  $(document).ready(function() {
    $('#mytable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    });
  });

  function edit(id, parent, name, name_ar){
    $('#id').val(id);
    $('#parent').val(parent).change();
    $('#name').val(name);
    $('#name_ar').val(name_ar);
    $('#modalSubmit').html('Update');
    $('#modalLabel').html('Update Department');
    $('.form-modal').modal('show')
  }

function removeRow(element){
  var id = $(element).data('id');
  var row = $(element).parents().find(id);
  $(row).remove();
}

  </script>
@endsection