<style>
    .table td,
    .table th {
        padding: 0 30px !important;
        height: 30px;
    }

    .scroll {
        max-height: 400px;
        width: 100%;
        padding: 0px 5px 0 5px;
        margin: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-color: rgba(103, 110, 117, 0.15) rgba(122, 128, 134, 0.05);
        scrollbar-width: thin;
    }

    .scroll::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    .scroll::-webkit-scrollbar:vertical {
        width: 6px;
    }

    .scroll::-webkit-scrollbar-thumb {
        background: #ccc;
    }
</style>
<div class="container" id="appCMPFacturaAnulada" v-cloak>
    <input type="hidden" value="<?= $proveedor['prov_id'] ?>" id="id_cliente_fac">
    <input type="hidden" value="<?= $factura['cmpn_id'] ?>" id="id_fac">
    <div class="page-inner">
        <div class="row">
            <div class="col">
                <div class="d-flex justify-content-between">
                    <div class="col-5 pl-0 row-card-no-pd mr-3" style="margin-bottom: 0; padding-top: 0; padding-bottom: 0">
                        <div class="list-group list-group-messages list-group-flush">
                            <div class="list-group-item unread">
                                <div class="list-group-item-figure">
                                    <div class="avatar">
                                        <span class="avatar-title rounded-circle border border-white bg-info"><?= strtoupper($proveedor['prov_razonsocial'][0]) ?></span>
                                    </div>
                                </div>
                                <div class="list-group-item-body pl-3 pl-md-4">
                                    <div class="row">
                                        <div class="col-12 col-lg-10">
                                            <h4 class="list-group-item-title">
                                                <span id="cabecera_cliente"> <?= $proveedor['prov_razonsocial'] ?> <?= $proveedor['prov_cifnif'] ?> </span>
                                            </h4>
                                        </div>
                                        <div class="col-12 col-lg-10">
                                            <h5 class="list-group-item-title text-warning">
                                                COMPRA - NOTA DE ENTREGA <span class="text-danger">ANULADA</span>
                                            </h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-7 p-0">
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="fecha">Fecha</label>
                                    <input type="date" id="fecha" class="form-control" value="<?= date('Y-m-d', strtotime($factura['cmpn_fecha'])) ?>" disabled>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="almacen">Almacén</label>
                                    <select id="almacen" ref="almacen_predeterminado" class="form-control" disabled>
                                        <option disabled value="">Seleccione un elemento</option>
                                        <?php foreach ($almacenes as $row) : ?>
                                            <option value="<?= $row['alm_id'] ?>" <?= ($factura['cmpn_almid'] == $row['alm_id']) ? 'selected' : '' ?>><?= $row['alm_nombre'] ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="divisa">Divisa</label>
                                    <select id="divisa" v-model="divisa_predeterminada" class="form-control" disabled>
                                        <?php foreach ($divisas as $row) : ?>
                                            <option value="<?= $row['div_id'] ?>"><?= $row['div_nombre'] ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="serie">Serie</label>
                                    <select id="serie" v-model="serie_predeterminada" class="form-control" disabled>
                                        <option disabled value="">Seleccione un elemento</option>
                                        <?php foreach ($series as $row) : ?>
                                            <option value="<?= $row['ser_id'] ?>"><?= $row['ser_descripcion'] ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group">
                    <label>DESCRIPCION DE ANULACIÓN</label>
                    <textarea class="form-control" rows="1" v-model="observaciones" disabled></textarea>
                </div>
            </div>
            <div class="col-12 mt-3">
                <nav>
                    <div class="nav nav-tabs" role="tablist">
                        <a class="nav-item nav-link active" data-toggle="tab" href="#nav-lista" role="tab" aria-controls="nav-home" aria-selected="true">Nota de Entrega <span class="badge badge-info ml-2"> #<?= $factura['cmpn_correlativo'] ?></span></a>
                        <a class="nav-item nav-link" data-toggle="tab" href="#nav-detalles" role="tab" aria-controls="nav-profile" aria-selected="false"><i class="fas fa-user-friends"></i> Detalles</a>
                        <a class="nav-item nav-link" data-toggle="tab" href="#nav-envio" role="tab" aria-controls="nav-contact" aria-selected="false"><i class="fas fa-shipping-fast"></i> Envíos</a>
                        <a class="nav-item nav-link" data-toggle="tab" href="#nav-pagos" role="tab" aria-controls="nav-pagos" aria-selected="false"><i class="fas fa-file-invoice-dollar"></i> Pagos</a>
                        <a class="nav-item nav-link" href="#" @click.prevent="modalCorreo">
                            <i class="far fa-envelope"></i> Enviar Nota de Entrega
                        </a>
                        <a class="nav-item nav-link" data-toggle="tab" href="#nav-documentos" role="tab" aria-controls="nav-documentos" aria-selected="false"><i class="fas fa-file-contract"></i> Documentos</a>
                    </div>
                </nav>
                <div class="tab-content mt-2">
                    <div class="tab-pane fade show active" id="nav-lista" role="tabpanel" aria-labelledby="nav-home-tab">
                        <div class="row row-card-no-pd">
                            <div class="col-12 mt-2">
                                <div class="col-12mt-2 mb-2" style="padding-left: 0px;">
                                    <div class="d-flex justify-content-end">
                                        <a class="btn btn-info btn-round btn-border btn-sm mr-2" href="<?= url('compras') ?>" target="_blank" style="max-height: 2rem;"><i class="fas fa-reply"></i> Compras</a>
                                        <a class="btn btn-info btn-round btn-border btn-sm mr-2" href="#" @click.prevent="modal_buscar_proveedor('cmpfactura')" style="max-height: 2rem;"><i class="fas fa-plus"></i> Nueva factura</a>
                                        <a class="btn btn-info btn-round btn-border btn-sm mr-2" href="<?= url('productos') ?>" target="_blank" style="max-height: 2rem;">Productos <i class="far fa-share-square"></i></a>
                                        <div class="dropdown d-inline mr-3 mr-md-2">
                                            <button class="btn btn-info btn-round btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="max-height: 2rem;">
                                                Imprimir
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -7px, 0px); top: 0px; left: 0px; will-change: transform;">
                                                <a class="dropdown-item" href="<?= ruta_base() ?>cmpnotaseditar/pdf/<?= $factura['cmpn_id'] ?>" target="_blank">PDF completo</a>
                                                <a class="dropdown-item" href="<?= ruta_base() ?>cmpnotaseditar/pdfMP/<?= $factura['cmpn_id'] ?>" target="_blank">PDF media pagina</a>
                                                <a class="dropdown-item" href="<?= ruta_base() ?>cmpnotaseditar/pdfFMP/<?= $factura['cmpn_id'] ?>" target="_blank">PDF pagos</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="scroll" style="height: 300px;width: 100%;padding: 0;margin: 0;overflow-y: scroll;overflow-x: hidden;">
                                    <div class="table-responsive">
                                        <table class="bg-white table-bordered-bd-black" cellspacing="1" cellpadding="1" width="100%" tabindex="2">
                                            <thead>
                                                <tr class="text-center">
                                                    <th></th>
                                                    <th>Código</th>
                                                    <th>Artículo</th>
                                                    <th>Precio</th>
                                                    <th>Cantidad</th>
                                                    <th>% Dcto.</th>
                                                    <th>Neto</th>
                                                    <th>IVA</th>
                                                    <th>Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="row in carrito" class="text-right">
                                                    <td class="text-center">
                                                        <a href="#">
                                                            <i class="fa fa-trash text-danger"></i>
                                                        </a>
                                                    </td>
                                                    <td class="text-center">{{ row.codigo }}</td>
                                                    <td><input type="text" class="form-control text-left" style="border-color: #bbb; background-color:#fff;" v-model="row.nombre" disabled></td>
                                                    <td width="10%"><input type="text" class="form-control text-right" style="border-color: #bbb; background-color:#fff;" v-model="row.precio" disabled></td>
                                                    <td width="7%"><input type="text" class="form-control text-right" style="border-color: #bbb; background-color:#fff;" v-model="row.cantidad" disabled></td>
                                                    <td width="10%"><input type="text" class="form-control text-right" style="border-color: #bbb; background-color:#fff;" v-model="row.descuento" disabled></td>
                                                    <td width="10%">{{ row.neto }}</td>
                                                    <td width="8%">
                                                        <select id="impuestos" class="form-control text-center input-border-bottom" v-model="row.id_iva" disabled>
                                                            <?php foreach ($impuestos as $row) : ?>
                                                                <option value="<?= $row['imp_id'] ?>"><?= $row['imp_descripcion'] ?></option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </td>
                                                    <td width="10%" class="text-right">{{ row.total }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row row-card-no-pd">
                            <div class="col-12" style="padding-left: 30%;">
                                <div class="table-responsive ">
                                    <table class="bg-white table-bordered-bd-black" cellspacing="1" cellpadding="2" width="100%" tabindex="2">
                                        <thead>
                                            <tr class="text-right">
                                                <th>Subtotal</th>
                                                <th>% Dcto.</th>
                                                <th>Neto</th>
                                                <th>IVA</th>
                                                <th>Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="text-right">
                                                <td width="20%">{{ subtotal }}</td>
                                                <td width="20%"><input type="text" class="form-control text-right" style="border-color: #bbb; background-color:#fff;" v-model="descuento" disabled></td>
                                                <td width="20%">{{ neto }}</td>
                                                <td width="20%">{{ iva }}</td>
                                                <td width="20%">{{ total }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                        </div>
                    </div>
                    <div class="tab-pane" id="nav-detalles" role="tabpanel" aria-labelledby="nav-detalles-tab">
                        <form action="#" autocomplete="off">
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-category"> <i class="fa fa-user"></i> Proveedor</div>
                                    <div class="separator-solid"></div>
                                    <div class="form-row">
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="cli_tipodoc">Tipo de documento:</label>
                                                <select id="cli_tipodoc" class="form-control">
                                                    <?php foreach ($tipos_de_documentos as $row) : ?>
                                                        <option value="<?= $row['tipodoc_id'] ?>" <?= ($proveedor['prov_tipoidfiscal'] == $row['tipodoc_id']) ? 'selected' : '' ?>><?= $row['tipodoc_codigo']; ?></option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="cli_dni"># Documento:</label>
                                                <input type="text" id="cli_dni" class="form-control" value="<?= $proveedor['prov_cifnif'] ?>">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group form-group-default">
                                                <label for="cli_razon_social">Razón social:</label>
                                                <input type="text" id="cli_razon_social" class="form-control" value="<?= $proveedor['prov_razonsocial'] ?>">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="cli_pais">País:</label>
                                                <select id="cli_pais" class="form-control">
                                                    <?php foreach ($paises as $row) : ?>
                                                        <option value="<?= $row['pa_id'] ?>" <?= ($proveedor['prov_paisid'] == $row['pa_id']) ? 'selected' : '' ?>><?= $row['pa_nombre']; ?></option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="cli_estado">Estado:</label>
                                                <input type="text" id="cli_estado" class="form-control" value="<?= $proveedor['prov_estado'] ?>">
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="cli_ciudad">Ciudad:</label>
                                                <input type="text" id="cli_ciudad" class="form-control" value="<?= $proveedor['prov_ciudad'] ?>">
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="cli_codigopostal">Código postal:</label>
                                                <input type="text" id="cli_codigopostal" class="form-control" value="<?= $proveedor['prov_codigo_postal'] ?>">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col">
                                            <div class="form-group form-group-default">
                                                <label for="cli_direccion">Dirección:</label>
                                                <input type="text" id="cli_direccion" class="form-control" value="<?= $proveedor['prov_direccion'] ?>">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                    </div>
                                    <div class="card-category"> <i class="fa fa-user-tie"></i> Empleado</div>
                                    <div class="separator-solid"></div>
                                    <div class="form-row">
                                        <div class="col-sm-6">
                                            <label for="empleado">Empleado</label>
                                            <input type="text" id="empleado" class="form-control" disabled value="<?= $_SESSION['user_data']['einfo_apellidos']; ?> - <?= $_SESSION['user_data']['einfo_email']; ?>">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="nav-envio" role="tabpanel" aria-labelledby="nav-envio-tab">
                        <form action="#" autocomplete="off">
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-row">
                                        <div class="col-sm-6">
                                            <div class="form-group form-group-default">
                                                <label for="env_nombre_opcional">Nombres:</label>
                                                <input type="text" id="env_nombre_opcional" class="form-control" placeholder="opcional" value="<?= $factura['cmpn_env_nombres'] ?>" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="env_agencia_transporte">Agencia de transporte:</label>
                                                <select id="env_agencia_transporte" class="form-control" value="<?= $factura['cmpn_env_agencia_transporte'] ?>" required>
                                                    <option value="V">V</option>
                                                    <option value="R">R</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="env_codigo_seguimiento">Código de sequimiento:</label>
                                                <input type="text" id="env_codigo_seguimiento" class="form-control" value="<?= $factura['cmpn_env_codigo_seguimiento'] ?>" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="env_pais">Pais:</label>
                                                <select id="env_pais" class="form-control">
                                                    <?php foreach ($paises as $row) : ?>
                                                        <option value="<?= $row['pa_id'] ?>" <?= ($factura['cmpn_env_pais'] == $row['pa_id']) ? 'selected' : '' ?>><?= $row['pa_nombre']; ?></option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="env_estado">Estado:</label>
                                                <input type="text" id="env_estado" class="form-control" value="<?= $factura['cmpn_env_estado'] ?>">
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="env_ciudad">Ciudad:</label>
                                                <input type="text" id="env_ciudad" class="form-control" value="<?= $factura['cmpn_env_ciudad'] ?>">
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="env_codigopostal">Código postal:</label>
                                                <input type="text" id="env_codigopostal" class="form-control" value="<?= $factura['cmpn_env_codigo_postal'] ?>">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col">
                                            <div class="form-group form-group-default">
                                                <label for="env_direccion">Dirección:</label>
                                                <input type="text" id="env_direccion" class="form-control" value="<?= $factura['cmpn_env_direccion'] ?>">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-check">
                                        <label class="form-check-label">
                                            <input class="form-check-input" type="checkbox" <?= $factura['cmpn_env_asegurado'] ? 'checked' : '' ?> id="env_asegurado" disabled>
                                            <span class="form-check-sign">Envío asegurado SI/NO</span>
                                        </label>
                                    </div>
                                    <div class="form-row">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="nav-pagos" role="tabpanel" aria-labelledby="nav-pagos-tab">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-bordered-bd-black mt-3">
                                                <thead>
                                                    <tr>
                                                        <th>Fecha</th>
                                                        <th>Divisa</th>
                                                        <th>Total</th>
                                                        <th>Restante</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>{{ factura.cmpn_fecha }}</td>
                                                        <td>{{ div_nombre_master }}</td>
                                                        <td>{{ factura.cmpn_total }}</td>
                                                        <td>{{ restante }}</td>
                                                        <td class="text-center"><a href="#">Pagar</a></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-bordered-bd-black mt-3">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th>Fecha</th>
                                                <th>Cuenta</th>
                                                <th>Método</th>
                                                <th>Monto</th>
                                                <th>factor</th>
                                                <th>Conversion</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="row in abonos" :class="[(row.fab_retiro==1) ? 'bg-danger': '']">
                                                <td class="text-center">
                                                    <a v-if="row.fab_retiro==0" href="#">
                                                        <i class="fa fa-trash text-danger"></i>
                                                    </a>
                                                </td>
                                                <td>{{ row.fab_fecha }}</td>
                                                <td>{{ row.bc_alias }} {{ row.bc_tipo }}</td>
                                                <td>{{ row.mp_nombre }}</td>
                                                <td>{{ row.fab_monto }}</td>
                                                <td>{{ row.fab_factor }}</td>
                                                <td>{{ row.fab_conversion }}</td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th class="text-right">Total</th>
                                                <th>{{ total_pagado }}</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="nav-documentos" role="tabpanel" aria-labelledby="nav-documentos">
                        <div class="row">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Descripción</th>
                                        <th>Documento</th>
                                        <th>Fecha</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="row in documentos">
                                        <td>{{ row.cmpdoc_descripcion }}</td>
                                        <td>{{ row.cmpdoc_documento }}</td>
                                        <td>{{ row.cmpdoc_fecha }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<?= ruta_base() ?>public/assets/underscore-min.js"></script>
<script src="<?= ruta_base() ?>public/assets/vue-the-mask.js"></script>
<script src="<?= ruta_base() ?>public/assets/v-money.js"></script>
<script src="<?= ruta_base() ?>public/assetsvuejs/comprasnotas/anulado.js"></script>
