@extends('layouts.dashboard')
@section('css')
    <link href="{{ asset('css/receptores/create.css') }}" rel="stylesheet">
@endsection


@section('js')
    <script src="{{ asset('js/select2.js') }}"></script>
    <script src="{{ asset('js/cfdi/decimal.min.js') }}"></script>
    <script src="{{ asset('js/global_variable.js') }}"></script>
    <script src="{{ asset('js/cfdi/cfdi_relacionado.js?version=' . version_js_cfdi()) }}"></script>
    {{-- <script src="{{ asset('js/complementoPagos/pagos.js?version='.version_js_cfdi()) }}"></script> --}}
    <script src="{{ asset('js/complementoPagos/pagos_table.js?version=' . version_js_cfdi()) }}"></script>
    <script src="{{ asset('js/complementoPagos/pagos_operaciones.js?version=' . version_js_cfdi()) }}"></script>
    <script src="{{ asset('js/complementoPagos/parcialidad.js?version=' . version_js_cfdi()) }}"></script>
    <script src="{{ asset('js/complementoPagos/public_general.js?version=' . version_js_cfdi()) }}"></script>
    <script src="{{ asset('js/complementoPagos/impuestos_dr.js?version=' . version_js_cfdi()) }}"></script>
    <script src="{{ asset('js/complementoPagos/impuestos_p.js?version=' . version_js_cfdi()) }}"></script>
    <script src="{{ asset('js/cfdi/folios.js?version=' . version_js_cfdi()) }}"></script>
@endsection

