@extends('layout.master')
@section('parentPageTitle', 'Cotizaciones')
@section('title', 'Cotizaciones')
@section('page-style')
<link rel="stylesheet" href="{{asset('assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">
<link rel="stylesheet" href="{{asset('assets/bootstrap.min.css')}}">

<link rel="stylesheet" href="{{asset('assets/plugins/bootstrap-select/css/bootstrap-select.css')}}">
<style type="text/css">
.caret{    
    display: none;
}  
</style>
@stop


@section('content')

    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card">
                <!-- <div class="header">
                    <h2 align="center"><strong>Información para la moneda</strong></h2>

                </div> -->
                <div class="body">
                    <form action="#" id="formIngresarCotizacion" method="post">

                        
                        {{ csrf_field() }}

                        <div class="row clearfix">
                            <div class="col-sm-12" >
                                <h5 style="text-transform: uppercase;">{{$dataPaciente[0]->nombre}} {{$dataPaciente[0]->apaterno}} {{$dataPaciente[0]->amaterno}}</h5>
                                    <label>{{$dataPaciente[0]->rut}}</label>
                                <div class="tab-content m-t-10">
                                    <div class="tab-pane table-responsive active" id="All">
                                        <table class="table m-b-0 table-hover" id="tabla3" name="tabla3">
                                            <thead>
                                                <tr class="ui-widget-header">
                                                    <th>Piezas Dentales</th>
                                                    <th>Fecha</th>
                                                    <th>Vigencia</th>
                                                    <th>Estado</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($dataCotizaciones as $coti)
                                                                                                @endforeach  



                                            </tbody>
                                            <tfoot></tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>                                       
                        </div>
                        <div id="visualizarCotizacion" name="visualizarCotizacion"><hr>
                            <div class="row clearfix" align="center">
                                <div class="col-sm-12">
                                    <h3>Cotización <div id="textoIdCoti" name="textoIdCoti"></div></h3>

                                    <!-- Odontograma -->
                                    <img src="{{asset('assets/images/odonto2.png')}}" width="512" class="mapita1" usemap="#simple1">
                                    <map name="simple1">

                                    <!-- maxilar superior -->

                                    <area shape="poly" coords="10,15,41,15,41,80,10,80" alt="Link" title="16" id="diente16">
                                    <area shape="poly" coords="43,15,73,15,73,80,43,80" alt="Link" title="15" id="diente15">
                                    <area shape="poly" coords="75,15,106,15,106,80,75,80" alt="Link" title="14" id="diente14">
                                    <area shape="poly" coords="110,13,130,13,130,80,110,80" alt="Link" title="13" id="diente13">
                                    <area shape="poly" coords="140,13,158,13,158,80,140,80" alt="Link" title="12" id="diente12">
                                    <area shape="poly" coords="171,11,189,11,189,80,171,80" alt="Link" title="11" id="diente11">
                                    <area shape="poly" coords="200,15,217,15,217,80,200,80" alt="Link" title="10" id="diente10">      
                                    <area shape="poly" coords="229,11,251,11,251,80,229,80" alt="Link" title="9" id="diente9">
                                    <area shape="poly" coords="257,11,278,11,278,80,257,80" alt="Link" title="8" id="diente8">
                                    <area shape="poly" coords="285,15,302,15,302,80,285,80" alt="Link" title="7" id="diente7">
                                    <area shape="poly" coords="316,11,333,11,333,80,316,80" alt="Link" title="6" id="diente6">
                                    <area shape="poly" coords="344,15,362,15,362,80,344,80" alt="Link" title="5" id="diente5">
                                    <area shape="poly" coords="374,15,393,15,393,80,374,80" alt="Link" title="4" id="diente4">
                                    <area shape="poly" coords="404,15,434,15,434,80,404,80" alt="Link" title="3" id="diente3">
                                    <area shape="poly" coords="438,15,468,15,468,80,438,80" alt="Link" title="2" id="diente2">
                                    <area shape="poly" coords="472,15,500,15,500,80,472,80" alt="Link" title="1" id="diente1"> 

                                    <!-- maxilar inferior -->

                                    <area shape="poly" coords="10,135,41,135,41,190,10,190" alt="Link" title="32" id="diente32">
                                    <area shape="poly" coords="43,135,73,135,73,190,43,190" alt="Link" title="31" id="diente31">
                                    <area shape="poly" coords="75,135,106,135,106,190,75,190" alt="Link" title="30" id="diente30">
                                    <area shape="poly" coords="110,135,130,135,130,190,110,190" alt="Link" title="29" id="diente29">
                                    <area shape="poly" coords="140,135,158,135,158,190,140,190" alt="Link" title="28" id="diente28">
                                    <area shape="poly" coords="171,135,189,135,189,190,171,190" alt="Link" title="27" id="diente27">
                                    <area shape="poly" coords="200,135,217,135,217,190,200,190" alt="Link" title="26" id="diente26">
                                    <area shape="poly" coords="229,135,251,135,251,190,229,190" alt="Link" title="25" id="diente25">
                                    <area shape="poly" coords="257,135,278,135,278,190,257,190" alt="Link" title="24" id="diente24">
                                    <area shape="poly" coords="285,135,302,135,302,190,285,190" alt="Link" title="23" id="diente23">
                                    <area shape="poly" coords="316,135,333,135,333,190,316,190" alt="Link" title="22" id="diente22">
                                    <area shape="poly" coords="344,135,362,135,362,190,344,190" alt="Link" title="21" id="diente21">
                                    <area shape="poly" coords="374,135,393,135,393,190,374,190" alt="Link" title="20" id="diente20">
                                    <area shape="poly" coords="404,135,434,135,434,190,404,190" alt="Link" title="19" id="diente19">
                                    <area shape="poly" coords="438,135,468,135,468,190,438,190" alt="Link" title="18"  id="diente18">
                                    <area shape="poly" coords="472,135,500,135,500,190,472,190" alt="Link" title="17" id="diente17" > 

                                    </map>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-sm-12">
                                    <table class="table m-b-0 table-hover" id="tablaCotizacion" name="tablaCotizacion">
                                        <thead>
                                            <tr>
                                                <th>Nombre del servicio</th>
                                                <th>N° Pieza dental</th>
                                                <th>Cantidad</th>
                                                <th>Valor</th>
                                                <th>Descuento</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                        <tfoot></tfoot>
                                        </table>
                                </div>
                            </div>


                            <div class="row clearfix">
                                <div class="col-sm-3">
                                    <div class="form-group" > 
                                        <p style="font-size: 18px;">Valor total:<br>Total de descuentos:
                                        </p>
                                    </div>        
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group" > 
                                        <p style="font-size: 18px;">
                                            <div id="textoValorTotal" name="textoValorTotal"></div>
                                            <div id="textoDescTotal" name="textoDescTotal"></div>
                                        </p>
                                    </div>
                                </div>                                       
                            </div>
                        </div>

                        


                        

                        <div class="row clearfix" align="right">          
                            <div class="col-sm-12">

                                <button type="button" class="btn btn-default btn-round btn-simple" onclick="window.history.back()">Volver al listado</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div id="alerta-dialog" title="BRIX"> 
        <form>
            <fieldset>
                <p id="alerta-p"></p>
            </fieldset>
        </form>
    </div>




