@extends('layouts.app')

@section('content')
    <!-- end sidebar menu -->
    <!-- start page content -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">

                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Formas de pago</li>
                    </ol>
                </div>
            </div>

            <h2>Crear Comision</h2>
            <div class="card p-5">
                {!! Form::open(['route' => 'forma_pago.comision.store', 'method' => 'POST']) !!}
            <div class="row">
                
                {{-- form open laravel collective --}}
                <div class="col-6">



                    <label class="control-label has-star" for="formapagocomision-fo_pa_co_nombre">Nombre</label>

                    {{-- input text laravel colective --}}
                    {!! Form::text('nombre', null, ['class' => 'form-control', 'placeholder' => 'Nombre', 'required']) !!}


                </div>

                <div class="col-6">


                    {{-- form select laravel collective --}}
                    <label for="">Forma de pago</label>
                    {!! Form::select('forma_pago', $formas_pagos, null, ['class' => 'form-control', 'placeholder' => 'Seleccionar', 'required']) !!}

                </div>


            </div>
            <div class="row">
                <div class="col-6">
                    <label for="telefonos" class="form-label">Aplica para todos?</label><br>
                    <input type="checkbox" name="aplica_todos" data-off="No" data-on="Si" data-toggle="toggle"
                        data-onstyle="primary" data-offstyle="danger">
                </div>



                {{-- form select laravel collective --}}
                {{--  <label for="">Modalidad</label> --}}
                {{-- {!! Form::select('modalidad', $modalidades, null, ['class' => 'form-control' , 'placeholder' =>'Seleccionar']) !!} --}}
                {!! Form::mselect('modalidad', $modalidades, null, 'Modalidad', $errors, 6, true, true, false, 'fModalidad()') !!}

            </div><br>


            <div id="UnicoPorcentaje"
            {{ isset($forma_comision) ? ($forma_comision->fo_pa_co_modalidad == 'UnicoPorcentaje' ? print_r('') : print_r('style="display:none"')) : print_r('style="display:none"') }}>
            {!! Form::mNumber(
                'porcentaje',
                isset($forma_comision)
                    ? ($forma_comision->fo_pa_co_modalidad == 'UnicoPorcentaje'
                        ? $forma_comision->cli_ent_con_rec_det_porcentaje
                        : null)
                    : null,
                'Procentaje',
                $errors,
                6,
                false,
                true,
                null,
                '%',
            ) !!}
            </div>
            <div id="UnicoValor"
            {{ isset($forma_comision) ? ($forma_comision->fo_pa_co_modalidad == 'UnicoValor' ? print_r('') : print_r('style="display:none"')) : print_r('style="display:none"') }}>
                 {!! Form::mMonedaFormato('valor',null ,'Valor',$errors,6,true) !!}
            </div>
             <div id="PorcentajeNiveles"
                    {{ isset($forma_comision) ? ($forma_comision->fo_pa_co_modalidad == 'PorcentajeNiveles' ? print_r('') : print_r('style="display:none"')) : print_r('style="display:none"') }}>
                    <div class="row mb-3 col-md-12">
                        {!! Form::mMonedaFormato('valor_minimo',null ,'Valor Mínimo',$errors,3,true) !!}
                        
                         
                        {!! Form::mMonedaFormato('valor_maximo',null ,'Valor Máximo',$errors,3,true) !!}
                                              
    
                        {!! Form::mNumber(
                            'valor_procentaje',
                            isset($forma_comision)
                                ? ($forma_comision->fo_pa_co_modalidad == 'PorcentajeNiveles'
                                    ? $forma_comision->cli_ent_con_rec_det_porcentaje
                                    : null)
                                : null,
                            'Procentaje',
                            $errors,
                            3,
                            false,
                            true,
                            null,
                            '%',
                        ) !!}

                        {!! Form::mMonedaFormato('valor_adicional',null ,'Valor Adicional',$errors,3,true) !!}
    
                        
                    </div>
                </div>
            <div id="ValorNiveles"
            {{ isset($forma_comision) ? ($forma_comision->fo_pa_co_modalidad == 'ValorNiveles' ? print_r('') : print_r('style="display:none"')) : print_r('style="display:none"') }}>
                <div class="row mb-3 col-md-12">
                    {!! Form::mMonedaFormato('valor_niveles',null ,'Valor',$errors,6,true) !!}
                    
                    {!! Form::mMonedaFormato('adicional_niveles',null ,'Valor Adicional',$errors,6,true) !!}
                    
                </div>
            </div>
            <div id="PorcentajeServicios"
            {{ isset($forma_comision) ? ($forma_comision->fo_pa_co_modalidad == 'PorcentajeServicios' ? print_r('') : print_r('style="display:none"')) : print_r('style="display:none"') }}>
                <div class="row mb-3 col-md-12">

                    {!! Form::mselect('servicio', $servicios, null, 'Servicio', $errors, 3, false) !!}

                    
                     {!! Form::mMonedaFormato('servicio_minimo',null ,'Valor Mínimo',$errors,3,true) !!}

                   

                    {!! Form::mMonedaFormato('servicio_maximo',null ,'Valor Mínimo',$errors,3,true) !!}

                    {!! Form::mNumber('servicio_procentaje', null, 'Procentaje', $errors, 3, false, true, null, '%') !!}
                </div>
                <div class="text-center mb-3">
                    <a onclick="addProcentaje()" class="btn bg-success text-white"><i class="fa fa-plus"></i>Agregar
                        Parametro</a>
                </div>
                <div class="row mb-3 col-md-12">
                    <table class="table mb-3" id="tbl_parametros_procentaje">
                        <thead>
                            <tr>
                                <th>Servicio</th>
                                <th>Valor Mínimo</th>
                                <th>Valor Máximo</th>
                                <th>Porcentaje</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($forma_comision))
                            @if ($forma_comision->fo_pa_co_modalidad == 'PorcentajeServicios')
                                @foreach ($edit as $key => $item)
                                    @php $idFila = (rand(1,99999)* rand(1,99999))+ rand(1,99999);  @endphp
                                    <tr id="fila_{{ $idFila }}">
                                        <input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_id]" value="">
                                        <input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_servicio_tipo_id]" value="">
                                        <input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_servicio_id]" value="">
                                        <input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_valor_min]" value="">
                                        <input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_valor_max]" value="">
                                        <input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_porcentaje]" value="">
                                        <input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_valor]" value="">
                                        <td><input type="hidden" name="idRegistro[]"
                                                value="{{ $item->fpcd_servicio_id }}">{{ $item->servicio != '' ? $item->servicio->servicio_nombre : '' }}
                                        </td>
                                        <td>₡{{ $item->fpcd_valor_min != '' ? number_format($item->fpcd_valor_min, 2, ',', '.') : '0' }}
                                        </td>
                                        <td>₡{{ $item->fpcd_valor_max != '' ? number_format($item->fpcd_valor_max, 2, ',', '.') : '0' }}
                                        </td>
                                        <td>{{ $item->fpcd_porcentaje != '' ? $item->fpcd_porcentaje : '0' }}%
                                        </td>
                                        <td><a class="btn btn-danger" onclick="eliminar('{{ $idFila }}')"><i
                                                    class="fa fa-trash"></i> Eliminar</a></td>
                                    </tr>
                                @endforeach
                            @endif
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="ValorServicios"
                {{ isset($edit) ? ($edit->cli_en_con_rec_modalidad == 'ValorServicios' ? print_r('') : print_r('style="display:none"')) : print_r('style="display:none"') }}>
                <div class="row mb-3 col-md-12">
                    {!! Form::mselect('servicio2', $servicios, null, 'Servicio', $errors, 3, false) !!}

                    {!! Form::mMonedaFormato('servicio_minimo2',null ,'Valor Mínimo',$errors,3,true) !!}
                    
                    {!! Form::mMonedaFormato('servicio_maximo2',null ,'Valor Maximo',$errors,3,true) !!}
                    
                    {!! Form::mMonedaFormato('servicio_valor',null ,'Valor',$errors,3,true) !!}
                    
                </div>
                <div class="text-center mb-3">
                    <a onclick="addValor()" class="btn bg-success text-white"><i class="fa fa-plus"></i>Agregar
                        Parametro</a>
                </div>
                <div class="row mb-3 col-md-12">
                    <table class="table mb-3" id="tbl_parametros_valor">
                        <thead>
                            <tr>
                                <th>Servicio</th>
                                <th>Valor Mínimo</th>
                                <th>Valor Máximo</th>
                                <th>Valor</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($forma_comision))
                                    @if ($forma_comision->fo_pa_co_modalidad == 'ValorServicios')
                                        @foreach ($edit as $key => $item)
                                            @php $idFila = (rand(1,99999)* rand(1,99999))+ rand(1,99999);  @endphp
                                            <tr id="fila_{{ $idFila }}">
                                                <input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_id]" value="">
												<input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_servicio_tipo_id]" value="">
												<input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_servicio_id]" value="">
												<input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_valor_min]" value="">
												<input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_valor_max]" value="">
												<input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_porcentaje]" value="">
												<input type="hidden" name="FormaPagoComisionDetalle[{{$key}}][fpcd_valor]" value="">
                                                <td><input type="hidden" name="idRegistro2[]"
                                                        value="{{ $item->fpcd_servicio_id }}">
                                                    {{ $item->servicio->servicio_nombre }}</td>
                                                <td>₡{{ $item->fpcd_valor_min != '' ? number_format($item->fpcd_valor_min, 2, ',', '.') : '0' }}
                                                </td>
                                                <td>₡{{ $item->fpcd_valor_max != '' ? number_format($item->fpcd_valor_max, 2, ',', '.') : '0' }}
                                                </td>
                                                <td>₡{{ $item->fpcd_valor != '' ? number_format($item->fpcd_valor, 2, ',', '.') : '0' }}
                                                </td>
                                                <td><a class="btn btn-danger" onclick="eliminar('{{ $idFila }}')"><i
                                                            class="fa fa-trash"></i> Eliminar</a></td>
                                            </tr>
                                            {{-- @dump($item->servicio_nombre) --}}
                                        @endforeach
                                    @endif
                                @endif
                        </tbody>
                    </table>
                </div>



            </div>
            <div class="card-footer text-center">
                <div class="text-center">
                    {!! Form::submit('Guardar', ['class' => 'btn btn-success']) !!}
                    <a href="{{ url('forma-pago/comision/crear') }}" class="btn btn-danger">Cancelar</a>
                </div>
            </div>
            {!! Form::close() !!}
            </div>

        </div>
    @endsection

    @section('script')
        <script>
            function fModalidad() {
                var tipo = ['UnicoPorcentaje', 'UnicoValor', 'PorcentajeNiveles', 'ValorNiveles', 'PorcentajeServicios',
                    'ValorServicios', 'NoAplica'
                ];
                var valTipo = '';
                var otros = 0;
                var valModalidad = $('#modalidad').val();
                for (var i = 0; i < (tipo.length); i++) {
                    console.log('valor de ' + i);
                    if (valModalidad == tipo[i]) {
                        if (tipo[i] != 'NoAplica') {
                            document.getElementById(tipo[i]).style.display = 'block';
                        }

                    } else {
                        if (tipo[i] != 'NoAplica') {
                            document.getElementById(tipo[i]).style.display = 'none';
                        }

                    }
                }
            }

            function addProcentaje() {
                var idFila = Math.floor(Math.random() * (99999 - 99)) + 6;
                var combo_servicio = document.getElementById("servicio");
                var text_servicio = combo_servicio.options[combo_servicio.selectedIndex].text;
                var servicio_minimo = $('#servicio_minimo').val();
                var servicio_maximo = $('#servicio_maximo').val();
                var servicio_procentaje = $('#servicio_procentaje').val();
                var textAlerta = '';
                if (combo_servicio.value == '') {
                    textAlerta = 'Por favor seleccione un servicio.';
                }
                if (textAlerta.length == 0 && servicio_maximo == '') {
                    textAlerta = 'Por favor ingrese un valor máximo.';
                }
                if (textAlerta.length == 0 && servicio_maximo == '') {
                    textAlerta = 'Por favor ingrese un valor máximo.';
                }
                if (textAlerta.length == 0 && servicio_procentaje == '') {
                    textAlerta = 'Por favor ingrese el porcentaje.';
                }

                if (textAlerta.length == 0) {
                    var html = '';
                    html += `<tr id="fila_${idFila}">
                        <td><input type="hidden" name="idRegistro[]" value="0">
                        <input type="hidden" name="servicio[]" value="${combo_servicio.value}">${text_servicio}</td>
                        <td><input type="hidden" name="servicio_minimo[]" value="${servicio_minimo}">${servicio_minimo == '' ? '₡ 0' : servicio_minimo}</td>
                        <td><input type="hidden" name="servicio_maximo[]" value="${servicio_maximo}">${servicio_maximo}</td>
                        <td><input type="hidden" name="servicio_porcentaje[]" value="${servicio_procentaje}">${servicio_procentaje}%</td>
                        <td><a class="btn btn-danger" onclick="eliminar('${idFila}')"><i class="fa fa-trash"></i> Eliminar</a></td>
                        </tr>`;

                    $('#tbl_parametros_procentaje tbody').append(html);

                    $('#servicio_minimo').val('');
                    $('#servicio_maximo').val('');
                    $('#servicio_procentaje').val('');
                    $('#servicio').val('').change();
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Advertencia.',
                        text: textAlerta,
                        confirmButtonText: 'Aceptar',
                        customClass: {
                            confirmButton: 'btn btn-default'
                        },
                    });
                }
            }

            function addValor() {
                var idFila2 = Math.floor(Math.random() * (99999 - 99)) + 6;

                var combo_servicio2 = document.getElementById("servicio2");
                var text_servicio2 = combo_servicio2.options[combo_servicio2.selectedIndex].text;
                var servicio_minimo2 = $('#servicio_minimo2').val();
                var servicio_maximo2 = $('#servicio_maximo2').val();
                var servicio_valor = $('#servicio_valor').val();
                var textAlerta2 = '';
                if (combo_servicio2.value == '') {
                    textAlerta2 = 'Por favor seleccione un servicio.';
                }
                if (textAlerta2.length == 0 && servicio_maximo2 == '') {
                    textAlerta2 = 'Por favor ingrese un valor máximo.';
                }
                if (textAlerta2.length == 0 && servicio_maximo2 == '') {
                    textAlerta2 = 'Por favor ingrese un valor máximo.';
                }
                if (textAlerta2.length == 0 && servicio_valor == '') {
                    textAlerta2 = 'Por favor ingrese el valor.';
                }

                if (textAlerta2.length == 0) {
                    var html = '';
                    html += `<tr id="fila_${idFila2}">
                        <td><input type="hidden" name="idRegistro2[]" value="0">
                        <input type="hidden" name="servicio2[]" value="${combo_servicio2.value}">${text_servicio2}</td>
                        <td><input type="hidden" name="valor_minimo2[]" value="${servicio_minimo2}">${servicio_minimo2}</td>
                        <td><input type="hidden" name="valor_maximo2[]" value="${servicio_maximo2}">${servicio_maximo2}</td>
                        <td><input type="hidden" name="valor2[]" value="${servicio_valor}">${servicio_valor}</td>
                        <td><a class="btn btn-danger" onclick="eliminar('${idFila2}')"><i class="fa fa-trash"></i> Eliminar</a></td>
                        </tr>`;

                    $('#tbl_parametros_valor tbody').append(html);

                    $('#servicio2').val('').change();;
                    $('#servicio_minimo2').val('');
                    $('#servicio_maximo2').val('');
                    $('#servicio_valor').val('');
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Advertencia.',
                        text: textAlerta2,
                        confirmButtonText: 'Aceptar',
                        customClass: {
                            confirmButton: 'btn btn-default'
                        },
                    });
                }
            }

            function eliminar(id) {
                console.log(id);
                $('#fila_' + id).remove();
            }

            $(document).ready(function() {

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

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

                $('#frmContratos').validate({
                    rules: {
                        entidad_solidarista: {
                            required: true
                        },
                        dia_corte: {
                            required: true
                        },
                        dia_pago: {
                            required: true
                        },
                        modalidad: {
                            required: true
                        },
                    },
                    messages: {
                        entidad_solidarista: {
                            required: "Campo entidad solidarista es requerido"
                        },
                        dia_corte: {
                            required: "Campo día de corte es requerido"
                        },
                        dia_pago: {
                            required: "Campo día de pago es requerido"
                        },
                        modalidad: {
                            required: "Campo modalidad es requerido"
                        }
                    },
                    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) {
                        var celular = $('#celular').val();
                        var telefonos = $('#telefonos').val();
                        var html = '';

                        if (celular == '' && telefonos == '') {
                            validacion = 'Debe ingresar alguno de los campos celular o teléfonos.';
                        }

                        if (celular != '' && validacion == '') {
                            if (celular.length < 8) {
                                validacion =
                                    'El campo celular solo debe contener 8 caracteres de tipo numerico.';
                            }
                        }

                        if (telefonos != '' && validacion == '' && celular == '') {
                            var arrayTelefonos = telefonos.split(',');

                            for (var i = 0; i < arrayTelefonos.length; i++) {
                                if (arrayTelefonos[i].length < 8 || isNaN(arrayTelefonos[i] * 1)) {
                                    validacion += 'El teléfono (' + arrayTelefonos[i] +
                                        ') debe contener 8 caracteres de tipo numerico.' + "<br/>"
                                }
                            }
                            html = validacion;
                        }

                        if (validacion != '') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Advertencia',
                                text: html == '' ? validacion : '',
                                html: html
                            });
                        } else {
                            form.submit();
                        }
                    }
                });
            });
        </script>
    @endsection