@section('content')
    <style>
        span.select2-selection.select2-selection--single {
            height: calc(1.8rem + 2px);
            border: 1px solid #ced4da;
        }

        .select2-selection__placeholder {
            font-size: 0.7rem;
        }

        .select2-search__field {
            font-size: 0.7rem;
        }

        .select2-selection__arrow {
            display: none;
        }

        .select-catalogo-dropdown {
            background-color: white;
            border: 1px solid #aaa;
            border-radius: 4px;
            box-sizing: border-box;
            display: block;
        }

        .select-catalogo-ul {
            height: 200px;
            overflow: auto;
        }

        .select2-results__option .select2-results__option--selectable .select2-results__option--selected .select2-results__option--highlighted .select-catalogo-li:hover {
            color: white;
            background: #1da1f2;
            font-size: 0.7rem !important;
            line-height: 2rem !important;
        }

        .hover:hover {
            background-color: #0c848c !important
        }

        .btnImpuestos {
            color: #0c848c;
            border: none;
            background-color: rgba(255, 255, 255, 0);
        }

        .btnImpuestos:hover {
            color: white;
            background-color: #0c848c;
        }

        .modal-backdrop {
            z-index: -1 !important;
        }

        input::placeholder {
            color: rgba(230, 227, 227, 0.567);
            font-style: italic;
        }
    </style>
    <script></script>

    <div class="app-page-title d-xs-none">
        <div class="page-title-wrapper">

            <div class="col-sm-12">
                <div class="page-header float-right">
                    <nav class="" aria-label=" breadcrumb">
                        <ol class="breadcrumb text-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('cfdi.index') }}">Comprobantes</a></li>
                            <li class="active breadcrumb-item" aria-current="page"> <strong
                                    class="font_montserrat_negritas span_primario_3_naranja_dinbox">Nuevo recibo de
                                    pago</strong></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="alert alert-danger alert-dismissable col-4 msg_danger"
        style="text-align: center;margin: auto;margin-bottom: 1rem;display:none">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong id="msg_danger">La factura ya esta pagada en su totalidad, no se puede agregar nueva parcialidad.</strong>
    </div>
    <div class="content">
        <form action="{{ url('/pagos') }}" method="POST" id="form_comprobante" autocomplete="off">
            @csrf
            <div class="animated fadeIn">
                <div class="row datos-generales" style="font-size: 14px; display: flex;">
                    <div class="col-lg-4">
                        <div class="loader-wrapper d-flex justify-content-center align-items-center" id="loader_Inf_cliente"
                            style="width: 100%;height: 77vh;position: absolute;opacity: 0;z-index: -1;">
                            <div class="loader">
                                <div class="ball-grid-pulse">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="card" id="card_info_cliente">
                            <div class="card-header">
                                Datos del receptor
                            </div>
                            <div class="card-body card-block">
                                <div class="row form-group">
                                    <div class="col col-md-3"><label for="select" class=" form-control-label">R.F.C.
                                        </label></div>
                                    <div class="col col-md-9">
                                        <input type="text" id="txt_rfc" name="txt_rfc"
                                            placeholder="Escriba el RFC del cliente" class="form-control" minlength="12"
                                            maxlength="13" autocomplete="off" readonly
                                            value="{{ $comprobante_padre->rfc_receptor }}">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-6 col-md-3"><label for="select" class=" form-control-label">Cliente
                                            <span class="color-red " style="font-size: 10px;">*</span>
                                        </label></div>
                                    <div class="col-6 col-md-9">
                                        <select name="cbx_receptor" id="cbx_receptor" class="form-control" readonly>
                                            <option value="{{ $comprobante_padre->id_receptor }}"
                                                razon="{{ $comprobante_padre->razon_social_r }}"
                                                rfc="{{ $comprobante_padre->rfc_receptor }}" readonly>
                                                {{ $comprobante_padre->razon_social_r }} </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row form-group" id="div_boton_publico" style="display:none;">
                                    <div class="col col-md-3">
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <button type="button" class="col-md-12 btn btn-primary" onclick="abir_modal_p_g()">
                                            Ver configuración</button>
                                    </div>
                                </div>
                                <div class="row form-group" id="div_regimenFiscal" style="display: flex;">
                                    <div class="col col-md-3"><label for="text-input" class=" form-control-label">Regimen
                                            físcal</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <select name="cbx_regimenFiscal_receptor" id="cbx_regimenFiscal_receptor"
                                            class="form-control" readonly>
                                            <option value="{{ $comprobante_padre->c_RegimenFiscalRec }}" readonly>
                                                {{ $comprobante_padre->clave_regimen_r }}
                                            </option>
                                        </select>
                                        <input type="hidden" name="codigo_postal_receptor" id="codigo_postal_receptor"
                                            value="{{ $comprobante_padre->cp_lugar_exp_rec }}">
                                        <input type="hidden" name="razon_social_receptor" id="razon_social_receptor"
                                            value="{{ $comprobante_padre->razon_social_r }}">
                                    </div>
                                </div>
                                <div class="row form-group" id="div_domicilio_Expedido_cliente" style="display: flex;">
                                    <div class="col col-md-3"><label for="text-input" class=" form-control-label">Domicilio
                                            del cliente</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <select name="cbx_domicilio_expedido_cliente" id="cbx_domicilio_expedido_cliente"
                                            class="form-control" readonly>
                                            <option value="{{ $comprobante_padre->id_mat_suc }}" readonly>
                                                {{ $comprobante_padre->mat_suc_r }}</option>
                                        </select>
                                    </div>
                                </div>
                                <input type="hidden" name="id_receptor" id="id_receptor"
                                    value="{{ $comprobante_padre->id_receptor }}">
                                <input type="hidden" name="domicilio_fiscal_receptor" id="domicilio_fiscal_receptor"
                                    value="{{ $comprobante_padre->cp_lugar_exp_rec }}">
                                <input type="hidden" name="slc_periodicidad" id="slc_periodicidad" value="">
                                <input type="hidden" name="slc_meses" id="slc_meses">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 mb-4">
                        <div class="card mb-3">
                            <div class="card-header">
                                Información del comprobante al que se relaciona el pago
                            </div>
                            <div class="card-body">
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <label for="text-input" class=" form-control-label ">Folio fiscal original:
                                            {{-- <span class="float-right" id="uuid_original"></span> --}}
                                        </label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" required id="uuid_original" name="uuid_original" readonly
                                            class="form-control text-right" value="{{ $comprobante_padre->uuid }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="text-input" class=" form-control-label">Fecha del folio fiscal
                                            original:
                                            {{-- <span class="float-right" id="fecha_original"></span> --}}
                                        </label>
                                    </div>
                                    <div class="col-md-3">
                                        <input class="form-control text-right" type="text" readonly
                                            name="fecha_original" id="fecha_original"
                                            value="{{ $comprobante_padre->fecha_timbrado }}">
                                    </div>


                                </div>
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <label for="text-input" class=" form-control-label">UUID:
                                            {{-- <span id="parcialidad_pagar"></span> --}}
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input class="form-control text-right " type="text" name="uuid_rep"
                                            id="uuid_rep" placeholder="UUID: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <label for="text-input" class=" form-control-label">Parcialidad:
                                            {{-- <span id="parcialidad_pagar"></span> --}}
                                        </label>
                                    </div>
                                    <div class="col-md-3">
                                        <input class="form-control text-right " type="text" name="parcialidad_pagar"
                                            id="parcialidad_pagar"
                                            value="@php if(count($comprobante_hijos)>0){echo ((int)$comprobante_hijos[count($comprobante_hijos)-1]->parcialidad)+1;}else{echo 1;} @endphp">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="text-input" class=" form-control-label">Monto original
                                        </label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" id="monto_original" name="monto_original" readonly
                                            class="form-control text-right" value="$ {{ $comprobante_padre->total }}">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <label for="text-input" class=" form-control-label">Monto pendiente
                                        </label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" id="monto_pendiente" name="monto_pendiente"
                                            class="form-control text-right">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="text-input" class=" form-control-label">Monto a pagar
                                        </label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" id="monto_a_pagar" name="monto_a_pagar"
                                            class="form-control text-right" value="$ 00.00">
                                    </div>
                                </div>
                                <div class="row form-group">

                                    <div class="col-md-9">
                                        <label for="text-input" class=" form-control-label">Saldo insoluto
                                        </label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" id="monto_restante" name="monto_restante"
                                            class="form-control text-right widget-numbers text-success read_only">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div>

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

                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">Notas del comprobante</div>
                            <div class="card-body card-block">
                                <div class="row form-group">
                                    <div class="col col-md-2">
                                        <label for="text-input" class=" form-control-label">Notas
                                        </label>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <textarea onblur="_ClientesP.base64(this,xtxt);" name="txt_notaPublica" id="txt_notaPublica" rows="3"
                                            class="form-control"
                                            placeholder="Si desea agregar información adicional, comentarios u observaciones al comprobante que solo puedan visualizarse en el PDF, deberá ingresarlo en este campo."></textarea>
                                    </div>
                                    <div class="col col-md-2">
                                        <label for="text-input" class=" form-control-label">Notas Internas
                                        </label>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <textarea onblur="_ClientesP.base64(this,xtxt);" name="txt_notaInterna" id="txt_notaInterna" rows="3"
                                            placeholder="" class="form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 accion_btns" style="margin-bottom: 20px; text-align:center;">
                        <button type="button" class="mb-2 mr-2 btn-icon btn btn-primary"
                            onclick="_ClientesP.validate(this);" id="Precomprobante" name="Precomprobante"
                            value="Precomprobante">
                            <i class="fa fa-lock fa-save btn-icon-wrapper"> </i>
                            Añadir pago
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection