@extends('layouts.app')

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-truck fa-xs"></i> {{ __('Nuevo pago a Proveedor') }}</h1>
    </div><!-- /.col -->
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item">Proveedores</li>
        <li class="breadcrumb-item active">Pago</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-6">
                <!-- jquery validation -->
                <div class="card card-primary">
                  
                    <div class="card-header">
                        <h3 class="card-title">Nuevo Registro</h3>
                    </div>
                    <!-- /.card-header -->
                  
                    <!-- form start -->
                    <form id="editForm" class="form-horizontal" action="{{ route('cuenta-principal.storeToProveedor') }}" method="POST" novalidate="novalidate">
                    @csrf
                    
                    <input type="hidden" name="nota" id="nota" value="">

                    <div class="card-body">                        

                        <div class="form-group row">
                          <label for="proveedor_id" class="col-sm-2 col-form-label">Proveedor</label>
                          <div class="col-sm-8">
                            <select name="proveedor_id" id="proveedor_id" class="form-control" required>
                              <option value="0" selected>Seleccione el proveedor</option>
                              @foreach($proveedores as $id=>$nombre )
                                <option value="{{ $id }}" @selected(old('proveedor_id') == $id)>{{ $nombre }}</option>
                              @endforeach
                            </select>
                            <span id="proveedor_id-error" class="error invalid-feedback"></span>
                          </div>
                          <div class="col-sm-2">
                            <button type="button" id="buscar-pendientes" class="btn btn-info" title="Buscar registros"><i class="fas fa-sync-alt"></i></button>
                            <div class="spinner-border text-info d-none" role="status" id="buscar-pendientes-spinner">
                                <span class="sr-only">Loading...</span>
                            </div>
                          </div>
                        </div>
                        
                        <hr>                        

                        <div class="form-group row">
                          <label for="concepto_tipo_id" class="col-sm-2 col-form-label">Tipo Rubro</label>
                          <div class="col-sm-10">
                            <select name="concepto_tipo_id" id="concepto_tipo_id" class="form-control" required>
                              <option value="0" selected>Seleccione el tipo de rubro</option>
                              @foreach($conceptoTipos as $id=>$descripcion )
                                <option value="{{ $id }}" @selected(old('concepto_tipo_id') == $id)>{{ $descripcion }}</option>
                              @endforeach
                            </select>
                            <span id="concepto_tipo_id-error" class="error invalid-feedback"></span>
                          </div>
                        </div>

                        <div class="form-group row">
                          <label for="concepto_id" class="col-sm-2 col-form-label">Rubro</label>
                          <div class="col-sm-10">
                            <select name="concepto_id" id="concepto_id" class="form-control" required disabled>
                              <option value="0" selected>Seleccione el rubro</option>
                              {{-- @foreach($conceptos as $id=>$descripcion )
                                <option value="{{ $id }}" @selected(old('concepto_id') == $id)>{{ $descripcion }}</option>
                              @endforeach --}}
                            </select>
                            <span id="concepto_id-error" class="error invalid-feedback"></span>
                          </div>
                        </div>

                        <div class="form-group row">
                          <label for="descripcion" class="col-sm-2 col-form-label">Descripción</label>
                          <div class="col-sm-10">
                            <input type="text" name="descripcion" class="form-control" id="descripcion" placeholder="descripcion del proveedor" value="{{ old('descripcion') }}">
                            <span id="contacto-error" class="error invalid-feedback"></span>
                          </div>
                        </div>

                        <div class="form-group row">
                          <label for="origen_pago_id" class="col-sm-2 col-form-label">Forma de pago</label>
                          <div class="col-sm-10">
                            <select name="origen_pago_id" id="origen_pago_id" class="form-control" required>
                              <option value="0" selected>Seleccione la forma de pago</option>
                              @foreach($formasPago as $id=>$descripcion )
                                <option value="{{ $id }}" @selected(old('origen_pago_id') == $id)>{{ $descripcion }}</option>
                              @endforeach
                            </select>
                            <span id="origen_pago_id-error" class="error invalid-feedback"></span>
                          </div>
                        </div>
                        
                        <div class="form-group row">
                          <label for="importe" class="col-sm-2 col-form-label">Importe</label>
                          <div class="col-sm-2">
                            <select name="moneda_id" id="moneda_id" class="form-control" required readonly>
                              <option value="0"></option>
                              @foreach($monedas as $id=>$abreviatura )
                                <option value="{{ $id }}" @selected($moneda_id == $id)>{{ $abreviatura }}</option>
                              @endforeach
                            </select>                            
                          </div>
                          <div class="col-sm-8">
                            <input type="text" name="importe" class="form-control" id="importe" placeholder="ingrese el total" value="{{ old('importe') }}">
                            <input type="hidden" name="saldo" id="saldo" value="0">
                            <span id="importe-error" class="error invalid-feedback"></span>
                            <span id="moneda_id-error" class="error invalid-feedback"></span>
                          </div>
                        </div>                     
                        
                        <div class="form-group row d-none">
                          <label for="estado_id" class="col-sm-2 col-form-label">Estado</label>
                          <div class="col-sm-4">
                            <select name="estado_id" id="estado_id" class="form-control" required>
                              <option value="0">Seleccione el estado</option>
                              @foreach(App\Enums\ProveedorCuentaEstadoEnum::cases() as $estado)
                                <option value="{{ $estado->value }}" @selected($estado == App\Enums\ProveedorCuentaEstadoEnum::PAGO) >
                                    {{ $estado->label() }}
                                </option>
                              @endforeach
                            </select>
                            <span id="estado_id-error" class="error invalid-feedback"></span>
                          </div>
                        </div>

                    </div>
                    <!-- /.card-body -->

                    <div class="card-footer text-right">
                      <a href="{{ route('proveedores.index') }}" class="btn btn-default">Cancelar</a> &nbsp;
                      <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                    <!-- /.card-footer -->

                  </form>

                </div>
                <!-- /.card -->

            </div>
            <!-- /.col -->

            <div class="col-md-6">
                        
                <div class="card card-warning">

                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-info-circle"></i> Marcar como pago los siguientes registros</h3>                                
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body">

                        <div class="card-body table-responsive p-0">
                            <table class="table table-hover text-nowrap" id="registros-table">
                                <thead>
                                    <tr>
                                        <th>Sel</th>
                                        <th>ID</th>
                                        <th>Descripción</th>
                                        <th>Rubro</th>
                                        <th>Fecha venc.</th>
                                        <th>Importe</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>                                      
                                        <td colspan="6">Seleccione un proveedor y haga clic en el botón buscar</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <!-- /.card-body -->

                    <div class="card-footer text-right">
                        
                    </div>
                    <!-- /.card-footer -->

                </div>
                <!-- /.card -->

            </div>
            <!-- /.col -->

        </div>
        <!-- /.row -->

    </div>
    <!-- /.container-fluid -->

  </section>
  <!-- /.content -->

