@extends('layouts.backend')
@section('extraCss')
  <style>
    #masterValuesModal table{
      clear: both;
      margin:0px;
    }
    #masterValuesModal table td {
      padding:5px;
      text-align: center;
      vertical-align: bottom;
    }
    #masterValuesModal form * {
      font-size:12px;
    }
  </style>
@endsection
@section('mainContentArea')
<div class="card card-default">
    <div class="card-header">
        <h4>
            Manage Dynamic Masters
            {!! $addBtn !!}
            {!! $draftBtn !!}
            {!! $viewBtn !!}
        </h4>
    </div>
    <div class="card-body">
        <table class="table table-bordered data-table">
            <thead>
                <tr>
                    <th>S.No.</th>
                    <th>Name</th>
                    <th>Details</th>
                    <th width="100px">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<!-- The Modal -->
<div class="modal" id="hsnModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <form action="{{ route('master.store') }}" method="post" name="hsnFrm">
              @csrf
              <input type="hidden" name="master_id" id="master_id" value="0">
              <div class="row">
                <div class="col-md-12">
                    <div class="form-group"><label for="hsnname">Name</label><input class="form-control" name="name" id="hsnname" required value="" placeholder="Enter Master Name"/></div>
                    <div class="form-group"><label for="hsncode">Description</label><input class="form-control" name="code" id="hsncode" required value="" placeholder="Enter Master Description"/></div>
                    <div class="form-group"><button class="btn btn-block btn-primary">Save Master</button></div>
                </div>
              </div>
          </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<!-- The Modal -->


<!-- The Modal -->
<div class="modal" id="masterValuesModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Master values for: <span class="mv"></span></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <form action="{{ route('set-master-values') }}" method="post" name="mvFrmMain" onsubmit="saveTheValue(this);return false;">
          @csrf
          <input type="hidden" name="master_id" id="master_id" value="0">
          <input type="hidden" name="master_value_id" id="master_value_id" value="0">
          <div class="row">
            <div class="col-md-12">
              <b>Add new value</b>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td valign="bottom"><div class="form-group"><label for="hsncode1">Code</label><input class="form-control" name="code" id="hsncode1" required value="" placeholder="Enter Value Code For Easy Reference"/></div></td>
                  <td valign="bottom"><div class="form-group"><label for="hsnname1">Name</label><input class="form-control" name="name" id="hsnname1" required value="" placeholder="Enter Value Name"/></div></td>
                  <td valign="bottom"><div class="form-group"><button class="btn btn-block btn-primary">Send For Approval</button></div></td>
                </tr>
              </table>
            </div>
          </div>
        </form>
        <div class="oldValues" style="max-height:450px;overflow:auto;"></div>
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<!-- The Modal -->
@endsection

