@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">Prospecto de clientes</div>
    </div>
    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>

    @include('fragments.navs', [
    "navs" => [
        [
            "active" => 0,
            "url" => "cotizaciones",
            "name" => "Cotizaciones"
        ],
        [
            "active" => 1,
            "url" => "cotizaciones/prospectos",
            "name" => "Cotizaciones de prospecto de clientes"
        ]
    ]
    ])
    <div class="ui divider"></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="ui grid">
    
        
        <div class="sixteen wide column">
            <a class="ui button fluid primary" href="{{url('cotizaciones/cliente')}}">
                <i class="pencil alternate icon"></i> Nueva Cotización
            </a>
        </div>
        {{--<div class="six wide column">
            <a class="ui button fluid secondary" href="{{url('cotizaciones')}}"><i class="archive icon"></i>Regresar</a>
        </div>--}}
    
</div>
    <div class="ui divider"></div>

    <div class="sx-autorender">
        <div class="sx-scroll-x">
            {{--<p class="text-center" >{{$cotizaciones->count()}}</strong> resultados en esta p&aacute;gina</p>--}}
            <table id="lang-dt" class="ui celled table unstackable">
                <thead>
                    <tr>
                        <th class="text-center">Folio</th>
                        <th class="text-center">Contactos</th>
                        <th class="text-center">Empresa</th>
                        <th class="text-center collapsing"></th>
                    </tr>                    
                </thead>
                <tbody>
                    @if($cotizaciones->count())
                    @foreach ($cotizaciones as $cotizacion)
                    <tr>
                        <td>{{$cotizacion->folio}}</td>
                        <td>
                            @if($cotizacion->cliente)
                            @foreach($cotizacion->cliente->contactos as $contactos){{$contactos->nombre_contacto.", "}}@endforeach
                            @endif
                        </td>
                        <td>
                            @if ($cotizacion->cliente && $cotizacion->cliente->nombre_empresa)
                                {{$cotizacion->cliente->nombre_empresa}}
                            @else
                                Cliente prospecto
                            @endif
                        </td>
                        <td>
                            <div class="ui tiny icon buttons">
                                <!-- Editar -->
                                {{--<a class="ui button green" title="Modifica" href="{{url('cotizacion/'.$cotizacion->id_cotizacion.'/lista_precios')}}">
                                    <i class="pencil alternate icon"></i>
                                </a>

                                <a class="ui button red" title="Eliminar" id="delete_cotizacion" data-id="{{$cotizacion->id_cotizacion}}">
                                    <i class="trash alternate icon"></i>
                                </a>--}}
                                @if(!empty($cotizacion->cliente->prospecto))
                                    <a class="ui button purple edit_cliente" 
                                        title="Modifica" 
                                        id="cliente_edit"
                                        data-id_cliente="{{$cotizacion->cliente->id_cliente_factura}}"
                                    >
                                        <i class="user icon"></i>
                                    </a>
                                @endif
                                {{--<a class="ui button orange nota_cotizacion" title="Nota" data-id="{{$cotizacion->id_cotizacion}}">
                                    <i class="sticky note icon"></i>
                                </a>--}}
                            </div>
                        </td>
                    </tr>                    
                    @endforeach
                    @else
                    <tr>
                        <td colspan="8">No se encontraron registros</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            {{--$cotizaciones->links("pagination::bootstrap-4")--}}
        </div>
    </div>
    {{--@include('Cotizaciones.new_cotizacion')
    @include('Cotizaciones.edit_cotizacion')--}}
    @include('Clientes.edit_cliente')
    @include('Cotizaciones.delete_cotizacion_lista')
    @include('Cotizaciones.show_nota')
    <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>
        resultData = {};
        var id_cliente = 0;
        $(document).ready(function(){
            $('.summernote').summernote({
                placeholder: 'Nota',
                tabsize: 1,
                height: 350,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['view', ['fullscreen']]
                ]
            });
            $('#new_cotizacion').click(function(){
                $('#ModalCotizacion').modal('show');
            });

            $('a.nota_cotizacion').click(function(){
                id_cotizacion = $(this).data("id");
                $.ajax({
                    type: "POST",
                    url: "{{ url('show_nota_cotizacion') }}",
                    data: { 'id_cotizacion': id_cotizacion, '_token': _token = $('input[name="_token"]').val() },
                    success: function (response) {
                        result = JSON.parse(response); 
                        resultData = result.data;
                        $('#modalShowNota').modal('show');
                    }
                });
            });

            $("select#select_clientes").change(function(){
                id_cliente = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "{{ url('show_cliente') }}",
                    data: { 'id_cliente': id_cliente, '_token': _token = $('input[name="_token"]').val() },
                    success: function (response) {
                        $('select#select_empresa').html(response);
                    }
                });
            });

            $('a#edit_cotizacion').click(function(){
                id_cotizacion = $(this).data('id');
                
                $.ajax({
                    url:"{{ url('show_cotizacion') }}",
                    method:"POST",
                    data:{'id_cotizacion': id_cotizacion, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        result = JSON.parse(response); 
                        resultData = result.data;
                        console.log(resultData);
                        $('#modalEditcotizacion').modal('show');
                    }
                });
            });

            $('a#delete_cotizacion').click(function(){
                id_cotizacion = $(this).data('id');
                $('#modalDeleteCotizacion').modal('show');
            });

            $('a#cliente_edit').click(function(){
                showLoader();
                var id_cliente_factura = $(this).data('id_cliente');
                $('div#edit_cliente').load('{{url("form_new_cliente")}}', function(){
                    readButtons("edit_cliente");
                    $('#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');
                                
                        }
                    });
                    
                    $.ajax({
                        url:"{{url('show_clientes')}}",
                        method:"POST",
                        data:{'id_cliente': id_cliente_factura, '_token': _token = $('input[name="_token"]').val()},
                        success:function(result){
                            //alert(response);
                            resultData = result.data.client;
                            //validate_check_edit();
                            $('div#edit_cliente').removeAttr('hidden');
                            $('#ModalEditCliente').modal('show');
                            hideLoader();
                        },
                        error:function(){
                         hideLoader();
                        }
                    });

                   
                });
            });

            
        });

        $('#modalEditcotizacion').on('show.bs.modal', function () {
           $("#modal-form-modify :input").each(function(){
               input = $(this).attr('id');
               if(input in resultData){
                   $('#modal-form-modify #'+input).val(resultData[input]);
                   $('#modal-form-modify #'+input).selectpicker('val', resultData[input]);
               }
           });
       });

        $('#modalDeleteCotizacion').on('show.bs.modal', function () {
            $('#modal-form-delete input#id_cotizacion').val(id_cotizacion);
        });

        $('#modalShowNota').on('show.bs.modal', function () {
            
            
            $("#modal-form-nota :input").each(function(){
               input = $(this).attr('id');
               console.log(input);
               if(input in resultData){
                   $('#modal-form-nota #'+input).val(resultData[input]);
                   if(input == "notas"){
                    $('#modal-form-nota #'+input+'.summernote').summernote("code", resultData[input]);
                   }
               }
               
           });
        });

        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-12"><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>'+
                                        '<div class="form-row"><div class="form-group col-md-12"><label class="font-weight-bold" for="correo_contacto_2_factura_'+(num_contactos)+'">Email de contacto opcional</label><input type="email" class="form-control" placeholder="Email de contacto" 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)+'">');
            });
        }

        $('#ModalEditCliente').on('show.bs.modal', function () {
            $('#id_clnt').val(id_cliente);
           
            $("#ModalEditCliente :input").each(function(){
                input = $(this).attr('id');
                if(input){
                    if(input in resultData){
                        
                        $('#ModalEditCliente #'+input).val(resultData[input]);
                        //
                        if(input == "id_cliente_tipo"){
                            //console.log(resultData[input] == '1');
                            if(resultData[input] == '1'){
                                
                                if(!($('.change_gestor').attr('hidden'))){
                                    $('.change_gestor').attr('hidden','true');
                                }

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

                            }else if(resultData[input] == '2'){
                                
                                if(!($('.change_directo').attr('hidden'))){
                                    $('.change_directo').attr('hidden', 'true');
                                }

                                $('.change_gestor').removeAttr('hidden');
                                
                            }
                        }
                    }
                }
            });
            $('#contactos_edit').html('');
            $('#rep_edit').html('');
            
            for(i = 0; (resultData['contactos'].length) > i; i++){
                $('#contactos_edit').append('<hr/>');
                $('#contactos_edit').append('<input type="text" class="form-control" id="id_cliente_contacto_factura_'+(i+1)+'" name="id_cliente_contacto_factura_'+(i+1)+'" value="'+resultData['contactos'][i]['id_cliente_contacto_factura']+'" hidden>');
                $('#contactos_edit').append('<label class="font-weight-bold" for="nombre_contacto_factura">Contacto</label>');
                $('#contactos_edit').append('<input type="text" class="form-control" placeholder="Contacto '+(i+1)+'" id="nombre_contacto_factura_'+(i+1)+'" name="nombre_contacto_factura_'+(i+1)+'" value="'+resultData['contactos'][i]['nombre_contacto']+'">');
                $('#contactos_edit').append('<div class="form-row mt-3"><div class="form-group col-md-4"><label class="font-weight-bold" for="telefono_contacto_'+(i+1)+'" class="">Teléfono oficina</label><input type="text" class="form-control" placeholder="Teléfono oficina" id="telefono_contacto_'+(i+1)+'" name="telefono_contacto_'+(i+1)+'" value="'+resultData['contactos'][i]['telefono']+'"></div>'+
                                                '<div class="form-group col-md-4"><label class="font-weight-bold" for="extension_contacto_factura_'+(i+1)+'" class="">Extensión</label><input type="text" class="form-control" placeholder="Extensión" id="extension_contacto_factura_'+(i+1)+'" name="extension_contacto_factura_'+(i+1)+'" value="'+resultData['contactos'][i]['extension']+'"></div>'+
                                                '<div class="form-group col-md-4"><label class="font-weight-bold" for="celular_contacto_factura_'+(i+1)+'" class="">Teléfono móvil</label><input type="text" class="form-control" placeholder="Teléfono móvil" id="celular_contacto_factura_'+(i+1)+'" name="celular_contacto_factura_'+(i+1)+'" value="'+resultData['contactos'][i]['celular']+'"></div></div>'+
                                                '<div class="form-row"><div class="form-group col-md-12"><label class="font-weight-bold" for="correo_contacto_factura_'+(i+1)+'">Email de contacto</label><input type="text" class="form-control" placeholder="Email de contacto" id="correo_contacto_factura_'+(i+1)+'" name="correo_contacto_factura_'+(i+1)+'" value="'+resultData['contactos'][i]['correo']+'"></div></div>'+
                                                '<div class="form-row"><div class="form-group col-md-12"><label class="font-weight-bold" for="correo_contacto_2_factura_'+(i+1)+'">Email de contacto opcional</label><input type="text" class="form-control" placeholder="Email de contacto opcional" id="correo_contacto_2_factura_'+(i+1)+'" name="correo_contacto_2_factura_'+(i+1)+'" value="'+resultData['contactos'][i]['correo_opcional']+'"></div></div>'+
                                                '<div class="form-row"><div class="form-group col-md-12"><label class="font-weight-bold" for="comision_contacto_factura_'+(i+1)+'">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_'+(i+1)+'" name="comision_contacto_factura_'+(i+1)+'" min="0" max="100" value="'+resultData['contactos'][i]['comision']+'"><div class="input-group-append"><span class="input-group-text">%</span></div></div></div></div>');
            }

            for(informes in resultData['informes']){
                $("#ModalEditCliente :input").each(function(){
                    input = $(this).attr('id');
                    
                    if(input){
                        if(input in resultData['informes'][informes]){
                            
                            $('#ModalEditCliente #'+input).val(resultData['informes'][informes][input]);
                            
                        }
                    }
                });
                for(rep in resultData['informes'][informes]['represantes_legal']){
                    rep = parseInt(rep);
                    $('#representantes').append('<input type="text" class="form-control" id="id_representante_legal_informe_'+(rep+1)+'" name="id_representante_legal_informe_'+(rep+1)+'" value="'+resultData['informes'][informes]['represantes_legal'][rep]['id_cliente_rep_legal_informe']+'" hidden>');
                    $('#representantes').append('<input type="text" class="form-control mt-2" placeholder="Representante legal '+(rep+1)+'" id="representante_legal_informe_'+(rep+1)+'" name="representante_legal_informe_'+(rep+1)+'" value="'+resultData['informes'][informes]['represantes_legal'][rep]['representante_legal']+'">');
                }
            }

            
            
        });


    </script>      
    
@endsection