@extends('layout.master')
@section('parentPageTitle', 'Pagos')
@section('title', 'Pagos')
@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="formIngresarPagos" method="post">

                        
                        {{ csrf_field() }}

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

                                @foreach ($serviciosHechos as $servicio)
                                       
                               
                                @endforeach 

                                

                                <div id="listaPagos" class="ui-widget">
                                    <h5 style="text-transform: uppercase;">{{$dataPaciente[0]->nombre}} {{$dataPaciente[0]->apaterno}} {{$dataPaciente[0]->amaterno}}</h5>
                                    <label>{{$dataPaciente[0]->rut}}</label>
                                    <div class="form-group" align="right">                                      
                                        <button type="button" class="btn btn-primary btn-round" id="btnPago2" name="btnPago2">Nuevo pago</button>
                                    </div>  
                                    <table class="table m-b-0 table-hover" id="tabla7" name="tabla7">
                                        <thead>
                                            <tr class="ui-widget-header ">
                                                <!-- <th>ID pago</th> -->

                                                <th>Fecha</th>
                                                <th>Monto</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            
                                            @foreach ($montosPagados as $monto)

                                             
                                            <tr>

                                                <td>29-07-2026</td>

                                                <td>{{ moneda_chilena($monto->monto)  }}</td>
                                            </tr>
                      
                                            @endforeach  
                                        </tbody>
                                        <tfoot></tfoot>
                                    </table>
                                </div>   

                                
                            </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:<br>Total pagado:<br>Total Deuda:                                    </p>
                                </div>        
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group" > 
                                    <p style="font-size: 18px;">
                                    $ 0<br>$ 0<br>$ 0<br>$ 0                                    </p>
                                </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="dialog-form3" title="Pago del servicio"> 
        <form enctype='multipart/form-data' method="post" id="formTipoPago" name="formTipoPago">
            <fieldset>
                <p>
                    <label>Tipo de pago:</label><br>
                    <select id="selectTipoPago" name="selectTipoPago" class="select">
                        <option value="">Seleccionar</option>
                        <option value="3">Abono</option>
                        <option value="4">Pago total</option>
                    </select>
                </p><br>
                <p>
                    <label>Monto:</label><br>
                    <input type="text" name="montoPagado" id="montoPagado" class="form-control" autocomplete="off">
                </p>

                <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
            </fieldset>
        </form>
    </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>


var dialog3 = $( "#dialog-form3" ).dialog({
    autoOpen: false,
    height: 400,
    width: 350,
    modal: true,
    buttons: {
        "Guardar": guardarTipoPago,
        Cancel: function() {
            dialog3.dialog( "close" );
        }
    },
    close: function() {
        form[ 0 ].reset();
    }
});

form = dialog3.find( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    guardarTipoPago();
  //console.log(form);
});


$("#btnPago2").click(function(){
    dialog3.dialog( "open" );        
});

function guardarTipoPago(){

    var token = $('meta[name="csrf-token"]').attr('content');
    var url='ajax_tipo_pago';
    var valida=0;

    var selectTipoPago;
    var e = document.getElementById("selectTipoPago");
    if(e!='NULL'){
        selectTipoPago = e.options[e.selectedIndex].value;
    }

    if(selectTipoPago==''){
        //alert("Debes seleccionar el tipo de pago");
        $("#alerta-dialog").dialog('open');
        $("#alerta-p").empty();
        $("#alerta-p").append("Debes seleccionar el tipo de pago");
        valida=1;
    }

    var montoPagado;
    var e = document.getElementById("montoPagado");
    if(e!='NULL'){
        montoPagado = e.value;
    } 

    if(montoPagado==''){
        $("#alerta-dialog").dialog('open');
        $("#alerta-p").empty();
        $("#alerta-p").append("Debes indicar el monto pagado");
        //alert("Debes indicar el monto pagado");
        valida=1;
    }



    var data={"selectTipoPago" : selectTipoPago, "montoPagado": montoPagado};

    if(valida==0){

        $.ajax({
            type:'POST',
            url: url,
            data: data,
            headers: {
                'X-CSRF-TOKEN': token
            },
            success:function(data){
                location.reload();
            }
        });
        dialog3.dialog( "close" );
    }
}

$(document).on('change','select[name=selectTipoPago]',function(){
    var selectTipoPago = $(this).val();
    var deuda = "0";
    if(selectTipoPago==4){
        $('#montoPagado').val(deuda);
    }
    if(selectTipoPago==3){
        $('#montoPagado').val(0);
    }
});

$('#montoPagado').on('input', function () { 
    this.value = this.value.replace(/[^0-9]/g,'');
});

$(document).ready(function() {
    $('#tabla7').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, "asc" ]]
    });
} );


</script>
@stop