@component('components.master') @slot('body')
@verbatim
<div class="layout-px-spacing" id="app">
    <div class="row layout-top-spacing justify-content-md-center">
    <div class="loader" v-if="loading">
            <div class="spinner-grow text-info align-self-center"></div>
        </div>
        <div class="col-12">
            <div class="page-header mb-3">
                <div class="page-title">
                    <h3>Consulta de Productos Cotizados</h3>
                </div>
            </div>
            <div class="statbox widget box box-shadow">
                <div class="widget-header">
                    <div class="row" style="padding: 15px;">
                        <div class="col-sm-2 col-12 p-2">
                            <div class="form-group">
                                <input type="date" placeholder="2020-06-13" v-model="fecha_1" class="form-control flatpickr-input" >
                            </div>
                        </div>
                        <div class="col-sm-2 col-12 p-2">
                            <div class="form-group">
                                <input type="date" placeholder="2020-07-12" v-model="fecha_2" class="form-control flatpickr-input" >
                            </div>
                        </div>
                        <div class="col-sm-2 col-12 p-2">
                            <button class="btn btn-dark mb-2 mr-2 rounded-circle" @click="ConsultarFecha" style="height: 45px;width: 45px;">
                                <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-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="widget-content widget-content-area br-8 p-0 table-responsive">
                   <table class="table dt-table-hover" style="width:100%" id="table_dt">
                                    <thead>
                                        <tr>

                                            <th class="" scope="col">#</th>


                                            <th scope="col">Cod/Barra</th>
                                            <th scope="col">Imagen</th>
                                            <th scope="col">Producto</th>
                                            <th scope="col">Marca</th>
                                            <th scope="col">Lote</th>
                                            <th scope="col">Fecha Venta</th>
                                            <th scope="col">Cantidad</th>
                                            <th scope="col">Pre. Unit</th>

                                            <th scope="col">Descuento</th>
                                            <th scope="col">Subtotal</th>
                                            <th scope="col">Total</th>


                                        </tr>
                                    </thead>
                                    <tbody>

                                        <template v-for="(m,i) in data">

                                            <tr>

                                            <td class="">{{ i + 1 }}</td>
                                                <td>
                                                    {{ m . producto . codigo_barra }}
                                                </td>
                                                <td class="">
                                                    <a v-if="m.hasOwnProperty('img')" class=" profile-img"
                                                        href="javascript: void(0);">
                                                        <img :src="m.img" alt="product" style="width: 80px;">
                                                    </a>
                                                </td>
                                                <td>
                                                    {{ m . producto . nombre }}
                                                </td>

                                                <td>
                                                    {{ m . producto . marca . name }}
                                                </td>
                                                <td>
                                                    {{ m . item . lote }}
                                                </td>
                                                <td>
                                                    {{ m . fecha }}
                                                </td>
                                                <td>
                                                    {{ m . cantidad }} {{ m . producto . medida . prefijo }}
                                                </td>
                                                <td>
                                                    {{ Number(m . precio).toFixed(2) }}
                                                </td>
                                                <td>
                                                    {{ Number(m . descuento).toFixed(2) }}
                                                </td>
                                                <td>
                                                    {{ Number(m . subtotal).toFixed(2) }}
                                                </td>
                                                <td>
                                                    {{ Number(m . total).toFixed(2) }}
                                                </td>



                                            </tr>
                                        </template>
                                    </tbody>
                                    <tfoot>
                                        <tr>

                                            <th class="invisible">0</th>


                                            <th class="invisible">1</th>
                                            <th class="invisible">2</th>
                                            <th class="invisible">3</th>

                                            <th class="invisible">4</th>
                                            <th class="invisible">5</th>
                                            <th  class="invisible"></th>
                                            <th  class="invisible"></th>
                                            <th class="invisible">Total</th>
                                            <th >Total</th>
                                            <th >Total</th>
                                            <th >Total</th>




                                        </tr>
                                    </tfoot>
                                </table>
                </div>
            </div>
        </div>
 <div class="modal  modal-xl"  id="ventaDetalle" data-bs-backdrop="static" data-bs-keyboard="false"  tabindex="-1" role="dialog" aria-labelledby="arqueoModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-dark" id="arqueoModalLabel">DETALLE DE COTIZACION </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                     </button>
                    </div>
                    <div class="modal-body table-responsive">
                        <div class="row">
                        <div class="col-12">
                        <table class="table table-bordered mb-4 mtable">
                                        <thead>
                                            <tr>
                                                <th>FECHA COTIZACION</th>
                                                <th style="color: #425665;" id="date_detalle">{{venta.fecha}}</th>
                                                <th>TIPO PAGO</th>
                                                <th style="color: #425665;" id="tipo_pago_detalle">{{venta.tipo==1?'CONTADO':'CREDITO'}}</th>
                                            </tr>
                                            <tr>
                                                <th>CLIENTE</th>
                                                <th style="color: #425665;" id="proveedor_detalle">{{venta.cliente.razon}}</th>
                                                <th id="tipo_documento_detalle">{{venta.cliente.documento.name}}</th>
                                                <th style="color: #425665;" id="nro_documento_detalle">{{venta.cliente.nro_documento}}</th>
                                            </tr>

                                            <tr>
                                                <th>NRO. COTIZACION</th>
                                                <th style="color: #425665;" id="nro_detalle">{{venta.format_cotizacion}}</th>
                                                <th>TOTAL</th>
                                                <th style="color: #425665;" id="total_cotizacio_detalle">{{moneda}} {{Number(venta.total).toFixed(2)}}</th>
                                            </tr>
                                        </thead>
                                    </table>
                        </div>
                            <div class="col-12">
                            <div class="table-responsive mt-3">
                        <table class="table table-bordered table-striped mb-4">
                            <thead class="bg-primary">
                                <tr>
                                    <th class="text-white">CODIGO BARRA</th>
                                    <th class="text-white">PRODUCTO</th>


                                    <th class="text-white">CANTIDAD</th>
                                    <th class="text-white">PRECIO</th>
                                    <th class="text-white">SUBTOTAL</th>

                                </tr>
                            </thead>
                            <tbody id="tbody_detalle_productos">
                                <tr v-for="m in itemModel">
                                    <td style="color: #1b55e2;font-weight: 700">{{m.producto.codigo_barra}}</td>
                                    <td>{{m.producto.nombre}}</td>


                                    <td>{{Number(m.cantidad)}} {{m.producto.medida.prefijo}}</td>
                                    <td>{{moneda}} {{Number(m.precio_vendido).toFixed(2)}}</td>
                                    <td>{{moneda}} {{Number(m.total).toFixed(2)}}</td>

                                </tr>

                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="4" class="text-primary text-end">SUMAS</th>
                                    <th class="text-center" id="sumas_detalle">{{moneda}} {{Number(venta.sumas).toFixed(2)}}</th>
                                </tr>
                                <tr>
                                    <th colspan="4" class="text-primary text-end">IVA%</th>
                                    <th class="text-center" id="iva_detalle">{{moneda}} {{Number(venta.iva).toFixed(2)}}</th>
                                </tr>
                                <tr>
                                    <th colspan="4" class="text-primary text-end">SUB TOTAL</th>
                                    <th class="text-center" id="subtotal_detalle">{{moneda}} {{Number(venta.subtotal).toFixed(2)}}</th>
                                </tr>

                                <tr>
                                    <th colspan="4" class="text-primary text-end">EXENTO</th>
                                    <th class="text-center" id="exento_detalle">{{moneda}} {{Number(venta.exento).toFixed(2)}}</th>
                                </tr>
                                <tr>
                                    <th colspan="4" class="text-primary text-end">DESCUENTO</th>
                                    <th class="text-center" id="descuento_detalle">{{moneda}} {{Number(venta.descuento).toFixed(2)}}</th>
                                </tr>
                                <tr>
                                    <th colspan="4" class="text-primary text-end">TOTAL</th>
                                    <th class="text-center" id="total_detalle">{{moneda}} {{Number(venta.total).toFixed(2)}}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                            </div>
                        </div>
                    </div>
                     <div class="modal-footer">
                        <button class="btn" data-bs-dismiss="modal" aria-label="Close"><i class="flaticon-cancel-12"></i> Cerrar</button>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endverbatim
