@extends('layout.administrator.layout')

@section('css')
<style>
  .imgLogoDomiciliary {
    width: 50px;
    height: 50px;
    border-radius: 5px;
  }
  .contentWallet{
    background-color: #db3920;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
  }
  .contentWallet h2{
    color: #fff;
    margin: 0;
  }
</style>
@endsection

@section('sideBody')
<div class="card shadow">
  <div class="">
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade  show active p-0 m-0" id="tabs-icons-text-1" role="tabpanel" aria-labelledby="tabs-icons-text-1-tab">
        <button type="button" class="list-group-item list-group-item-action p-1">
          <div class="row ml-2 mr-2">
            <div class="col">
              <h6 class="card-title text-uppercase text-muted mb-0">
                Domiciliarios</h6>
              <span class="h5 font-weight-bold mb-0">46 | <strong class="text-success text-uppercase">Activos</strong></span>
            </div>
            <div class="col-auto">
              <div class="icon-sm icon-shape bg-gradient-success text-white rounded-circle shadow">
                <i class="fas fa-user"></i>
              </div>
            </div>
          </div>
        </button>
        <button type="button" class="list-group-item list-group-item-action p-1">
          <div class="row ml-2 mr-2">
            <div class="col">
              <h6 class="card-title text-uppercase text-muted mb-0">
                Domiciliarios</h6>
              <span class="h5 font-weight-bold mb-0">55 | <strong class="text-muted text-uppercase">INACTIVOS</strong></span>
            </div>
            <div class="col-auto">
              <div class="icon-sm icon-shape bg-gradient-dark text-white rounded-circle shadow">
                <i class="fas fa-user"></i>
              </div>
            </div>
          </div>
        </button>
        <button type="button" class="list-group-item list-group-item-action p-1">
          <div class="row ml-2 mr-2">
            <div class="col">
              <h6 class="card-title text-uppercase text-muted mb-0">
                Domiciliarios</h6>
              <span class="h5 font-weight-bold mb-0">155 | <strong class="text-danger text-uppercase">Vetados</strong></span>
            </div>
            <div class="col-auto">
              <div class="icon-sm icon-shape bg-gradient-danger text-white rounded-circle shadow">
                <i class="fas fa-user"></i>
              </div>
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="card ml-2 mt-2" style="width: 18rem; display: contents;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <a href="/administrator/domiciliary/create" class="btn btn-success btn-icon ml-sm-3 d-none d-md-block">
        <span class="btn-inner--icon">
          <i class="fas fa-plus-circle"></i>
        </span>
        <span class="nav-link-inner--text">Nuevo domiciliario</span>
      </a>
    </li>
    <li class="list-group-item">
      <a href="/administrator/domiciliary" class="btn btn-success btn-icon ml-sm-3 d-none d-md-block">
        <span class="btn-inner--icon">
          <i class="fas fa-list-ul"></i>
        </span>
        <span class="nav-link-inner--text">Listado de domiciliarios</span>
      </a>
    </li>
  </ul>
</div>
@endsection

@section('content')
<div class="row mt-2 mr-3 ml-3">
  <a href="{{route('administrator.liquidation.index')}}" class="btn btn-primary btn-sm"><i class="fas fa-arrow-left"></i> Regresar</a>
</div>
<div class="row mt-2 mr-3 ml-3">
  <div class="col p-0">
    <div class="card shadow">
      <div class="card-header border-0">
        <div class="row align-items-center">
          <div class="col-8">
            <h3 class="mb-0">Generar liquidación</h3>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-12">
            <label>Buscar domiciliario</label>
          </div>
        </div>
        <div class="row">
          <div class="col-8">
            <form id="formSearchDomiciliary">
              <input type="text" name="document" placeholder="Documento del domiciliario" autocomplete="off" class="form-control input-number" required>
            </form>
          </div>
          <div class="col-4">
            <button type="button" onclick="searchDomiciliary()" class="btn btn-primary btn-block">Buscar</button>
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-md-12">
            <label>Nombre: </label>
            <h4> <b id="idName"></b> </h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <label>Documento: </label>
            <h4> <b id="idDocument"></b> </h4>
          </div>
          <div class="col-md-6">
            <label>Celular: </label>
            <h4> <b id="idCellPhone"></b> </h4>
          </div>
        </div>
      </div>
      <div class="card-footer py-4">
        <div class="row align-items-center">
          <div class="col-6">
            <b>Ultima liquidación</b>
            <br>
            <small id="idLastDate"></small>
          </div>
          <div class="col-6 text-right">
            <a href="javascript:;" onclick="openLiquidationModal()" class="btn btn-info"><i class="fas fa-clipboard-list"></i> Liquidar</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="openLiquidation" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Generar liquidación</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="formGenerateLiquidation">
          <div class="row">
            <div class="col-md-12 text-center">
              <label><b>Total billetera</b></label>
              <div class="contentWallet">
                <h2> <b id="idTotalWallet">$ 0</b> </h2>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group m-0">
                <label for="idValue" class="control-label"><b>Valor a liquidar</b></label>
                <input type="text" id="idValue" name="value" placeholder="Valor a liquidar" autocomplete="off" class="form-control input-number">
              </div>
            </div>
          </div>
        </form>
        <hr>
        <div class="row align-items-center">
          <div class="col-6 text-right">
            <label>Disponible: </label>
          </div>
          <div class="col-6">
            <h4> <b id="idRemaining">$ 0</b> </h4>
          </div>
        </div>
        <div class="row align-items-center">
          <div class="col-6 text-right">
            <label>Liquidar: </label>
          </div>
          <div class="col-6">
            <h4> <b id="idTotal">$ 0</b> </h4>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <button type="button" onclick="generateLiquidation()" class="btn btn-success"><i class="fas fa-check"></i> Generar liquidación</button>
      </div>
    </div>
  </div>
