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

@section('title', __('Change to '.$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/launder-stock/change-status') }}" >
@csrf
@if($title=='Wash')
  <input name="status" value="washed" type="hidden">
@elseif($title=='Sent')
  <input name="status" value="sent" type="hidden">
@endif

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

        <div class="card-body">
          
            <input name="id" id="id" type="hidden"/>
            <input name="tags" id="tags" type="hidden"/>
            
          
        </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">
          <br/><br/>
          <button type="button" id="submitBtn" onclick="enableFields();$('#formid').submit();" 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>


<div class="modal-size-default d-inline-block">
  <!-- Modal -->
  <div class="modal fade text-left" id="editButtonModel" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel18" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel18">{{ __('Modification') }}</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#editButtonModel').modal('hide');">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-body">
              {{ __('The change will be made to the all current RFID tags showing in the list below!') }}
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close" onclick="$('#editButtonModel').modal('hide');">{{ __('Cancel') }}</button>
                  <button type="button" onclick="enableFields();$('#editButtonModel').modal('hide');" class="btn btn-success" data-dismiss="modal">{{ __('Agree') }}</button>
              </div>
          </div>
      </div>
  </div>
</div>


@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 getSubCat(){
    var cat = $('#category').val();
    $.get("{{ url('/laundry/subcatList') }}", {id: cat}, function(result){
      $('#subcategory').html(result);
      $('#subcategory').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();
        $('#tags').val(rfidTagsList);
        $('#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();

    // $('#'+id).css('display','none');
    $('#tags').val(rfidTagsList);
  }

  function disableFields(){
    $('#category').prop('disabled', true);
    $('#subcategory').prop('disabled', true);
    $('#brand').prop('disabled', true);
    $('#supplier').prop('disabled', true);
    $('#washing_cost').prop('disabled', true);
    $('#washing_cycle').prop('disabled', true);
    $('#editButton').css('display','inline-block');
  }
  
  function enableFields(){
    $('#category').prop('disabled', false);
    $('#subcategory').prop('disabled', false);
    $('#brand').prop('disabled', false);
    $('#supplier').prop('disabled', false);
    $('#washing_cost').prop('disabled', false);
    $('#washing_cycle').prop('disabled', false);
    $('#editButton').css('display','none');
  }

  function isFormFilled(){
    if($('#category').val() == ''
    || $('#subcategory').val() == ''
    || $('#brand').val() == ''
    || $('#supplier').val() == ''
    || $('#washing_cost').val() == ''
    || $('#washing_cycle').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{
      $.ajax({
         type:'POST',
         url:'{{ url('/laundry/stock/check-tag-status') }}',
         headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
         data:{tag: rfid},
         success:function(status){
          //  alert(status);
          if('{{$title}}'=='Wash' && status=='received'){
            addNewTag(rfid);
          }else
          if('{{$title}}'=='Sent' && status=='washed'){
            addNewTag(rfid);
          }else{
            $('#rfid').val('');
            $('#rfid').focus();
            $('#existError').html('This item is not ready to be {{$title}}!, Current status is '+status);
          }
         }
      });
      
    }

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

  function recursivelyGetScannedStock(){
    setTimeout(function(){
      $.get( "{{ url('') }}/laundry/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);
  }      
 
  
  </script>
@endsection