@section('extraJs')
<script type="text/javascript">
    $(function () {
      
      var table = $('.data-table').DataTable({
          processing: true,
          serverSide: true,
          stateSave: true,
          ajax: "{{ route('master.index') }}",
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex'},
              {data: 'name', name: 'name'},
              {data: 'code', name: 'code'},
              {data: 'action', name: 'action', orderable: false, searchable: false},
          ]
      });
      
    });

    function getMasterValues(i,n) {
      document.mvFrmMain.master_id.value = i;
      $.get('{{ route('get-master-values') }}?master_id='+i, function(data) {
        if(data == '0') {

        } else {
          var tokenVal = document.tokenForm._token.value;
          var html = '<div><b>Manage Old Values</b></div>';
          data = jQuery.parseJSON(data);
          $.each(data, function(key,value) {
            html+= '<form action="{{ route('set-master-values') }}" method="post" name="mvFrm'+value.id+'" onsubmit="saveTheValue(this);return false;"> \
              <input type="hidden" name="master_id" id="master_id" value="'+value.master_id+'"> \
              <input type="hidden" name="_token"  value="'+tokenVal+'"> \
              <input type="hidden" name="master_value_id" id="master_value_id" value="'+value.id+'"> \
              <table width="100%" border="0" cellspacing="0" cellpadding="0"> \
                <tr> \
                  <td valign="bottom"><div class="form-group"><input class="form-control" name="code" required value="'+value.code+'" placeholder="Enter Value Code For Easy Reference"/></div></td> \
                  <td valign="bottom"><div class="form-group"><input class="form-control" name="name" required value="'+value.name+'" placeholder="Enter Value Name"/></div></td> \
                  <td valign="bottom"><div class="form-group"><button class="btn btn-block btn-primary">Send For Approval</button></div></td> \
                </tr> \
              </table> \
            </form> \
            ';
           });
          $("#masterValuesModal .oldValues").html(html);
        }
        $("#masterValuesModal .mv").html(n);
        $("#masterValuesModal").modal('show');
      });
    }

    function saveTheValue(frm) { console.log('h');
      $.post("{{ route('set-master-values') }}", {
          master_id: frm.master_id.value,
          name: frm.name.value,
          code: frm.code.value,
          _token: frm._token.value,
          master_value_id: frm.master_value_id.value
      }, function(result) {
          var response = jQuery.parseJSON(result);
          $(".custListTbl tbody").html('');
          if (response.status == false) {
            toastr.error(response.info);
          } else {
            toastr.success(response.info);
            if(parseInt(frm.master_value_id.value) <= 0) {
              html = '<form action="{{ route('set-master-values') }}" method="post" onsubmit="saveTheValue(this);return false;"> \
                <input type="hidden" name="master_id" id="master_id" value="'+frm.master_id.value+'"> \
                <input type="hidden" name="_token"  value="'+frm._token.value+'"> \
                <input type="hidden" name="master_value_id" id="master_value_id" value="'+response.mvid+'"> \
                <table width="100%" border="0" cellspacing="0" cellpadding="0"> \
                  <tr> \
                    <td valign="bottom"><div class="form-group"><input class="form-control" name="code" required value="'+frm.code.value+'" placeholder="Enter Value Code For Easy Reference"/></div></td> \
                    <td valign="bottom"><div class="form-group"><input class="form-control" name="name" required value="'+frm.name.value+'" placeholder="Enter Value Name"/></div></td> \
                    <td valign="bottom"><div class="form-group"><button class="btn btn-block btn-primary">Update</button></div></td> \
                  </tr> \
                </table> \
              </form> \
              ';
              //$("#masterValuesModal .oldValues").append(html);
              frm.reset();
            }
          }
          return false;
      });
      return false;
  }

function approval(id) {
  $.post("{{ route('set-master-values') }}", {
      data: $('form[name="mvFrm'+id+'"]').serialize(),
      _token: $('form[name="mvFrm'+id+'"]').find('input[name="_token"]').val(),
  }, function(result) {
      var response = jQuery.parseJSON(result);
      $(".custListTbl tbody").html('');
      if (response.status == false) {
        toastr.error(response.info);
      } else {
        toastr.success(response.info);
        $('form[name="mvFrm'+id+'"]').remove();
      }
      return false;
  });
  return false;
}

  function setFabric(pos,status){
    
    var _token   = $('meta[name="csrf-token"]').attr('content'); 
    $.ajax({
        type: "get",
        url: "{{ route('master-status-update') }}",
        data: {
        pos: pos,            
        status:status,              
        _token: _token
        },
        dataType: "json",                       
        success: function(response) { 
            var reason = JSON.stringify(response);  
            var parsed = JSON.parse(reason);            
            console.log(parsed);
            if (parsed.status == false) {
            toastr.error(parsed.info);
            $('.submitBtn').removeAttr("disabled");
            } else {
            toastr.success(parsed.info);
            console.log(parsed.svalue,pos); 
            window.location.reload('true');               
            
            }
        }
    });   
  }
  </script>
@endsection