@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>Cobrar Credito</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                            <div class="row p-3">

                                <div class="col-12">

                                    <label for="">Clientes</label>
                                    <select id="select-beast" v-model="cliente_id" placeholder="Selecciona un cliente..." autocomplete="off" @change="ChangeItem">
                                        <option value="">Selecciona un cliente...</option>
                                        <template v-for="m in clientes">
                                            <option :value="m.id">{{m.documento.name}} {{m.nro_documento}} | {{m.nombre}}</option>
                                        </template>
                                    </select>

                                </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%">
                           <thead>
                                                <tr>


                                                    <th>#</th>


                                                    <th>Fecha de Credito</th>
                                                    <th>Total</th>
                                                    <th>Pagado</th>


                                                    <th>Pendiente</th>

                                                    <th>Fecha</th>




                                                </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(m,i) in cliente.creditos">
                                                <td>{{i+1}}</td>
                                                <td>{{m.fecha_limite}}</td>
                                                <td>{{m.total}}</td>
                                                <td>{{Number(m.pagado).toFixed(2)}}</td>
                                                <td>{{Number(m.pendiente).toFixed(2)}}</td>
                                                <td>
                                                    <button class="btn btn-primary mb-2 mr-2 btn_credito" @click="venta=m">
                                                        <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="text-white feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                                                    </button>
                                                </td>
                                            </tr>

                                            </tbody>
                                        </table>
                                        <div class="container p-3" v-if="venta.hasOwnProperty('id')">
                                            <div class="row">

                                                <div class="col-3">
                                                    <label for="n_venta">Venta ID</label>
                                                    <input v-model="venta.id"  type="text" id="n_venta" class="form-control form-control-sm" disabled="">
                                                </div>
                                                <div class="col-3">
                                                    <label for="total_credito">Total</label>
                                                    <input v-model="venta.total"  type="text" id="total_credito" class="form-control form-control-sm" disabled="">
                                                </div>
                                                <div class="col-3">
                                                    <label for="credito_pagado">Pagado</label>
                                                    <input  :value="Number(venta.pagado).toFixed(2)" type="text" id="credito_pagado" class="form-control form-control-sm" disabled="">
                                                </div>
                                                <div class="col-3">
                                                    <label for="credito_pendiente"> Pendiente </label>
                                                    <input  :value="Number(venta.pendiente).toFixed(2)" type="text" id="credito_pendiente" class="form-control form-control-sm" disabled="">

                                                </div>
                                                <div class="col-9">
                                                    <label for="razon_cliente"> Cliente  </label>
                                                    <input  v-model="venta.cliente.nombre" type="text" id="razon_cliente" class="form-control form-control-sm" disabled="">
                                                </div>
                                                <div class="col-3">
                                                    <label for="monto_abono"> Monto de Abono  </label>
                                                    <input  v-model="pago.monto" type="text" id="monto_abono" class="form-control form-control-sm">
                                                </div>

                                                <div class="col-12">
                                                    <label for="">Forma de Pago</label>
                                                <select name="" class="form-control form-control-sm w-100" id="" v-model="pago.formapago_id" >

                                                            <template v-for="m in formapagos">
                                                                <option :value="m.id">{{m.name}}</option>
                                                            </template>

                                                          </select>
                                                </div>
                                                <div class="col-12 mt-2 text-center">
                                                    <!-- Limpiar -->
                                                    <button class="btn btn-outline-dark mb-2 p-2 mx-2"  >
                                                        <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-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                                                        Limpiar
                                                    </button>

                                                    <!-- Precesar -->
                                                    <button class="btn btn-primary mb-2 p-2" @click="PagarCredito" :disabled="pago.monto >venta.pendiente">
                                                        <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-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
                                                        Procesar Pago
                                                    </button>

                                                </div>
                                            </div>
                                        </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="modal  "  id="arqueoModal" data-bs-backdrop="static" data-bs-keyboard="false"  tabindex="-1" role="dialog" aria-labelledby="arqueoModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-ms" role="document">
                <div class="modal-content">

                    <div class="modal-body">
                        <img :src="asset('img/no_caja.png')" style="width: 100%">
                    </div>
                     <div class="modal-footer justify-content-center">

                        <a :href="url('/cajas/arqueo')" class="btn btn-primary" id="btn_facturar">

                            Abrir caja
                        </a>
                    </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,
                    model:{
                        name:''
                    },
                    data:[],
                    cliente_id:'',
                    clientes:[],
                    formapagos:[],
                    cliente:{
                        creditos:[]
                    },
                    venta:{
                        cliente:{}
                    },
                    pago:{
                        monto:0,
                        formapago_id:1,
                    },
                    loading:false,
                    arqueo:{

                    }
                }
            },
            computed:{

            },
            methods:{

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

                    }finally{

                    }
                },
                async getUrl2(path) {
                    try {
                        let res = await axios.get("{{url('')}}/" + path);
                        return res.data;
                    } catch (e) {
                    } finally {
                    }
                },
                async PagarCredito(){
                    this.loading = true
                    try{
                        this.venta.arqueo_id = this.arqueo.id
                        this.venta.pago = this.pago
                        let res = await axios.post("{{url('')}}/api/v1/pagoVentas",this.venta)
                        Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: 'Guardado!',

                            })
                            window.open(res.data.url_pdf_ticket,'_blank')
                        await this.ChangeItem()
                        this.pago.monto = 0
                        this.venta = {
                            cliente:{}
                        }
                    }catch(e){

                    }finally{
                        this.loading = false
                    }
                },
                async agregarStock(item){
                    try{
                        item.almacen = this.almacen
                        let res = await axios.post("{{url('')}}/api/v1/items",item)
                        Snackbar.show({
                            text: 'Se ha agregado Stock',
                            pos: 'top-right',
                            actionTextColor: '#fff',
                            backgroundColor: '#00ab55',
                            actionText: 'Cerrar'
                        });
                    }catch(e){

                    }finally{

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

                            let res = await axios.post("{{url('')}}/api/v1/clienteCreditos",{id:this.cliente_id}).then((v)=>{
                                this.cliente = v.data

                            })




                    }catch(e){

                    }finally{
                        this.loading = false

                    }
                },
                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/personas')}}/"+id

                                await axios.delete(url)
                                dt.destroy()
                                    await Promise.all([self.getData()]).then((v) => {
                                        self.data = v[0]
                                    })
                                dt.create()
                            } catch (e) {

                            }
                        }
                    })
                },
                asset(url){
                    return "{{asset('')}}"+url
                },
                url(url){
                    return "{{url('')}}"+url
                },

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

                            this.clientes = v[0]
                            this.formapagos = v[1]

                            this.arqueo = v[2]
                        })


                    } catch (e) {

                    } finally {
                            if(!this.arqueo.hasOwnProperty('id')){

                                $("#arqueoModal").modal('show')
                            }

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




                })

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

        }
    </style>
@endslot
@endcomponent