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

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

@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/save') }}" >
@csrf
<!-- Basic table -->
<section id="basic-datatable">
  <div class="row">
    <div class="col-12">
      <div class="card">

        <div class="card-body">
          
            <small><p class="text-warning">{{ __('Changes made in this section will be applied to all RFID tags showing in list below') }}<p></small>
            <input name="id" id="id" value="{{ $inventory->id }}" type="hidden"/>
            <input name="tags" id="tags" type="hidden"/>
            
            <span id="editButton"
                class="text-danger cursor-pointer"
                data-toggle="modal"
                data-target="#editButtonModel"
                style="display:none"
                onclick="$('#editButtonModel').modal('show');"
                >{{ __('Edit') }}</span>

            <div class="modal-body flex-grow-1 row">
              <div class="form-group col-md-6">
                  <label class="form-label" for="basic-icon-default-fullname">{{ __('Category') }}<span class="text-danger">*</span></label>
                  <select class="form-control"
                    id="category"
                    name="category_id"
                    onchange="getSubCat()"
                    required>
                    <option value="">__('Select Category') }}</option>
                    @foreach($categories as $category)
                      <option value="{{$category->id}}" {{ $inventory->category_id==$category->id ? 'selected' : '' }} >{{$category->name}}</option>
                    @endforeach
                  </select>
              </div>
              <div class="form-group col-md-6">
                  <label class="form-label" for="basic-icon-default-fullname">{{ __('Sub Category') }}<span class="text-danger">*</span></label>
                  <select class="form-control"
                    id="subcategory"
                    name="subcategory_id"
                    required>
                    @foreach($subcategories as $subcategory)
                      <option value="{{$subcategory->id}}" {{ $inventory->subcategory_id==$subcategory->id ? 'selected' : '' }} >{{$subcategory->name}}</option>
                    @endforeach
                  </select>
              </div>
              <div class="form-group col-md-6">
                  <label class="form-label" for="basic-icon-default-fullname">{{ __('Supplier') }}<span class="text-danger">*</span></label>
                  <select class="form-control"
                    id="supplier"
                    name="supplier_id"
                    required>
                    @foreach($customers as $customer)
                      <option value="{{$customer->id}}" {{ $inventory->customer_id==$customer->id ? 'selected' : '' }}>{{$customer->name}}</option>
                    @endforeach
                  </select>
              </div>


              <div class="form-group col-md-6">
                <br/>
                <h5>{{ __('Quantity') }}: <span id="totalTags">{{ $inventory->quantity }}</span></h5>
              </div>
              
            </div>
          
        </div>

        <table id="rfidtable" class="table" style="width:100%">
          <thead>
              <tr>
                  <th>{{ __('RFID') }}</th>
                  <th>{{ __('Action') }}</th>
              </tr>
          </thead>
          <tbody>
                        @foreach($inventory->items as $item)
                            <tr>
                <td>{{ $item->rfid }}</td>
                <td></td>
              </tr>
            @endforeach
          </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 rfidTagsListExisting = [];
  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 }]
    });
    
    
    @foreach($inventory->items as $item)
      rfidTagsListExisting.push('{{ $item->rfid }}');
    @endforeach

    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){
    try{
        $('#rfid').val('');
        $('#existError').html('');
        rfidTagsList.push(rfid);
        $('#totalTags').html(rfidTagsList.length + rfidTagsListExisting.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<rfidTagsListExisting.length; i++){
      $('#rfidtable').find('tbody').append('<tr id="'+rfidTagsListExisting[i]+'"><td>'+rfidTagsListExisting[i]+'</td><td></tr>');
    }
    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(rfid=="\n"){
      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{
        $.post("{{ url('/laundry/api/stock/check-tag') }}", {tag: rfid}, function(isExist){
          if(isExist=='false'){
            addNewTag(rfid);
          }else{
            $('#rfid').val('');
            $('#rfid').focus();
            $('#existError').html('That RFID is already exist');
          }
        });
      }

    // }

    $('#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);
  }      


  </script>
@endsection