@extends('panel.layouts.app')
@section('page-title')
<title>

{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Booking</title>
@stop
@section('content')
<style type="text/css">
  span.select2-container.select2-container--default.select2-container--open{width: 200px !important;}
</style>
<div class="content-wrapper">
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
      <section class="content">
        <div class="box box-default">
          <div class="box-header cstm-header with-border">            
            <h3 class="box-title"><i class="fa fa-cube mr-5"></i>Booking</h3>
              <button class="btn btn-primary" data-toggle="modal"  onclick="openUpdateRateModel()"><i class="fa fa-edit"></i>
              Update Rate From Quotation</button>
          </div>
          <div class="box-body">
            <div class="row">
              <div class="col-md-2">
                <div class="form-group has-feedback err">
                  <label>Client</label>
                  {{ Form::select('clients', $clients,'',["class"=>'form-control filter select2','autofocus' => 'true', 'id' => 'clients']) }}
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group has-feedback">
                  <label>Start Date</label>
                  <div class="input-group ">
                    {{Form::text( 'start_date', $startDate, [ "class" => "form-control", "id" => 'startDate' ]) }}
                    <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div>
                  </div>
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group has-feedback">
                  <label>End Date</label>
                  <div class="input-group ">
                    {{Form::text( 'end_date', $endDate, [ "class" => "form-control", "id" => 'endDate' ]) }}
                    <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div>
                  </div>
                </div>
              </div>
              <div class="col-md-2">
                <div id="pagecontrol">
                  <label for="pagecontrol">Rows per page</label>
                  <select id="pagesize"  class="form-control" name="pagesize">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                  </select>
                </div>
              </div>
              <div class="col-md-2">
                <label for="filter">Search</label>
                <input type="text" class="form-control" id="filter" value="" />
              </div>
              <div class="col-md-2">
                <button class="btn btn-primary cstm-bulk-edit" data-toggle="modal"  onclick="openBulkEditModel()"><i class="fa fa-edit"></i> Bulk Edit</button>
              </div>
            </div>
            <div class="table-responsive">
              <div id="tablecontent"></div>
              <div id="paginator"></div>
            </div>
          </div>
        </div>
        @include('panel.parcelentry.bulk_edit_parcelentry_model',['entity' =>  'parcel'])
        @include('panel.parcelentry.update_rate_from_quotation_model',[])
      </section>
    </div> 
    <div class="col-md-1"></div>
  </div>
</div>
@stop
@section('custom-scripts')
<script src="{{ laracore_assets('dist/js/editablegrid.js') }}"></script>
<script src="{{ laracore_assets('dist/js/editablegrid_renderers.js') }}"></script>
<script src="{{ laracore_assets('dist/js/editablegrid_editors.js') }}"></script>
<script src="{{ laracore_assets('dist/js/editablegrid_validators.js') }}"></script>
<script src="{{ laracore_assets('dist/js/editablegrid_utils.js') }}"></script>
<script>
  $(document).ready(function () {
    $('#endDate, #startDate, #newDate').daterangepicker({
      singleDatePicker: true,
      autoUpdateInput: true,
      drops: "down",
      locale: {
        format: '{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}',
      },
    });

    loadParcelData();
    $('#endDate, #startDate').change(function(e) {
      loadParcelData();
    });

    initializeICheck();
    $(document).on('ifChanged', '.check-all', function () {
        var isChecked = $(this).prop('checked');
        $('.bulk-edit-checkbox').each(function () {
            $(this).prop('checked', isChecked).iCheck(isChecked ? 'check' : 'uncheck'); 
        });
    });

    $(document).on('ifChanged', '.bulk-edit-checkbox', function () {
        var allChecked = $('.bulk-edit-checkbox:checked').length === $('.bulk-edit-checkbox').length;
        $('.check-all').prop('checked', allChecked).iCheck(allChecked ? 'check' : 'uncheck'); 
    });

    function initializeICheck() {
        $('input[type="checkbox"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-grey',
            radioClass: 'iradio_minimal-grey'
        });
    }

    $(document).on('click', '#bulk_edit_parcel', function(e){
      var selectedRows = [];
      $('.bulk-edit-checkbox:checked').each(function() {
        selectedRows.push($(this).data('id'));
      });
      var checkClient = $('#check-client').prop('checked');
      var checkDate = $('#check-date').prop('checked');
      var newClient = $('#newClient').val();
      var newDate = $('#newDate').val();
      var oldClient = $('#clients').val();
      var start_date = $('#startDate').val();
      var end_date = $('#endDate').val();
      if (selectedRows.length === 0) {
        toastr.error('Please select at least one row to edit.', 'Error!');
        return;
      }
      var formData = { 'checkClient':checkClient, 'checkDate':checkDate, 'newClient':newClient, 'newDate':newDate, 'oldClient':oldClient, 'start_date':start_date, 'end_date':end_date, 'selectedRows':selectedRows};
      var url = APP_URL+"/parcel-bulk-edit";
      var btn = $(this);
      btn.prop("disabled", true);
      btn.html('Yes, Sure <i class="fa fa-spinner fa-spin"></i>');
      $.ajax({
        type: "POST",
        url: url,
        data: formData,
        dataType: 'json',
        success: function (data) {
          btn.prop("disabled", false);
          btn.html('Yes, Sure');
          var oldClientVal = $('select[name="clients"]').find('option:first').val();
          $('select[name="clients"]').val(oldClientVal).change();
          var startDate = '{{$startDate}}';
          var endDate = '{{$endDate}}';
          $('input[name="start_date"]').val(startDate);
          $('input[name="end_date"]').val(endDate);
          var newClientVal = $('select[name="new_client"]').find('option:first').val();
          $('select[name="new_client"]').val(newClientVal).change();
          $('input[type="checkbox"].check-date:checked').iCheck('uncheck');
          $('input[name="new_date"]').val(startDate);
          loadParcelData();
          $('#bulk_edit_parcel_modal').modal('hide');
          DisplayMessages(data['message']);
          var table = $('#tableid').DataTable();
          table.clear().rows.add(data).draw();
          // refreshHeader();
        },
        error: function (jqXHR, exception) {
          var Response = jqXHR.responseText;
          Response = $.parseJSON(Response);
          DisplayMessages(Response.message,'error');
        }
      });
    });

    $(document).on('click', '#update_rate', function(e){
      var client = $('#clients').val();
      var start_date = $('#startDate').val();
      var end_date = $('#endDate').val();
      var formData = { 'client':client, 'start_date':start_date, 'end_date':end_date};
      var url = APP_URL+"/update-parcel-rate-from-quotation";
      var btn = $(this);
      btn.prop("disabled", true);
      btn.html('Yes, Sure <i class="fa fa-spinner fa-spin"></i>');
      $(".master-loader").show();
      $.ajax({
        type: "POST",
        url: url,
        data: formData,
        dataType: 'json',
        success: function (res) {
          $(".master-loader").fadeOut( "slow" );
          btn.prop("disabled", false);
          btn.html('Yes, Sure');
          if (res.status == 'warning') {
            $('#update_rate_from_quotation_modal').modal('hide');
            toastr.warning(res.message, 'Alert !', { onHidden: function() {}});
          } else if (res.status == 'success') {
            var client = $('select[name="clients"]').find('option:first').val();
            $('select[name="clients"]').val(client).change();
            $('input[name="start_date"]').val(start_date);
            $('input[name="end_date"]').val(end_date);
            $('#update_rate_from_quotation_modal').modal('hide');
            DisplayMessages(res.message);
            if (res.path != '' || res.path != null) {
              window.location.href = res.path;
            }
          }
        },
        error: function (jqXHR, exception) {
          var Response = jqXHR.responseText;
          Response = $.parseJSON(Response);
          DisplayMessages(Response.message,'error');
        }
      });
    });
  });

    function formatDate(dateStr) {
      var date = new Date(dateStr);
      var day = ("0" + date.getDate()).slice(-2); 
      var month = date.toLocaleString('default', { month: 'short' }); 
      var year = date.getFullYear();
      return day + ' ' + month + ' ' + year; 
    }

  function loadParcelData(){
    var _token = $('hidden[name=_token]').val();
    var client = $('select[name=clients]').val();
    var start_date = $('input[name=start_date]').val();
    var end_date = $('input[name=end_date]').val();
    $.ajax({
        type: "POST",
        url: '{{route("post.parcel.list")}}',
        dataType: 'json',
        data: {'_token':_token, 'client':client, 'start_date': start_date, 'end_date': end_date},
        success: function (data) {
            var metadata = [
                { name: "id", label: "#", datatype: "string", editable: false, class:'cstm-th' },
                { name: "date", label: "Date", datatype: "string", editable: true, class:'cstm-th' },
                { name: "client_id", label: "Client", datatype: "string", editable: true, class:'cstm-th' },
                { name: "center_id", label:"Center", datatype: "string", editable: true, class:'cstm-th' },
                { name: "receiver_id", label: "Receiver", datatype: "string", editable: true, class:'cstm-th' },
                { name: "mobile", label: "Mobile", datatype: "string", editable: true, class:'cstm-th' },
                { name: "carrier_id", label: "Carrier", datatype: "string", editable: true, class:'cstm-th' },
                { name: "package_type", label: "Package Type", datatype: "string", editable: true, class:'cstm-th' },
                { name: "weight", label: "Weight", datatype: "string", editable: true, class:'cstm-th' },
                { name: "amount", label: "Amount", datatype: "double", editable: true, class:'cstm-th' },
                { name: "consignment_no", label: "Consignment", datatype: "string", editable: true, class:'cstm-th' },
                { name: "remakrs", label: "Remarks", datatype: "string", editable: true, class:'cstm-th' }
            ];
            metadata[2].values = data.clients;
            metadata[3].values = data.centers;
            metadata[4].values = data.receivers;
            metadata[6].values = data.carriers;
            metadata[7].values = data.packagetypes;
            var data1 = [];
            var all_data = data.response_data;
            $.each(all_data, function(i, val) {
                data1.push({
                    id: val.id,
                    values: {
                        "id": val.id,
                        "date": val.date ,
                        "client_id": val.client_name,
                        "center_id": val.center_name,
                        "receiver_id": val.receiver_name,
                        "mobile": val.mobile,
                        "carrier_id": val.carrier_name,
                        "package_type": val.package_name,
                        "weight": val.weight,
                        "amount": Math.round(parseFloat(val.amount)),
                        "consignment_no": val.consignment,
                        "remakrs": val.remakrs
                    }
                });
            });
            editableGrid = new EditableGrid("DemoGridFull", { pageSize: 10 });
            editableGrid.load({"metadata": metadata, "data": data1});
             editableGrid.setCellRenderer("amount", new CellRenderer({
              render: function (cell, value) {
                  cell.innerHTML = parseInt(value);
              }
             }));
            editableGrid.initializeGrid();
            var modalTableBody = $('#modalTableBody');
            modalTableBody.empty();
            $.each(all_data, function(i, val) {
              var formattedDate = formatDate(val.date);
                var row = '<tr>' +
                    '<td><input type="checkbox" class="bulk-edit-checkbox " data-id="' + val.id + '"></td>' +
                    '<td>' + formattedDate + '</td>' +
                    '<td>' + val.client_name + '</td>' +
                    '<td>' + val.center_name + '</td>' +
                    '<td>' + val.receiver_name + '</td>' +
                    '<td>' + val.weight + '</td>' +
                    '<td>' + val.amount + '</td>' +
                   '<td>' + (val.consignment || '') + '</td>' +
                    '</tr>';
                modalTableBody.append(row);
            });
            $('#searchTable').on('input', function () {
                var searchTerm = $(this).val().toLowerCase(); 
                $('#modalTableBody tr').each(function () {
                    var rowText = $(this).text().toLowerCase(); 
                    if (rowText.indexOf(searchTerm) === -1) {
                        $(this).hide(); 
                    } else {
                        $(this).show(); 
                    }
                });
            });
        },
        error: function (jqXHR, exception) {
            console.log('Something went wrong');
        }
    });
  }
  
  $( ".filter" ).change(function(e) {
    e.preventDefault();
    loadParcelData();
  });

  function openBulkEditModel() {
    var oldClient = $('#clients').val();
    if (oldClient == '' || oldClient == null) {
      toastr.error('Please select client !', 'Error !', { onHidden: function() {          
      }});
      $('.err').addClass('has-error');
    } else {
      $('.err').removeClass('has-error');
      var oldClientVal = $('select[name="clients"]').val();
      $('select[name="new_client"]').val(oldClientVal).change();
      $('#bulk_edit_parcel_modal').modal('show');
    }
  }

  function openUpdateRateModel() {
    var oldClient = $('#clients').val();
    if (oldClient == '' || oldClient == null) {
      toastr.error('Please select client !', 'Error !', { onHidden: function() {}});
      $('.err').addClass('has-error');
    } else {
      $('.err').removeClass('has-error');
      $('#update_rate_from_quotation_modal').modal('show');
    }
  }
</script>
<script type="text/javascript">
  var editableGrid = new EditableGrid("DemoGridFull", {
    enableSort: false,
    editmode: "absolute",
    editorzoneid: "edition",
    pageSize: 10,
    maxBars: 10
  });

  function displayMessage(text, style) {
  }

  function image(relativePath) {
    return '';
  }

  function InfoHeaderRenderer(message) { 
    this.message = message; 
    this.infoImage = new Image();
    this.infoImage.src = image("information.png");
  };

  InfoHeaderRenderer.prototype = new CellRenderer();
  InfoHeaderRenderer.prototype.render = function(cell, value) {
    if (value) {
      var link = document.createElement("a");
      link.href = "javascript:alert('" + this.message + "');";
      link.appendChild(this.infoImage);
      cell.appendChild(document.createTextNode("\u00a0\u00a0"));
      cell.appendChild(link);
    }
  };

  EditableGrid.prototype.initializeGrid = function() {
    with (this) {

      // setCellRenderer("status_ch", new CellRenderer({
      //   render: function(cell, value) { 
      //     cell.innerHTML = value ? '<input name="list_item" type="checkbox"  class="list_item iCheck-helper  minimal" value="' + value + '" tabindex="-1">' : ''; cell.style.textAlign = "center";  
      //   }
      // }));

      modelChanged = function(rowIndex, columnIndex, oldValue, newValue, row) { 
        // console.log('--------------------');
        // console.log(rowIndex);
        // console.log(columnIndex);
        // console.log(oldValue);
        // console.log(newValue);
        // console.log(this.getRowValues(rowIndex));
        // console.log('--------------------');
        $.ajax({
          url : '{{route("update.parcel.list")}}',
          type: "POST",
          data: this.getRowValues(rowIndex),
        }).done(function (response, textStatus, jqXHR){
          toastr.success('Parcels updated successfully !', 'Success !', { onHidden: function() {          
          }});
        });
      };

      tableRendered = function() { this.updatePaginator(); };

      rowSelected = function(oldRowIndex, newRowIndex) {
        if (oldRowIndex < 0) displayMessage("Selected row '" + this.getRowId(newRowIndex) + "'");
        else displayMessage("Selected row has changed from '" + this.getRowId(oldRowIndex) + "' to '" + this.getRowId(newRowIndex) + "'");
      };

      renderGrid("tablecontent", "testgrid", "tableid");

      _$('filter').value = currentFilter ? currentFilter : '';

      _$('filter').onkeyup = function() { editableGrid.filter(_$('filter').value); };

      $("#pagesize").val(pageSize).change(function() { editableGrid.setPageSize($("#pagesize").val()); });
    }
  };

  EditableGrid.prototype.onloadJSON = function(url) {
    this.tableLoaded = function() { 
      displayMessage("Grid loaded from JSON: " + this.getRowCount() + " row(s)"); 
      this.initializeGrid();
    };

    this.loadJSON(url);
  };

  EditableGrid.prototype.updatePaginator = function() {
    var paginator = $("#paginator").empty();
    var nbPages = this.getPageCount();

    var interval = this.getSlidingPageInterval(20);
    if (interval == null) return;

    var pages = this.getPagesInInterval(interval, function(pageIndex, isCurrent) {
      if (isCurrent) return "" + (pageIndex + 1);
      return $("<a>").css("cursor", "pointer").html(pageIndex + 1).click(function(event) { editableGrid.setPageIndex(parseInt($(this).html()) - 1); });
    });

    var link = $("<a>").html("<img src='" + image("gofirst.png") + "'/>&nbsp;");
    if (!this.canGoBack()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
    else link.css("cursor", "pointer").click(function(event) { editableGrid.firstPage(); });
    paginator.append(link);

    link = $("<a>").html("<img src='" + image("prev.png") + "'/>&nbsp;");
    if (!this.canGoBack()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
    else link.css("cursor", "pointer").click(function(event) { editableGrid.prevPage(); });
    paginator.append(link);

    for (p = 0; p < pages.length; p++) paginator.append(pages[p]).append(" | ");

      link = $("<a>").html("<img src='" + image("next.png") + "'/>&nbsp;");
    if (!this.canGoForward()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
    else link.css("cursor", "pointer").click(function(event) { editableGrid.nextPage(); });
    paginator.append(link);

    link = $("<a>").html("<img src='" + image("golast.png") + "'/>&nbsp;");
    if (!this.canGoForward()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
    else link.css("cursor", "pointer").click(function(event) { editableGrid.lastPage(); });
    paginator.append(link);
  };
</script>
@stop