@extends('fragments.fullTemplate')
@section('titulo')
    Cotizaciones
@endsection
@section('contenido')
@php
    //
@endphp
    <div class="ui big breadcrumb">
        <div class="section">Administración</div>
        <i class="right chevron icon divider"></i>
        <div class="section">Cotizaciones</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Cliente</div>
    </div>
    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>
    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">
            @if(session()->has('success'))
                <div class="alert alert-success text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('success') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if(session()->has('warning'))
                <div class="alert alert-warning text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('warning') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if(session()->has('error'))
                <div class="alert alert-danger text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('error') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger alert-dismissible" role="alert">
                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>
    <div class="card">
        <div class="card-body">
        <form class="needs-validation" action="{{url('cotizaciones/new_cliente')}}" method="GET">
            {{csrf_field()}}
            <div class="row">
                <div class="form-group col-8">
                    <label class="font-weight-bold" for="clave_cotizacion" class="">Clave de cotización</label>
                    <div class="input-group col-md-12">
                        <input type="text" class="form-control col-xs-1" id="semi_folio" name="semi_folio" readonly >
                        <div class="input-group-prepend">
                            <span class="input-group-text">-</span>
                            <select class="form-control" id="code" name="code">
                                <option disabled selected>Seleccionar una opción</option>
                                <option value="P">P</option>
                                @if ($datos_auditoria->activo == 0)
                                <option value="C">C</option>
                                @endif
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-group col-4">
                    <label class="font-weight-bold" for="clave_cotizacion" class="">Fecha</label>
                    <input type="text" class="form-control col-xs-2" id="fecha" name="fecha" readonly value="{{$fecha}}">
                </div>
            </div>
                {{--<div class="form-group">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="acreditacion" name="acreditacion" value="1">
                        <label class="custom-control-label" for="acreditacion">ACREDITADO</label>
                    </div>
                </div>--}}
                  
                <div class="form-group">
                    <label class="font-weight-bold" for="tipo_cliente_texto">Tipo de cliente</label>
                    <input type="text" class="form-control" id="tipo_cliente_texto" value="Seleccione el tipo de folio" readonly>
                    <input type="hidden" id="select_cliente" name="select_cliente" value="">
                </div>
                <hr>
                <div id="insert_cliente"></div>
            </form>
        </div>
    </div>
    @include('fragments.back', ['url' => 'cotizaciones'])

    <style type="text/css">
    .stepwizard-step p {
        margin-top: 10px;
    }

    .stepwizard-row {
        display: table-row;
    }

    .stepwizard {
        display: table;
        width: 100%;
        position: relative;
    }

    /*.stepwizard-step button[disabled] {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
    }**/

    .stepwizard-row:before {
        top: 14px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 100%;
        height: 1px;
        background-color: #ccc;
        z-order: 0;

    }

    .stepwizard-step {
        display: table-cell;
        text-align: center;
        position: relative;
    }

    .btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
    }
   </style> 
    <script>

        var id_cliente = 0;
        $(document).ready(function(){
            function cargarFormularioCliente(code) {
                var esProspecto = code === 'P';

                $('#select_cliente').val(esProspecto ? '1' : '0');
                $('#tipo_cliente_texto').val(esProspecto ? 'Prospecto de cliente' : 'Cliente');

                if(esProspecto){
                    $('div#insert_cliente').load('{{url("cotizaciones/create_new_cliente")}}', function(){
                        readButtons();
                        $('#id_cliente_tipo').change(function(){
                            
                            if($(this).val() == 1){

                                if(!($('.change_gestor').attr('hidden'))){
                                    $('.change_gestor').attr('hidden','true');
                                }

                                $('.change_directo').removeAttr('hidden');

                            }else if($(this).val() == 2){

                                if(!($('.change_directo').attr('hidden'))){
                                    $('.change_directo').attr('hidden', 'true');
                                }

                                $('.change_gestor').removeAttr('hidden');
                                    
                            }
                        });
                    });
                }else{
                    $('div#insert_cliente').load('{{url("cotizaciones/clientes")}}', function(){
                        $(".selectpicker").selectpicker();
                    });
                    
                }
            }

            $('#code').on('change', function() {
                let code = $(this).val();
                cargarFormularioCliente(code);
                $.ajax({
                    url:"{{ url('cotizacion/search_folio') }}",
                    method:"POST",
                    data:{'code': code, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        result = JSON.parse(response); 
                        resultData = result.data;
                        //console.log(resultData);
                        $('#semi_folio').val(resultData['semifolio']);
                        
                    }
                });
                
            });
                    
        });

        let num_contactos = 1;
        let num_representantes =1;
        readButtons = function(type_accion = "insert_cliente"){
            let navListItems = $('div#'+type_accion+' div.setup-panel div a'),
            allWells = $('div#'+type_accion+' .setup-content'),
            allNextBtn = $('div#'+type_accion+' .nextBtn');
            allBackBtn = $('div#'+type_accion+' .backBtn');

            navListItems.click(function (e) {
                e.preventDefault();
                var $target = $($(this).attr('href')),
                        $item = $(this);

                if (!$item.hasClass('disabled')) {
                    navListItems.removeClass('btn-primary').addClass('btn-default');
                    $item.addClass('btn-primary').removeClass('disabled');
                    allWells.hide();
                    $target.show();
                    //$target.find('input:eq(0)').focus();
                }
            });

            allNextBtn.click(function(){
                var curStep = $(this).closest("div#"+type_accion+" .setup-content"),
                    curStepBtn = curStep.attr("id"),
                    nextStepWizard = $('div#'+type_accion+' div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                    curInputs = curStep.find("input[type='text'],input[type='url']"),
                    isValid = true;

                $(".form-group").removeClass("has-error");
                    navListItems.addClass('disabled');
                    nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
            });

            allBackBtn.click(function(){
                var curStep = $(this).closest("div#"+type_accion+" .setup-content"),
                    curStepBtn = curStep.attr("id"),
                    nextStepWizard = $('div#'+type_accion+' div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"),
                    curInputs = curStep.find("input[type='text'],input[type='url']"),
                    isValid = true;

                $(".form-group").removeClass("has-error");
                    navListItems.addClass('disabled');
                    nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
            });

            $('div.setup-panel div a.btn-primary').trigger('click');

            $('#add_contacto').click(function(){
                num_contactos++;
                
                $('#contactos').append('<hr/>');
                $('#contactos').append('<label class="font-weight-bold" for="nombre_contacto_factura">Contacto</label>');
                $('#contactos').append('<input type="text" class="form-control" placeholder="Contacto '+(num_contactos)+'" id="nombre_contacto_factura_'+(num_contactos)+'" name="nombre_contacto_factura_'+(num_contactos)+'">');
                $('#contactos').append('<div class="form-row mt-3"><div class="form-group col-md-4"><label class="font-weight-bold" for="telefono_contacto_'+(num_contactos)+'" class="">Teléfono oficina</label><input type="text" class="form-control" placeholder="Teléfono oficina" id="telefono_contacto_'+(num_contactos)+'" name="telefono_contacto_'+(num_contactos)+'"></div><div class="form-group col-md-4"><label class="font-weight-bold" for="extension_contacto_factura_'+(num_contactos)+'" class="">Extensión</label><input type="text" class="form-control" placeholder="Extensión" id="extension_contacto_factura_'+(num_contactos)+'" name="extension_contacto_factura_'+(num_contactos)+'"></div><div class="form-group col-md-4"><label class="font-weight-bold" for="celular_contacto_factura_'+(num_contactos)+'" class="">Teléfono móvil</label><input type="text" class="form-control" placeholder="Teléfono móvil" id="celular_contacto_factura_'+(num_contactos)+'" name="celular_contacto_factura_'+(num_contactos)+'"></div></div><div class="form-row"><div class="form-group col-md-6"><label class="font-weight-bold" for="correo_contacto_factura_'+(num_contactos)+'">Email de contacto</label><input type="email" class="form-control" placeholder="Email de contacto" id="correo_contacto_factura_'+(num_contactos)+'" name="correo_contacto_factura_'+(num_contactos)+'"></div><div class="form-group col-md-6"><label class="font-weight-bold" for="correo_contacto_2_factura_'+(num_contactos)+'">Email opcional</label><input type="email" class="form-control" placeholder="Email opcional" id="correo_contacto_2_factura_'+(num_contactos)+'" name="correo_contacto_2_factura_'+(num_contactos)+'"></div></div><div class="form-row"><div class="form-group col-md-12"><label class="font-weight-bold" for="comision_contacto_factura_'+(num_contactos)+'">Porcentaje de comisión</label><div class="input-group mb-3"><input type="number" class="form-control" aria-label="" placeholder="Porcentaje de comisión de contacto" id="comision_contacto_factura_'+(num_contactos)+'" name="comision_contacto_factura_'+(num_contactos)+'" min="0" max="100"><div class="input-group-append"><span class="input-group-text">%</span></div></div></div></div>');
            });

            $('#add_representantes').click(function(){
                num_representantes++;
                $('#representantes').append('<input type="text" class="form-control mt-2" placeholder="Representante legal '+(num_representantes)+'" id="representante_legal_informe_'+(num_representantes)+'" name="representante_legal_informe_'+(num_representantes)+'">');
            });
        }

    </script>
        
    
@endsection