@stop

@section('page-script')
<script src="{{asset('assets/bundles/datatablescripts.bundle.js')}}"></script>
<script src="{{asset('assets/jquery-ui.js')}}"></script>
<script src="{{asset('assets/js/maphilight/jquery.maphilight.js')}}"></script>
<script>

$("#visualizarCotizacion").hide();

$(".verCotizacion").click(function(){ 

    $('.mapita1').maphilight(); 

    var token = $('meta[name="csrf-token"]').attr('content');
    var url='ajax_mostrar_cotizacion';
    var url2='ajax_mostrar_detalle_cotizacion';
    var data={"id" : this.id};
    var idcotizacion = this.id;
    var dataCotizacion, dataDetalleCotizacion, habBtnFT=0;

    //limpia el odontograma:
    var dataAreasClean={"alwaysOn" : false}; 
    for (var k = 1; k <= 32; k++) {
        $('#diente'+k).data('maphilight', dataAreasClean).trigger('alwaysOn.maphilight');
    }
    

    $.ajax({
        type:'POST',
        url: url,
        data: data,
        headers: {
            'X-CSRF-TOKEN': token
        },
        success:function(data){
            //console.log(data);
            dataCotizacion=data;                
            $('#textoIdCoti').empty();
            $("#textoIdCoti").append('<label>'+data[0].updated_at+'</label>');
        }
    });  

    $.ajax({
        type:'POST',
        url: url2,
        data: data,
        headers: {
            'X-CSRF-TOKEN': token
        },
        success:function(data){
            //console.log(data); 
            dataDetalleCotizacion=data;
            $('#tablaCotizacion > tbody').empty();
            $("#textoValorTotal").empty();
            $("#textoDescTotal").empty();
            var dataAreas={"alwaysOn" : false}; 
            var valorTotal=0, descuentoTotal=0;                

            for (var i = 0; i < data.length; i++) {
                //data[i].;

                var nombreServicio="";
                if(data[i].idservicio!=null){
                    nombreServicio=data[i].nombre_servicio;
                }

                if(data[i].idsubservicio!=null){
                    nombreServicio=nombreServicio+" => "+data[i].nombre_subservicio;
                }

                if(data[i].iddetallesubserv!=null){
                    nombreServicio=nombreServicio+" => "+data[i].nombre_detalle_subservicio;
                }

                if(data[i].otroservicio!=null){
                    if(nombreServicio!=""){
                        nombreServicio=nombreServicio+" => "+data[i].otroservicio;
                    }else{
                        nombreServicio=data[i].otroservicio;
                    }
                    
                }

                //echo $nombreServicio;

                var valorUnitario=0, cantidadx=1, descuentox=0, res1=0, piezadental_t;

                if(data[i].valor!=null){
                    valorUnitario=data[i].valor;
                }

                if(data[i].cantidad!=null){
                    cantidadx=data[i].cantidad;
                }

                if(data[i].descuento!=null){
                    descuentox=data[i].descuento;
                }

                if(data[i].piezadental==null){
                    piezadental_t="";
                }else{
                    piezadental_t=data[i].piezadental;
                }


                valorUnitario=valorUnitario-descuentox;

                if(valorUnitario<0){
                    valorUnitario=0;
                }

                res1=valorUnitario*cantidadx;
                valorTotal=valorTotal+res1;
                descuentoTotal=descuentoTotal+descuentox;


                $('#tablaCotizacion > tbody').append('<tr><td>'+nombreServicio+'</td><td>'+piezadental_t+'</td><td>'+cantidadx+'</td><td>'+number_format(data[i].valor,0)+'</td><td>'+number_format(descuentox,0)+'</td></tr>');

                dataAreas={"alwaysOn" : true}; 

                if(data[i].piezadental>0){
                    $('#diente'+data[i].piezadental).data('maphilight', dataAreas).trigger('alwaysOn.maphilight');
                    //console.log('#diente'+data[i].piezadental);
                }
            }


            
            $("#textoValorTotal").append('<label>'+number_format(valorTotal,0)+'</label>');
            $("#textoDescTotal").append('<label>'+number_format(descuentoTotal,0)+'</label>');
            
            $("#idcoti_val").val(idcotizacion);

        }
    });  

    $("#visualizarCotizacion").show();

    
    


});