</div>
@endsection

@section('js')
  <script src="{{ asset('assets/maxargon/assets/vendor/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js')}}"></script>

  <script type="text/javascript">
    var Protocol_ = window.location.protocol;
    var UrlHost_ = Protocol_+"//"+"{{$_SERVER["HTTP_HOST"]}}";

    var domiciliaryId = null;

    var wallet = 0;

    $( document ).ready(function() {
      $('.input-number').on('input', function () {
        this.value = this.value.replace(/[^0-9.]/g,'');
      });

      $('#idValue').keyup(function () {
        var val = this.value;
        if (val!="") {
          if (val>=0) {
            console.log(val);
            console.log(wallet);
            if (parseFloat(val) <= parseFloat(wallet)) {
              console.log(4);
              var settle = parseFloat(wallet) - parseFloat(val);

              $("#idRemaining").text('$ ' + settle);
              $("#idTotal").text('$ ' + val);

              this.value = val;
            }else{
              console.log(3);
              $("#idTotal").text('$ ' + wallet);
              $("#idRemaining").text('$ 0');

              this.value = wallet;
            }
          }else{
            console.log(2);
            $("#idTotal").text('$ 0');
            $("#idRemaining").text('$ ' + wallet);

            this.value = '';
          }
        }else{
          console.log(1);
          $("#idTotal").text('$ 0');
          $("#idRemaining").text('$ ' + wallet);

          this.value = '';
        }
      });

      $('#idDateEnd').datetimepicker({
        format: 'DD/MM/YYYY hh:mm A',
        showClose: true,
        icons: {
          up: 'fas fa-chevron-up text-warning',
          down: 'fas fa-chevron-down text-warning',
          time: 'far fa-clock',
          close: 'fas fa-times text-warning'
        }
      });
    });
  </script>

  <script type="text/javascript">
    function searchDomiciliary() {

      domiciliaryId = null;
      $("#idName").text("");
      $("#idDocument").text("");
      $("#idCellPhone").text("");
      $("#idLastDate").text("");

      $("#idDateInit").val("");


      var formData = new FormData(document.getElementById("formSearchDomiciliary"));

      var UrlPath_ = UrlHost_+"/administrator/liquidation/domiciliary/search";
      $.ajax({
        type: 'POST',
        url: UrlPath_,
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){},
        success:function(response){
          if (response.state == 1) {

            domiciliaryId = response.data.info.id;
            $("#idName").text(response.data.info.name);
            $("#idDocument").text(response.data.info.document);
            $("#idCellPhone").text(response.data.info.cellphone);
            $("#idLastDate").text(response.data.info.last_date);

            wallet = response.data.info.value;
          }else if (response.state == 2) {
            alert(response.message);
          }else{
            alert("Hemos tenido problemas, intenta nuevamente");
          }
        },
        error: function(xhr){
          domiciliaryId = null;
          $("#idName").text("");
          $("#idDocument").text("");
          $("#idCellPhone").text("");
          $("#idLastDate").text("");

          $("#idDateInit").val("");

          alert("Hemos tenido problemas, intenta nuevamente");
        }
      });
    }

    function openLiquidationModal() {
      if (domiciliaryId!=null) {

        var format = wallet.toLocaleString();

        $("#idTotalWallet").text('$ ' + format);
        $("#idValue").val('');
        $("#idRemaining").text('$ ' + wallet);
        $("#idTotal").text('$ 0');

        $("#openLiquidation").modal();
      }else{
        alert("Debe buscar a un domiciliario");
      }
    }

    // function calculateLiquidation() {
    //   $("#idCantDelivery").text("");
    //   $("#idValue").text("");
    //
    //   var formData = new FormData(document.getElementById("formGenerateLiquidation"));
    //   formData.append('id', domiciliaryId);
    //
    //   var UrlPath_ = UrlHost_+"/administrator/liquidation/domiciliary/calculate";
    //   $.ajax({
    //     type: 'POST',
    //     url: UrlPath_,
    //     data: formData,
    //     dataType: 'json',
    //     processData: false,
    //     contentType: false,
    //     cache: false,
    //     headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    //     beforeSend:function(){
    //       // $('#loader_content').removeClass('hidden');
    //     },
    //     success:function(response){
    //       if (response.state == 1) {
    //
    //         $("#idCantDelivery").text(response.data.count);
    //         $("#idValue").text("$" + response.data.value);
    //
    //       }else if (response.state == 2) {
    //         alert(response.message);
    //       }else{
    //         alert("Hemos tenido problemas, intenta nuevamente");
    //       }
    //     },
    //     error: function(xhr){
    //
    //       $("#idCantDelivery").text("");
    //       $("#idValue").text("");
    //
    //       alert("Hemos tenido problemas, intenta nuevamente");
    //     }
    //   });
    // }

    function generateLiquidation() {
      var formData = new FormData(document.getElementById("formGenerateLiquidation"));
      formData.append('id', domiciliaryId);

      var UrlPath_ = UrlHost_+"/administrator/liquidation/domiciliary/generate";
      $.ajax({
        type: 'POST',
        url: UrlPath_,
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function(){},
        success:function(response){
          if (response.state == 1) {
            window.location.href = "{{ route('administrator.liquidation.index')}}";
          }else if (response.state == 2) {
            alert(response.message);
          }else{
            alert("Hemos tenido problemas, intenta nuevamente");
          }
        },
        error: function(xhr){
          alert("Hemos tenido problemas, intenta nuevamente");
        }
      });
    }

  </script>
@endsection