@extends('layouts.app')
@section('css')
<style>
.filter-option,.filter-option-inner-inner{
margin:0px!important;
padding:3px 0!important;
}
</style>
@endsection
@section('content')
<ol class="breadcrumb">
        <li class="breadcrumb-item active class_select"><a href="{{ URL('/comisiones') }}">Promociones</a></li>
        <li class="breadcrumb-item">Crear promoción</li>
</ol>
<div class="row">
    <div class="col-12 col-xl-6">
        <h1 class="page-title">Crea una nueva<span class="fw-semi-bold"> promoción por comisión</span></h1>
    </div>
</div>

<div class="clearfix"></div>

@include('flash::message')

<div class="clearfix"></div>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="col-lg-12 class_padding">
            <div class="content_div">
                <h3>Generales</h3>
                <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                <div class="row">
                    <div class="col-4" >
                        <label class="labels">Nombre de la promoción:</label>
                        <div class="input-group pull-center">
                            <input id="nombre_promocion" class="form-control" placeholder="" name="nombre_promocion">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="col-lg-12 class_padding">
            <div class="content_div">
                <h3>Temporalidad</h3>
                <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                <div class="row">
                    <div class="col-4">
                        <label class="labels">Selecciona la semana de inicio:</label>
                        <br>
                        {{-- {!! Form::label('semana', 'Semana:', ['class' => '']) !!} --}}
                        <!-- <input id="semana_inicial" class="form-control" size="15" type="text" placeholder="48/2023" name="ajuste_request"> -->
                        <select class="selectpicker form-control" data-style="btn-default" data-width="90%" name="semana_inicial" tabindex="-1" id="semana_inicial">
                        <!-- <select name="semana_inicial" class="form-control js-example-basic-single w-100"> -->
                            <option value="51/2023">51/2023</option>
                            <option value="52/2023">52/2023</option>
                            <option value="1/2024">1/2024</option>
                            <option value="2/2024">2/2024</option>
                            <option value="3/2024">3/2024</option>
                            <option value="4/2024">4/2024</option>
                            <option value="5/2024">5/2024</option>
                            <option value="6/2024">6/2024</option>
                        </select>
                        {{-- {!! Form::select('semana',$semanas,  $semana_siutek->semana_calendario, ['class' => 'js-example-basic-single w-100']) !!} --}}
                        <div id="semana-mensaje" class="alert alert-danger alert-transparent alert-sm" style="display:none">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <span class="fw-semi-bold">Alerta:</span>
                        </div>
                    </div>
                    <div class="col-4">
                        <label class="labels">Selecciona la semana final:</label>
                        <br>
                        {{-- {!! Form::label('semana', 'Semana:', ['class' => '']) !!} --}}
                        <!-- <input id="semana_inicial" class="form-control" size="15" type="text" placeholder="48/2023" name="ajuste_request"> -->
                        <select class="selectpicker form-control " data-style="btn-default" data-width="90%" name="semana_final" tabindex="-1" id="semana_final">
                        <!-- <select name="semana_inicial" class="form-control js-example-basic-single w-100"> -->
                            <option value="51/2023">51/2023</option>
                            <option value="52/2023">52/2023</option>
                            <option value="1/2024">1/2024</option>
                            <option value="2/2024">2/2024</option>
                            <option value="3/2024">3/2024</option>
                            <option value="4/2024">4/2024</option>
                            <option value="5/2024">5/2024</option>
                            <option value="6/2024">6/2024</option>
                        </select>
                        {{-- {!! Form::select('semana',$semanas,  $semana_siutek->semana_calendario, ['class' => 'js-example-basic-single w-100']) !!} --}}
                        <div id="semana-mensaje" class="alert alert-danger alert-transparent alert-sm" style="display:none">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <span class="fw-semi-bold">Alerta:</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="col-lg-12 class_padding">
            <div class="content_div">
                <h3>Porcentaje de comisión</h3>
                <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                <div class="row">
                    <div class="col-4" >
                        <label class="labels">Ingrese el porcentaje:</label>
                        <div class="input-group pull-center">
                            <input id="porcentaje_comision" class="form-control" min="1" max="99" maxlength="2" size="2" placeholder="0" name="porcentaje_comision">
                            <span class="input-group-append">
                                <span class="input-group-text">
                                    %
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="col-lg-12 class_padding">
            <div class="content_div">
                <h3>Tipo de usuario que aplica</h3>
                <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                <div class="row">
                    <div class="col-4">
                        <div class="form-radio" style="margin-top: 35px;">
                            <label for="num_transaccion" class="form-check-label">Líder</label>
                            <input type="checkbox" name="check_gerentesupervisor" value="Gerente supervisor" checked>
                        </div>
                    </div>

                    <div class="col-4">
                        <div class="form-radio" style="margin-top: 35px;">
                            <label for="num_transaccion" class="form-check-label">Supervisor</label>
                            <input type="checkbox" name="check_supervisor" value="Supervisor" >
                        </div>
                    </div>

                    <div class="col-4">
                        <div class="form-radio" style="margin-top: 35px;" >
                            <label for="num_transaccion" class="form-check-label">Promotores</label>
                            <input type="checkbox" name="check_promotores" value="Promotores" >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="col-lg-12 class_padding">
            <div class="content_div">
                <h3>Tipo de caso</h3>
                <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                    <div class="row">
                        <div class="col-12">
                            <label for="tipo_caso">
                                <input type="checkbox" name="tipo_caso" id="tipo_caso" checked>
                            </label>
                            &nbsp;&nbsp; <span id="msg-mode">Deshabilitar</span>
                        </div>
                    </div>
                    <div class="row" id="tipo_caso_contenido">
                        <div class="col-4">
                            <div class="form-check abc-checkbox abc-checkbox-danger col-sm-12" style="margin-top: 35px;" id="nuevo_contenedor">
                                <input class="form-check-input" id="nuevo" type="checkbox" name="prestamo_nuevo" >
                                <label class="form-check-label" for="nuevo">
                                    Nuevo
                                </label>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check abc-checkbox abc-checkbox-danger col-sm-12" style="margin-top: 35px;" id="refinanciamiento_contenedor">
                                <input class="form-check-input" id="refinanciamiento" type="checkbox" name="prestamo_refin" >
                                <label class="form-check-label" for="refinanciamiento">
                                    Refinanciamiento
                                </label>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check abc-checkbox abc-checkbox-danger col-sm-12" style="margin-top: 35px;" id="renovacion_contenedor">
                                <input class="form-check-input" id="renovacion" type="checkbox" name="prestamo_renova" >
                                <label class="form-check-label" for="renovacion">
                                    Renovación
                                </label>
                                <br>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</section>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="col-lg-12 class_padding">
            <div class="content_div">
                <h3>Territorio</h3>
                <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                <div class="row">
                    <div class="col-4">
                            <label class="labels">Selecciona el territorio válido para la promoción:</label>
                            <br>
                            {{-- {!! Form::label('periodo', 'Periodo:', ['class' => '']) !!} --}}
                            <!-- <input id="semana_inicial" class="form-control" size="15" type="text" placeholder="48/2023" name="ajuste_request"> 
                            <select name="periodo" class="form-control js-example-basic-single w-100"> -->
                            <select class="selectpicker form-control " data-style="btn-default" data-width="90%" name="periodo" tabindex="-1" id="periodo">
                                <option>Territorio 1</option>
                                <option>Territorio 2</option>
                                <option>Territorio 3</option>
                                <option>Territorio 4</option>
                                <option>Territorio 5</option>
                                <option>Territorio 6</option>
                                <option>Territorio 7</option>
                                <option>Territorio 8</option>
                                <option>Territorio 9</option>
                                <option>Territorio 10</option>
                            </select>
                            <div id="semana-mensaje" class="alert alert-danger alert-transparent alert-sm" style="display:none">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <span class="fw-semi-bold">Alerta:</span>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</section>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="col-lg-12 class_padding">
            <div class="content_div">
                <h3>Porcentaje de cobranza</h3>
                <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-6">
                                <label for="porcentaje_cobranza">
                                    <input type="checkbox" name="porcentaje_cobranza" id="porcentaje_cobranza" onChange="comprobar1(this);">
                                </label>
                                &nbsp;&nbsp; <span id="msg-mode-porcentaje">Habilitar</span>
                            </div>
                            <div class="col-4">
                                <div class="input-group pull-center" id="cobranza" readonly style="display:none">
                                    <input id="porcentaje_cobranza" class="form-control" min="1" max="99" maxlength="2" size="2" placeholder="0" name="porcentaje_cobranza">
                                    <span class="input-group-append">
                                        <span class="input-group-text">
                                            %
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="col-lg-12 class_padding">
            <div class="content_div">
                <h3>Recuperación de cliente</h3>
                <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-6">
                                <label for="check_recuperacion">
                                    <input type="checkbox" name="check_recuperacion" id="check_recuperacion" onChange="comprobar(this);">
                                </label>
                                &nbsp;&nbsp; <span id="msg-mode-recuperacion">Habilitar</span>
                            </div>
                            <div class="col-4">
                                <div id="semana" class="input-group pull-center" readonly style="display:none">
                                    <input class="form-control" min="1" max="99" maxlength="2" size="2" placeholder="0" name="porcentaje_cobranza">
                                    <span class="input-group-append">
                                        <span class="input-group-text">
                                            semanas
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="col-lg-12 class_padding">
            <div class="content_div">
                <h3>Estado del préstamo</h3>
                <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                <div class="row">
                    <div class="col-12">
                        <label for="liquidado">
                            <input type="checkbox" name="liquidado" id="liquidado">
                        </label>
                        &nbsp;&nbsp; <span id="msg-mode-liquidado">Liquidado</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="col-lg-12 class_padding">
            <div class="content_div">
                <h3>Periodicidad</h3>
                <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                <div class="row">
                    <div class="col-4">
                            <label class="labels">Selecciona el periodo válido para la promoción:</label>
                            <br>
                            {{-- {!! Form::label('periodo', 'Periodo:', ['class' => '']) !!} --}}
                            <!-- <input id="semana_inicial" class="form-control" size="15" type="text" placeholder="48/2023" name="ajuste_request"> 
                            <select name="periodo" class="form-control js-example-basic-single w-100"> -->
                            <select class="selectpicker form-control " data-style="btn-default" data-width="90%" name="periodo" tabindex="-1" id="periodo">
                                <option value="semanal">Semanal</option>
                                <option value="rango">Rango de semanas</option>
                            </select>
                            <div id="semana-mensaje" class="alert alert-danger alert-transparent alert-sm" style="display:none">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <span class="fw-semi-bold">Alerta:</span>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</section>
