@extends('layouts.app')

@section('custom-styles')
  <!-- Select2 -->
  <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="/css/tva-select2.css">
@endsection

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-handshake fa-xs"></i> {{ __('Convenios') }}</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">Convenios</li>
        <li class="breadcrumb-item active">Nuevo Convenio</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

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

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-9">
                <!-- jquery validation -->
                <div class="card card-primary">

                    <div class="card-header">
                        <h3 class="card-title">Nuevo Convenio</h3>   
                        <a class="btn btn-default btn-sm float-right text-primary" data-toggle="modal" data-target="#modal-help" title="Ayuda" style="cursor:pointer;">
                            <i class="fas fa-info-circle"></i> Ayuda
                        </a>                     
                    </div>
                    <!-- /.card-header -->
                    
                    <!-- form start -->
                    <form id="editForm" action="{{ route('convenios.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="estado_id" value="{{ $estado_id }}"/>

                    <div class="card-body">

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif                        
                        
                        <!-- Main content -->
                        <div class="invoice p-3 mb-3">

                            <!-- title row -->
                            <div class="row">
                                <div class="col-12">

                                    <div class="form-group row">
                                        
                                        <label for="tipo_id" class="col-sm-3 col-form-label selector-tipo">Tipo de convenio</label>
                                        <div class="col-sm-3 selector-tipo">
                                            <select class="form-control" data-placeholder="Seleccione uno" name="tipo_id" id="tipo_id">
                                                <option value="" selected>Seleccione uno</option>
                                                @foreach(App\Enums\ConvenioTipoEnum::cases() as $tipo)
                                                <option value="{{ $tipo->value }}" {{ (isset($tipo_id) && $tipo_id == $tipo->value) ? 'selected' : '' }}>{{ $tipo->label() }}</option>
                                                @endforeach
                                            </select>
                                            <span id="tipo_id-error" class="error invalid-feedback"></span>
                                        </div>                                        

                                    </div>
                                    
                                    <div class="form-group row">
                                        <label for="destino_id" class="col-sm-3 col-form-label">Destino del convenio</label>
                                        <div class="col-sm-9 align-content-center">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="destino_id" value="{{ App\Enums\ConvenioDestinoEnum::SOCIO }}">
                                                <label class="form-check-label">{{ App\Enums\ConvenioDestinoEnum::SOCIO->label() }}</label>                                                
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="destino_id" value="{{ App\Enums\ConvenioDestinoEnum::INQUILINO }}">
                                                <label class="form-check-label">{{ App\Enums\ConvenioDestinoEnum::INQUILINO->label() }}</label>
                                            </div>
                                            <span id="destino-error" class="error invalid-feedback"></span>
                                        </div>
                                    </div>                                    

                                    <div class="form-group row">
                                        
                                        <label for="socio_id" class="col-sm-3 col-form-label selector-socio d-none">Socio</label>
                                        <label for="socio_id" class="col-sm-3 col-form-label selector-socio-todos d-none">Socio</label>
                                        <div class="col-sm-6 selector-socio d-none">
                                            <select class="select2bs4" data-placeholder="Seleccione el Socio" name="socio_id" id="socio_id">
                                                <option value="">Seleccione el socio</option>                                                    
                                            </select>
                                            <span id="socio_id-error" class="error invalid-feedback"></span>
                                        </div>
                                        <div class="col-sm-6 selector-socio-todos d-none">
                                            <span>Todos</span>
                                        </div>
                                        <input type="hidden" name="socio_todos" id="socio_todos" value="0">

                                        <label for="inquilino_id" class="col-sm-3 col-form-label selector-inquilino d-none">Inquilino</label>
                                        <label for="inquilino_id" class="col-sm-3 col-form-label selector-inquilino-todos d-none">Inquilino</label>
                                        <div class="col-sm-6 selector-inquilino d-none">
                                            <select class="select2bs4" data-placeholder="Seleccione el inquilino" name="inquilino_id" id="inquilino_id">
                                                <option value="">Seleccione el inquilino</option>                                                    
                                            </select>
                                            <span id="inquilino_id-error" class="error invalid-feedback"></span>
                                        </div>
                                        <div class="col-sm-6 selector-inquilino-todos d-none">
                                            <span>Todos</span>
                                        </div>
                                        <input type="hidden" name="inquilino_todos" id="inquilino_todos" value="0">

                                        <div class="col-sm-2 d-none" id="contenedor-selector">
                                            <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>

                                    <div class="form-group row">
                                        
                                        <label for="concepto_id" class="col-sm-3 col-form-label selector-concepto">Rubro</label>

                                        <div class="col-sm-3 selector-tipo">
                                            <select class="form-control" data-placeholder="Seleccione uno" name="concepto_id" id="concepto_id">
                                                <option value="" selected>Seleccione uno</option>
                                                @foreach($conceptos as $id=>$descripcion )
                                                <option value="{{ $id }}" @if (@isset($concepto_id)) @foreach ($concepto_id as $item) @if ($item == $id) selected @endif @endforeach @endif >{{ $descripcion }}</option>
                                                @endforeach
                                            </select>
                                            <span id="tipo_id-error" class="error invalid-feedback"></span>
                                        </div>

                                    </div>

                                    

                                    {{-- <div class="form-group row">
                                        <label for="fecha" class="col-sm-3 col-form-label">Fecha</label>
                                        <div class="col-sm-3">
                                            <div class="input-group date" id="fecha" data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input" data-target="#fecha" name="fecha" value="{{ \Carbon\Carbon::now()->format('d/m/Y') }}">
                                                <div class="input-group-append" data-target="#fecha" data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                </div>
                                            </div>
                                            
                                            <span id="fecha-error" class="error invalid-feedback"></span>
                                        </div>
                                    </div> --}}
                                    
                                    <div class="form-group row">
                                        <label for="importe" class="col-sm-3 col-form-label">Total</label>
                                        <div class="col-sm-1">
                                            <select name="moneda_id" id="moneda_id" class="form-control" required>
                                            <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-2">
                                            <input type="text" name="total" class="form-control" id="total" placeholder="0" value="{{ old('total') }}">
                                            <span id="total-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="cuotas_total" class="col-sm-3 col-form-label">Cuotas</label>
                                        <div class="col-sm-2">
                                            <input type="text" name="cuotas_total" class="form-control" id="cuotas_total" placeholder="0" value="{{ old('cuotas_total') }}" required>
                                            <input type="hidden" name="cuotas_restantes" id="cuotas_restantes" value="0">
                                            <span id="cuotas_total-error" class="error invalid-feedback"></span>
                                        </div>

                                    </div>

                                    <div class="form-group row">
                                        <label for="nota" class="col-sm-3 col-form-label">Nota</label>
                                        <div class="col-sm-6">
                                            <input type="text" name="descripcion" class="form-control @error('descripcion') is-invalid @enderror" id="descripcion" placeholder="Nota" value="{{ old('descripcion') }}">
                                            <span id="nota-error" class="error invalid-feedback"></span>
                                            @error('descripcion')
                                                <span class="error invalid-feedback is-invalid" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                                                            
                                </div>
                                <!-- /.col -->
                            </div>
                                                                           
                            
                        </div>
                        <!-- /.invoice -->
                        
                    </div>
                    <!-- /.card-body -->
                    
                    <div class="card-footer text-right">
                    
                        <!-- this row will not appear when printing -->
                        <div class="row no-print">
                            <div class="col-12">
                                <button type="submit" class="btn btn-success float-right"><i class="fas fa-handshake"></i> Generar convenio</button>
                            </div>
                        </div>
                        
                    </div>

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

            </div>
            <!-- /.col (left) -->

        </div>

    </div>

    <div class="modal fade" id="modal-help" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fas fa-info-circle"></i> Ayuda</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <dl>
                        <dt>1. Destino del recibo</dt>
                        <dd>Indique si el recibo es para un Socio o un Inquilino.</dd>
                        <dd>A continuación se desplegará un campo para seleccionar el Socio/Inquilino.</dd>
                        <dt>2. Socio/Inquilino</dt>
                        <dd>Indique el Socio/Inquilino al que se le emitirá el recibo.</dd>
                        <dt>3. Haga clic sobre el botón <button type="button" class="btn btn-info btn-xs"><i class="fas fa-sync-alt"></i></button> para obtener las deudas.</dt>
                        <dd>Se obtendrán las deudas pendientes, parciales o vencidas.</dd>
                        <dt>4. Fecha</dt>
                        <dd>Indique la fecha de emisión del Recibo. Por defecto la fecha del día.</dd>
                        <dt>5. Forma de pago.</dt>
                        <dd>Indique el origen del dinero recibido.</dd>
                        <dt>6. Seleccione las deudas a incluir en el Recibo.</dt>
                        <dd>Haga clic en el selector <input type="checkbox"checked="checked"> ubicado al principio de cada fila.</dd>
                        <dt>7. Haga clic en el botón Guardar Recibo para finalizar.</dt>
                        <dd>Esto generará el Recibo en el sistema y los movimientos en la Cuenta principal y la cuenta del Socio/Inquilino.</dd>
                    </dl>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

  </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>
    <!-- Select2 -->
    <script src="/plugins/select2/js/select2.full.min.js"></script>    
  <script>

    $(function () {

        moment.locale('es');

        //Initialize Select2 Elements
        $('.select2').select2()

        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        $('[data-mask]').inputmask()

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

        let identificadorOrigen = 1;

        $.validator.addMethod("seleccionIndividual", function(value, element) {            
            
            // return this.optional(element) || (parseFloat(value) > 0);

            console.log("addMethod: seleccionIndividual", element, value);

            if($("input[type='radio'][name='destino_id']:checked").val() == 1){
                return $("#socio_id").val() !== '';
            }
            else if($("input[type='radio'][name='destino_id']:checked").val() == 2){
                return $("#inquilino_id").val() !== '';
            }

        }, "* Por favor selecciona el socio/inquilino destinatario del convenio");

        $('#editForm').validate({
            ignore: [],
            rules: {
                destino: {
                    required: true,
                },
                tipo_id: {
                    required: true,
                },
                socio_id: {
                    seleccionIndividual: true
                },
                inquilino_id: {
                    seleccionIndividual: true
                },
                concepto_id: {
                    required: true,
                },
                moneda_id: {
                    required: true,
                },
                total : { 
                    required: true,
                },
                cuotas_totales : { 
                    required: true,
                }
            },
            messages: {
                destino: {
                    required: "Por favor selecciona el destino del convenio",
                },
                tipo_id: {
                    required: "Por favor selecciona el tipo del convenio",
                },
                concepto_id: {
                    required: "Por favor selecciona el rubro del convenio",
                },
                moneda_id: {
                    required: "Por favor selecciona la moneda",
                },
                total: {
                    required: "Por favor ingresa el importe total del convenio",
                },
                cuotas_totales: {
                    required: "Por favor ingresa la cantidad total de cuotas",
                }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').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();
            }
        });

        $('#tipo_id').change(function() {
            
            let destinoId = $("input[type='radio'][name='destino_id']:checked").val();
            let tipoId = $("#tipo_id").val();

            configurarTipoDestino(destinoId, tipoId);

            // $('#contenedor-selector').removeClass("d-none");
            // $('#buscar-pendientes-spinner').addClass('d-none');
            
        });

        $("input[name='destino_id']").change(function() {
            
            let destinoId = $("input[type='radio'][name='destino_id']:checked").val();
            let tipoId = $("#tipo_id").val();

            configurarTipoDestino(destinoId, tipoId);

            // $('#buscar-pendientes-spinner').removeClass('d-none');

            // $('#contenedor-selector').removeClass("d-none");
            // $('#buscar-pendientes-spinner').addClass('d-none');
            
        });

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

            let destino_id = $("input[type='radio'][name='destino_id']:checked").val();
            let identificador = (destino_id == 'socio') ? $('#socio_id').val() : $('#inquilino_id').val();

            if(identificador != 0){
                let registros = registrosSearch(destino_id, identificador);            
            }else{
                alert("Debe indicar un Socio o Inquilino para buscar");
                $('#buscar-pendientes').removeClass('d-none');
                $('#buscar-pendientes-spinner').addClass('d-none');
            }
                    
        });

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

            // actualizarRegistrosSeleccionados(this.checked, coleccionId[1]);
            // obtenerTotal();

        });
    
    });

    function registrosSearch(destino_id, identificador)
    {
        //   let parameters = {_token:"{{ csrf_token() }}",proveedor_id:proveedorId};
        // $('.overlay').css("display", "flex");
        let destinoURL = (destino == 'socio') ? '/socio-cuentas/movimientos-por-socio-json/' + identificador : '/inquilino-cuentas/movimientos-por-inquilino-json/' + identificador;

        $.ajax({
            url: destinoURL,
            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, destino);
            },
            error: function(error) {
            $('#buscar-pendientes').removeClass('d-none');
            $('#buscar-pendientes-spinner').addClass('d-none');
            console.error('Error fetching data:', error);
            }
        });
    }

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

        $('#registros-table tbody tr').empty();
        $('#editForm input[name="registros[]"]').remove();
        $('#total-front').text('$ 0.00');
        $('#total').val(0);

        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 fechaVencimiento = (registro.fecha_vencimiento == null) ? '' : moment(registro.fecha_vencimiento).format('DD/MM/YYYY');

                let registroRowHtml = '<tr id="row-'+registro.registro_id+'" class="text-center"><td><input type="checkbox" class="selector" name="selector-'+registro.registro_id+'" id="selector-'+registro.registro_id+'" checked></td><td class="text-left">'+registro.descripcion+'</td><td class="text-center">'+fechaVencimiento+'</td><td class="text-center">'+registro.estado+'</td><td class="text-right">'+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);
                
                actualizarRegistrosSeleccionados(true, registro.registro_id);

            });

            obtenerTotal();

        }else{
            $('#registros-table tbody').append('<tr><td colspan="5" class="text-center">El '+ destino +' seleccionado no tiene registros pendientes de pago.</td></tr>');
        }

    }

    function populateDropDown(dropdown, destino)
    {

      let destinoURL = (destino == 'socios') ? '/socios/obtener-activos' : '/inquilinos/obtener-activos';
      dropdown.children('option:not(:first)').remove();

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

      $.ajax({
          url: destinoURL,
          type: 'GET',
          headers:{"content-type" : "application/json"},
          // data: JSON.stringify(parameters),
          success: function(response) {
            
            $.each(response, function(index, item) {
              dropdown.append($("<option />").val(item.id).text(item.nombre));
            });

            $('.overlay').css("display", "none");
          },
          error: function(error) {
            $('.overlay').css("display", "none");
            console.error('Error fetching data:', error);
          }
      });            

    }

    function obtenerTotal(){
        let total = 0;

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

        $('#total-front').text('$ ' + parseInt(total));
        $('#total').val(total);
    }

    function actualizarRegistrosSeleccionados(seleccionado, registroId){

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

    }

    function configurarTipoDestino(destinoId, tipoId)
    {

        if(tipoId == 1){ // individual

            if(destinoId == 1){ // socio
                populateDropDown($('#socio_id'), 'socios');
                $('.selector-socio').removeClass("d-none");
                $('.selector-inquilino').addClass("d-none");
                $('#inquilino_id').val('');                    
            }
            else{
                populateDropDown($('#inquilino_id'), 'inquilinos');
                $('.selector-socio').addClass("d-none");
                $('.selector-inquilino').removeClass("d-none");
                $('#socio_id').val('');
            }

            $('.selector-socio-todos').addClass("d-none");
            $('.selector-inquilino-todos').addClass("d-none");
            $("#socio_todos").val(0);
            $("#inquilino_todos").val(0);

        }else{ // colectivo
            
            if(destinoId == 1){ // socio
                $("#socio_todos").val(1);
                $("#inquilino_todos").val(0);
                $('.selector-socio-todos').removeClass("d-none");
                $('.selector-inquilino-todos').addClass("d-none");
            }else{
                $("#socio_todos").val(0);
                $("#inquilino_todos").val(1);
                $('.selector-socio-todos').addClass("d-none");
                $('.selector-inquilino-todos').removeClass("d-none");
            }

            $('.selector-socio').addClass("d-none");
            $('.selector-inquilino').addClass("d-none");
            $('#socio_id').val('');
            $('#inquilino_id').val('');
        }
    }

  </script>
@endsection