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

@section('title', $title)

@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;
    }
    </style>
  @endsection

  

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

@if($errors->any())
    {!! implode('', $errors->all('<div class="alert alert-danger p-2" role="alert">:message</div>')) !!}
@endif

<form id="formid" method="post" action="{{ url('/laundry/stock/process/save') }}" >
@csrf
<!-- Basic table -->
<section id="basic-datatable">
  <div class="row">
    <div class="col-12">
      <div class="card">

        <div class="card-body">
          
            <input name="purpose" id="purpose" value="{{ $purpose }}" type="hidden"/>

            @if($purpose=='washing')
            <div class="modal-body flex-grow-1">
              <div class="form-group">
                  <label class="form-label" for="basic-icon-default-fullname">{{ __('Launders') }}</label>
                  <select class="form-control"
                    id="launder"
                    name="launder_id"
                    required>
                    <option value="">{{ __('Select Launder') }}</option>
                    @foreach($launders as $launder)
                      <option value="{{$launder->id}}">{{$launder->name}}</option>
                    @endforeach
                  </select>
              </div>
            </div>
            @endif


            <div class="modal-body flex-grow-1 row">
                <h5>{{ __('Quantity') }}: <span id="totalTags">0</span></h5>
            </div>
          
        </div>

        <table id="rfidtable" class="table" style="width:100%">
          <thead>
              <tr>
                  <th>{{ __('RFID') }}</th>
                  <th>{{ __('Action') }}</th>
              </tr>
          </thead>
          <tbody>
            <!-- <tr id="rowid">
              <td>1</td>
              <td>rfid</td>
              <td><i class="fas fa-trash-alt text-danger cursor-pointer"></i></td>
            </tr> -->
          </tbody>
        </table>

        <table id="rfidinputtable" class="table" style="width:100%">
          <thead>
            <tr id="rowid">
              <td><input
                  type="text"
                  class="form-control dt-full-name"
                  placeholder="{{ __('RFID') }}"
                  id="rfid"
                  name="rfid"
                  aria-label="RFID"
                  oninput="checkTag()"    
                /><label class="text-danger" id="existError"></label>
                </td>
              <td></td>
            </tr>
          </thead>
          <tbody>
            <tr id="rowid">
              <!-- <td></td> -->
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>

        <div class="card-body text-right">
          <button type="button" id="submitBtn" onclick="submitClick()" class="btn btn-primary mr-1 data-submit" >{{ __('Submit') }}</button>
          <button type="reset" class="btn btn-outline-secondary" >{{ __('Cancel') }}</button>
        </div>

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

@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>
@endsection
@section('page-script')
  {{-- Page js files --}}
  <!-- <script src="{{ asset(('laundry-files/js/scripts/tables/table-datatables-basic.js')) }}"></script> -->
  <script>
  const rfidTagsList = [];

  var rfidTableParams = {
      "bPaginate": false,
      "bLengthChange": false,
      "bFilter": false,
      "bInfo": false,
      "bAutoWidth": false,
      "ordering": false,
      "columnDefs": [{ "width": "20%", "targets": 1 }]
    };

  $(document).ready(function() {
    $('#mytable').DataTable();

    $('#rfidtable').DataTable({
      "bPaginate": false,
      "bLengthChange": false,
      "bFilter": false,
      "bInfo": false,
      "bAutoWidth": false,
      "ordering": false,
      "columnDefs": [{ "width": "20%", "targets": 1 }]
    });

    var rfidTable = $('#rfidinputtable').DataTable(rfidTableParams);

    recursivelyGetScannedStock();
  });

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

  function getSubDepart(){
    var dept = $('#department').val();
    $.get("{{ url('/laundry/subdeptList') }}", {id: dept}, function(result){
      $('#subdepartment').html(result);
      $('#subdepartment').prop('disabled', false);
    });
  }

  function addNewTag(rfid){
    // console.log(rfid);
      try{
        $('#rfid').val('');
        $('#existError').html('');
        rfidTagsList.push(rfid);
        $('#totalTags').html(rfidTagsList.length);
        $('#rfidtable').DataTable().destroy();
        $('#rfidtable').find('tbody').append('<tr id="'+rfid+'"><td>'+rfid+'</td><td><i onclick="removeTagRow('+ rfidTagsList.length +', \''+rfid+'\')" class="fas fa-trash-alt text-danger cursor-pointer"></i></td></tr>');
        $('#rfidtable').DataTable(rfidTableParams).draw();
        $('#rfid').focus();
        disableFields();
      }catch(e){
        functionToHandleError(e);
      }

  }

  function removeTagRow(pos, id){
    rfidTagsList.splice(pos-1, 1);
    $('#totalTags').html(rfidTagsList.length);

    $('#rfidtable').DataTable().destroy();
    $('#rfidtable').find('tbody').html('');
    for(var i=0; i<rfidTagsList.length; i++){
      $('#rfidtable').find('tbody').append('<tr id="'+rfidTagsList[i]+'"><td>'+rfidTagsList[i]+'</td><td><i onclick="removeTagRow('+ rfidTagsList.length +', \''+rfidTagsList[i]+'\')" class="fas fa-trash-alt text-danger cursor-pointer"></i></td></tr>');
    }
    $('#rfidtable').DataTable(rfidTableParams).draw();
  }

  function disableFields(){
    $('#department').prop('disabled', false);
    $('#subdepartment').prop('disabled', false);
    $('#editButton').css('display','inline-block');
  }
  
  function enableFields(){
    $('#department').prop('disabled', false);
    $('#subdepartment').prop('disabled', false);
    $('#editButton').css('display','none');
  }

  function isFormFilled(){
    if($('#department').val() == ''
    || $('#subdepartment').val() == ''){
      return false;
    }else
      return true;
  }

  function checkTag(){
    rfid = $('#rfid').val();
    if(!rfid.includes(' ')) return;

    $('#submitBtn').prop('disabled',true);
    $('#submitBtn').html('...');

    var rfid_arr = rfid.split(' ');
    rfid = rfid_arr[0];
    $('#rfid').val(rfid);
 
    if(isFormFilled()==false){
      $('#rfid').val('');
      $('#rfid').focus();
      $('#existError').html('Please fill the above mendatory fields');
    }else
    if(rfidTagsList.toString().includes(rfid)){
      $('#rfid').val('');
      $('#rfid').focus();
      $('#existError').html('That RFID is already scanned');
    }else{
      addNewTag(rfid);
    }

    $('#submitBtn').html('Submit');
    $('#submitBtn').prop('disabled',false);
  }

  function recursivelyGetScannedStock(){
    setTimeout(function(){
      $.get( "{{ url('') }}/laundry/api/stock/get-scan-stock?business_id={{ auth()->user()->business_id }}",
        function( data ) {
          // alert(data);
          if(data!=''){
            var arr = data.split(',');
            for(var i=0; i<arr.length; i++){
              addNewTag(arr[i]);
            }
          }
          recursivelyGetScannedStock();
      });
    }, 2000);
  }      
 
  function submitClick(){
    enableFields();

    for(i=0; i<rfidTagsList.length; i++){
      tag = rfidTagsList[i];
      $('#formid').append('<input type="text" name="tags_arr[]" value="'+ tag +'">');
    }

    $('#formid').submit();

  }
  
  </script>
@endsection