<template>
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                <div class="panel p-3">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-sm-12">
                            <div class="text-center titulo-dorado">
                                <h1 class="pull-left">Mis Compras</h1>
                                <button
                                    class="btn btn-black pull-right m-1"
                                    @click="refrescar"
                                >
                                    Refrescar
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="custom-table">
                        <v-client-table
                            :data="obtener_ventas"
                            :columns="columns1"
                            :options="table_option1"
                        >
                            <template #total="item">
                                {{ currency(item.row.total) }}
                            </template>
                            <template #cancelar="item">
                                <button class="btn btn-black" @click="getVentaCanId(item.row.id)" v-show="item.row.puede_cancelar == 'si' && item.row.es_pago_tienda == 'no'">
                                    Cancelar&nbsp
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" data-v-5522efca=""><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                </button>
                                <button class="btn btn-danger" v-show="item.row.cancelado == 'si'">
                                    Cancelado&nbsp
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" data-v-5522efca=""><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                </button>
                            </template>
                            <template #verificado="item">
                                <span class="badge bg-success" v-show="item.row.es_pago_tienda == 'si'">Verificado</span>
                                <span class="badge bg-danger" v-show="item.row.es_pago_tienda == 'no'">No verificado</span>
                            </template>
                            <template #ver="item">
                                <button class="btn btn-success btn-sm" @click="getVentaId(item.row.id)">
                                    Ver compra&nbsp
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye" data-v-5522efca=""><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                                </button>
                                <br>
                                <a 
                                    :href="item.row.comprobante_pago_path" 
                                    target="_blank" 
                                    v-if="item.row.comprobante_pago" 
                                    class="btn btn-primary btn-sm m-1">
                                    Comprobante
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ms-1">
                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                        <polyline points="7 10 12 15 17 10"/>
                                        <line x1="12" y1="15" x2="12" y2="3"/>
                                    </svg>
                                </a>
                            </template>
                            <template #actions="item">
                                <a
                                    v-if="item.row.es_pago_tienda == 'no'"
                                    href="javascript:void(0);"
                                    title="Edit"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="abrirSubirComprobante(item.row.id)"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-edit-2"
                                    >
                                        <path
                                            d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"
                                        ></path>
                                    </svg>
                                </a>
                            </template>
                        </v-client-table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register Modal -->
        <div
            class="modal fade"
            id="registerModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="registerModalLabel"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header titulo-dorado" id="registerModalLabel">
                        <h4 class="modal-title">Ver</h4>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <!-- Header con información principal -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <div>
                                        <h4 class="mb-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary me-2">
                                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                                <polyline points="14,2 14,8 20,8"/>
                                                <line x1="16" y1="13" x2="8" y2="13"/>
                                                <line x1="16" y1="17" x2="8" y2="17"/>
                                                <polyline points="10,9 9,9 8,9"/>
                                            </svg>
                                            Venta #{{ dataPreview.id }}
                                        </h4>
                                        <p class="text-muted mb-0">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1">
                                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                                <line x1="16" y1="2" x2="16" y2="6"/>
                                                <line x1="8" y1="2" x2="8" y2="6"/>
                                                <line x1="3" y1="10" x2="21" y2="10"/>
                                            </svg>
                                            {{ dataPreview.fecha_asignada_custom }}
                                        </p>
                                    </div>
                                    <div v-if="dataPreview.cancelado=='si'" class="text-end">
                                        <span class="badge bg-danger fs-6">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1">
                                                <circle cx="12" cy="12" r="10"/>
                                                <line x1="15" y1="9" x2="9" y2="15"/>
                                                <line x1="9" y1="9" x2="15" y2="15"/>
                                            </svg>
                                            Cancelada
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Información del cliente y sucursal -->
                        <div class="row mb-4">
                            <div class="col-md-6" v-if="dataPreview.cliente && !is('Cliente')">
                                <div class="card border-0 bg-light">
                                    <div class="card-body p-3">
                                        <h6 class="card-title text-primary mb-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                                                <circle cx="12" cy="7" r="4"/>
                                            </svg>Cliente
                                        </h6>
                                        <p class="card-text mb-0">
                                            {{ dataPreview.cliente.razonSocial }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card border-0 bg-light">
                                    <div class="card-body p-3">
                                        <h6 class="card-title text-primary mb-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                                                <polyline points="9,22 9,12 15,12 15,22"/>
                                            </svg>Sucursal
                                        </h6>
                                        <p class="card-text mb-0">
                                            {{ dataPreview.sucursal.nombre }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Detalles de productos -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card border-0 shadow-sm">
                                    <div class="card-header bg-primary text-white">
                                        <h6 class="mb-0">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                                <circle cx="9" cy="21" r="1"/>
                                                <circle cx="20" cy="21" r="1"/>
                                                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
                                            </svg>Productos
                                        </h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table table-hover mb-0">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th class="border-0">Producto</th>
                                                        <th class="border-0 text-center" width="120">Cantidad</th>
                                                        <th class="border-0 text-end" width="120">Total</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr v-for="(item, i) in dataPreview.venta_detalle" :key="i">
                                                        <td class="border-0">
                                                            <div class="d-flex align-items-center">
                                                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px;">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
                                                                        <polyline points="3.27,6.96 12,12.01 20.73,6.96"/>
                                                                        <line x1="12" y1="22.08" x2="12" y2="12"/>
                                                                    </svg>
                                                                </div>
                                                                <div>
                                                                    <h6 class="mb-0">{{ item.descripcion }}</h6>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="border-0 text-center">
                                                            <span class="badge bg-secondary fs-6">{{ item.cantidad }}</span>
                                                        </td>
                                                        <td class="border-0 text-end">
                                                            <strong class="text-success">{{ currency(item.total) }}</strong>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                                <tfoot class="table-light">
                                                    <tr>
                                                        <td colspan="2" class="border-0 text-end">
                                                            <h5 class="mb-0">Total:</h5>
                                                        </td>
                                                        <td class="border-0 text-end">
                                                            <h4 class="mb-0 text-success">{{ currency(dataPreview.total) }}</h4>
                                                        </td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Mensaje de cancelación -->
                        <div v-if="dataPreview.cancelado=='si'" class="row mb-4">
                            <div class="col-12">
                                <div class="alert alert-danger border-0 shadow-sm">
                                    <div class="d-flex align-items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-3">
                                            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                                            <line x1="12" y1="9" x2="12" y2="13"/>
                                            <line x1="12" y1="17" x2="12.01" y2="17"/>
                                        </svg>
                                        <div>
                                            <h6 class="alert-heading mb-1">Venta Cancelada</h6>
                                            <p class="mb-0">{{ dataPreview.observacion_cancelado }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Información de envío -->
                        <div v-if="dataPreview.id && dataPreview.envio" class="row mb-4">
                            <div class="col-12">
                                <div class="card border-0 shadow-sm">
                                    <div class="card-header bg-info text-white">
                                        <h6 class="mb-0">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                                <rect x="1" y="3" width="15" height="13"/>
                                                <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
                                                <circle cx="5.5" cy="18.5" r="2.5"/>
                                                <circle cx="18.5" cy="18.5" r="2.5"/>
                                            </svg>Información de Envío
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3 mb-3">
                                                <div class="text-center">
                                                    <div class="bg-info rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 35px; height: 35px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <rect x="1" y="3" width="15" height="13"/>
                                                            <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
                                                            <circle cx="5.5" cy="18.5" r="2.5"/>
                                                            <circle cx="18.5" cy="18.5" r="2.5"/>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-muted mb-1">Paquetería</h6>
                                                    <p class="mb-0 fw-bold">{{ dataPreview.envio.paqueteria }}</p>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="text-center">
                                                    <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 35px; height: 35px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <path d="M3 5v14"/>
                                                            <path d="M8 5v14"/>
                                                            <path d="M13 5v14"/>
                                                            <path d="M18 5v14"/>
                                                            <path d="M21 5v14"/>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-muted mb-1">Número de Guía</h6>
                                                    <p class="mb-0 fw-bold">{{ dataPreview.envio.numero_guia }}</p>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="text-center">
                                                    <div class="bg-success rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 35px; height: 35px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                                            <line x1="16" y1="2" x2="16" y2="6"/>
                                                            <line x1="8" y1="2" x2="8" y2="6"/>
                                                            <line x1="3" y1="10" x2="21" y2="10"/>
                                                            <path d="M9 16l2 2 4-4"/>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-muted mb-1">Fecha de Envío</h6>
                                                    <p class="mb-0 fw-bold">{{ dataPreview.envio.fecha_envio_custom }}</p>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="text-center">
                                                    <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 35px; height: 35px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <circle cx="12" cy="12" r="10"/>
                                                            <polyline points="12,6 12,12 16,14"/>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-muted mb-1">Entrega Estimada</h6>
                                                    <p class="mb-0 fw-bold">{{ dataPreview.envio.fecha_entrega_estimada_custom }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Información de pago -->
                        <div v-if="dataPreview.id && dataPreview.opcion_pago_transferencia" class="row mb-4">
                            <div class="col-12">
                                <div class="card border-0 shadow-sm">
                                    <div class="card-header bg-secondary text-white">
                                        <h6 class="mb-0">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                                <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
                                                <line x1="1" y1="10" x2="23" y2="10"/>
                                            </svg>Información de Pago
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3 mb-3">
                                                <div class="text-center">
                                                    <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 35px; height: 35px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                                                            <polyline points="9,22 9,12 15,12 15,22"/>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-muted mb-1">Banco</h6>
                                                    <p class="mb-0 fw-bold">{{ dataPreview.opcion_pago_transferencia.banco }}</p>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="text-center">
                                                    <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 35px; height: 35px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <line x1="4" y1="9" x2="20" y2="9"/>
                                                            <line x1="4" y1="15" x2="20" y2="15"/>
                                                            <line x1="10" y1="3" x2="8" y2="21"/>
                                                            <line x1="16" y1="3" x2="14" y2="21"/>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-muted mb-1">CLABE</h6>
                                                    <p class="mb-0 fw-bold">{{ dataPreview.opcion_pago_transferencia.clabe }}</p>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="text-center">
                                                    <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 35px; height: 35px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/>
                                                            <path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-muted mb-1">Cuenta</h6>
                                                    <p class="mb-0 fw-bold">{{ dataPreview.opcion_pago_transferencia.cuenta }}</p>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="text-center">
                                                    <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 35px; height: 35px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                                                            <circle cx="12" cy="7" r="4"/>
                                                        </svg>
                                                    </div>
                                                    <h6 class="text-muted mb-1">Titular</h6>
                                                    <p class="mb-0 fw-bold">{{ dataPreview.opcion_pago_transferencia.titular }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Dirección de entrega -->
                        <div v-if="dataPreview.id && dataPreview.direccion" class="row mb-4">
                            <div class="col-12">
                                <div class="card border-0 shadow-sm">
                                    <div class="card-header bg-warning text-dark">
                                        <h6 class="mb-0">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                                <circle cx="12" cy="10" r="3"/>
                                            </svg>Dirección de Entrega
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="d-flex align-items-start mb-3">
                                                    <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <path d="M3 3h18v18H3zM7 7h10v10H7z"/>
                                                            <path d="M9 9h6v6H9z"/>
                                                        </svg>
                                                    </div>
                                                    <div>
                                                        <h6 class="text-muted mb-1">Dirección</h6>
                                                        <p class="mb-0 fw-bold">
                                                            {{ dataPreview.direccion.calle }} 
                                                            #{{ dataPreview.direccion.numero_exterior }}
                                                            <span v-if="dataPreview.direccion.numero_interior">Int. {{ dataPreview.direccion.numero_interior }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="d-flex align-items-start mb-3">
                                                    <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                                                            <polyline points="9,22 9,12 15,12 15,22"/>
                                                        </svg>
                                                    </div>
                                                    <div>
                                                        <h6 class="text-muted mb-1">Colonia</h6>
                                                        <p class="mb-0 fw-bold">{{ dataPreview.direccion.colonia }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="d-flex align-items-start mb-3">
                                                    <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
                                                            <line x1="8" y1="21" x2="16" y2="21"/>
                                                            <line x1="12" y1="17" x2="12" y2="21"/>
                                                        </svg>
                                                    </div>
                                                    <div>
                                                        <h6 class="text-muted mb-1">Código Postal</h6>
                                                        <p class="mb-0 fw-bold">{{ dataPreview.direccion.codigo_postal }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6" v-if="dataPreview.direccion.referencia">
                                                <div class="d-flex align-items-start mb-3">
                                                    <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <circle cx="12" cy="12" r="10"/>
                                                            <path d="M12 16v-4"/>
                                                            <path d="M12 8h.01"/>
                                                        </svg>
                                                    </div>
                                                    <div>
                                                        <h6 class="text-muted mb-1">Referencia</h6>
                                                        <p class="mb-0 fw-bold">{{ dataPreview.direccion.referencia }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Datos fiscales -->
                        <div v-if="dataPreview.id && dataPreview.datos_fiscales" class="row mb-4">
                            <div class="col-12">
                                <div class="card border-0 shadow-sm">
                                    <div class="card-header bg-success text-white">
                                        <h6 class="mb-0">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                                <polyline points="14,2 14,8 20,8"/>
                                                <line x1="16" y1="13" x2="8" y2="13"/>
                                                <line x1="16" y1="17" x2="8" y2="17"/>
                                                <polyline points="10,9 9,9 8,9"/>
                                            </svg>Datos Fiscales
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="d-flex align-items-start mb-3">
                                                    <div class="bg-success rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
                                                            <line x1="8" y1="21" x2="16" y2="21"/>
                                                            <line x1="12" y1="17" x2="12" y2="21"/>
                                                        </svg>
                                                    </div>
                                                    <div>
                                                        <h6 class="text-muted mb-1">RFC</h6>
                                                        <p class="mb-0 fw-bold">{{ dataPreview.datos_fiscales.rfc }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="d-flex align-items-start mb-3">
                                                    <div class="bg-success rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                                                            <polyline points="9,22 9,12 15,12 15,22"/>
                                                        </svg>
                                                    </div>
                                                    <div>
                                                        <h6 class="text-muted mb-1">Razón Social</h6>
                                                        <p class="mb-0 fw-bold">{{ dataPreview.datos_fiscales.razon_social }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="d-flex align-items-start mb-3">
                                                    <div class="bg-success rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 30px; height: 30px;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                                            <polyline points="14,2 14,8 20,8"/>
                                                            <line x1="16" y1="13" x2="8" y2="13"/>
                                                            <line x1="16" y1="17" x2="8" y2="17"/>
                                                            <polyline points="10,9 9,9 8,9"/>
                                                        </svg>
                                                    </div>
                                                    <div>
                                                        <h6 class="text-muted mb-1">Constancia</h6>
                                                        <a 
                                                            :href="dataPreview.datos_fiscales.documento_fiscal_path" 
                                                            target="_blank" 
                                                            v-if="dataPreview.datos_fiscales.documento_fiscal" 
                                                            class="btn btn-success btn-sm">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1">
                                                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                                                <polyline points="7 10 12 15 17 10"/>
                                                                <line x1="12" y1="15" x2="12" y2="3"/>
                                                            </svg>
                                                            Descargar
                                                        </a>
                                                        <span v-else class="text-muted">No disponible</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Cancelar Modal -->
        <div
            class="modal fade"
            id="cancelarModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabelCancelar"
            aria-hidden="true"
        >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabelCancelar">
                            ¿Estás seguro de Cancelar esta venta?
                        </h5>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-4">
                                    <label class="">Observación:</label>
                                    <textarea
                                        v-model="form.observacion_cancelado"
                                        :class="[
                                            is_entrada
                                                ? !errors.observacion_cancelado
                                                    ? 'form-control flatpickr active is-valid'
                                                    : 'form-control flatpickr active is-invalid'
                                                : 'form-control flatpickr active',
                                        ]"
                                        placeholder="Agregar observación"
                                        rows="3"
                                    ></textarea>
                                    <div class="valid-feedback"></div>
                                    <div class="invalid-feedback">
                                        <li v-for="item in errors.observacion_cancelado">
                                            {{ item }}
                                        </li>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                        >
                            <i class="flaticon-cancel-12"></i> Cancelar
                        </button>
                        <button
                            type="button"
                            class="btn btn-black"
                            @click="canceladoVenta()"
                        >
                            Aceptar
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- subir comprobante Modal -->
        <div
            class="modal fade"
            id="subirComprobanteModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabelComprobante"
            aria-hidden="true"
        >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabelComprobante">
                            Subir comprobante
                        </h5>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-4">
                                    <label class="">Comprobante:</label>
                                    <input
                                        id="comprobante_pago_file"
                                        type="file"
                                        :class="[
                                            is_entrada
                                                ? !errors.comprobante_pago
                                                    ? 'form-control is-valid'
                                                    : 'form-control  is-invalid'
                                                : 'form-control',
                                        ]"
                                        accept="image/*,.pdf" 
                                        @change="handleComprobanteUpload" 
                                    />
                                    <div class="valid-feedback"></div>
                                    <div class="invalid-feedback">
                                        <li v-for="item in errors.comprobante_pago">
                                            {{ item }}
                                        </li>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <p class="text-muted">Los tipos de archivo permitidos son: pdf, jpg, jpeg, png y el tamaño máximo es de 2MB.</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button
                            class="btn btn-black w-100"
                            v-show="editedIndex  !== -1"
                            @click="updateComprobante()"
                        >
                            Actualizar
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <loading v-model:active="isLoading"
        :can-cancel="false"
        :is-full-page="true"/>
        <button
            id="evento_recargar_reservar"
            type="button"
            v-show="false"
            class="btn btn-black"
            @click="getVentasAll"
        ></button>
    </div>
</template>
<style>
.table3 .actions svg {
    padding: 2px;
}
</style>

<script setup>
import { onMounted, ref, inject } from "vue";
import "@/assets/sass/elements/tooltip.scss";
import { useMeta } from "@/composables/use-meta";
import { useAuthStore } from "@/store/AuthStore";
import * as UserRepository from "@/repositories/UserRepository";
import * as VentaRepository from "@/repositories/VentaRepository";
import * as TiendaRepository from "@/repositories/TiendaRepository";
import Pagination from 'v-pagination-3';
import axios from "axios";

import { useStateStore } from '@/store/StateStore';

// select2
import Multiselect from '@suadelabs/vue3-multiselect';
import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';

// loading
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';

useMeta({ title: "EGURROLA" });

const urls = ref(process.env.MIX_URL);
const store = useAuthStore();
const storeState = useStateStore();
const obtener_ventas = ref([]);

//formulario crear y eliminar
let registerModal = ref(false);
let cancelarModal = ref(false);
let subirComprobanteModal = ref(false);
const page = ref(1);
const isLoading = ref(true);
const order = ref({
    name:'id',
    order:'DESC',
});
const search = ref("");
const options_select2 = ref([20, 50, 100]);
const pageSize = ref(20);
const totalPages = ref(0);
const is_entrada = ref(false);
const editedIndex = ref(-1);
const dataPreview = ref({
    nombre:'',
    descripcion:'',
    precio:'',
    sucursal:'',
    iva:'',
    ieps:'',
    cantidad_existente:'',
    cantidad_vendido:'',
    path:'',
});
const form = ref({
    observacion_cancelado:''
});
const formComprobante = ref({
    comprobante_pago:null
});
const formatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});
const roles_is = inject('$is');
const errors = ref({});

//table 2
const columns1 = ref(!roles_is("Cliente")?[
    "id",
    "fecha_asignada_custom",
    "sucursal",
    "cliente",
    "total",
    "cancelar",
    "verificado",
    "ver",
    "actions"
]:[
    "id",
    "fecha_asignada_custom",
    "sucursal",
    "total",
    "cancelar",
    "verificado",
    "ver",
    "actions"
]);
const table_option1 = ref({
    headings: {
        fecha_asignada_custom: (h, row, index) => {
            return "Fecha registro";
        },
        id: (h, row, index) => {
            return "Folio";
        },
        actions: (h, row, index) => {
            return "Subir comprobante";
        }
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { actions: "actions text-center" },
    sortable: ["id", "fecha_asignada_custom", "sucursal", "cliente","total"],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 5 },
    texts: {
        count: "Mostrando {from} a {to} de {count}",
        filter: "",
        filterPlaceholder: "Buscar...",
        limit: "Resultados:",
        noResults:"No hay registros"
    },
    resizableColumns: true,
});

const getVentaId = async (id) => {
  try {
    isLoading.value = true;
    const response = await VentaRepository.getVentaId(id);
    dataPreview.value = response.data;
    editedIndex.value = id;
    registerModal.show();
    isLoading.value = false;
} catch (error) {
    console.log(error);
    isLoading.value = false;
  }
};

const getBuscar = () => {
    getVentasAll("si");
}

const currency = (valor) => {
    return formatter.format(valor);
}

const getVentasAll = async () => {
    try {
        isLoading.value=true;
        const params={
            sucursal_id:null,
        }
        if(storeState.current_state.sucursal_mode != 0){
            params.sucursal_id=storeState.current_state.sucursal_mode;
        }
        const response = await VentaRepository.getMisCompras(params);
        obtener_ventas.value = response.data;
        isLoading.value=false;
    } catch (error) {
        console.log(error);
    }
};

const obtener_user = async () => {
    try {
        const response = await UserRepository.getuser();
        return response;
    } catch (error) {
        console.log(error);
    }
};

const initialize = async () => {
    search.value = "";
    isLoading.value = true;
    page.value = 1;
    pageSize.value = 20;
    totalPages.value = 0;
    is_entrada.value = false;
    isLoading.value = false;
};

const refrescar = () => {
    initialize();
    getVentasAll('si');
}

const getVentaCanId = (id) => {
    form.value.observacion_cancelado='';
    editedIndex.value = id;
    cancelarModal.show();
};

const canceladoVenta = async () => {
    try {
        isLoading.value=true;
        is_entrada.value = true;
        await VentaRepository.canledadoVenta(form.value,editedIndex.value);
        initialize();
        await getVentasAll('si');
        cancelarModal.hide();
        showMessage('Cancelado correctamente');
    } catch (error) {
        if (axios.isAxiosError(error))
            errors.value = error.response.data.errors;
        isLoading.value=false;
    }
};

const handleComprobanteUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
        formComprobante.value.comprobante_pago = file;
    }
};

const abrirSubirComprobante = (id) => {
    editedIndex.value = id;
    document.getElementById('comprobante_pago_file').value = null;
    formComprobante.value.comprobante_pago = null;
    subirComprobanteModal.show();
}

const updateComprobante = async () => {
    try {
        isLoading.value = true;
        is_entrada.value = true;
        await TiendaRepository.updateComprobante(formComprobante.value, editedIndex.value);  
        showMessage('Comprobante actualizado correctamente');
        subirComprobanteModal.hide();
        isLoading.value = false;
        await getVentasAll('si');
    } catch (error) {
        console.log(error);
        if (axios.isAxiosError(error)) errors.value = error.response.data.errors;
        isLoading.value = false;
        showMessage('Error al actualizar comprobante', 'error');
    }
};

const showMessage = (msg = '', type = 'success') => {
    const toast = window.Swal.mixin({
        toast: true,
        position: 'top',
        showConfirmButton: false,
        timer: 3000,
    });
    toast.fire({
        icon: type,
        title: msg,
        padding: '10px 20px',
    });
};

onMounted(async () => {
    const response = await obtener_user();
    store.current_user.id = response.id;
    store.current_user.name = response.name;
    store.current_user.email = response.email;
    registerModal = new window.bootstrap.Modal(document.getElementById('registerModal'));
    cancelarModal = new window.bootstrap.Modal(
        document.getElementById("cancelarModal")
    );
    subirComprobanteModal = new window.bootstrap.Modal(
        document.getElementById("subirComprobanteModal")
    );
    initialize();
    await getVentasAll('si');
});
</script>