@endsection

@section('custom-scripts')
    <!-- jquery-validation -->
    <script src="/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="/plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- InputMask -->
    <script src="/plugins/moment/moment.min.js"></script>
    <script src="/plugins/inputmask/jquery.inputmask.min.js"></script>

<script>

$(function () {

    moment.locale('es');

    //Datemask dd/mm/yyyy
    // $('#fecha_vencimiento').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })

    //Money Euro
    $('[data-mask]').inputmask()

    //Date picker
    $('#fecha_vencimiento').datetimepicker({
        format: 'DD/MM/YYYY',
        autoclose:true,
        language: 'es',
    });

    $('#editForm').validate({
        rules: {
            nombre: {
                required: true,
                maxlength: 50,
            },
            direccion: {
                required: true,
                maxlength: 100
            },
            telefono: {
                required: true,
                maxlength: 20
            },
            email: {
                required: true,
                email: true,
                maxlength: 50
            },
        },
        messages: {
            nombre: {
                required: "Por favor ingresa el nombre del proveedor",
                maxlength: "El largo máximo es de 50."
            },
            direccion: {
                required: "Por favor ingresa la dirección del proveedor",
                maxlength: "El largo máximo es 100."
            },
            telefono: {
                required: "Por favor ingresa el teléfono del proveedor",
                maxlength: "El largo máximo es 20."
            },
            email: {
                required: "Por favor ingresa el e-mail del proveedor",
                email: "Por favor ingresa una dirección de e-mail válida",
                maxlength: "El largo máximo es 50."
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.col-sm-10').append(error);
        },
        highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            form.submit();
        }
    });

    $('#buscar-pendientes').click(function(){
        
        $('#buscar-pendientes').addClass('d-none');
        $('#buscar-pendientes-spinner').removeClass('d-none');

        let proveedor = $('#proveedor_id').val();

        if(proveedor != 0){
            let registros = registrosSearch(proveedor);            
        }else{
            alert("Debe indicar un Proveedor para buscar");
            $('#buscar-pendientes').removeClass('d-none');
            $('#buscar-pendientes-spinner').addClass('d-none');
        }
                
    });

    $('#concepto_tipo_id').change(function() {
      var selectedValue = $(this).val();
      
      if(selectedValue != 0){
        populateConceptos(selectedValue);
      }

    });

    $(document).on('change', '.selector', function() {
      
      const coleccionId = this.id.split("-");

      if(this.checked) {
        $('#editForm').append('<input type="hidden" name="registros[]" value="'+coleccionId[1]+'">');
      }else{
        $('input[name="registros[]"][value="'+coleccionId[1]+'"]').remove();
      }

      let total = 0;
      let nota = "Registros seleccionados: ";

      $('input[name="registros[]"]').each(function(){
          nota += $(this).val() + ', ';
          let totalSelected = $("#total-"+$(this).val());
          total += Number.parseFloat(totalSelected.val());
      });

      console.log(total.toFixed(2));
      $('#importe').val(total);
      $('#nota').val(nota);

    });
  
});

    function registrosSearch(proveedorId)
    {
    //   let parameters = {_token:"{{ csrf_token() }}",proveedor_id:proveedorId};

      $('.overlay').css("display", "flex");

      $.ajax({
          url:'/proveedor-cuentas/movimientos-por-proveedor-json/'+proveedorId,
          type: 'GET',
          headers:{"content-type" : "application/json"},
        //   data: JSON.stringify(parameters),
          success: function(response) {
            $('#buscar-pendientes').removeClass('d-none');
            $('#buscar-pendientes-spinner').addClass('d-none');
            populateRegistros(response);
          },
          error: function(error) {
            $('#buscar-pendientes').removeClass('d-none');
            $('#buscar-pendientes-spinner').addClass('d-none');
            console.error('Error fetching data:', error);
          }
      });
    }

    function populateRegistros(registros)
    {
        console.log('populateRegistros registros', registros);

        // TODO: 
        //  desplegar bloque+unidad, 
        //  calcular total por Socio

        $('#registros-table tbody tr').empty();
        $('#editForm input[name="registros[]"]').remove();

        if(registros.length > 0){

          // let cantidadServiciosHTML = '<div class="info-box"><span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span><div class="info-box-content"><span class="info-box-text">Cantidad de cuentas</span><span class="info-box-number">' + servicios.length + '</span></div></div>';
                
          // $('#servicios-asociados').append(cantidadServiciosHTML);
            
          registros.forEach(element => {
              let registro = element;
              
              let registroRowHtml = '<tr id="row-'+registro.registro_id+'"><td><input type="checkbox" class="selector" name="selector-'+registro.registro_id+'" id="selector-'+registro.registro_id+'"></td><td>'+registro.registro_id+'</td><td>'+registro.descripcion+'</td><td>'+registro.concepto+'</td><td>'+moment(registro.fecha_vencimiento).format('DD/MM/YYYY')+'</td><td>'+registro.moneda_simbolo+ ' ' + Number.parseFloat(registro.importe).toFixed(2) +'<input type="hidden" name="total-'+registro.registro_id+'" id="total-'+registro.registro_id+'" value="'+registro.importe+'"></td></tr>';

              $('#registros-table tbody').append(registroRowHtml);
              // $("#editForm").append("<input type='hidden' name='registros[]' value='"+ registro.registro_id +"'>");

          });

        }else{
            $('#registros-table tbody').append('<tr><td colspan="6">El proveedor seleccionado no tiene registros pendientes de pago.</td></tr>');
        }

    }

    function populateConceptos(tipo)
    {
      // console.log('populateConceptos tipo', tipo);

      $.ajax({
          url:'/conceptos/obtener-por-tipo/'+tipo,
          type: 'GET',
          headers:{"content-type" : "application/json"},
          // data: JSON.stringify(parameters),
          success: function(response) {
            bindDropDown($("#concepto_id"), response);
          },
          error: function(error) {            
            console.error('Error fetching data:', error);
            bindDropDown($("#concepto_id"), null);
          }
      });
    }

    function bindDropDown(dropDown, data)
    {
      $(dropDown).empty();
      
      if(data.length > 0){

        $.each(data, function(index, item) {
            var option = '<option value="' + item.id + '">';
            option += item.descripcion;
            option += '</option>';
            $(dropDown).append(option);
        });

        $("#concepto_id").prop("disabled", false);

      }else{
        $("#concepto_id").prop("disabled", true);
      }

    }

  </script>
@endsection