<section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="row" >
            <div class="col-12"  style="margin:30px 0 0;justify-content:start!important; padding:5px;">
                <button id="btnSearch" type="button" class="btn1 btnSucces" style="margin:0 10px 0 0">Aplicar</button>
            </div>
        </div>
    </div>
</section>
<!-- <section class="widget" style="padding: 20px 20px 10px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
            <div class="row" >
                <div class="col-lg-12 class_padding">
                    <div class="content_div">
                        <h4>Historial de promociones</h4>
                        <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px; padding:5px;">
                    </div>
                </div>
                <div class="col-12" >
                    {{-- <label class="labels">Selecciona la semana de inicio:</label> --}}
                    <br>
                    <table class="table table-responsive" id="comisiones-table">
                        <thead>
                                <th>Número de promoción</th>
                                <th>Semana inicio</th>
                                <th>Año</th>
                                <th>Semana final</th>
                                <th>Año</th>
                                <th>Porcentaje de bono</th>
                                <th>Fecha de creación</th>
                                <th>Usuario registro</th>
                                <th>Aciones</th>
                        </thead>
                        <tbody>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tbody>
                    </table>
                </div>

            </div>
    </div>
</section> -->

<div id="url_estatica" data-url="{{ url('/') }}"></div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<script src="{!! asset('template') !!}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="{!! asset('js/administrativo/pago_oficina.js') !!}"></script>
<script src="{!! asset('template') !!}/bower_components/switchery/dist/switchery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>

