<div class="container" id="appCMPPedidosVer" v-cloak>
    <input type="hidden" value="<?= $proveedor['prov_id'] ?>" id="id_proveedor_fac">
    <input type="hidden" value="<?= $factura['cmppe_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>
                                                <a href="#"><span class="fa fa-edit" @click.prevent="modal_cambiar_proveedor"></span></a>
                                            </h4>
                                        </div>
                                        <div class="col-12 col-lg-10">
                                            <h5 class="list-group-item-title text-warning">
                                                COMPRAS - PEDIDO
                                            </h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-7 p-0">
                        <div class="row">
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="fecha">Fecha</label>
                                    <input type="date" id="fecha" class="form-control" value="<?= date('Y-m-d', strtotime($factura['cmppe_fecha'])) ?>">
                                </div>
                            </div>
                            <div class="col-3">
                                <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['cmppe_almid'] == $row['alm_id']) ? 'selected' : '' ?>><?= $row['alm_nombre'] ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="divisa">Divisa</label>
                                    <select id="divisa" v-model="divisa_predeterminada" @change="predeterminarDivisa" class="form-control">
                                        <?php foreach ($divisas as $row) : ?>
                                            <option value="<?= $row['div_id'] ?>"><?= $row['div_nombre'] ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="serie">Serie</label>
                                    <select id="serie" v-model="serie_predeterminada" class="form-control">
                                        <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 class="col-6" style="margin-top:40px;">
                                <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="<?= url('productos') ?>" target="_blank" style="max-height: 2rem;"><i class="fas fa-reply"></i>Productos </a>
                            </div>
                        </div>
                    </div>
                </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">Pedido <span class="badge badge-info ml-2"> #<?= $factura['cmppe_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" href="#" @click.prevent="modalCorreo">
                            <i class="far fa-envelope"></i> Enviar Pedido
                        </a>
                        <a class="nav-item nav-link" target="_blank"  @click.prevent="modalImprimir" href="#">
                            <i class="fas fa-print"></i> Imprimir
                        </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>
                        <a class="nav-item nav-link" data-toggle="tab" href="#nav-rutadocumento" role="tab" aria-controls="nav-rutadocumento" aria-selected="false">Ruta documento</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-between">
                                        <div class="col pl-0">
                                            <div class="input-icon">
                                                <span class="input-icon-addon" data-toggle="modal" data-target="#modal-precio-global">
                                                    <i :class="'fa fa-search'"></i>
                                                </span>
                                                <input type="text" id="buscador" class="form-control" placeholder="buscar productos" @input="buscarProducto" @keydown="seleccionarProducto">
                                            </div>
                                        </div>
                                        <a class="btn btn-info btn-round btn-border btn-sm mr-2" href="#" @click.prevent="modalConvertirDocumento()" style="max-height: 2rem;"><i class="fas fa-exchange-alt"></i> Convertir</a>
                                        <button type="button" class="btn btn-primary btn-round mr-2" disabled v-if="cargando">
                                            <i class="loader loader-info"></i>
                                        </button>
                                        <button type="button" class="btn btn-info btn-round btn-sm mr-2" v-else @click="guardarFactura()" style="max-height: 2rem;"> Guardar</button>
                                        <?php if ($anular_doc) : ?>
                                            <button type="button" class="btn btn-danger btn-sm btn-round mr-2" @click="modalAnular" style="max-height: 2rem;">Anular</button>
                                        <?php endif; ?>
                                    </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>Costo</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="#" @click.prevent="eliminarProducto(row.unique)">
                                                            <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" @keyup.prevent="actualizarDescripcion(row.unique, $event)"></td>
                                                    <td width="13%"><input type="text" class="form-control text-right" style="border-color: #bbb; background-color:#fff;" v-model="row.costo" v-money="money" @keyup.prevent="actualizarPrecio(row.unique, $event)"></td>
                                                    <td width="7%"><input type="text" class="form-control text-right" style="border-color: #bbb; background-color:#fff;" v-model="row.cantidad" @keyup.prevent="actualizarCantidad(row.id, $event)"></td>
                                                    <td width="7%"><input type="text" class="form-control text-right" style="border-color: #bbb; background-color:#fff;" v-model="row.descuento" @keyup.prevent="aplicarDescuentoProducto(row.unique, $event)"></td>
                                                    <td width="12%">{{ moneda(row.neto, money.locale, money.prefix, money.precision) }}</td>
                                                    <td width="7%">
                                                        <select id="impuestos" class="form-control text-center input-border-bottom" v-model="row.id_iva" @change="aplicarNuevoIva(row.unique, row.id_iva)">
                                                            <?php foreach ($impuestos as $row) : ?>
                                                                <option value="<?= $row['imp_id'] ?>"><?= $row['imp_descripcion'] ?></option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </td>
                                                    <td width="12%" class="text-right">{{ moneda(row.total, money.locale, money.prefix, money.precision) }}</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%">{{ moneda(subtotal, money.locale, money.prefix, money.precision) }}</td>
                                                <td width="20%"><input type="text" class="form-control text-right" style="border-color: #bbb; background-color:#fff;" v-model="descuento" @keyup="aplicarDescuentoAdicional"></td>
                                                <td width="20%">{{ moneda(neto, money.locale, money.prefix, money.precision) }}</td>
                                                <td width="20%">{{ iva }}</td>
                                                <td width="20%">{{ moneda(total, money.locale, money.prefix, money.precision) }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3 row-card-no-pd">
                            <div class="col">
                                <div class="form-group form-group-default">
                                    <label>Observaciones</label>
                                    <textarea class="form-control" rows="3" v-model="observaciones"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="nav-detalles" role="tabpanel" aria-labelledby="nav-detalles-tab">
                        <form action="#" autocomplete="off" @submit.prevent="actualizarDetalles">
                            <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="prov_tipoidfiscal">Tipo de documento:</label>
                                                <select id="prov_tipoidfiscal" 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="prov_cifnif"># Documento:</label>
                                                <input type="text" id="prov_cifnif" class="form-control" value="<?= $proveedor['prov_cifnif'] ?>">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group form-group-default">
                                                <label for="prov_razonsocial">Razón social:</label>
                                                <input type="text" id="prov_razonsocial" 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="prov_paisid">Pais:</label>
                                                <select id="prov_paisid" 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="prov_estado">Estado:</label>
                                                <input type="text" id="prov_estado" class="form-control" value="<?= $proveedor['prov_estado'] ?>">
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="prov_ciudad">Ciudad:</label>
                                                <input type="text" id="prov_ciudad" class="form-control" value="<?= $proveedor['prov_ciudad'] ?>">
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-group-default">
                                                <label for="prov_codigo_postal">Código postal:</label>
                                                <input type="text" id="prov_codigo_postal" 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="prov_direccion">Dirección:</label>
                                                <input type="text" id="prov_direccion" class="form-control" value="<?= $proveedor['prov_direccion'] ?>">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col-12 text-right">
                                            <button type="button" class="btn btn-info btn-border btn-round btn-sm" disabled v-if="cargando">
                                                <span class="btn-label"><i class="loader loader-info"></i></span>
                                            </button>
                                            <button type="submit" class="btn btn-info btn-border btn-round btn-sm" v-else>
                                                <span class="btn-label"><i class="fa fa-edit"></i></span> Actualizar
                                            </button>
                                        </div>
                                    </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="<?= $empleado['einfo_apellidos']; ?> - <?= $empleado['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" @submit.prevent="actualizarEnvio">
                            <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['cmppe_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['cmppe_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['cmppe_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['cmppe_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['cmppe_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['cmppe_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['cmppe_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['cmppe_env_direccion'] ?>">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-check">
                                        <label class="form-check-label">
                                            <input class="form-check-input" type="checkbox" <?= $factura['cmppe_env_asegurado'] ? 'checked' : '' ?> id="env_asegurado">
                                            <span class="form-check-sign">Envio asegurado SI/NO</span>
                                        </label>
                                    </div>
                                    <div class="form-row">
                                        <div class="col-12 text-right">
                                            <button type="button" class="btn btn-info btn-border btn-round btn-sm" disabled v-if="cargando">
                                                <span class="btn-label"><i class="loader loader-info"></i></span>
                                            </button>
                                            <button type="submit" class="btn btn-info btn-border btn-round btn-sm" v-else>
                                                <span class="btn-label"><i class="fa fa-edit"></i></span> Actualizar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="nav-documentos" role="tabpanel" aria-labelledby="nav-documentos">
                        <form action="#" enctype="multipart/form-data" autocomplete="off" @submit.prevent="enviarDocumento">
                            <div class="form-group">
                                <label for="doc_descripcion">Descripción</label>
                                <input type="text" class="form-control" placeholder="Descripcion" maxlength="50" v-model="formDocumentos.descripcion">
                            </div>
                            <div class="form-group">
                                <label for="doc_archivo">Documento</label>
                                <input type="file" class="form-control" id="file" ref="file" v-on:change="handleFileUpload()" accept=".jpg,.png,.pdf">
                                <small class="form-text text-muted">Solo archivos con formato PDF, PNG o JPG y maximo de 1MB</small>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-info btn-border" disabled v-if="cargando_documento">
                                    <span class="btn-label"><i class="loader loader-info"></i></span>
                                </button>
                                <button v-else type="submit" class="btn btn-info btn-border">Enviar</button>
                            </div>
                        </form>
                        <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.cmpndoc_descripcion }}</td>
                                        <td>{{ row.cmpndoc_documento }}</td>
                                        <td>{{ row.cmpndoc_fecha }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane" id="nav-rutadocumento" role="tabpanel" aria-labelledby="nav-documentos">
                        <?php if (is_countable($ruta)) : ?>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Tipo de documento</th>
                                        <th>Usuario</th>
                                        <th>Descripción</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><?= $ruta['fecha'] ?></td>
                                        <td><?= $ruta['doc_prefijo'] ?></td>
                                        <td><?= $ruta['emp_username'] ?></td>
                                        <td><?= $ruta['rd_observacion'] ?></td>
                                    </tr>
                                </tbody>
                            </table>
                        <?php else : ?>
                            Documento sin conversión
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php include 'modalcorreo.php'; ?>
    <?php include 'modal_imprimir.php'; ?>
    <?php include 'app/cmpfacturaeditar/vista/modal_anular.php' ?>
</div>
<?php include 'modalconvertir.php' ?>
<link rel="stylesheet" href="<?= asset('assets/buscadorProductos.css') ?>">
<script src="<?= asset('assets/underscore-min.js') ?>"></script>
<script src="<?= asset('assets/vue-the-mask.js') ?>"></script>
<script src="<?= asset('assets/v-money.js') ?>"></script>
<script src="<?= asset('assetsvuejs/compraspedidos/ver.js') ?>"></script>