@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 Ventas por Forma de Pago</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">
                                <div class="form-group">
                                    <select name="" class="form-control w-100" id="select-formapago" v-model="formapago_id">
                                        <option value="" disabled>Seleccionar Forma de pago</option>
                                        <template v-for="m in formapagos">
                                            <option :value="m . id">{{m . name}} </option>
                                        </template>

                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-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">
                                <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">
                                <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">Fecha</th>
                                    <th scope="col">Comprobante</th>
                                    <th scope="col">Nro Comprobante</th>

                                    <th scope="col">Forma de Pago</th>
                                    <th scope="col">Cliente</th>


                                    <th scope="col">Total</th>
                                    <th scope="col">Estado</th>

                                    <th class="text-center" scope="col">Accion</th>
                                </tr>
                            </thead>
                            <tbody>

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

                                    <tr>

                                        <td class="">{{i + 1}}</td>
                                        <td>
                                            {{m . fecha}}
                                        </td>
                                        <td>
                                            {{m . tiraje . comprobante . name}}
                                        </td>
                                        <td>
                                            {{m . tiraje . serie}}-{{m . format_tiraje}}
                                        </td>

                                        <td>
                                            {{m . formapago . name}}
                                        </td>
                                        <td>
                                            {{m . cliente . nombre}}
                                        </td>


                                        <td>
                                            {{Number(m . total) . toFixed(2)}}
                                        </td>
                                        <td>
                                            <span class="badge badge-success" v-if="m.estado==1">VIGENTE</span>
                                            <span class="badge badge-danger" v-else>ANULADO</span>
                                        </td>
                                        <td class="text-center">
                                            <div class="dropdown d-inline-block">
                                                <a class="dropdown-toggle" href="#" role="button" id="elementDrodpown"
                                                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <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-more-vertical">
                                                        <circle cx="12" cy="12" r="1"></circle>
                                                        <circle cx="12" cy="5" r="1"></circle>
                                                        <circle cx="12" cy="19" r="1"></circle>
                                                    </svg>
                                                </a>

                                                <div class="dropdown-menu right" aria-labelledby="elementDrodpown"
                                                    style="will-change: transform;">
                                                    <a class="dropdown-item" href="javascript:void(0);"
                                                        data-bs-toggle="modal" data-bs-target="#ventaDetalle"
                                                        @click="GetVenta(m)">VER DETALLE</a>
                                                    <a class="dropdown-item" target="_blank"
                                                        :href="m . url_pdf_a4">{{m . tiraje . comprobante . name}} A4</a>

                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                            <tfoot>
                                <tr>

                                    <th class="invisible">#</th>
                                    <th class="invisible">Fecha</th>
                                    <th class="invisible">Comprobante</th>
                                    <th class="invisible">Nro Comprobante</th>

                                    <th class="invisible">Forma de Pago</th>
                                    <th class="invisible">Cliente</th>


                                    <th >Total</th>
                                    <th class="invisible">Estado</th>

                                    <th class="invisible">Accion</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 VENTA </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <table class="table table-bordered mb-4 mtable">
                                        <thead>
                                            <tr>
                                                <th>FECHA VENTA</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>COMPROBANTE</th>
                                                <th style="color: #425665;" id="comprobante_detalle">
                                                    {{venta . tiraje . comprobante . name}}</th>
                                                <th>NRO. COMPROBANTE</th>
                                                <th style="color: #425665;" id="nro_comprobante_detalle">
                                                    {{venta . tiraje . serie}}-{{venta . format_tiraje}}</th>
                                            </tr>
                                            <tr>
                                                <th>NRO. VENTA</th>
                                                <th style="color: #425665;" id="nro_detalle">{{venta . format_venta}}</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>
                                                <tr v-for="m in ventaServicios">
                                                    <td style="color: #1b55e2;font-weight: 700">SERVICIO</td>
                                                    <td>{{m . servicio . nombre}}</td>


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

                                                </tr>
                                                <tr v-for="m in ventaCombos">
                                                    <td style="color: #1b55e2;font-weight: 700">COMBO</td>
                                                    <td>{{m . combo . nombre}}</td>


                                                    <td>{{Number(m . cantidad)}} </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>
    </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: [],
                documentos: [],
                formapagos: [],
                formapago_id: '',
                loading: false,
                venta: {
                    tiraje: {
                        comprobante: {}
                    },
                    cliente: {
                        documento: {}
                    },
                    formapago: {},
                    sucursal: {
                        moneda: ""
                    },
                    precio_radio: 1,
                    venta_items: [],
                    venta_servicios: [],
                    venta_combos: [],
                },
            }
        },
        computed: {
            ventaCombos() {
                return this.venta.venta_combos.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
                })
            },
            ventaServicios() {
                return this.venta.venta_servicios.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
                })
            },
            itemModel() {
                return this.venta.venta_items.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/ventas-formapagos/list")
                    return res.data
                } catch (e) {

                } finally {

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

                        self.data = v.data
                    })


                } catch (e) {

                } finally {
                    this.loading = false
                    dt.create("Ventas por forma de pago",function ( row, data, start, end, display ) {
                            let api = this.api();
                            let  n_columnas = api.columns().nodes().length;
                            let j = 6;
                            while(j < n_columnas){
                                let 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/compras')}}/" + id

                            await axios.delete(url)
                            dt.destroy()
                            await Promise.all([self.getData()]).then((v) => {
                                self.data = v[0]
                            })
                            dt.create("Ventas por forma de pago",function ( row, data, start, end, display ) {
                                let api = this.api();
                                let  n_columnas = api.columns().nodes().length;
                                let j = 6;
                                while(j < n_columnas){
                                    let 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 {

                }
            },
            async GetVenta(venta) {
                this.loading = true

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

                } finally {

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

                        this.formapagos = v[0]
                        this.data = v[1]
                    })
                    dt.create("Ventas por forma de pago",function ( row, data, start, end, display ) {
                                let api = this.api();
                                let  n_columnas = api.columns().nodes().length;
                                let j = 6;
                                while(j < n_columnas){
                                    let 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) {

                } finally {

                    this.loading = false
                    new TomSelect("#select-formapago", {
                        create: true,
                        sortField: {
                            field: "text",
                            direction: "asc"
                        }
                    })
                }




            })

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