function setInputFilter(textbox, inputFilter, errMsg) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
    textbox.addEventListener(event, function(e) {
      if (inputFilter(this.value)) {
        // Accepted value
        if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
          this.classList.remove("input-error");
          this.setCustomValidity("");
        }
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        // Rejected value - restore the previous one
        this.classList.add("input-error");
        this.setCustomValidity(errMsg);
        this.reportValidity();
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        // Rejected value - nothing to restore
        this.value = "";
      }
    });
  });
}


// Install input filters.
// setInputFilter(document.getElementById("intTextBox"), function(value) {
//   return /^-?\d*$/.test(value); }, "Must be an integer");
// setInputFilter(document.getElementById("uintTextBox"), function(value) {
//   return /^\d*$/.test(value); }, "Must be an unsigned integer");
// setInputFilter(document.getElementById("intLimitTextBox"), function(value) {
//   return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500); }, "Must be between 0 and 500");
setInputFilter(document.getElementById("porcentaje_comision"), function(value) {
  return /^-?\d*[.,]?\d*$/.test(value); }, "Debe ingresar un porcentaje de comisión");
// setInputFilter(document.getElementById("currencyTextBox"), function(value) {
//   return /^-?\d*[.,]?\d{0,2}$/.test(value); }, "Must be a currency value");
// setInputFilter(document.getElementById("latinTextBox"), function(value) {
//   return /^[a-z]*$/i.test(value); }, "Must use alphabetic latin characters");
// setInputFilter(document.getElementById("hexTextBox"), function(value) {
//   return /^[0-9a-f]*$/i.test(value); }, "Must use hexadecimal characters");












    // new Switchery(document.getElementById('check-mode'),{color: '#a83030'});
    // $("#check-mode").click(function(){
    //     if($(this).prop('checked') == true)
    //     {
    //         $("#msg-mode").text('PRUEBAS');
    //     }
    //     else{
    //         $("#msg-mode").text('PRODUCCIÓN');
    //     }
    // });

    // new Switchery(document.getElementById('check-cobranza'),{color: '#a83030'});
    // $("#check-cobranza").click(function(){
    //     if($(this).prop('checked') == true)
    //     {
    //         $("#msg-mode").text('PRUEBAS');
    //     }
    //     else{
    //         $("#msg-mode").text('PRODUCCIÓN');
    //     }
    // });

    // new Switchery(document.getElementById('check-recuperacion'),{color: '#a83030'});
    // $("#check-recuperacion").click(function(){
    //     if($(this).prop('checked') == true)
    //     {
    //         $("#msg-mode").text('PRUEBAS');
    //     }
    //     else{
    //         $("#msg-mode").text('PRODUCCIÓN');
    //     }
    // });

    // new Switchery(document.getElementById('check-email'),{color: '#a83030'});
    // $("#check-email").click(function(){
    //     if($(this).prop('checked') == true)
    //     {
    //         $("#msg-email").text('ACTIVO');
    //         $("#divCheckEmailMode").show();
    //     }
    //     else{
    //         $("#msg-email").text('INACTIVO');
    //         $("#divCheckEmailMode").hide();
    //     }
    // });

    // new Switchery(document.getElementById('check-email-mode'),{color: '#a83030'});
    // $("#check-email-mode").click(function(){
    //     if($(this).prop('checked') == true)
    //     {
    //         $("#msg-email-mode").text('PRUEBAS');
    //         $("#divCorreosDebug").show();
    //     }
    //     else{
    //         $("#msg-email-mode").text('PRODUCCIÓN');
    //         $("#divCorreosDebug").hide();
    //     }
    // });
