@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>Reporte de Arqueos</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">
                                <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 class="col-md-6 text-end">

                        </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 scope="col">Fecha</th>
                                            <th scope="col">Caja</th>
                                            <th scope="col">Usuario</th>
                                            <th scope="col">Monto Inicial</th>
                                            <th scope="col">Ventas</th>
                                            <th scope="col">Ingresos</th>
                                            <th scope="col">Egresos</th>
                                            <th scope="col">Creditos</th>
                                            <th scope="col">Abonos</th>
                                            <th scope="col">Monto Final</th>
                                            <th scope="col">Estado</th>
                                            <th scope="col">Accion</th>

                                        </tr>
                                    </thead>
                                    <tbody>

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

                                            <tr>


                                                <td>
                                                   {{m.fecha_inicio}}
                                                </td>
                                                <td>
                                                   {{m.caja.name}}
                                                </td>
                                                <td>
                                                   {{m.user.persona.nombre}}
                                                </td>
                                                <td>
                                                   {{Number(m.monto_inicial).toFixed(2)}}
                                                </td>
                                                <td>
                                                   {{Number(m.monto_inicial).toFixed(2)}}
                                                </td>
                                                <td>
                                                   {{Number(m.monto_inicial).toFixed(2)}}
                                                </td>
                                                <td>
                                                   {{Number(m.monto_inicial).toFixed(2)}}
                                                </td>
                                                <td>
                                                   {{Number(m.monto_inicial).toFixed(2)}}
                                                </td>
                                                <td>
                                                   {{Number(m.monto_inicial).toFixed(2)}}
                                                </td>
                                                <td>
                                                   {{Number(m.monto_final).toFixed(2)}}
                                                </td>


                                                <td>
                                                    <span v-if="m.activo==1" class="badge badge-primary mb-2 me-4">ACTIVO</span>
                                                    <span v-else class="badge badge-dark mb-2 me-4">CERRADO</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" target="_blank" :href="m.url_pdf_a4">REPORTE A4</a>
                                                            <a class="dropdown-item" target="_blank" :href="m.url_pdf_ticket">TICKET</a>

                                                        </div>
                                                    </div>
                                                </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 >Total</th>
                                            <th >Total</th>
                                            <th >Total</th>
                                            <th >Total</th>
                                            <th >Total</th>
                                            <th >Total</th>

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

                                        </tr>
                                    </tfoot>
                                </table>
                </div>
            </div>
        </div>
        <div class="modal fade" id="abrirModal" tabindex="-1" role="dialog" aria-labelledby="abrirModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="abrirModalLabel">Formulario</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">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Lista de Caja Asignadas</label>
                                  <select name="" class="form-control form-control-sm" id="" v-model="model.caja_id">
                                    <template v-for="m in cajas">
                                        <option :value="m.id">{{m.nro}} | {{m.name}}</option>
                                    </template>

                                  </select>
                               </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="exampleFormControlInput1">Monto inicial</label>
                                    <input type="text" class="form-control form-control-sm" v-model="model.monto_inicial">
                               </div>
                            </div>

                         </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-light-dark" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary " data-bs-dismiss="modal" @click="AbrirCaja">Abrir</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="cerrarModal" tabindex="-1" role="dialog" aria-labelledby="cerrarModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="abrirModalLabel">Cerrar Caja</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                        </button>
                    </div>
                    <div class="modal-body">


                         <div class="row" v-if="arqueo.hasOwnProperty('id')">
                            <div class="col-sm-6">
                                <div class="row">
                                    <div class="form-group mb-4 col-sm-4">
                                        <label for="monto_caja_cierre">Inicial </label>
                                        <input type="text" class="form-control" disabled="" id="monto_caja_cierre" name="monto_caja_cierre" v-model="arqueo.monto_inicial" >
                                    </div>
                                    <div class="form-group mb-4 col-sm-4">
                                        <label for="ingreso_caja_cierre"> Ingresos </label>
                                        <input type="text" class="form-control" disabled="" id="ingreso_caja_cierre" name="ingreso_caja_cierre" v-model="arqueo.total_ingresos" >
                                    </div>
                                    <div class="form-group mb-4 col-sm-4">
                                        <label for="egreso_caja_cierre"> Egreso </label>
                                        <input type="text" class="form-control" disabled="" id="egreso_caja_cierre" name="egreso_caja_cierre" v-model="arqueo.total_egresos" >
                                    </div>
                                    <div class="form-group mb-4 col-sm-4">
                                        <label for="creditos"> Créditos </label>
                                        <input type="text" class="form-control" disabled="" id="creditos" name="creditos" value="0.00" >
                                    </div>
                                    <div class="form-group mb-4 col-sm-8">
                                        <label for="abonos"> Abonos de Créditos </label>
                                        <input type="text" class="form-control" disabled="" id="abonos" name="abonos" value="0.00" >
                                    </div>
                                    <div class="form-group mb-4 col-sm-6">
                                        <label for="estimado"> Estimado en Caja </label>
                                        <input type="text" class="form-control" disabled="" id="estimado" name="estimado" v-model="arqueo.monto_estimado" placeholder="100.00">
                                    </div>
                                    <div class="form-group mb-4 col-sm-6">
                                        <label for="efectivo"> Efectivo Disponible </label>
                                        <input type="text" class="form-control" id="efectivo" name="efectivo"  v-model="arqueo.monto_final" placeholder="100.00">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="row">
                                    <div class="form-group mb-4 col-sm-4">
                                        <label for="diferencia"> Diferencia </label>
                                        <input type="text" class="form-control" id="diferencia"  v-model="arqueo.diferencia"  name="diferencia" placeholder="100.00">
                                    </div>
                                    <div class="form-group mb-4 col-sm-8">
                                        <label for="nombre_caja"> Nombre de Caja  </label>
                                        <input type="text" class="form-control" disabled="" id="nombre_caja" name="nombre_caja" v-model="arqueo.caja.name" placeholder="Ingrese Monto inicial">
                                    </div>
                                    <div class="form-group mb-4 col-sm-12">
                                        <label for="egreso_caja_cierre"> Observacion  </label>
                                        <textarea name="observacion" class="form-control" id="observacion" v-model="arqueo.observacion"  cols="10" rows="5"></textarea>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-light-dark" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary " data-bs-dismiss="modal" @click="CerrarCaja">Cerrar Caja</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:{
                        monto_inicial:0,
                        caja_id:1,
                        caja:{

                        }
                    },
                    data:[],
                    cajas:[],
                    arqueo:{
                          caja:{

                        }
                    },
                    loading:false
                }
            },
            computed:{

            },
            methods:{
                async getData(){
                    try{
                        let res = await axios.get("{{url('')}}/api/v1/arqueos")
                        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/arqueos-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("Consulta de Arqueos",function ( row, data, start, end, display ) {
                            var api = this.api();
                            let  n_columnas = api.columns().nodes().length;
                            var j = 4;
                            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++;
                            }
                        })
                    }
                },
                async AbrirCaja(){
                    let self = this
                    this.loading = true
                    try{

                            let res = await axios.post("{{url('')}}/apertura-caja",this.model)
                            dt.destroy()
                            await Promise.all([self.getData(),
                    self.getUrl('auth/cajas'),
                    self.getUrl('get-arqueo'),
                    ]).then((v) => {
                            this.data = v[0]
                            this.cajas= v[1]
                            this.arqueo= v[2]
                        })


                    }catch(e){

                    }finally{
                        this.loading = false
                        dt.create("Consulta de Arqueos",function ( row, data, start, end, display ) {
                            var api = this.api();
                            let  n_columnas = api.columns().nodes().length;
                            var j = 4;
                            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++;
                            }
                        })

                    }
                },
                async CerrarCaja(){
                    let self = this
                    this.loading = true
                    try{

                            let res = await axios.post("{{url('')}}/api/v1/cerrar-caja/"+this.arqueo.id,this.arqueo)
                            dt.destroy()
                            await Promise.all([self.getData(),
                    self.getUrl('auth/cajas'),
                    self.getUrl('get-arqueo'),
                    ]).then((v) => {
                            this.data = v[0]
                            this.cajas= v[1]
                            this.arqueo= v[2]
                        })


                    }catch(e){

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

                                await axios.delete(url)
                                dt.destroy()
                                    await Promise.all([self.getData()]).then((v) => {
                                        self.data = v[0]
                                    })
                                    dt.create("Consulta de Arqueos",function ( row, data, start, end, display ) {
                                        var api = this.api();
                                        let  n_columnas = api.columns().nodes().length;
                                        var j = 4;
                                        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('')}}/"+path)
                        return res.data
                    } catch (e) {

                    } finally {

                    }
                },
            },
            mounted(){
                this.$nextTick(async () => {
$("#module_caja").addClass("module_active")
                    let self = this
                    this.loading = true
                    try {
                        await Promise.all([self.getData(),
                    self.getUrl('auth/cajas'),
                    self.getUrl('get-arqueo'),
                    ]).then((v) => {
                            this.data = v[0]
                            this.cajas= v[1]
                            this.arqueo= v[2]
                        })
                        dt.create("Consulta de Arqueos",function ( row, data, start, end, display ) {
                            var api = this.api();
                            let  n_columnas = api.columns().nodes().length;
                            var j = 4;
                            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) {

                    } finally {

                        this.loading = false
                    }




                })

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

        }
    </style>
@endslot
@endcomponent