@extends('layout.master')

@section('title', 'Ficha')

@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')}}">


<style type="text/css">
.tabrow {
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 24px;
  border: 1px solid;
}
.tabrow li {
  margin: 0 10px;
  padding: 0 10px;
  background: #ECECEC;
  display: inline-block;
}

.nave{
    border: 10px;
    border-bottom: 1px transparent; 
}



.nav-tabs li a{
    border: 1px solid #ECECEC;
    border-bottom: 1px solid #fff 
}

.nav-tabs li.active a {
    border: 1px solid #00b7ff;
    border-bottom: 1px solid #fff 
}

.nav-item active {
    border-bottom: 1px solid #fff 
}


.btn-group.select .btn{
    display: none;
}
.select{
        padding: 5px;
        border-radius: 15px;
    }


.Highlighted a{
   background-color : Green !important;
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
   font-size: 12pt;
}

.ui-highlight .ui-state-default{
    background: red !important;
    border-color: red !important;
    color: white !important;
}

.ui-highlight2 .ui-state-default{
    background: green !important;
    border-color: green !important;
    color: white !important;
}






</style>

@stop

@section('content')



<meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="row clearfix">
        <div class="col-md-12">
            <div class="card patients-list" style="background-color: #ddd;">
                    <!-- Nav tabs -->

                    <div id="tabs">
                        <nav class="nave">
                        <ul class="nav nav-tabs" style="padding: 0px;">
                            <li class="nav-item menuServiciosTerminados active"style="border-bottom: 1px solid #ddd;"><a data-toggle="tab" href="#menuServiciosTerminados">Proximas citas</a></li>
                            <li class="nav-item menuPagosAbonos"style="border-bottom: 1px solid #ddd;"><a data-toggle="tab" href="#menuPagosAbonos">Pagos</a></li>  
                            <li class="nav-item menuCotizaciones"style="border-bottom: 1px solid #ddd;"><a data-toggle="tab" href="#menuCotizaciones">Cotizaciones</a></li> 
                        </ul>
                        </nav>
                    </div>

                    <div class="tab-content" style="background-color: white;">

                        <div id="menuServiciosTerminados" class="tab-pane fade in active">    
                            <div class="body">
                                <div class="row clearfix">
                                    <div class="col-sm-12">

                                        <h5>Proximas citas</h5>
                                        
                                        <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="tabla1" name="tabla1">
                                                    <thead>
                                                        <tr class="ui-widget-header">                                       
                                                            <th>Fecha</th>
                                                            <th>Hora inicio</th>
                                                            <th>Hora fin</th>
                                                            <th>Paciente</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>   

                                                        @foreach ($proxCitasAgendadas as $cita)
                                                                                                                @endforeach                                                                     
                                                    </tbody>
                                                </table>
                                            </div>


                                        </div>
                                        
                                    </div>                                  
                                </div>
                            </div>
                        </div>

                        <div id="menuPagosAbonos" class="tab-pane fade">    
                            <div class="body">
                                                                @foreach ($serviciosHechos as $servicio)
                           
                                
                                    
                                @endforeach  



                                <div class="row clearfix">
                                    <div class="col-sm-12">
                                        <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="tabla2" name="tabla2">
                                                    <thead>
                                                        <tr class="ui-widget-header">                                       
                                                            <th>Fecha del pago</th>
                                                            <th>Monto</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                                                                                @foreach ($pagos as $pp)

                                                         
                                                        <tr>
                                                            <td>28-10-2026</td>
                                                            <td>{{ moneda_chilena($pp->monto) }}</td>
                                                        </tr>
                                                        @endforeach                                                                      
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>                                  
                                </div>


                                <hr>
                                <div class="row clearfix">
                                    <div class="col-sm-3">
                                        <div class="form-group" style="font-size: 18px;"> 
                                            
                                            <p>Valor total:</p><p>Descuentos aplicados:</p><p>Total pagado:</p><p>Total Deuda:</p>                                            
                                        </div>        
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group"  style="font-size: 18px;"> 
                                           
                                            <p>0</p><p>0</p><p>0</p><p>0</p>                                        </div>
                                    </div>                                       
                                </div> 


                                     
                            </div>
                        </div>

                        

                        <div id="menuCotizaciones" class="tab-pane fade">   
                            <div class="body"> 
                                <div class="row clearfix">
                                    <div class="col-sm-12" >
                                        <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>
                        </div>

                      
                        


                        <!-- Tab panes -->
                                        
                    </div>
            </div>
        </div>
    </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 src="{{asset('assets/bootstrap.min.js')}}"></script>

<script>
$(document).ready(function() {
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });

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

    $('#tabla2').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" ]]
    });

    $('#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" ]]
    });


    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('.');
    }


    

    $(".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;   

                var fechahora_coti = data[0].updated_at.substring(0, data[0].updated_at.length - 9);

                var res = fechahora_coti.split("-");
                var diaC = res[2]+"-"+res[1]+"-"+res[0];  

                $('#textoIdCoti').empty();
                $("#textoIdCoti").append('<label>'+diaC+'</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();

        



    });
        

    


} );
</script>
@stop