</script>

<script>
    new Switchery(document.getElementById('tipo_caso'),{color: '#a83030'});
    $("#tipo_caso").click(function(){
        if($(this).prop('checked') == true)
        {
            $("#msg-mode").text('Deshabilitar');
            $('#tipo_caso_contenido').removeAttr('hidden',true);
        }
        else{
            $("#msg-mode").text('Habilitar');
            $('#tipo_caso_contenido').attr('hidden',true);
        }
    });
    
    new Switchery(document.getElementById('porcentaje_cobranza'),{color: '#a83030'});
    $("#porcentaje_cobranza").click(function(){
        if($(this).prop('checked') == true)
        {
            $("#msg-mode-porcentaje").text('Deshabilitar');
        }
        else{
            $("#msg-mode-porcentaje").text('Habilitar');
        }
    });

    new Switchery(document.getElementById('check_recuperacion'),{color: '#a83030'});
    $("#check_recuperacion").click(function(){
        if($(this).prop('checked') == true)
        {
            $("#msg-mode-recuperacion").text('Deshabilitar');
        }
        else{
            $("#msg-mode-recuperacion").text('Habilitar');
        }
    });

    new Switchery(document.getElementById('liquidado'),{color: '#a83030'});
    $("#liquidado").click(function(){
        if($(this).prop('checked') == true)
        {
            $("#msg-mode-liquidado").text('Activo');
        }
        else{
            $("#msg-mode-liquidado").text('Liquidado');
        }
    });

    function toggle(source) {
        checkboxes = document.getElementsByName('todo');

        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
        }

    }

    function comprobar(obj)
    {
        if (obj.checked){
            document.getElementById('semana').style.display = "";
        } else{
            document.getElementById('semana').style.display = "none";
        }
    }
    function comprobar1(obj)
    {
        if (obj.checked){
            document.getElementById('cobranza').style.display = "";
        } else{
            document.getElementById('cobranza').style.display = "none";
        }
    }

    $(".js-example-tags").select2({
        tags: true
    });
</script>
@endsection