@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">Pago de oficina</li>
</ol>
<div class="row">
    <div class="col-12 col-xl-6">
        <h1 class="page-title">Crea un nuevo<span class="fw-semi-bold"> pago de oficina</span></h1>
    </div>
</div>

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

@include('flash::message')

<div class="clearfix"></div>
<section class="widget" style="padding: 20px 20px 0px;">
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
            <div class="row" >
                <div class="col-lg-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 class_border_pago">
                    <h4 style="color:#495057; font-size:14px;"> Búsqueda: </h4>
                    <label class="labels">Selecciona una opción de búsqueda:</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 class="input-group-append">
                            <button id="btnSearch" type="button" class="btn btn-danger" style="background-color:transparent!important"><i class="fa fa-search"></i></button>
                        </div> -->
                    </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 50px 30px ">
                    <h4 style="color:#495057; font-size:14px;">Resultado:</h4>
                    <div id="lista_prestamos" class="row"></div>
                    <a href="#" id="btnPagos" class="btn5 btnImage"  data-toggle="tooltip" title="Selecciona a una persona para ajustar sus pagos"  style="margin:20px 10px 0 0;float:left!important">
                    Pagar
                    </a>
                </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">
                        <h3 class="modal-title" id="exampleModalLongTitle">¡Realizar el pago!</h3>
                        <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">
                            <div class="col-md-6 col-12  justify-content-center">
                                <div>
                                    <input type="radio" name="pago_radio" id="pago_esperado" value="">
                                    <label for="pago_radio" class="labels">Pago esperado:</label><div id="txt_pago_esperado" style="padding:5px 0 10px;"></div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12  justify-content-center">
                                <div>
                                    <input type="radio" name="pago_radio" id="pago_esperado_mas_cargo" value="">
                                    <label for="pago_radio" class="labels">Pago esperado más cargos:</label> <div id="txt_pago_esperado_mas_cargo" style="padding:5px 0 10px;"></div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12  justify-content-center">
                                <div>
                                    <input type="radio" name="pago_radio" id="pago_semanal" value="">
                                    <label for="pago_radio" class="labels">Pago semanal:</label><div id="txt_pago_semanal" style="padding:5px 0 10px;"></div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12  justify-content-center">
                                <div>
                                    <input type="radio" name="pago_radio" id="abierto" value="abierto" checked>
                                    <label for="pago_radio" class="labels">Ingresar una cantidad</label>
                                </div>
                                <div class="input-group pull-center" style="padding:5px 0 10px;">
                                    <span class="input-group-prepend">
                                        <span class="input-group-text labels2" style="padding-right:5px;">$ </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 style="display:none;" >
                                    <input type="date" name="fecha_actual" id="fecha_actual">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btnSucces btn2" data-prestamo="" id="aplica_pago">PAGAR</button>
                        <button type="button" class="btnDanger btn1" data-dismiss="modal">Cancelar</button>
                    </div>
                    <form action="{{ url('agregar_pago') }}" id="enviarPago" method="post" class="d-none">
                        @csrf
                        <input type="hidden" name="pago_request" id="pago_request">
                        <input type="hidden" name="prestamo_id" id="prestamo_id">
                        <input type="hidden" name="fecha_actual" id="fecha_actual">
                        <input type="hidden" name="tipo_pago" id="tipo_pago">
                        <input type="hidden" name="comentario" id="comentario" value=" ">
                        <input type="hidden" name="redirect" id="redirect" value="administrativo">
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<div id="url_estatica" data-url="{{ url('/') }}"></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/pago_oficina.js') !!}"></script>
@endsection