window.componentes = window.componentes || {};
    const AdminAppCategoriesList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Lista de Categorias          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Categories List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Nombre","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item._category="{value}">
                        <td>
                                                      <TField :field='{"hint":" Category","name":"_category","type":"text","label":"Categoria","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_categories_list","owner":null,"table":"app_categories","name":"Lista de Categorias","description":"Categories List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":false},{"hint":"Name","name":"name","type":"text","label":"Nombre","active":true},{"hint":" Category","name":"_category","type":"text","label":"Categoria","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-03 03:45:16"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":false},{"hint":"Name","name":"name","type":"text","label":"Nombre","active":true},{"hint":" Category","name":"_category","type":"text","label":"Categoria","active":true}],
        posible_fields: {"name":null,"_category":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_categories_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_categories/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppCategoriesList = AdminAppCategoriesList;
    const AdminAppCategoriesView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Categories Detail          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Categories View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}' :value="data._category"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"_category":null},
        brick:{"id":"admin_app_categories_view","owner":null,"table":"app_categories","name":"Categories Detail","description":"Categories View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:45:16"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}],
        posible_fields: {"id":null,"name":null,"_category":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_categories/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_categories/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppCategoriesView = AdminAppCategoriesView;
    const AdminAppClientsList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Lista de Clientes          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Clients List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Nombre","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.logo="{value}">
                        <td>
                                                      <TField :field='{"hint":"Logo","name":"logo","type":"image","label":"Logo","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.link="{value}">
                        <td>
                                                      <TField :field='{"hint":"Link","name":"link","type":"text","label":"Pagina Web","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.caption="{value}">
                        <td>
                                                      <TField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_clients_list","owner":null,"table":"app_clients","name":"Lista de Clientes","description":"Clients List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":false},{"hint":"Name","name":"name","type":"text","label":"Nombre","active":true},{"hint":"Logo","name":"logo","type":"image","label":"Logo","active":true},{"hint":"Link","name":"link","type":"text","label":"Pagina Web","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-03 08:56:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":false},{"hint":"Name","name":"name","type":"text","label":"Nombre","active":true},{"hint":"Logo","name":"logo","type":"image","label":"Logo","active":true},{"hint":"Link","name":"link","type":"text","label":"Pagina Web","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],
        posible_fields: {"name":null,"logo":null,"link":null,"caption":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_clients_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_clients/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppClientsList = AdminAppClientsList;
    const AdminAppClientsView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Detalle de Cliente          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Clients View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Nombre","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true}' :value="data.logo"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Link","name":"link","type":"text","label":"Pagina Web","active":true}' :value="data.link"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"logo":null,"link":null},
        brick:{"id":"admin_app_clients_view","owner":null,"table":"app_clients","name":"Detalle de Cliente","description":"Clients View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Nombre","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Link","name":"link","type":"text","label":"Pagina Web","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":false}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-03 03:56:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Nombre","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Link","name":"link","type":"text","label":"Pagina Web","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":false}],
        posible_fields: {"id":null,"name":null,"logo":null,"link":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_clients/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_clients/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppClientsView = AdminAppClientsView;
    const AdminAppContactDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Contact Data          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Contact Data List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.image="{value}">
                        <td>
                                                      <TField :field='{"hint":"Image","name":"image","type":"text","label":"Image","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.color="{value}">
                        <td>
                                                      <TField :field='{"hint":"Color","name":"color","type":"text","label":"Color","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.title="{value}">
                        <td>
                                                      <TField :field='{"hint":"Title","name":"title","type":"text","label":"Title","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.caption="{value}">
                        <td>
                                                      <TField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_contact_data_list","owner":null,"table":"app_contact_data","name":"Contact Data","description":"Contact Data List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Image","name":"image","type":"text","label":"Image","active":true},{"hint":"Color","name":"color","type":"text","label":"Color","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:40"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Image","name":"image","type":"text","label":"Image","active":true},{"hint":"Color","name":"color","type":"text","label":"Color","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],
        posible_fields: {"id":null,"image":null,"color":null,"title":null,"caption":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_contact_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_contact_data/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppContactDataList = AdminAppContactDataList;
    const AdminAppContactDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Contact Data Detail          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Contact Data View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Image","name":"image","type":"text","label":"Image","active":true}' :value="data.image"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Color","name":"color","type":"text","label":"Color","active":true}' :value="data.color"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Title","name":"title","type":"text","label":"Title","active":true}' :value="data.title"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="data.caption"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"image":null,"color":null,"title":null,"caption":null},
        brick:{"id":"admin_app_contact_data_view","owner":null,"table":"app_contact_data","name":"Contact Data Detail","description":"Contact Data View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Image","name":"image","type":"text","label":"Image","active":true},{"hint":"Color","name":"color","type":"text","label":"Color","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:40"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Image","name":"image","type":"text","label":"Image","active":true},{"hint":"Color","name":"color","type":"text","label":"Color","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],
        posible_fields: {"id":null,"image":null,"color":null,"title":null,"caption":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_contact_data/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_contact_data/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppContactDataView = AdminAppContactDataView;
    const AdminAppContactMessagesList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Contact Messages          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Contact Messages List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.email="{value}">
                        <td>
                                                      <TField :field='{"hint":"Email","name":"email","type":"text","label":"Email","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.phone="{value}">
                        <td>
                                                      <TField :field='{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.subject="{value}">
                        <td>
                                                      <TField :field='{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.message="{value}">
                        <td>
                                                      <TField :field='{"hint":"Message","name":"message","type":"text","label":"Message","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_contact_messages_list","owner":null,"table":"app_contact_messages","name":"Contact Messages","description":"Contact Messages List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:40"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],
        posible_fields: {"id":null,"name":null,"email":null,"phone":null,"subject":null,"message":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_contact_messages_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_contact_messages/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppContactMessagesList = AdminAppContactMessagesList;
    const AdminAppContactMessagesView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Contact Messages Detail          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Contact Messages View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Email","name":"email","type":"text","label":"Email","active":true}' :value="data.email"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true}' :value="data.phone"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true}' :value="data.subject"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Message","name":"message","type":"text","label":"Message","active":true}' :value="data.message"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"email":null,"phone":null,"subject":null,"message":null},
        brick:{"id":"admin_app_contact_messages_view","owner":null,"table":"app_contact_messages","name":"Contact Messages Detail","description":"Contact Messages View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:40"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],
        posible_fields: {"id":null,"name":null,"email":null,"phone":null,"subject":null,"message":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_contact_messages/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_contact_messages/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppContactMessagesView = AdminAppContactMessagesView;
    const AdminAppGalleryList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Gallery          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Gallery List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.caption="{value}">
                        <td>
                                                      <TField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.file="{value}">
                        <td>
                                                      <TField :field='{"hint":"File","name":"file","type":"text","label":"File","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.alt="{value}">
                        <td>
                                                      <TField :field='{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.is_active="{value}">
                        <td>
                                                      <TField :field='{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_gallery_list","owner":null,"table":"app_gallery","name":"Gallery","description":"Gallery List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"File","name":"file","type":"text","label":"File","active":true},{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:45"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"File","name":"file","type":"text","label":"File","active":true},{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],
        posible_fields: {"id":null,"name":null,"caption":null,"file":null,"alt":null,"is_active":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_gallery_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_gallery/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppGalleryList = AdminAppGalleryList;
    const AdminAppGalleryView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Gallery Detail          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Gallery View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="data.caption"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"File","name":"file","type":"text","label":"File","active":true}' :value="data.file"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true}' :value="data.alt"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}' :value="data.is_active"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"caption":null,"file":null,"alt":null,"is_active":null},
        brick:{"id":"admin_app_gallery_view","owner":null,"table":"app_gallery","name":"Gallery Detail","description":"Gallery View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"File","name":"file","type":"text","label":"File","active":true},{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:45"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"File","name":"file","type":"text","label":"File","active":true},{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],
        posible_fields: {"id":null,"name":null,"caption":null,"file":null,"alt":null,"is_active":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_gallery/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_gallery/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppGalleryView = AdminAppGalleryView;
    const AdminAppPostsList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Lista de Publicaciones          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Posts List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item._category="{value}">
                        <td>
                                                      <TField :field='{"hint":" Category","name":"_category","type":"text","label":"Categoria","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.picture="{value}">
                        <td>
                                                      <TField :field='{"hint":"Picture","name":"picture","type":"image","label":"Imagen","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.title="{value}">
                        <td>
                                                      <TField :field='{"hint":"Title","name":"title","type":"text","label":"Titulo","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.caption="{value}">
                        <td>
                                                      <TField :field='{"hint":"Caption","name":"caption","type":"text","label":"Sub titulo","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.content="{value}">
                        <td>
                                                      <TField :field='{"hint":"Content","name":"content","type":"text","label":"Contenido","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.tags="{value}">
                        <td>
                                                      <TField :field='{"hint":"Tags","name":"tags","type":"text","label":"Palabras de referencia","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_posts_list","owner":null,"table":"app_posts","name":"Lista de Publicaciones","description":"Posts List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":false},{"hint":" Category","name":"_category","type":"text","label":"Categoria","active":true},{"hint":"Picture","name":"picture","type":"image","label":"Imagen","active":true},{"hint":"Title","name":"title","type":"text","label":"Titulo","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Sub titulo","active":true},{"hint":"Content","name":"content","type":"text","label":"Contenido","active":true},{"hint":"Tags","name":"tags","type":"text","label":"Palabras de referencia","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-03 14:36:28"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":false},{"hint":" Category","name":"_category","type":"text","label":"Categoria","active":true},{"hint":"Picture","name":"picture","type":"image","label":"Imagen","active":true},{"hint":"Title","name":"title","type":"text","label":"Titulo","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Sub titulo","active":true},{"hint":"Content","name":"content","type":"text","label":"Contenido","active":true},{"hint":"Tags","name":"tags","type":"text","label":"Palabras de referencia","active":true}],
        posible_fields: {"_category":null,"picture":null,"title":null,"caption":null,"content":null,"tags":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_posts_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_posts/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppPostsList = AdminAppPostsList;
    const AdminAppPostsView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Detalle de Publicacion          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Posts View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":" Category","name":"_category","type":"text","label":"Categoria","active":true}' :value="data._category"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Picture","name":"picture","type":"text","label":"Imagen","active":true}' :value="data.picture"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Title","name":"title","type":"text","label":"Titulo","active":true}' :value="data.title"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Caption","name":"caption","type":"text","label":"Sub Titulo","active":true}' :value="data.caption"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Content","name":"content","type":"text","label":"Contenido","active":true}' :value="data.content"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Tags","name":"tags","type":"text","label":"Palabras de referencia","active":true}' :value="data.tags"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"_category":null,"picture":null,"title":null,"caption":null,"content":null,"tags":null},
        brick:{"id":"admin_app_posts_view","owner":null,"table":"app_posts","name":"Detalle de Publicacion","description":"Posts View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":false},{"hint":" Category","name":"_category","type":"text","label":"Categoria","active":true},{"hint":"Picture","name":"picture","type":"text","label":"Imagen","active":true},{"hint":"Title","name":"title","type":"text","label":"Titulo","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Sub Titulo","active":true},{"hint":"Content","name":"content","type":"text","label":"Contenido","active":true},{"hint":"Tags","name":"tags","type":"text","label":"Palabras de referencia","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-03 04:36:28"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":false},{"hint":" Category","name":"_category","type":"text","label":"Categoria","active":true},{"hint":"Picture","name":"picture","type":"text","label":"Imagen","active":true},{"hint":"Title","name":"title","type":"text","label":"Titulo","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Sub Titulo","active":true},{"hint":"Content","name":"content","type":"text","label":"Contenido","active":true},{"hint":"Tags","name":"tags","type":"text","label":"Palabras de referencia","active":true}],
        posible_fields: {"_category":null,"picture":null,"title":null,"caption":null,"content":null,"tags":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_posts/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_posts/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppPostsView = AdminAppPostsView;
    const AdminAppProductsList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Products          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Products List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item._category="{value}">
                        <td>
                                                      <TField :field='{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.caption="{value}">
                        <td>
                                                      <TField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.description="{value}">
                        <td>
                                                      <TField :field='{"hint":"Description","name":"description","type":"text","label":"Description","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item._brand="{value}">
                        <td>
                                                      <TField :field='{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item._model="{value}">
                        <td>
                                                      <TField :field='{"hint":" Model","name":"_model","type":"text","label":" Model","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.gallery="{value}">
                        <td>
                                                      <TField :field='{"hint":"Gallery","name":"gallery","type":"text","label":"Gallery","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.data_sheet="{value}">
                        <td>
                                                      <TField :field='{"hint":"Data Sheet","name":"data_sheet","type":"text","label":"Data Sheet","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.warranty_policy="{value}">
                        <td>
                                                      <TField :field='{"hint":"Warranty Policy","name":"warranty_policy","type":"text","label":"Warranty Policy","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.video_link="{value}">
                        <td>
                                                      <TField :field='{"hint":"Video Link","name":"video_link","type":"text","label":"Video Link","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_products_list","owner":null,"table":"app_products","name":"Products","description":"Products List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":" Model","name":"_model","type":"text","label":" Model","active":true},{"hint":"Gallery","name":"gallery","type":"text","label":"Gallery","active":true},{"hint":"Data Sheet","name":"data_sheet","type":"text","label":"Data Sheet","active":true},{"hint":"Warranty Policy","name":"warranty_policy","type":"text","label":"Warranty Policy","active":true},{"hint":"Video Link","name":"video_link","type":"text","label":"Video Link","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":" Model","name":"_model","type":"text","label":" Model","active":true},{"hint":"Gallery","name":"gallery","type":"text","label":"Gallery","active":true},{"hint":"Data Sheet","name":"data_sheet","type":"text","label":"Data Sheet","active":true},{"hint":"Warranty Policy","name":"warranty_policy","type":"text","label":"Warranty Policy","active":true},{"hint":"Video Link","name":"video_link","type":"text","label":"Video Link","active":true}],
        posible_fields: {"id":null,"_category":null,"name":null,"caption":null,"description":null,"_brand":null,"_model":null,"gallery":null,"data_sheet":null,"warranty_policy":null,"video_link":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_products_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_products/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppProductsList = AdminAppProductsList;
    const AdminAppProductsView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Products Detail          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Products View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}' :value="data._category"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="data.caption"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Description","name":"description","type":"text","label":"Description","active":true}' :value="data.description"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true}' :value="data._brand"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":" Model","name":"_model","type":"text","label":" Model","active":true}' :value="data._model"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Gallery","name":"gallery","type":"text","label":"Gallery","active":true}' :value="data.gallery"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Data Sheet","name":"data_sheet","type":"text","label":"Data Sheet","active":true}' :value="data.data_sheet"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Warranty Policy","name":"warranty_policy","type":"text","label":"Warranty Policy","active":true}' :value="data.warranty_policy"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Video Link","name":"video_link","type":"text","label":"Video Link","active":true}' :value="data.video_link"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"_category":null,"name":null,"caption":null,"description":null,"_brand":null,"_model":null,"gallery":null,"data_sheet":null,"warranty_policy":null,"video_link":null},
        brick:{"id":"admin_app_products_view","owner":null,"table":"app_products","name":"Products Detail","description":"Products View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":" Model","name":"_model","type":"text","label":" Model","active":true},{"hint":"Gallery","name":"gallery","type":"text","label":"Gallery","active":true},{"hint":"Data Sheet","name":"data_sheet","type":"text","label":"Data Sheet","active":true},{"hint":"Warranty Policy","name":"warranty_policy","type":"text","label":"Warranty Policy","active":true},{"hint":"Video Link","name":"video_link","type":"text","label":"Video Link","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":" Model","name":"_model","type":"text","label":" Model","active":true},{"hint":"Gallery","name":"gallery","type":"text","label":"Gallery","active":true},{"hint":"Data Sheet","name":"data_sheet","type":"text","label":"Data Sheet","active":true},{"hint":"Warranty Policy","name":"warranty_policy","type":"text","label":"Warranty Policy","active":true},{"hint":"Video Link","name":"video_link","type":"text","label":"Video Link","active":true}],
        posible_fields: {"id":null,"_category":null,"name":null,"caption":null,"description":null,"_brand":null,"_model":null,"gallery":null,"data_sheet":null,"warranty_policy":null,"video_link":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_products/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_products/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppProductsView = AdminAppProductsView;
    const AdminAppProductBrandsList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Product Brands          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Brands List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.logo="{value}">
                        <td>
                                                      <TField :field='{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.url="{value}">
                        <td>
                                                      <TField :field='{"hint":"Url","name":"url","type":"text","label":"Url","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.is_active="{value}">
                        <td>
                                                      <TField :field='{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_product_brands_list","owner":null,"table":"app_product_brands","name":"Product Brands","description":"Product Brands List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Url","name":"url","type":"text","label":"Url","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Url","name":"url","type":"text","label":"Url","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],
        posible_fields: {"id":null,"name":null,"logo":null,"url":null,"is_active":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_product_brands_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_brands/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppProductBrandsList = AdminAppProductBrandsList;
    const AdminAppProductBrandsView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Product Brands Detail          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Brands View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true}' :value="data.logo"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Url","name":"url","type":"text","label":"Url","active":true}' :value="data.url"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}' :value="data.is_active"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"logo":null,"url":null,"is_active":null},
        brick:{"id":"admin_app_product_brands_view","owner":null,"table":"app_product_brands","name":"Product Brands Detail","description":"Product Brands View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Url","name":"url","type":"text","label":"Url","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Url","name":"url","type":"text","label":"Url","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],
        posible_fields: {"id":null,"name":null,"logo":null,"url":null,"is_active":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_product_brands/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_brands/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppProductBrandsView = AdminAppProductBrandsView;
    const AdminAppProductBudgetsList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Product Budgets          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Budgets List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item._product="{value}">
                        <td>
                                                      <TField :field='{"hint":" Product","name":"_product","type":"text","label":" Product","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.legal_id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.phone="{value}">
                        <td>
                                                      <TField :field='{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.email="{value}">
                        <td>
                                                      <TField :field='{"hint":"Email","name":"email","type":"text","label":"Email","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.city="{value}">
                        <td>
                                                      <TField :field='{"hint":"City","name":"city","type":"text","label":"City","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.message="{value}">
                        <td>
                                                      <TField :field='{"hint":"Message","name":"message","type":"text","label":"Message","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_product_budgets_list","owner":null,"table":"app_product_budgets","name":"Product Budgets","description":"Product Budgets List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Product","name":"_product","type":"text","label":" Product","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"City","name":"city","type":"text","label":"City","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Product","name":"_product","type":"text","label":" Product","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"City","name":"city","type":"text","label":"City","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],
        posible_fields: {"id":null,"_product":null,"name":null,"legal_id":null,"phone":null,"email":null,"city":null,"message":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_product_budgets_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_budgets/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppProductBudgetsList = AdminAppProductBudgetsList;
    const AdminAppProductBudgetsView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Product Budgets Detail          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Budgets View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":" Product","name":"_product","type":"text","label":" Product","active":true}' :value="data._product"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true}' :value="data.legal_id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true}' :value="data.phone"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Email","name":"email","type":"text","label":"Email","active":true}' :value="data.email"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"City","name":"city","type":"text","label":"City","active":true}' :value="data.city"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Message","name":"message","type":"text","label":"Message","active":true}' :value="data.message"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"_product":null,"name":null,"legal_id":null,"phone":null,"email":null,"city":null,"message":null},
        brick:{"id":"admin_app_product_budgets_view","owner":null,"table":"app_product_budgets","name":"Product Budgets Detail","description":"Product Budgets View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Product","name":"_product","type":"text","label":" Product","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"City","name":"city","type":"text","label":"City","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Product","name":"_product","type":"text","label":" Product","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"City","name":"city","type":"text","label":"City","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],
        posible_fields: {"id":null,"_product":null,"name":null,"legal_id":null,"phone":null,"email":null,"city":null,"message":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_product_budgets/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_budgets/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppProductBudgetsView = AdminAppProductBudgetsView;
    const AdminAppProductModelsList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Product Models          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Models List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item._brand="{value}">
                        <td>
                                                      <TField :field='{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_product_models_list","owner":null,"table":"app_product_models","name":"Product Models","description":"Product Models List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],
        posible_fields: {"id":null,"_brand":null,"name":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_product_models_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_models/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppProductModelsList = AdminAppProductModelsList;
    const AdminAppProductModelsView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Product Models Detail          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Models View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true}' :value="data._brand"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"_brand":null,"name":null},
        brick:{"id":"admin_app_product_models_view","owner":null,"table":"app_product_models","name":"Product Models Detail","description":"Product Models View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],
        posible_fields: {"id":null,"_brand":null,"name":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_product_models/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_models/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppProductModelsView = AdminAppProductModelsView;
    const AdminAppTagsList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Tags          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Tags List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"admin_app_tags_list","owner":null,"table":"app_tags","name":"Tags","description":"Tags List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:45:16"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],
        posible_fields: {"id":null,"name":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/admin_app_tags_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_tags/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppTagsList = AdminAppTagsList;
    const AdminAppTagsView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Tags Detail          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Tags View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null},
        brick:{"id":"admin_app_tags_view","owner":null,"table":"app_tags","name":"Tags Detail","description":"Tags View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:45:16"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],
        posible_fields: {"id":null,"name":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_tags/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_tags/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.AdminAppTagsView = AdminAppTagsView;
    const BaseSysDataComponentList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Components          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Components Lists</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.description="{value}">
                        <td>
                                                      <TField :field='{"hint":"Description","name":"description","type":"text","label":"Description","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.variables="{value}">
                        <td>
                                                      <TField :field='{"hint":"Variables","name":"variables","type":"text","label":"Variables","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.template="{value}">
                        <td>
                                                      <TField :field='{"hint":"Template","name":"template","type":"text","label":"Template","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.method="{value}">
                        <td>
                                                      <TField :field='{"hint":"Method","name":"method","type":"text","label":"Method","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.created="{value}">
                        <td>
                                                      <TField :field='{"hint":"Created","name":"created","type":"text","label":"Created","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.mounted="{value}">
                        <td>
                                                      <TField :field='{"hint":"Mounted","name":"mounted","type":"text","label":"Mounted","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.created_at="{value}">
                        <td>
                                                      <TField :field='{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"base_sys_data_component_list","owner":null,"table":"sys_data_components","name":"Components","description":"Components Lists","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":"Variables","name":"variables","type":"text","label":"Variables","active":false},{"hint":"Template","name":"template","type":"text","label":"Template","active":false},{"hint":"Method","name":"method","type":"text","label":"Method","active":false},{"hint":"Created","name":"created","type":"text","label":"Created","active":false},{"hint":"Mounted","name":"mounted","type":"text","label":"Mounted","active":false},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-11-20 05:58:51"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":"Variables","name":"variables","type":"text","label":"Variables","active":false},{"hint":"Template","name":"template","type":"text","label":"Template","active":false},{"hint":"Method","name":"method","type":"text","label":"Method","active":false},{"hint":"Created","name":"created","type":"text","label":"Created","active":false},{"hint":"Mounted","name":"mounted","type":"text","label":"Mounted","active":false},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],
        posible_fields: {"id":null,"name":null,"description":null,"created_at":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/base_sys_data_component_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/sys_data_components/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.BaseSysDataComponentList = BaseSysDataComponentList;
    const BaseSysDataMethodList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Bricks Lists          </p>
          <p class="text-subtitle-1 text-medium-emphasis"></p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.owner="{value}">
                        <td>
                                                      <TField :field='{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.table="{value}">
                        <td>
                                                      <TField :field='{"hint":"Table","name":"table","type":"text","label":"Table","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <v-chip color="info">{{value}}</v-chip>                                                  </td>
                      </template>
                                          <template v-slot:item.description="{value}">
                        <td>
                                                      <TField :field='{"hint":"Description","name":"description","type":"text","label":"Description","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.method="{value}">
                        <td>
                                                      <v-chip :color=" value=='get'?'primary':'success'" label>
<v-icon v-if=" value=='get' " label>mdi-arrow-down-bold-box-outline</v-icon>
<v-icon v-if=" value=='post' " label>mdi-arrow-up-bold-box-outline</v-icon>
{{value}}
</v-chip>                                                  </td>
                      </template>
                                          <template v-slot:item.type="{value}">
                        <td>
                                                      <TField :field='{"hint":"Type","name":"type","type":"text","label":"Type","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.fields="{value}">
                        <td>
                                                      <TField :field='{"hint":"Fields","name":"fields","type":"text","label":"Fields","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.template="{value}">
                        <td>
                                                      <TField :field='{"hint":"Template","name":"template","type":"text","label":"Template","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.custom_template="{value}">
                        <td>
                                                      <TField :field='{"hint":"Custom Template","name":"custom_template","type":"text","label":"Custom Template","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.container="{value}">
                        <td>
                                                      <TField :field='{"hint":"Container","name":"container","type":"text","label":"Container","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.delete="{value}">
                        <td>
                                                      <TField :field='{"hint":"Delete","name":"delete","type":"text","label":"Delete","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.filter="{value}">
                        <td>
                                                      <TField :field='{"hint":"Filter","name":"filter","type":"text","label":"Filter","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.created_at="{value}">
                        <td>
                                                      <TField :field='{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"base_sys_data_method_list","owner":null,"table":"sys_data_method","name":"Bricks Lists","description":null,"method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":false},{"hint":"Table","name":"table","type":"text","label":"Table","active":false},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":"Method","name":"method","type":"text","label":"Method","active":true},{"hint":"Type","name":"type","type":"text","label":"Type","active":true},{"hint":"Fields","name":"fields","type":"text","label":"Fields","active":false},{"hint":"Template","name":"template","type":"text","label":"Template","active":false},{"hint":"Custom Template","name":"custom_template","type":"text","label":"Custom Template","active":false},{"hint":"Container","name":"container","type":"text","label":"Container","active":false},{"hint":"Delete","name":"delete","type":"text","label":"Delete","active":false},{"hint":"Filter","name":"filter","type":"text","label":"Filter","active":false},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":false}],"template":{"name":"<v-chip color=[[info]]>{{value}}<\/v-chip>","method":"<v-chip :color=[[ value=='get'?'primary':'success']] label>\r\n<v-icon v-if=[[ value=='get' ]] label>mdi-arrow-down-bold-box-outline<\/v-icon>\r\n<v-icon v-if=[[ value=='post' ]] label>mdi-arrow-up-bold-box-outline<\/v-icon>\r\n{{value}}\r\n<\/v-chip>"},"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>","items-per-page":25},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-11-21 13:18:20"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":false},{"hint":"Table","name":"table","type":"text","label":"Table","active":false},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":"Method","name":"method","type":"text","label":"Method","active":true},{"hint":"Type","name":"type","type":"text","label":"Type","active":true},{"hint":"Fields","name":"fields","type":"text","label":"Fields","active":false},{"hint":"Template","name":"template","type":"text","label":"Template","active":false},{"hint":"Custom Template","name":"custom_template","type":"text","label":"Custom Template","active":false},{"hint":"Container","name":"container","type":"text","label":"Container","active":false},{"hint":"Delete","name":"delete","type":"text","label":"Delete","active":false},{"hint":"Filter","name":"filter","type":"text","label":"Filter","active":false},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":false}],
        posible_fields: {"id":null,"name":null,"description":null,"method":null,"type":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/base_sys_data_method_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/sys_data_method/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.BaseSysDataMethodList = BaseSysDataMethodList;
    const BaseSysDataRenderList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Pages          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Pages Lists</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.owner="{value}">
                        <td>
                                                      <TField :field='{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.type="{value}">
                        <td>
                                                      <TField :field='{"hint":"Type","name":"type","type":"text","label":"Type","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.description="{value}">
                        <td>
                                                      <TField :field='{"hint":"Description","name":"description","type":"text","label":"Description","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.structure="{value}">
                        <td>
                                                      <TField :field='{"hint":"Structure","name":"structure","type":"text","label":"Structure","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.template="{value}">
                        <td>
                                                      <TField :field='{"hint":"Template","name":"template","type":"text","label":"Template","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.custom_template="{value}">
                        <td>
                                                      <TField :field='{"hint":"Custom Template","name":"custom_template","type":"text","label":"Custom Template","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.container="{value}">
                        <td>
                                                      <TField :field='{"hint":"Container","name":"container","type":"text","label":"Container","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.created_at="{value}">
                        <td>
                                                      <TField :field='{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"base_sys_data_render_list","owner":null,"table":"sys_data_render","name":"Pages","description":"Pages Lists","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":false},{"hint":"Type","name":"type","type":"text","label":"Type","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":"Structure","name":"structure","type":"text","label":"Structure","active":false},{"hint":"Template","name":"template","type":"text","label":"Template","active":false},{"hint":"Custom Template","name":"custom_template","type":"text","label":"Custom Template","active":false},{"hint":"Container","name":"container","type":"text","label":"Container","active":false},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-11-20 10:58:51"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":false},{"hint":"Type","name":"type","type":"text","label":"Type","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":"Structure","name":"structure","type":"text","label":"Structure","active":false},{"hint":"Template","name":"template","type":"text","label":"Template","active":false},{"hint":"Custom Template","name":"custom_template","type":"text","label":"Custom Template","active":false},{"hint":"Container","name":"container","type":"text","label":"Container","active":false},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],
        posible_fields: {"id":null,"type":null,"name":null,"description":null,"created_at":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/base_sys_data_render_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/sys_data_render/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.BaseSysDataRenderList = BaseSysDataRenderList;
    const BaseSysUsersList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Users List          </p>
          <p class="text-subtitle-1 text-medium-emphasis"></p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.owner="{value}">
                        <td>
                                                      <TField :field='{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.parent="{value}">
                        <td>
                                                      <TField :field='{"hint":"Parent","name":"parent","type":"text","label":"Parent","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.code="{value}">
                        <td>
                                                      <TField :field='{"hint":"Code","name":"code","type":"text","label":"Code","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.fullname="{value}">
                        <td>
                                                      <TField :field='{"hint":"Fullname","name":"fullname","type":"text","label":"Fullname","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.position="{value}">
                        <td>
                                                      <TField :field='{"hint":"Position","name":"position","type":"text","label":"Position","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.email="{value}">
                        <td>
                                                      <TField :field='{"hint":"Email","name":"email","type":"text","label":"Email","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.phone="{value}">
                        <td>
                                                      <TField :field='{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.password="{value}">
                        <td>
                                                      <TField :field='{"hint":"Password","name":"password","type":"text","label":"Password","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.role="{value}">
                        <td>
                                                      <TField :field='{"hint":"Role","name":"role","type":"text","label":"Role","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.bio="{value}">
                        <td>
                                                      <TField :field='{"hint":"Bio","name":"bio","type":"text","label":"Bio","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.birthday="{value}">
                        <td>
                                                      <TField :field='{"hint":"Birthday","name":"birthday","type":"text","label":"Birthday","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.is_active="{value}">
                        <td>
                                                      <TField :field='{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.created_at="{value}">
                        <td>
                                                      <TField :field='{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.updated_at="{value}">
                        <td>
                                                      <TField :field='{"hint":"Updated At","name":"updated_at","type":"text","label":"Updated At","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.token="{value}">
                        <td>
                                                      <TField :field='{"hint":"Token","name":"token","type":"text","label":"Token","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"base_sys_users_list","owner":null,"table":"sys_users","name":"Users List","description":null,"method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":false},{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":false},{"hint":"Parent","name":"parent","type":"text","label":"Parent","active":false},{"hint":"Code","name":"code","type":"text","label":"Code","active":true},{"hint":"Fullname","name":"fullname","type":"text","label":"Fullname","active":true},{"hint":"Position","name":"position","type":"text","label":"Position","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":false},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":false},{"hint":"Password","name":"password","type":"text","label":"Password","active":false},{"hint":"Role","name":"role","type":"text","label":"Role","active":true},{"hint":"Bio","name":"bio","type":"text","label":"Bio","active":false},{"hint":"Birthday","name":"birthday","type":"text","label":"Birthday","active":false},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true},{"hint":"Updated At","name":"updated_at","type":"text","label":"Updated At","active":false},{"hint":"Token","name":"token","type":"text","label":"Token","active":false}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-11-19 16:18:20"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":false},{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":false},{"hint":"Parent","name":"parent","type":"text","label":"Parent","active":false},{"hint":"Code","name":"code","type":"text","label":"Code","active":true},{"hint":"Fullname","name":"fullname","type":"text","label":"Fullname","active":true},{"hint":"Position","name":"position","type":"text","label":"Position","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":false},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":false},{"hint":"Password","name":"password","type":"text","label":"Password","active":false},{"hint":"Role","name":"role","type":"text","label":"Role","active":true},{"hint":"Bio","name":"bio","type":"text","label":"Bio","active":false},{"hint":"Birthday","name":"birthday","type":"text","label":"Birthday","active":false},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true},{"hint":"Updated At","name":"updated_at","type":"text","label":"Updated At","active":false},{"hint":"Token","name":"token","type":"text","label":"Token","active":false}],
        posible_fields: {"code":null,"fullname":null,"position":null,"role":null,"is_active":null,"created_at":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/base_sys_users_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/sys_users/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.BaseSysUsersList = BaseSysUsersList;
    const BaseSysUsersView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Users View          </p>
          <p class="text-subtitle-1 text-medium-emphasis"></p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":true}' :value="data.owner"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Parent","name":"parent","type":"text","label":"Parent","active":true}' :value="data.parent"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Code","name":"code","type":"text","label":"Code","active":true}' :value="data.code"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Fullname","name":"fullname","type":"text","label":"Fullname","active":true}' :value="data.fullname"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Position","name":"position","type":"text","label":"Position","active":true}' :value="data.position"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Email","name":"email","type":"text","label":"Email","active":true}' :value="data.email"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true}' :value="data.phone"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Password","name":"password","type":"text","label":"Password","active":true}' :value="data.password"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Role","name":"role","type":"text","label":"Role","active":true}' :value="data.role"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Bio","name":"bio","type":"text","label":"Bio","active":true}' :value="data.bio"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Birthday","name":"birthday","type":"text","label":"Birthday","active":true}' :value="data.birthday"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}' :value="data.is_active"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}' :value="data.created_at"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Updated At","name":"updated_at","type":"text","label":"Updated At","active":true}' :value="data.updated_at"></CField>
                                              <div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      <div>                                                  <CField :field='{"hint":"Token","name":"token","type":"text","label":"Token","active":true}' :value="data.token"></CField>
                                              <div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"owner":null,"parent":null,"code":null,"fullname":null,"position":null,"email":null,"phone":null,"password":null,"role":null,"bio":null,"birthday":null,"is_active":null,"created_at":null,"updated_at":null,"token":null},
        brick:{"id":"base_sys_users_view","owner":null,"table":"sys_users","name":"Users View","description":null,"method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":true},{"hint":"Parent","name":"parent","type":"text","label":"Parent","active":true},{"hint":"Code","name":"code","type":"text","label":"Code","active":true},{"hint":"Fullname","name":"fullname","type":"text","label":"Fullname","active":true},{"hint":"Position","name":"position","type":"text","label":"Position","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Password","name":"password","type":"text","label":"Password","active":true},{"hint":"Role","name":"role","type":"text","label":"Role","active":true},{"hint":"Bio","name":"bio","type":"text","label":"Bio","active":true},{"hint":"Birthday","name":"birthday","type":"text","label":"Birthday","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true},{"hint":"Updated At","name":"updated_at","type":"text","label":"Updated At","active":true},{"hint":"Token","name":"token","type":"text","label":"Token","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-11-19 15:18:20"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Owner","name":"owner","type":"text","label":"Owner","active":true},{"hint":"Parent","name":"parent","type":"text","label":"Parent","active":true},{"hint":"Code","name":"code","type":"text","label":"Code","active":true},{"hint":"Fullname","name":"fullname","type":"text","label":"Fullname","active":true},{"hint":"Position","name":"position","type":"text","label":"Position","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Password","name":"password","type":"text","label":"Password","active":true},{"hint":"Role","name":"role","type":"text","label":"Role","active":true},{"hint":"Bio","name":"bio","type":"text","label":"Bio","active":true},{"hint":"Birthday","name":"birthday","type":"text","label":"Birthday","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true},{"hint":"Updated At","name":"updated_at","type":"text","label":"Updated At","active":true},{"hint":"Token","name":"token","type":"text","label":"Token","active":true}],
        posible_fields: {"id":null,"owner":null,"parent":null,"code":null,"fullname":null,"position":null,"email":null,"phone":null,"password":null,"role":null,"bio":null,"birthday":null,"is_active":null,"created_at":null,"updated_at":null,"token":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/sys_users/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/sys_users/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.BaseSysUsersView = BaseSysUsersView;
    const HeroSection = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Hero Section Video          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Hero Section</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <div>                <v-container fluid v-if="data" :style="{position:'relative',height:'100vh',width:'100%',overflow:'hidden',backgroundColor:'black'}">
  <video 
         :src="data.background_file"
         style="position: absolute; inset:0; width:100%;height:100%; object-fit:cover"
         autoplay muted loop playsinline>
  </video>
  <div :style="{position:'absolute',inset:0,width:'100%',height:'100%',background:'rgba(0,0,0,0.4)','z-index':-1}"></div>
  <v-container fluid class="fill-height" :style="{position:'absolute',inset:0,width:'100%',height:'100%',background:'rgba(0,0,0,0.35)','z-index':1}">
    <v-card color="transparent" tile flat>
      <v-card-text>
        <v-row>
          <v-col cols="12" md="12">
            <div v-html="data.content"></div>
          </v-col>
          <v-col v-if="data.button_text && data.button_link" cols="12" md="12">
            <v-btn :color="$root.settings.WEB_BTN.config.primary.color" tile flat :href="data.button_link">
              {{data.button_text}}
            </v-btn>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-container>
</v-container>              </div>                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"content":null,"background_file":null,"button_text":null,"button_link":null,"created_at":null},
        brick:{"id":"hero_section","owner":null,"table":"hero_sections","name":"Hero Section Video","description":"Hero Section","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Background File","name":"background_file","type":"text","label":"Background File","active":true},{"hint":"Button Text","name":"button_text","type":"text","label":"Button Text","active":true},{"hint":"Button Link","name":"button_link","type":"text","label":"Button Link","active":true},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],"template":null,"custom_template":"<v-container fluid v-if=\"data\" :style=\"{position:'relative',height:'100vh',width:'100%',overflow:'hidden',backgroundColor:'black'}\">\r\n  <video \r\n         :src=\"data.background_file\"\r\n         style=\"position: absolute; inset:0; width:100%;height:100%; object-fit:cover\"\r\n         autoplay muted loop playsinline>\r\n  <\/video>\r\n  <div :style=\"{position:'absolute',inset:0,width:'100%',height:'100%',background:'rgba(0,0,0,0.4)','z-index':-1}\"><\/div>\r\n  <v-container fluid class=\"fill-height\" :style=\"{position:'absolute',inset:0,width:'100%',height:'100%',background:'rgba(0,0,0,0.35)','z-index':1}\">\r\n    <v-card color=\"transparent\" tile flat>\r\n      <v-card-text>\r\n        <v-row>\r\n          <v-col cols=\"12\" md=\"12\">\r\n            <div v-html=\"data.content\"><\/div>\r\n          <\/v-col>\r\n          <v-col v-if=\"data.button_text && data.button_link\" cols=\"12\" md=\"12\">\r\n            <v-btn :color=\"$root.settings.WEB_BTN.config.primary.color\" tile flat :href=\"data.button_link\">\r\n              {{data.button_text}}\r\n            <\/v-btn>\r\n          <\/v-col>\r\n        <\/v-row>\r\n      <\/v-card-text>\r\n    <\/v-card>\r\n  <\/v-container>\r\n<\/v-container>","custom_functions":null,"container":{"type":"table","append":"<\/div>","gutters":true,"prepend":"<div>","items-per-row":4,"items-per-page":30},"delete":1,"filter":null,"options":null,"created_at":"2025-12-15 16:16:43"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Background File","name":"background_file","type":"text","label":"Background File","active":true},{"hint":"Button Text","name":"button_text","type":"text","label":"Button Text","active":true},{"hint":"Button Link","name":"button_link","type":"text","label":"Button Link","active":true},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],
        posible_fields: {"id":null,"name":null,"content":null,"background_file":null,"button_text":null,"button_link":null,"created_at":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/hero_sections/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/hero_sections/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.HeroSection = HeroSection;
    const HeroSectionImg = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Hero Section Image          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Hero Section</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <div>                <v-img v-if="data" height="100vh" :aspect-ratio="1/1" :src="data.background_file" gradient="to top right, rgba(0,0,0,.33), rgba(25,32,72,.7)" cover>
  <v-container class="fill-height">
    <v-card :color="$root.settings.WEB_BTN.config.primary.color" variant="tonal" tile flat>
      <v-card-text>
        <v-row>
          <v-col cols="12" md="12">
            <div v-html="data.content"></div>
          </v-col>
          <v-col v-if="data.button_text && data.button_link" cols="12" md="12">
            <v-btn :color="$root.settings.WEB_BTN.config.primary.color" tile flat :href="data.button_link">
              {{data.button_text}}
            </v-btn>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-container>
</v-img>              </div>                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"content":null,"background_file":null,"button_text":null,"button_link":null,"created_at":null},
        brick:{"id":"hero_section_img","owner":null,"table":"hero_sections","name":"Hero Section Image","description":"Hero Section","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Background File","name":"background_file","type":"text","label":"Background File","active":true},{"hint":"Button Text","name":"button_text","type":"text","label":"Button Text","active":true},{"hint":"Button Link","name":"button_link","type":"text","label":"Button Link","active":true},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],"template":null,"custom_template":"<v-img v-if=\"data\" height=\"100vh\" :aspect-ratio=\"1\/1\" :src=\"data.background_file\" gradient=\"to top right, rgba(0,0,0,.33), rgba(25,32,72,.7)\" cover>\r\n  <v-container class=\"fill-height\">\r\n    <v-card :color=\"$root.settings.WEB_BTN.config.primary.color\" variant=\"tonal\" tile flat>\r\n      <v-card-text>\r\n        <v-row>\r\n          <v-col cols=\"12\" md=\"12\">\r\n            <div v-html=\"data.content\"><\/div>\r\n          <\/v-col>\r\n          <v-col v-if=\"data.button_text && data.button_link\" cols=\"12\" md=\"12\">\r\n            <v-btn :color=\"$root.settings.WEB_BTN.config.primary.color\" tile flat :href=\"data.button_link\">\r\n              {{data.button_text}}\r\n            <\/v-btn>\r\n          <\/v-col>\r\n        <\/v-row>\r\n      <\/v-card-text>\r\n    <\/v-card>\r\n  <\/v-container>\r\n<\/v-img>","custom_functions":null,"container":{"type":"table","append":"<\/div>","gutters":true,"prepend":"<div>","items-per-row":4,"items-per-page":30},"delete":1,"filter":null,"options":null,"created_at":"2025-12-17 23:16:43"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Background File","name":"background_file","type":"text","label":"Background File","active":true},{"hint":"Button Text","name":"button_text","type":"text","label":"Button Text","active":true},{"hint":"Button Link","name":"button_link","type":"text","label":"Button Link","active":true},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],
        posible_fields: {"id":null,"name":null,"content":null,"background_file":null,"button_text":null,"button_link":null,"created_at":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/hero_sections/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/hero_sections/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.HeroSectionImg = HeroSectionImg;
    const HeroSectionList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Hero Section List          </p>
          <p class="text-subtitle-1 text-medium-emphasis"></p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="30" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.content="{value}">
                        <td>
                                                      <TField :field='{"hint":"Content","name":"content","type":"text","label":"Content","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.background_file="{value}">
                        <td>
                                                      <TField :field='{"hint":"Background File","name":"background_file","type":"text","label":"Background File","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.button_text="{value}">
                        <td>
                                                      <TField :field='{"hint":"Button Text","name":"button_text","type":"text","label":"Button Text","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.button_link="{value}">
                        <td>
                                                      <TField :field='{"hint":"Button Link","name":"button_link","type":"text","label":"Button Link","active":false}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.created_at="{value}">
                        <td>
                                                      <TField :field='{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"hero_section_list","owner":null,"table":"hero_sections","name":"Hero Section List","description":"","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Background File","name":"background_file","type":"text","label":"Background File","active":false},{"hint":"Button Text","name":"button_text","type":"text","label":"Button Text","active":false},{"hint":"Button Link","name":"button_link","type":"text","label":"Button Link","active":false},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","gutters":false,"prepend":"<div>","items-per-row":4,"items-per-page":30},"delete":1,"filter":null,"options":null,"created_at":"2025-12-08 09:33:12"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Background File","name":"background_file","type":"text","label":"Background File","active":false},{"hint":"Button Text","name":"button_text","type":"text","label":"Button Text","active":false},{"hint":"Button Link","name":"button_link","type":"text","label":"Button Link","active":false},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],
        posible_fields: {"id":null,"name":null,"content":null,"created_at":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/hero_section_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/hero_sections/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.HeroSectionList = HeroSectionList;
    const HeroSectionText = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Hero Section Text          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Hero Section</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <div>                <v-row class="fill-height">
  <v-col cols="12" md="12">
    <v-card min-height="100vh" class="d-flex align-center" color="transparent" tile flat>
      <v-card-text>
        <v-row no-gutters>
          <v-col class="d-flex align-center">
            <div>
              <div v-html="data.content"></div>
              <v-btn v-if="data.button_text && data.button_link" :color="$root.settings.WEB_BTN.config.primary.color" tile flat :href="data.button_link">
                {{data.button_text}}
              </v-btn>              
            </div>
          </v-col>
          <v-col cols="12" md="8">
            <v-card height="100%" tile flat>
              <v-img v-if="data" height="100%" :src="data.background_file" gradient="to top right, rgba(0,0,0,.33), rgba(25,32,72,.7)" cover></v-img>
            </v-card>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>  
  </v-col>
</v-row>              </div>                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"content":null,"background_file":null,"button_text":null,"button_link":null,"created_at":null},
        brick:{"id":"hero_section_text","owner":null,"table":"hero_sections","name":"Hero Section Text","description":"Hero Section","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Background File","name":"background_file","type":"text","label":"Background File","active":true},{"hint":"Button Text","name":"button_text","type":"text","label":"Button Text","active":true},{"hint":"Button Link","name":"button_link","type":"text","label":"Button Link","active":true},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],"template":null,"custom_template":"<v-row class=\"fill-height\">\r\n  <v-col cols=\"12\" md=\"12\">\r\n    <v-card min-height=\"100vh\" class=\"d-flex align-center\" color=\"transparent\" tile flat>\r\n      <v-card-text>\r\n        <v-row no-gutters>\r\n          <v-col class=\"d-flex align-center\">\r\n            <div>\r\n              <div v-html=\"data.content\"><\/div>\r\n              <v-btn v-if=\"data.button_text && data.button_link\" :color=\"$root.settings.WEB_BTN.config.primary.color\" tile flat :href=\"data.button_link\">\r\n                {{data.button_text}}\r\n              <\/v-btn>              \r\n            <\/div>\r\n          <\/v-col>\r\n          <v-col cols=\"12\" md=\"8\">\r\n            <v-card height=\"100%\" tile flat>\r\n              <v-img v-if=\"data\" height=\"100%\" :src=\"data.background_file\" gradient=\"to top right, rgba(0,0,0,.33), rgba(25,32,72,.7)\" cover><\/v-img>\r\n            <\/v-card>\r\n          <\/v-col>\r\n        <\/v-row>\r\n      <\/v-card-text>\r\n    <\/v-card>  \r\n  <\/v-col>\r\n<\/v-row>","custom_functions":null,"container":{"type":"table","append":"<\/div>","gutters":true,"prepend":"<div>","items-per-row":4,"items-per-page":30},"delete":1,"filter":null,"options":null,"created_at":"2025-12-20 06:16:43"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Background File","name":"background_file","type":"text","label":"Background File","active":true},{"hint":"Button Text","name":"button_text","type":"text","label":"Button Text","active":true},{"hint":"Button Link","name":"button_link","type":"text","label":"Button Link","active":true},{"hint":"Created At","name":"created_at","type":"text","label":"Created At","active":true}],
        posible_fields: {"id":null,"name":null,"content":null,"background_file":null,"button_text":null,"button_link":null,"created_at":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/hero_sections/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/hero_sections/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.HeroSectionText = HeroSectionText;
    const WebAppCategoriesDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Categories List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Categories List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item._category="{value}">
                        <td>
                                                      <TField :field='{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_categories_data_list","owner":null,"table":"app_categories","name":"Categories List","description":"Categories List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:45:16"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}],
        posible_fields: {"id":null,"name":null,"_category":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_categories_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_categories/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppCategoriesDataList = WebAppCategoriesDataList;
    const WebAppCategoriesDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Categories View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Categories View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}' :value="data._category"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"_category":null},
        brick:{"id":"web_app_categories_data_view","owner":null,"table":"app_categories","name":"Categories View","description":"Categories View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:45:16"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true}],
        posible_fields: {"id":null,"name":null,"_category":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_categories/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_categories/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppCategoriesDataView = WebAppCategoriesDataView;
    const WebAppClientsDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Clients List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Clients List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.logo="{value}">
                        <td>
                                                      <TField :field='{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.link="{value}">
                        <td>
                                                      <TField :field='{"hint":"Link","name":"link","type":"text","label":"Link","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.caption="{value}">
                        <td>
                                                      <TField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_clients_data_list","owner":null,"table":"app_clients","name":"Clients List","description":"Clients List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Link","name":"link","type":"text","label":"Link","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Link","name":"link","type":"text","label":"Link","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],
        posible_fields: {"id":null,"name":null,"logo":null,"link":null,"caption":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_clients_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_clients/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppClientsDataList = WebAppClientsDataList;
    const WebAppClientsDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Clients View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Clients View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true}' :value="data.logo"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Link","name":"link","type":"text","label":"Link","active":true}' :value="data.link"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="data.caption"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"logo":null,"link":null,"caption":null},
        brick:{"id":"web_app_clients_data_view","owner":null,"table":"app_clients","name":"Clients View","description":"Clients View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Link","name":"link","type":"text","label":"Link","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Link","name":"link","type":"text","label":"Link","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],
        posible_fields: {"id":null,"name":null,"logo":null,"link":null,"caption":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_clients/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_clients/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppClientsDataView = WebAppClientsDataView;
    const WebAppContactDataDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Contact Data List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Contact Data List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.image="{value}">
                        <td>
                                                      <TField :field='{"hint":"Image","name":"image","type":"text","label":"Image","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.color="{value}">
                        <td>
                                                      <TField :field='{"hint":"Color","name":"color","type":"text","label":"Color","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.title="{value}">
                        <td>
                                                      <TField :field='{"hint":"Title","name":"title","type":"text","label":"Title","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.caption="{value}">
                        <td>
                                                      <TField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_contact_data_data_list","owner":null,"table":"app_contact_data","name":"Contact Data List","description":"Contact Data List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Image","name":"image","type":"text","label":"Image","active":true},{"hint":"Color","name":"color","type":"text","label":"Color","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:40"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Image","name":"image","type":"text","label":"Image","active":true},{"hint":"Color","name":"color","type":"text","label":"Color","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],
        posible_fields: {"id":null,"image":null,"color":null,"title":null,"caption":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_contact_data_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_contact_data/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppContactDataDataList = WebAppContactDataDataList;
    const WebAppContactDataDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Contact Data View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Contact Data View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Image","name":"image","type":"text","label":"Image","active":true}' :value="data.image"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Color","name":"color","type":"text","label":"Color","active":true}' :value="data.color"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Title","name":"title","type":"text","label":"Title","active":true}' :value="data.title"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="data.caption"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"image":null,"color":null,"title":null,"caption":null},
        brick:{"id":"web_app_contact_data_data_view","owner":null,"table":"app_contact_data","name":"Contact Data View","description":"Contact Data View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Image","name":"image","type":"text","label":"Image","active":true},{"hint":"Color","name":"color","type":"text","label":"Color","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:40"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Image","name":"image","type":"text","label":"Image","active":true},{"hint":"Color","name":"color","type":"text","label":"Color","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}],
        posible_fields: {"id":null,"image":null,"color":null,"title":null,"caption":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_contact_data/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_contact_data/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppContactDataDataView = WebAppContactDataDataView;
    const WebAppContactMessagesDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Contact Messages List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Contact Messages List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.email="{value}">
                        <td>
                                                      <TField :field='{"hint":"Email","name":"email","type":"text","label":"Email","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.phone="{value}">
                        <td>
                                                      <TField :field='{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.subject="{value}">
                        <td>
                                                      <TField :field='{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.message="{value}">
                        <td>
                                                      <TField :field='{"hint":"Message","name":"message","type":"text","label":"Message","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_contact_messages_data_list","owner":null,"table":"app_contact_messages","name":"Contact Messages List","description":"Contact Messages List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:40"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],
        posible_fields: {"id":null,"name":null,"email":null,"phone":null,"subject":null,"message":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_contact_messages_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_contact_messages/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppContactMessagesDataList = WebAppContactMessagesDataList;
    const WebAppContactMessagesDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Contact Messages View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Contact Messages View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Email","name":"email","type":"text","label":"Email","active":true}' :value="data.email"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true}' :value="data.phone"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true}' :value="data.subject"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Message","name":"message","type":"text","label":"Message","active":true}' :value="data.message"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"email":null,"phone":null,"subject":null,"message":null},
        brick:{"id":"web_app_contact_messages_data_view","owner":null,"table":"app_contact_messages","name":"Contact Messages View","description":"Contact Messages View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:40"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Subject","name":"subject","type":"text","label":"Subject","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],
        posible_fields: {"id":null,"name":null,"email":null,"phone":null,"subject":null,"message":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_contact_messages/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_contact_messages/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppContactMessagesDataView = WebAppContactMessagesDataView;
    const WebAppGalleryDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Gallery List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Gallery List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.caption="{value}">
                        <td>
                                                      <TField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.file="{value}">
                        <td>
                                                      <TField :field='{"hint":"File","name":"file","type":"text","label":"File","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.alt="{value}">
                        <td>
                                                      <TField :field='{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.is_active="{value}">
                        <td>
                                                      <TField :field='{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_gallery_data_list","owner":null,"table":"app_gallery","name":"Gallery List","description":"Gallery List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"File","name":"file","type":"text","label":"File","active":true},{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:45"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"File","name":"file","type":"text","label":"File","active":true},{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],
        posible_fields: {"id":null,"name":null,"caption":null,"file":null,"alt":null,"is_active":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_gallery_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_gallery/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppGalleryDataList = WebAppGalleryDataList;
    const WebAppGalleryDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Gallery View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Gallery View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true}' :value="data.caption"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"File","name":"file","type":"text","label":"File","active":true}' :value="data.file"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true}' :value="data.alt"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}' :value="data.is_active"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"caption":null,"file":null,"alt":null,"is_active":null},
        brick:{"id":"web_app_gallery_data_view","owner":null,"table":"app_gallery","name":"Gallery View","description":"Gallery View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"File","name":"file","type":"text","label":"File","active":true},{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:56:45"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"File","name":"file","type":"text","label":"File","active":true},{"hint":"Alt","name":"alt","type":"text","label":"Alt","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],
        posible_fields: {"id":null,"name":null,"caption":null,"file":null,"alt":null,"is_active":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_gallery/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_gallery/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppGalleryDataView = WebAppGalleryDataView;
    const WebAppPostsDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Posts List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Posts List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                                  <div>                  <v-text-field v-model="search"  variant="outlined" color="#b3b3b380" :style="this.$glass()" size="lg" label="Search" prepend-inner-icon="mdi-magnify" tile flat hide-details single-line></v-text-field>
                  <v-data-iterator :items="data" :search="search" :page="helpers.page" :items-per-page="12" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                    <template v-slot:default="{items}">
                      <v-container>
                        <v-row no-gutters justify="center">
                          <v-col v-for="(item,i) in items" cols="12" :md="12">
                                                          <v-row no-gutters>
  <v-col cols="12" md="12">
    <v-card color="transparent" @click="$hash('view',item.raw.id)" tile flat>
      <v-row no-gutters>
        <v-col v-if="item.raw.picture" cols="12" md="4">
          <v-card color="transparent" height="100%" tile flat>
            <v-img rounded="xl" :src="item.raw.picture.file" :alt="item.raw.picture.name" height="100%" cover></v-img>
          </v-card>
        </v-col>
        <v-col>
          <v-card color="transparent" height="100%" tile flat>
            <v-card-text>
              <v-chip v-for="(tag,t) in item.raw.tags.split(',')">{{tag}}</v-chip>
            </v-card-text>
            <v-card-text>
              <p class="text-h3">{{item.raw.title}}</p>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-text>
              <p class="text-h4">{{item.raw.caption}}</p>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-card>
  </v-col>
</v-row>                                                      </v-col>
                        </v-row>
                      </v-container>
                    </template>
                    <template v-slot:footer="{ pageCount }">
                      <v-pagination v-model="helpers.page" :length="pageCount"></v-pagination>
                    </template>
                    <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-iterator>
                  </div>                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_posts_data_list","owner":null,"table":"app_posts","name":"Posts List","description":"Posts List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Picture","name":"picture","type":"text","label":"Picture","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Tags","name":"tags","type":"text","label":"Tags","active":true}],"template":null,"custom_template":"<v-row no-gutters>\r\n  <v-col cols=\"12\" md=\"12\">\r\n    <v-card color=\"transparent\" @click=\"$hash('view',item.raw.id)\" tile flat>\r\n      <v-row no-gutters>\r\n        <v-col v-if=\"item.raw.picture\" cols=\"12\" md=\"4\">\r\n          <v-card color=\"transparent\" height=\"100%\" tile flat>\r\n            <v-img rounded=\"xl\" :src=\"item.raw.picture.file\" :alt=\"item.raw.picture.name\" height=\"100%\" cover><\/v-img>\r\n          <\/v-card>\r\n        <\/v-col>\r\n        <v-col>\r\n          <v-card color=\"transparent\" height=\"100%\" tile flat>\r\n            <v-card-text>\r\n              <v-chip v-for=\"(tag,t) in item.raw.tags.split(',')\">{{tag}}<\/v-chip>\r\n            <\/v-card-text>\r\n            <v-card-text>\r\n              <p class=\"text-h3\">{{item.raw.title}}<\/p>\r\n            <\/v-card-text>\r\n            <v-divider><\/v-divider>\r\n            <v-card-text>\r\n              <p class=\"text-h4\">{{item.raw.caption}}<\/p>\r\n            <\/v-card-text>\r\n          <\/v-card>\r\n        <\/v-col>\r\n      <\/v-row>\r\n    <\/v-card>\r\n  <\/v-col>\r\n<\/v-row>","custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>","items-per-row":1,"items-per-page":12},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-06 02:36:28"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Picture","name":"picture","type":"text","label":"Picture","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Tags","name":"tags","type":"text","label":"Tags","active":true}],
        posible_fields: {"id":null,"_category":null,"picture":null,"title":null,"caption":null,"content":null,"tags":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_posts_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_posts/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppPostsDataList = WebAppPostsDataList;
    const WebAppPostsDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Posts View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Posts View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <div>                <v-row justify="center">
  <v-col cols="12" md="8">
    <v-card tile flat>
      <v-card-text>
        <p class="text-h4">
          {{data.title}}
        </p>
        <v-alert v-if="data.caption" class="font-italic text-h5" border="start" :border-color="$root.settings.WEB_BTN.config.primary.color" :color="$root.settings.WEB_BTN.config.secondary.color" variant="tonal" tile flat>
          <strong class="font-weight-bold">"</strong>{{data.caption}}<strong class="font-weight-bold">"</strong>
        </v-alert>
      </v-card-text>
      <v-img v-if="data.picture" rounded="xl" :src="data.picture.file" :alt="data.picture.name"></v-img>
      <v-card-text v-html="data.content">
      </v-card-text>
    </v-card>
  </v-col>
</v-row>              </div>                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"_category":null,"picture":null,"title":null,"caption":null,"content":null,"tags":null},
        brick:{"id":"web_app_posts_data_view","owner":null,"table":"app_posts","name":"Posts View","description":"Posts View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Picture","name":"picture","type":"text","label":"Picture","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Tags","name":"tags","type":"text","label":"Tags","active":true}],"template":null,"custom_template":"<v-row justify=\"center\">\r\n  <v-col cols=\"12\" md=\"8\">\r\n    <v-card tile flat>\r\n      <v-card-text>\r\n        <p class=\"text-h4\">\r\n          {{data.title}}\r\n        <\/p>\r\n        <v-alert v-if=\"data.caption\" class=\"font-italic text-h5\" border=\"start\" :border-color=\"$root.settings.WEB_BTN.config.primary.color\" :color=\"$root.settings.WEB_BTN.config.secondary.color\" variant=\"tonal\" tile flat>\r\n          <strong class=\"font-weight-bold\">\"<\/strong>{{data.caption}}<strong class=\"font-weight-bold\">\"<\/strong>\r\n        <\/v-alert>\r\n      <\/v-card-text>\r\n      <v-img v-if=\"data.picture\" rounded=\"xl\" :src=\"data.picture.file\" :alt=\"data.picture.name\"><\/v-img>\r\n      <v-card-text v-html=\"data.content\">\r\n      <\/v-card-text>\r\n    <\/v-card>\r\n  <\/v-col>\r\n<\/v-row>","custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-05 21:36:28"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Picture","name":"picture","type":"text","label":"Picture","active":true},{"hint":"Title","name":"title","type":"text","label":"Title","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Content","name":"content","type":"text","label":"Content","active":true},{"hint":"Tags","name":"tags","type":"text","label":"Tags","active":true}],
        posible_fields: {"id":null,"_category":null,"picture":null,"title":null,"caption":null,"content":null,"tags":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_posts/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_posts/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppPostsDataView = WebAppPostsDataView;
    const WebAppProductsDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Products List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Products List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                                  <div>                  <v-text-field v-model="search"  variant="outlined" color="#b3b3b380" :style="this.$glass()" size="lg" label="Search" prepend-inner-icon="mdi-magnify" tile flat hide-details single-line></v-text-field>
                  <v-data-iterator :items="data" :search="search" :page="helpers.page" :items-per-page="30" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                    <template v-slot:default="{items}">
                      <v-container>
                        <v-row  justify="center">
                          <v-col v-for="(item,i) in items" cols="12" :md="4">
                                                          <v-hover v-slot="{ isHovering, props }">
  <v-card @click="$hash('view',item.raw.id)" v-bind="props" :color="$root.settings.WEB_BTN.config.primary.color" :variant="!isHovering?'tonal':'flat'" rounded="xl" tile flat>
    <v-card-text style="overflow: hidden; display: block;" class="pa-0">
      <v-img 
             v-if="item.raw.gallery" 
             :src="item.raw.gallery[0].file" 
             :alt="item.raw.gallery[0].name" 
             :style="{display: 'block','transition': 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)','transform-origin': 'center center',transform: !isHovering?'scale(1)':'scale(1.5)'}"
      >
      </v-img>
    </v-card-text>
    <v-card-text class="text-h5 font-weight-bold px-5">
      {{item.raw.name}}
    </v-card-text>
  </v-card>
</v-hover>                                                      </v-col>
                        </v-row>
                      </v-container>
                    </template>
                    <template v-slot:footer="{ pageCount }">
                      <v-pagination v-model="helpers.page" :length="pageCount"></v-pagination>
                    </template>
                    <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-iterator>
                  </div>                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_products_data_list","owner":null,"table":"app_products","name":"Products List","description":"Products List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":" Model","name":"_model","type":"text","label":" Model","active":true},{"hint":"Gallery","name":"gallery","type":"text","label":"Gallery","active":true},{"hint":"Data Sheet","name":"data_sheet","type":"text","label":"Data Sheet","active":true},{"hint":"Warranty Policy","name":"warranty_policy","type":"text","label":"Warranty Policy","active":true},{"hint":"Video Link","name":"video_link","type":"text","label":"Video Link","active":true}],"template":null,"custom_template":"<v-hover v-slot=\"{ isHovering, props }\">\r\n  <v-card @click=\"$hash('view',item.raw.id)\" v-bind=\"props\" :color=\"$root.settings.WEB_BTN.config.primary.color\" :variant=\"!isHovering?'tonal':'flat'\" rounded=\"xl\" tile flat>\r\n    <v-card-text style=\"overflow: hidden; display: block;\" class=\"pa-0\">\r\n      <v-img \r\n             v-if=\"item.raw.gallery\" \r\n             :src=\"item.raw.gallery[0].file\" \r\n             :alt=\"item.raw.gallery[0].name\" \r\n             :style=\"{display: 'block','transition': 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)','transform-origin': 'center center',transform: !isHovering?'scale(1)':'scale(1.5)'}\"\r\n      >\r\n      <\/v-img>\r\n    <\/v-card-text>\r\n    <v-card-text class=\"text-h5 font-weight-bold px-5\">\r\n      {{item.raw.name}}\r\n    <\/v-card-text>\r\n  <\/v-card>\r\n<\/v-hover>","custom_functions":null,"container":{"type":"grid","append":"<\/div>","gutters":true,"prepend":"<div>","items-per-row":3,"items-per-page":30},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-06 22:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":" Model","name":"_model","type":"text","label":" Model","active":true},{"hint":"Gallery","name":"gallery","type":"text","label":"Gallery","active":true},{"hint":"Data Sheet","name":"data_sheet","type":"text","label":"Data Sheet","active":true},{"hint":"Warranty Policy","name":"warranty_policy","type":"text","label":"Warranty Policy","active":true},{"hint":"Video Link","name":"video_link","type":"text","label":"Video Link","active":true}],
        posible_fields: {"id":null,"_category":null,"name":null,"caption":null,"description":null,"_brand":null,"_model":null,"gallery":null,"data_sheet":null,"warranty_policy":null,"video_link":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_products_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_products/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppProductsDataList = WebAppProductsDataList;
    const WebAppProductsDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Products View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Products View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <div>                <v-card :color="$root.settings.WEB_BTN.config.primary.color" variant="tonal" tile flat>
  <v-card-text class="text-center text-h5 font-weight-bold py-4">
    {{data.name}}
  </v-card-text>
</v-card>
<v-row justify="center">
  <v-col cols="12" md="10">
    <v-card :color="$root.settings.WEB_BTN.config.secondary.color" variant="tonal" tile flat>
      <v-card-text>
        <v-row no-gutters>
          <v-col cols="12" md="4">
            <dt class="text-h4">Categoria</dt>
            <dd class="text-h5">{{data._category}}</dd>
            <v-divider class="my-2"></v-divider>
            
            <dt class="text-h4">Marca</dt>
            <dd class="text-h5">{{data._brand}}</dd>
            <v-divider class="my-2"></v-divider>
            
            <dt class="text-h4">Modelo</dt>
            <dd class="text-h5">{{data._model}}</dd>
            <v-divider class="my-2"></v-divider>
            
            <dt class="text-h4">Resumen del Producto</dt>
            <dd class="text-h5">{{data.caption}}</dd>
            <v-divider class="my-2"></v-divider>
            
            <v-btn v-if="data.data_sheet" v-bind="$root.settings.WEB_BTN.config.primary" stacked block @click="downloadFile(data.data_sheet.name,data.data_sheet.file)">
              <v-icon>mdi-file-document-outline</v-icon>&nbsp;Ficha técnica
            </v-btn>
          </v-col>
          <v-col>
            <v-card v-if="data.gallery" color="transparent" height="100%">
              <v-carousel show-arrows="hover" hide-delimiter-background>
                <v-carousel-item v-for="(image,i) in data.gallery" cover :key="i">
                  <v-img :src="image.file" :alt="image.name" height="100%" cover></v-img>
                </v-carousel-item>
              </v-carousel>
            </v-card>
          </v-col>
        </v-row>
      </v-card-text>
      <v-divider class="my-2"></v-divider>
      <v-card-text>
        <dt class="text-h4">Descripcion</dt>
        <div v-html="data.description"></div>
      </v-card-text>
      <v-divider class="my-2"></v-divider>
      <v-card-text>
        <p class="text-h4 text-center">Descubre nuestros otros modelos</p>
        <SimilarProducts :binds="{_brand:this.data._brand}" :key="data._brand"></SimilarProducts>
      </v-card-text>
    </v-card>
  </v-col>
</v-row>
              </div>                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"_category":null,"name":null,"caption":null,"description":null,"_brand":null,"_model":null,"gallery":null,"data_sheet":null,"warranty_policy":null,"video_link":null},
        brick:{"id":"web_app_products_data_view","owner":null,"table":"app_products","name":"Products View","description":"Products View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":" Model","name":"_model","type":"text","label":" Model","active":true},{"hint":"Gallery","name":"gallery","type":"text","label":"Gallery","active":true},{"hint":"Data Sheet","name":"data_sheet","type":"text","label":"Data Sheet","active":true},{"hint":"Warranty Policy","name":"warranty_policy","type":"text","label":"Warranty Policy","active":true},{"hint":"Video Link","name":"video_link","type":"text","label":"Video Link","active":true}],"template":null,"custom_template":"<v-card :color=\"$root.settings.WEB_BTN.config.primary.color\" variant=\"tonal\" tile flat>\r\n  <v-card-text class=\"text-center text-h5 font-weight-bold py-4\">\r\n    {{data.name}}\r\n  <\/v-card-text>\r\n<\/v-card>\r\n<v-row justify=\"center\">\r\n  <v-col cols=\"12\" md=\"10\">\r\n    <v-card :color=\"$root.settings.WEB_BTN.config.secondary.color\" variant=\"tonal\" tile flat>\r\n      <v-card-text>\r\n        <v-row no-gutters>\r\n          <v-col cols=\"12\" md=\"4\">\r\n            <dt class=\"text-h4\">Categoria<\/dt>\r\n            <dd class=\"text-h5\">{{data._category}}<\/dd>\r\n            <v-divider class=\"my-2\"><\/v-divider>\r\n            \r\n            <dt class=\"text-h4\">Marca<\/dt>\r\n            <dd class=\"text-h5\">{{data._brand}}<\/dd>\r\n            <v-divider class=\"my-2\"><\/v-divider>\r\n            \r\n            <dt class=\"text-h4\">Modelo<\/dt>\r\n            <dd class=\"text-h5\">{{data._model}}<\/dd>\r\n            <v-divider class=\"my-2\"><\/v-divider>\r\n            \r\n            <dt class=\"text-h4\">Resumen del Producto<\/dt>\r\n            <dd class=\"text-h5\">{{data.caption}}<\/dd>\r\n            <v-divider class=\"my-2\"><\/v-divider>\r\n            \r\n            <v-btn v-if=\"data.data_sheet\" v-bind=\"$root.settings.WEB_BTN.config.primary\" stacked block @click=\"downloadFile(data.data_sheet.name,data.data_sheet.file)\">\r\n              <v-icon>mdi-file-document-outline<\/v-icon>&nbsp;Ficha t\u00e9cnica\r\n            <\/v-btn>\r\n          <\/v-col>\r\n          <v-col>\r\n            <v-card v-if=\"data.gallery\" color=\"transparent\" height=\"100%\">\r\n              <v-carousel show-arrows=\"hover\" hide-delimiter-background>\r\n                <v-carousel-item v-for=\"(image,i) in data.gallery\" cover :key=\"i\">\r\n                  <v-img :src=\"image.file\" :alt=\"image.name\" height=\"100%\" cover><\/v-img>\r\n                <\/v-carousel-item>\r\n              <\/v-carousel>\r\n            <\/v-card>\r\n          <\/v-col>\r\n        <\/v-row>\r\n      <\/v-card-text>\r\n      <v-divider class=\"my-2\"><\/v-divider>\r\n      <v-card-text>\r\n        <dt class=\"text-h4\">Descripcion<\/dt>\r\n        <div v-html=\"data.description\"><\/div>\r\n      <\/v-card-text>\r\n      <v-divider class=\"my-2\"><\/v-divider>\r\n      <v-card-text>\r\n        <p class=\"text-h4 text-center\">Descubre nuestros otros modelos<\/p>\r\n        <SimilarProducts :binds=\"{_brand:this.data._brand}\" :key=\"data._brand\"><\/SimilarProducts>\r\n      <\/v-card-text>\r\n    <\/v-card>\r\n  <\/v-col>\r\n<\/v-row>\r\n","custom_functions":"","container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-14 05:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Category","name":"_category","type":"text","label":" Category","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Caption","name":"caption","type":"text","label":"Caption","active":true},{"hint":"Description","name":"description","type":"text","label":"Description","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":" Model","name":"_model","type":"text","label":" Model","active":true},{"hint":"Gallery","name":"gallery","type":"text","label":"Gallery","active":true},{"hint":"Data Sheet","name":"data_sheet","type":"text","label":"Data Sheet","active":true},{"hint":"Warranty Policy","name":"warranty_policy","type":"text","label":"Warranty Policy","active":true},{"hint":"Video Link","name":"video_link","type":"text","label":"Video Link","active":true}],
        posible_fields: {"id":null,"_category":null,"name":null,"caption":null,"description":null,"_brand":null,"_model":null,"gallery":null,"data_sheet":null,"warranty_policy":null,"video_link":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_products/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_products/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppProductsDataView = WebAppProductsDataView;
    const WebAppProductBrandsDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Product Brands List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Brands List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.logo="{value}">
                        <td>
                                                      <TField :field='{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.url="{value}">
                        <td>
                                                      <TField :field='{"hint":"Url","name":"url","type":"text","label":"Url","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.is_active="{value}">
                        <td>
                                                      <TField :field='{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_product_brands_data_list","owner":null,"table":"app_product_brands","name":"Product Brands List","description":"Product Brands List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Url","name":"url","type":"text","label":"Url","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Url","name":"url","type":"text","label":"Url","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],
        posible_fields: {"id":null,"name":null,"logo":null,"url":null,"is_active":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_product_brands_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_brands/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppProductBrandsDataList = WebAppProductBrandsDataList;
    const WebAppProductBrandsDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Product Brands View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Brands View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true}' :value="data.logo"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Url","name":"url","type":"text","label":"Url","active":true}' :value="data.url"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}' :value="data.is_active"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null,"logo":null,"url":null,"is_active":null},
        brick:{"id":"web_app_product_brands_data_view","owner":null,"table":"app_product_brands","name":"Product Brands View","description":"Product Brands View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Url","name":"url","type":"text","label":"Url","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Logo","name":"logo","type":"text","label":"Logo","active":true},{"hint":"Url","name":"url","type":"text","label":"Url","active":true},{"hint":"Is Active","name":"is_active","type":"text","label":"Is Active","active":true}],
        posible_fields: {"id":null,"name":null,"logo":null,"url":null,"is_active":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_product_brands/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_brands/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppProductBrandsDataView = WebAppProductBrandsDataView;
    const WebAppProductBudgetsDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Product Budgets List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Budgets List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item._product="{value}">
                        <td>
                                                      <TField :field='{"hint":" Product","name":"_product","type":"text","label":" Product","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.legal_id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.phone="{value}">
                        <td>
                                                      <TField :field='{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.email="{value}">
                        <td>
                                                      <TField :field='{"hint":"Email","name":"email","type":"text","label":"Email","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.city="{value}">
                        <td>
                                                      <TField :field='{"hint":"City","name":"city","type":"text","label":"City","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.message="{value}">
                        <td>
                                                      <TField :field='{"hint":"Message","name":"message","type":"text","label":"Message","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_product_budgets_data_list","owner":null,"table":"app_product_budgets","name":"Product Budgets List","description":"Product Budgets List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Product","name":"_product","type":"text","label":" Product","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"City","name":"city","type":"text","label":"City","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Product","name":"_product","type":"text","label":" Product","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"City","name":"city","type":"text","label":"City","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],
        posible_fields: {"id":null,"_product":null,"name":null,"legal_id":null,"phone":null,"email":null,"city":null,"message":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_product_budgets_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_budgets/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppProductBudgetsDataList = WebAppProductBudgetsDataList;
    const WebAppProductBudgetsDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Product Budgets View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Budgets View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":" Product","name":"_product","type":"text","label":" Product","active":true}' :value="data._product"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true}' :value="data.legal_id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true}' :value="data.phone"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Email","name":"email","type":"text","label":"Email","active":true}' :value="data.email"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"City","name":"city","type":"text","label":"City","active":true}' :value="data.city"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Message","name":"message","type":"text","label":"Message","active":true}' :value="data.message"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"_product":null,"name":null,"legal_id":null,"phone":null,"email":null,"city":null,"message":null},
        brick:{"id":"web_app_product_budgets_data_view","owner":null,"table":"app_product_budgets","name":"Product Budgets View","description":"Product Budgets View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Product","name":"_product","type":"text","label":" Product","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"City","name":"city","type":"text","label":"City","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Product","name":"_product","type":"text","label":" Product","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true},{"hint":"Legal Id","name":"legal_id","type":"text","label":"Legal Id","active":true},{"hint":"Phone","name":"phone","type":"text","label":"Phone","active":true},{"hint":"Email","name":"email","type":"text","label":"Email","active":true},{"hint":"City","name":"city","type":"text","label":"City","active":true},{"hint":"Message","name":"message","type":"text","label":"Message","active":true}],
        posible_fields: {"id":null,"_product":null,"name":null,"legal_id":null,"phone":null,"email":null,"city":null,"message":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_product_budgets/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_budgets/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppProductBudgetsDataView = WebAppProductBudgetsDataView;
    const WebAppProductModelsDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Product Models List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Models List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item._brand="{value}">
                        <td>
                                                      <TField :field='{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_product_models_data_list","owner":null,"table":"app_product_models","name":"Product Models List","description":"Product Models List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],
        posible_fields: {"id":null,"_brand":null,"name":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_product_models_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_models/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppProductModelsDataList = WebAppProductModelsDataList;
    const WebAppProductModelsDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Product Models View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Product Models View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true}' :value="data._brand"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"_brand":null,"name":null},
        brick:{"id":"web_app_product_models_data_view","owner":null,"table":"app_product_models","name":"Product Models View","description":"Product Models View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 23:36:35"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":" Brand","name":"_brand","type":"text","label":" Brand","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],
        posible_fields: {"id":null,"_brand":null,"name":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_product_models/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_product_models/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppProductModelsDataView = WebAppProductModelsDataView;
    const WebAppTagsDataList = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                          <v-icon>mdi-view-list-outline</v-icon>
                                    Tags List          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Tags List</p>
        </v-col>
                                  <v-col cols="12" md="12">
            <v-card tile flat>
              <v-card-text class="pa-0">
                                  <v-text-field v-model="search" density="compact" label="Search" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line></v-text-field>
                  <v-data-table :headers="render_header" :items="data" :items-per-page="25" :search="search" :loading="helpers.loading" :key="$uniqid()">
                    <template v-slot:loading>
                      <v-skeleton-loader type="table-row@5"></v-skeleton-loader>
                    </template>
                                          <template v-slot:item.id="{value}">
                        <td>
                                                      <TField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                          <template v-slot:item.name="{value}">
                        <td>
                                                      <TField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="value"></TField>
                                                  </td>
                      </template>
                                        <template v-slot:item.render_table_actions="{ item }">
                      <div v-for="(btn,b) in extra">
                        <div v-if="'condition' in btn">
                          <v-btn v-if="allow.includes(btn.action)?true:false" :disabled="!$evaluate(btn.condition,item)" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                            <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                            <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                          </v-btn>
                        </div>
                        <v-btn v-else :disabled="allow.includes(btn.action)?false:true" color="secondary" icon size="x-small" @click="btn.inline?$emit('render_action',btn.action||'action',item[pk],item):$hash(btn.action||'action',item[pk])">
                          <v-icon>{{btn.icon || 'mdi-pointer'}}</v-icon>
                          <v-tooltip activator="parent">{{btn.title||'Custom Action'}}</v-tooltip>
                        </v-btn>
                      </div>
                      <v-btn v-if="allow.includes('update')" v-bind="$root.settings.PANEL_BTN.config.primary" icon="mdi-pencil" size="x-small" @click="$hash('update',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('view')" v-bind="$root.settings.PANEL_BTN.config.secondary" icon="mdi-eye-outline" size="x-small" @click="$hash('view',item[pk])"></v-btn>
                      <v-btn v-if="allow.includes('delete')" v-bind="$root.settings.PANEL_BTN.config.error" icon="mdi-delete" size="x-small" @click="remove=item[pk],pin=$pin(6),pin_verify=null"></v-btn>
                    </template>
                  </v-data-table>
                                              </v-card-text>
            </v-card>
          </v-col>
                <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:[],
        brick:{"id":"web_app_tags_data_list","owner":null,"table":"app_tags","name":"Tags List","description":"Tags List","method":"get","type":"all","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"table","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:45:16"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],
        posible_fields: {"id":null,"name":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                          let search = new URLSearchParams(window.location.search)
          let put_search = search?'?'+search.toString():''
          if(search){
            this.local_filter = search
          } else {
            let filter = { ...this.binds, ...this.local_filter}
            this.local_filter = filter
          }
          const promise = await axios.get('/api/web_app_tags_data_list/all'+put_search,{
            params:{ ...this.local_filter }
          });
          this.pk = promise.data.props.$pk
                this.data = promise.data.data
                this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_tags/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppTagsDataList = WebAppTagsDataList;
    const WebAppTagsDataView = {
    template: `
      <v-row no-gutters>
        <v-col v-if="admin==true" cols="12" md="12">
          <p class="text-h6 font-weight-bold">
                                      <v-icon>mdi-view-compact-outline</v-icon>
                        Tags View          </p>
          <p class="text-subtitle-1 text-medium-emphasis">Tags View</p>
        </v-col>
                          <v-col cols="12" md="12">
                          <v-row>
                                                      <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Id","name":"id","type":"text","label":"Id","active":true}' :value="data.id"></CField>
                                              </div>                    </v-col>
                                                                        <v-col cols="12" md="12">
                      </div>                                                  <CField :field='{"hint":"Name","name":"name","type":"text","label":"Name","active":true}' :value="data.name"></CField>
                                              </div>                    </v-col>
                                                </v-row>
                      </v-col>
                        <v-dialog v-model="remove" width="320">
          <v-card color="rgba(255,50,50,.5)" :style="$glass()" tile flat>
            <v-card-title class="font-weight-black">
              Eliminar Registro
            </v-card-title>
            <v-card-text class="font-weight-bold">
              Ingrese el codigo: <strong>{{pin}}</strong>
              <v-otp-input v-model="pin_verify" length="6" variant="filled"></v-otp-input>
            </v-card-text>
            <v-card-actions class="d-flex justify-space-between">
              <v-btn variant="flat" class="ml-auto" color="error" :disabled="pin_verify==pin?false:true" @click="Remove()" tile>
                Eliminar
              </v-btn>
              <v-btn class="mr-auto" @click="remove=null">Cerrar</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    `,
    data() {
      return {
        data:{"id":null,"name":null},
        brick:{"id":"web_app_tags_data_view","owner":null,"table":"app_tags","name":"Tags View","description":"Tags View","method":"get","type":"first","fields":[{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],"template":null,"custom_template":null,"custom_functions":null,"container":{"type":"grid","append":"<\/div>","prepend":"<div>"},"delete":1,"filter":{"progress":"DESC"},"options":null,"created_at":"2025-12-02 22:45:16"},
        render: [{"hint":"Id","name":"id","type":"text","label":"Id","active":true},{"hint":"Name","name":"name","type":"text","label":"Name","active":true}],
        posible_fields: {"id":null,"name":null},
        local_filter:{},
        search:null,
        remove:null,
        pin:this.$pin(6),
        pin_verify:null,
        helpers:{
          loading:false,
          page:1
        }
      };
    },
    props: {
      allow: {
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      inline:{
        type: Boolean,
        default: false
      },
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },
      filter: {
        type: Object,
        default: () => {}
      },
      ID: {
        type: String,
        required:false
      },
    },
    watch:{
      binds: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      received_values: {
        handler(newValue, oldValue) {
          this.local_filter = { ...this.binds, ...this.received_values }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      },
      local_filter: {
        handler(newValue, oldValue) {
          if(this.helpers.loading==false){
            this.Get()
          }
        },
        immediate: false, // Ejecutar inmediatamente
        deep: true // Usar true si es un objeto/array
      }
    },
    computed:{
      render_header(){
        let header = []
        if (this.render.length>0) {
          this.render.forEach((field)=>{
            if (field.active==='true' || field.active===true) {
              header.push({... {
                align:'start',
                key: field.name,
                sortable: true,
                title: field.label,
              } });
            }
          })
        } else {
          if(this.data && this.data.length>0){
            header = Object.keys(this.data[0]).map(key => ({
              align:'start',
              key: key,
              sortable: true,
              title: key.charAt(0).toUpperCase() + key.slice(1),
            }));
          }
        }
        header.push({... {
          align:'end',
          key: 'render_table_actions',
          sortable: false,
          title: '...',
        } })
        return header
      },
    },
    methods: {
      async Get(url_filter=null){
        this.helpers.loading = true
                  let get_id = this.ID?this.ID:this.$root.url.param
          const promise = await axios.get('/api/app_tags/detail?ID='+get_id);
                        this.data = promise.data.data
                                  this.helpers.loading = false
      },
      async Remove() {
        const promise = await axios.get('/api/app_tags/'+this.remove+'/remove');
        if (promise.status==200) {
          this.remove = null
          this.pin = this.$pin(6)
          this.pin_verify = null
          this.Get()
        }
      },
      async getPalette(img,item){
        item['palette'] = await this.$colorPalette.getDominantColor(img)
        this.getContrastColor(item.palette,item)
      },
      getContrastColor(color,item){
        const contrastWithWhite = this.$colorPalette.getContrastRatio(color, '#FFFFFF')
        const contrastWithBlack = this.$colorPalette.getContrastRatio(color, '#000000')
        item['contrast'] = contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000'
      },
      downloadFile(name,content){
        const parts = content.split(',')
        if(parts.length !== 2){
          alert('Invalid File')
          return
        }

        const typeBase64 = parts[0]
        const contentBase64 = parts[1]
        const typeMIME = typeBase64.split(';')[0].replace('data:','')

        const byteCharacters = atob(contentBase64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray],{type:typeMIME})

        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = name

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
          },
    mounted(){
      this.Get()
    },
    created(){
    },
  };
  window.componentes.WebAppTagsDataView = WebAppTagsDataView;