@extends('layouts.app')
@section('css')
<style>
.filter-option,.filter-option-inner-inner{
margin:0px!important;
padding:3px 0!important;
}
</style>
@endsection
@section('content')
<ol class="breadcrumb">
        <li class="breadcrumb-item active class_select"><a href="{{ URL('/home') }}">Inicio</a></li>
        <li class="breadcrumb-item">Administrativos</li>
        <li class="breadcrumb-item">Ajuste de pago</li>
</ol>
<div class="row">
    <div class="col-12 col-xl-6">
        <h1 class="page-title">Ajusta el monto<span class="fw-semi-bold"> de pago</span></h1>
    </div>
</div>

<div class="clearfix"></div>

@include('flash::message')

<div class="clearfix"></div>
<section class="widget" style="padding:20px 20px 0">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        <div class="row">
            <div class="col-sm-12 class_padding">
                <div class="content_div">
                    <h4>Realiza una búsqueda por CURP, NOMBRE o TELÉFONO y asigna el pago correspondiente</h4>
                    <hr class="divider_tarjet " style="margin-top:0px; margin-bottom:0px;">
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-12"  style="padding: 20px 20px 50px 50px; border:none; border-right:1px solid #c9c9c9; ">
                <h4 style="color:#495057; font-size:14px;;"> Búsqueda</h4>
                <label class="labels"">Busca a una persona con prestamo</label>
                <select class="selectpicker form-control " data-style="btn-default"
                    data-width="100%" name="busqueda"
                    tabindex="-1" id="busqueda">
                    <option class="dropdown-item" value="0" selected disabled>seleccione una opcion de busqueda</option>
                    <option class="dropdown-item" value="curp">CURP</option>
                    <option class="dropdown-item" value="nombre">NOMBRE</option>
                    <option class="dropdown-item" value="telefono">TELÉFONO</option>
                </select>
                <label class="labels">Realiza tu búsqueda:</label>
                <div class="input-group" >
                    <input type="text" class="form-control" name="buscador_curp" id="buscador_curp" >
                </div>
                <div class="class_button_flex"  style="margin:30px 0 0;justify-content:start!important;">
                    <button id="btnSearch" type="button" class="btn1 btnDanger" style="margin:0 10px 0 0" >Buscar</button>

                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-12" style="padding: 20px 40px 0 30px;">
                <h4 style="color:#495057; font-size:14px;">Préstamos</h4>
                <div id="lista_prestamos"></div>
                <a id="btnPagos" href="#"class="btn5 btnImage"  data-toggle="tooltip" title="Selecciona a una persona para ajustar un pago" style="margin:20px 10px 0 0; float:left!important;" >Ajustar pagos</a>
            </div>
            <div class="col-sm-12" id="pagos_listado" style="padding:0">
                <div class="titutlo">
                    <h4 style="color:#495057; font-size:14px; margin:0px!important;" id="h4_pago">
                        Aquí visualizaras todo el listado de pagos del cliente: <span id="cliente_pago" style="font-size: 14px; color: #a2a2a2;font-family: 'avenir book';"></span>
                    </h4>
                </div>
                <div class="tabla_listado" >
                    <table class="table" id="tabla-prestamos" >
                    </table>
                </div>
            </div>
        </div>
        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Realizar pago</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row">
                            <label class="col-md-4  col-form-label text-md-right" for="pago">Cantidad a pagar</label>
                            <div class="col-md-7  justify-content-center">
                                <div>
                                    <label for="pago_radio">Pago esperado: <span id="txt_pago_esperado"></span></label>
                                    <input type="radio" name="pago_radio" id="pago_esperado" value="">
                                    <label for="pago_radio">Pago esperado más cargos: <span id="txt_pago_esperado_mas_cargo"></span> </label>
                                    <input type="radio" name="pago_radio" id="pago_esperado_mas_cargo" value="">
                                    <label for="pago_radio">Pago semanal: <span id="txt_pago_semanal"></span></label>
                                    <input type="radio" name="pago_radio" id="pago_semanal" value="">
                                    <label for="pago_radio">Ingresar una cantidad</label>
                                    <input type="radio" name="pago_radio" id="abierto" value="abierto" checked>
                                </div>
                                <div class="input-group pull-center">
                                    <span class="input-group-prepend">
                                        <span class="input-group-text">$</span>
                                    </span>
                                    <input id="pago" class="form-control" size="16" type="text" value="" placeholder="0.00">
                                    <span class="input-group-append">
                                        <span class="input-group-text">
                                            .00
                                        </span>
                                    </span>
                                </div>
                                <div class="">
                                    <input type="date" value="" name="fecha_actual" id="fecha_actual">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" data-prestamo="" id="aplica_pago">Aplicar pago</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div id="url_estatica" data-url="{{ url('/') }}"></div>
<div id="token" data-token='@csrf'></div>
@endsection


@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<script src="{!! asset('template') !!}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="{!! asset('js/administrativo/ajuste_pago.js') !!}"></script>
@endsection