@endslot
@slot('script')
    <script type="module">
    import Table from "{{asset('config/dt.js')}}"
      const {
            createApp
        } = Vue
 let dt = new Table()
        createApp({

            data(){
                return{
                    add: true,
                    fecha_1:'',
                    fecha_2:'',
                    model:{
                        name:'',
                        direccion:'',
                        sucursal_id:1,
                        documento_id:1
                    },
                    data:[],
                    venta:{

                        cliente:{
                            documento:{}
                        },
                        formapago:{},
                        sucursal:{
                            moneda:""
                        },
                        precio_radio:1,
                        cotizacion_detalles:[]
                    },
                    documentos:[],
                    loading: false
                }
            },
            computed:{
                itemModel(){
                    return this.venta.cotizacion_detalles.map((i)=>{
                        let precio = {
                            1:i.precio_1,
                            2:i.precio_2,
                            3:i.precio_3,
                            4:i.precio_4,
                        }
                        i.precio_vendido = precio[this.venta.precio_radio]
                        i.total = i.cantidad*precio[this.venta.precio_radio]
                        return i
                    })
                },
                moneda(){
                    return this.venta.sucursal.moneda
                }
            },
            methods:{
                async getData(){
                    try{
                        let res = await axios.get("{{url('')}}/api/v1/cotizacion-detalles")
                        return res.data
                    }catch(e){

                    }finally{

                    }
                },
                async GetVenta(venta){
                    try{
                        let res = await axios.get("{{url('')}}/api/v1/cotizacions/"+venta.id)
                        this.venta = res.data
                    }catch(e){

                    }finally{

                    }
                },
                async ConsultarFecha(){
                    let self = this
                    this.loading = true
                    try{
                        dt.destroy()
                            let res = await axios.post("{{url('')}}/api/v1/cotizacion-detalles-fecha",{
                                fecha_1:this.fecha_1,
                                fecha_2:this.fecha_2,
                            }).then((v)=>{

                                self.data = v.data
                                })


                    }catch(e){

                    }finally{
                        this.loading=false
                        dt.create("Productos Cotizados ",function ( row, data, start, end, display ) {
                            var api = this.api();
                            let  n_columnas = api.columns().nodes().length;
                            var j = 8;
                            while(j < n_columnas){
                                var total_filtro = api.column( j, { page: 'current'} ).data().reduce( function (a, b) {
                                return parseFloat(a) + parseFloat(b);
                                }, 0 );
                                //Actualizar Footer
                                $( api.column( j ).footer() ).html(total_filtro.toFixed(2));
                                j++;
                            }
                        })
                    }
                },
                deleteItem(id) {
                    let self = this

                    Swal.fire({
                        title: 'Estas seguro?',
                        text: "Este cambio es irreversible.",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Eliminar!',
                        cancelButtonText: 'No!',
                        reverseButtons: true,
                        padding: '2em'
                    }).then(async (result) => {
                        if (result.value) {
                            try {


                                let url = "{{url('api/v1/ventas')}}/"+id

                                await axios.delete(url)
                                dt.destroy()
                                    await Promise.all([self.getData()]).then((v) => {
                                        self.data = v[0]
                                    })
                                    dt.create("Productos Cotizados ",function ( row, data, start, end, display ) {
                                        var api = this.api();
                                        let  n_columnas = api.columns().nodes().length;
                                        var j = 8;
                                        while(j < n_columnas){
                                            var total_filtro = api.column( j, { page: 'current'} ).data().reduce( function (a, b) {
                                            return parseFloat(a) + parseFloat(b);
                                            }, 0 );
                                            //Actualizar Footer
                                            $( api.column( j ).footer() ).html(total_filtro.toFixed(2));
                                            j++;
                                        }
                                    })
                            } catch (e) {

                            }
                        }
                    })
                },
                async getUrl(path) {
                    try {
                        let res = await axios.get("{{url('')}}/api/v1/"+path)
                        return res.data
                    } catch (e) {

                    } finally {

                    }
                },
            },
            mounted(){
                this.$nextTick(async () => {
$("#module_cotizacion").addClass("module_active")
                    let self = this
                    this.loading = true
                    try {
                        await Promise.all([
                    self.getUrl('documentos')
                    ]).then((v) => {

                            this.documentos= v[0]
                        })

                    } catch (e) {

                    } finally {
                        this.loading = false
                        dt.create("Productos Cotizados ",function ( row, data, start, end, display ) {
                            var api = this.api();
                            let  n_columnas = api.columns().nodes().length;
                            var j = 8;
                            while(j < n_columnas){
                                var total_filtro = api.column( j, { page: 'current'} ).data().reduce( function (a, b) {
                                return parseFloat(a) + parseFloat(b);
                                }, 0 );
                                //Actualizar Footer
                                $( api.column( j ).footer() ).html(total_filtro.toFixed(2));
                                j++;
                            }
                        })

                    }




                })

            }
        }).mount('#app')
    </script>
@endslot
@slot('style')
    <style>
        body{

        }
    </style>
@endslot
@endcomponent