function number_format(amount, decimals) {

    amount += ''; // por si pasan un numero en vez de un string
    amount = parseFloat(amount.replace(/[^0-9\.]/g, '')); // elimino cualquier cosa que no sea numero o punto

    decimals = decimals || 0; // por si la variable no fue fue pasada

    // si no es un numero o es igual a cero retorno el mismo cero
    if (isNaN(amount) || amount === 0) 
        return parseFloat(0).toFixed(decimals);

    // si es mayor o menor que cero retorno el valor formateado como numero
    amount = '' + amount.toFixed(decimals);

    var amount_parts = amount.split('.'),
        regexp = /(\d+)(\d{3})/;

    while (regexp.test(amount_parts[0]))
        amount_parts[0] = amount_parts[0].replace(regexp, '$1' + '.' + '$2');

    return amount_parts.join('.');
}


$(document).ready(function() {

    $('#tabla3').DataTable({
        "language": {
            "lengthMenu": "Listar _MENU_ ",
            "zeroRecords": "Aún no tiene registros",
            "info": "Página _PAGE_ de _PAGES_",
            "infoEmpty": "",
            "Search": "Buscar",
            "infoFiltered": "(filtered from _MAX_ total records)",
            "search": "Buscar"
        },
        "order": [[ 0, "desc" ]]
    });

});
</script>
@stop