@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> {{ __('Proveedores') }}</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">Cuenta</li>
        <li class="breadcrumb-item active">Nuevo registro</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('proveedor-cuentas.store') }}" method="POST" novalidate="novalidate">
                    @csrf

                    <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-10">
                            <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>

                        <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="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') }}">
                            <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">
                          <label for="fecha_vencimiento" class="col-sm-2 col-form-label">Fecha venc.</label>
                          <div class="col-sm-4">
                            <div class="input-group date" id="fecha_vencimiento" data-target-input="nearest">
                                <input type="text" class="form-control datetimepicker-input" data-target="#fecha_vencimiento" name="fecha_vencimiento" value="{{ old('fecha_vencimiento') }}">
                                <div class="input-group-append" data-target="#fecha_vencimiento" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                            <span id="fecha_vencimiento-error" class="error invalid-feedback"></span>
                          </div>
                        </div>

                        <div class="form-group row">
                          <label for="nota" class="col-sm-2 col-form-label">Nota</label>
                          <div class="col-sm-10">
                            <input type="text" name="nota" class="form-control" id="nota" value="{{ old('nota') }}">
                            <span id="nota-error" class="error invalid-feedback"></span>
                          </div>
                        </div>

                        <hr>

                        <div class="form-group row">
                          <label for="referencia" class="col-sm-2 col-form-label">Referencia</label>
                          <div class="col-sm-8">
                            <input type="text" name="referencia" class="form-control" id="referencia" placeholder="cuenta asociada al Socio" value="{{ old('referencia') }}">
                            <span id="referencia-error" class="error invalid-feedback"></span>
                          </div>
                          <div class="col-sm-2">
                            <button type="button" id="buscar-referencias" class="btn btn-info"><i class="fas fa-sync-alt"></i></button>
                            <div class="spinner-border text-info d-none" role="status" id="buscar-referencias-spinner">
                                <span class="sr-only">Loading...</span>
                            </div>
                          </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::PENDIENTE) >
                                    {{ $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> Se aplicará a</h3>                                
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body">

                        <div id="servicios-asociados">                            
                            <div class="callout callout-danger" id="servicios-asociados-no"><h5>No aplica a ningún Socio.</h5></div>
                        </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-referencias').click(function(){
        
        $('#buscar-referencias').addClass('d-none');
        $('#buscar-referencias-spinner').removeClass('d-none');

        // TODO: ir a buscar las referencias
        let referencia = $('#referencia').val();
        let concepto_id = $('#concepto_id').val();

        if(referencia.length > 0){
            let servicios = referenciasSearch(referencia, concepto_id);            
        }else{
            alert("Debe indicar una Referencia para buscar");
            $('#buscar-referencias').removeClass('d-none');
            $('#buscar-referencias-spinner').addClass('d-none');
        }
                
    });

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

    });
  
});

    function referenciasSearch(identificador, concepto_id)
    {
      let parameters = {_token:"{{ csrf_token() }}", identificador:identificador, concepto_id:concepto_id};

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

      $.ajax({
          url:'/unidad-servicios/obtener-por-identificador',
          type: 'POST',
          headers:{"content-type" : "application/json"},
          data: JSON.stringify(parameters),
          success: function(response) {
            $('#buscar-referencias').removeClass('d-none');
            $('#buscar-referencias-spinner').addClass('d-none');
            populateServicios(response);
          },
          error: function(error) {
            $('#buscar-referencias').removeClass('d-none');
            $('#buscar-referencias-spinner').addClass('d-none');
            console.error('Error fetching data:', error);
          }
      });
    }

    function populateServicios(servicios)
    {
        console.log('populateServicios servicios', servicios);

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

        $('#servicios-asociados').empty();
        $('#editForm input[name="unidades[]"]').remove();

        if(servicios.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);
            
          servicios.forEach(element => {
              let servicio = element;                

              let servicioHtml = '<div class="callout callout-default"><h5><strong>' + servicio.socio_nombre + '</strong></h5><p>Unidad: <strong>' + servicio.unidad_direccion + '</strong><br/>Rubro: <strong>' + servicio.concepto + '</strong>, identificador <strong>' + servicio.identificador + '</strong></p></div>';

              $('#servicios-asociados').append(servicioHtml);

              $("#editForm").append("<input type='hidden' name='unidades[]' value='"+ servicio.unidad_id +"'>");

          });

        }else{
            $('#servicios-asociados').append('<div class="callout callout-danger" id="servicios-asociados-no"><h5>No aplica a ninguna Unidad.</h5></div>');
        }

    }

    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