globalThis.Properti = {
    content: `
    <style>

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    #info {
        display: table;
        position: relative;
        margin: 0px auto;
        word-wrap: anywhere;
        white-space: pre-wrap;
        padding: 10px;
        border: none;
        border-radius: 3px;
        font-size: 12px;
        text-align: center;
        color: #222;
        background: #fff;
    }

    </style>
    <div class="row">
        <!-- Earnings (Monthly) Card Example -->
        <div class="col-12 col-12">
            <div class="card shadow h-100 py-2">
                <div class="card-body" id="load-properti">

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


    `,
    action: function(){
        
        
        // function cek rating
        
        
        
        
        const capitalize = (str, lower = false) =>
          (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());
        ;
        if (dataMaster['provinces'] != undefined && dataMaster['regencies'] != undefined) {
            dataMaster['provinces'] = dataMaster['provinces'].map(function(xz, i) {
                var x = xz;
                x.name = capitalize(xz.name.toLowerCase());
                return x;
            })

            dataMaster['regencies'] = dataMaster['regencies'].map(function(xz, i) {
                var x = xz;

                var y = dataMaster['provinces'].filter(function(k,l){
                    if(x.province_id == k.id){
                        return k
                    }
                })
                if (y.length > 0) {
                    y = y[0].name;
                    x.province_id = y;
                    x.name = capitalize(xz.name.toLowerCase());
                    return x;
                }else{
                    return x;
                }
            })
        }else{
            var prov = new db;
            prov.table('province').get(function(pr){
                dataMaster['provinces'] = pr;
                var reg = new db;
                reg.table('regencies').get(function(re){
                    dataMaster['regencies'] = re;

                    dataMaster['provinces'] = dataMaster['provinces'].map(function(xz, i) {
                        var x = xz;
                        x.name = capitalize(xz.name.toLowerCase());
                        return x;
                    })

                    dataMaster['regencies'] = dataMaster['regencies'].map(function(xz, i) {
                        var x = xz;

                        var y = dataMaster['provinces'].filter(function(k,l){
                            if(x.province_id == k.id){
                                return k
                            }
                        })[0].name;
                        x.province_id = y;
                        x.name = capitalize(xz.name.toLowerCase());
                        return x;
                    })


                })

            })

        }
        
        console.log(
            globalThis.dataMaster['kategori']
        )

        globalThis.dataMaster['transaksi'] = [
            {kode: 'JUAL', name: 'JUAL'},
            {kode: 'SEWA', name: 'SEWA'},
            {kode: 'PROYEK BARU', name: 'PROYEK BARU'}
        ];

        globalThis.dataMaster['laku'] = [
            {kode: '0', name: 'Belum Laku'},
            {kode: '1', name: 'Laku'}
        ];

        globalThis.dataMaster['yorn'] = [
            {kode: '0', name: 'Tidak'},
            {kode: '1', name: 'Ya'}
        ];

        globalThis.dataMaster['aorn'] = [
            {kode: '0', name: 'Tidak Ada'},
            {kode: '1', name: 'Ada'}
        ];

        globalThis.dataMaster['sertifikat'] = [
            {kode: 'Tidak Ditampilkan', name: 'Tidak Ditampilkan'},
            {kode: 'SHM', name: 'SHM'},
            {kode: 'HGB', name: 'HGB'},
            {kode: 'SHGB', name: 'SHSRS'},
            {kode: 'PPJB', name: 'PPJB'},
            {kode: 'PPJB', name: 'Tanah Girik'},
            {kode: 'Petok D', name: 'Petok D'},
            {kode: 'Petok D', name: 'Hak Pakai '}
        ];

        globalThis.dataMaster['hadap'] = [
            {name: 'Utara'},
            {name: 'Selatan'},
            {name: 'Barat'},
            {name: 'Timur'},
            {name: 'Barat Laut'},
            {name: 'Timur Laut'},
            {name: 'Tenggara'},
            {name: 'Barat daya'},
            {name: 'Utara & Barat'},
            {name: 'Utara & Timur'},
            {name: 'Selatan & Barat'},
            {name: 'Selatan & Timur'}
        ];
        
        
        globalThis.dataMaster['air'] = [
            {name: 'PDAM'},
            {name: 'Sumur'},
            {name: 'WTP'},
            {name: 'Artesis'}
        ];

        setTimeout(function(){
            document.getElementById('app-content-title').innerText = "Data Properti";
            table('properti')
            .title('Properti')
            .grouping({
                "col-lg-6": [
                    {
                        start: 'judulproperti',
                        end: 'ltanah'
                    },
                    {
                        start: 'listrik',
                        end: 'share'
                    }
                ]
            })
            .equals(['idprop'])
            .selectAction(function(s, v, r){
                if(v == 'city_name'){
                    document.getElementById('province').innerHTML = `<option value="${s.data.province_id}">${s.data.province_id}</option>`;
                }else if(v == 'kecamatan'){
                    var name = globalThis.dataMaster['regencies'].filter(function(t){
                        if(t.id == s.data.regencies){
                            return t
                        }
                    });
                    if(name.length > 0){
                        name = name[0];
                        var op = `<option value="${name.name}">${name.name}</option>`;
                        document.getElementById('city_name').innerHTML = op;
                        
                        var namep = globalThis.dataMaster['regencies'].filter(function(t){
                            if(t.name == name.name){
                                return t
                            }
                        });
                        
                        if(namep.length > 0){
                            namep = namep[0];
                            var op = `<option value="${namep.province_id}">${namep.province_id}</option>`;
                            document.getElementById('province').innerHTML = op;
                        }
                        
                    }
                }else if(v == 'subdistrict_name'){
                    console.log(s);
                    
                    var kec = globalThis.dataMaster['kecamatan'].filter(function(t){
                        if(t.kode == s.data.kecamatan){
                            return t
                        }
                    });
                    
                    if(kec.length > 0){
                        kec = kec[0];
                        var op = `<option value="${kec.name}">${kec.name}</option>`;
                        document.getElementById('kecamatan').innerHTML = op;
                    }
                    
                    var name = globalThis.dataMaster['regencies'].filter(function(t){
                        if(t.id == s.data.regencies){
                            return t
                        }
                    });
                    
                    if(name.length > 0){
                        name = name[0];
                        var op = `<option value="${name.name}">${name.name}</option>`;
                        document.getElementById('city_name').innerHTML = op;
                        
                        var namep = globalThis.dataMaster['regencies'].filter(function(t){
                            if(t.name == name.name){
                                return t
                            }
                        });
                        
                        if(namep.length > 0){
                            namep = namep[0];
                            var op = `<option value="${namep.province_id}">${namep.province_id}</option>`;
                            document.getElementById('province').innerHTML = op;
                        }
                        
                    }
                }
            })
            .createForm({
                idprop : {
                    form: 'input',
                    type: 'hidden',
                    placeholder: 'Inputkan idprop',
                    title: 'idprop'
                },
                judulproperti: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan Judul Properti',
                    title: 'Judul Properti'
                },
                kategori: {
                    form: 'input',
                    type: 'select',
                    table: 'kategori_properti',
                    view: ['kategori_nama'],
                    value: 'kategori_nama',
                    placeholder: 'Inputkan keterangan',
                    title: 'Kategori'
                },
                deskripsi: {
                    form: 'input',
                    type: 'textarea',
                    placeholder: 'Inputkan deskripsi',
                    title: 'Deskripsi'
                },
                harga: {
                    form: 'input',
                    type: 'number',
                    placeholder: 'Inputkan harga',
                    title: 'Harga'
                },
                transaksi: {
                    form: 'input',
                    type: 'select',
                    table: 'transaksi',
                    view: ['name'],
                    value: 'kode',
                    placeholder: 'Inputkan transaksi',
                    title: 'Transaksi'
                },
                sertifikat: {
                    form: 'input',
                    type: 'select',
                    table: 'sertifikat',
                    view: ['name'],
                    value: 'kode',
                    placeholder: 'Inputkan sertifikat',
                    title: 'Sertifikat'
                },
                province: {
                    form: 'input',
                    type: 'select',
                    table: 'provinces',
                    view: ['name'],
                    value: 'name',
                    placeholder: 'Inputkan provinsi',
                    title: 'Provinsi'
                },
                city_name: {
                    form: 'input',
                    type: 'select',
                    table: 'regencies',
                    view: ['name'],
                    value: 'name',
                    relation: 'province',
                    relationId: 'province_id',
                    placeholder: 'Inputkan kota',
                    title: 'Kota'
                },
                kecamatan: {
                    form: 'input',
                    type: 'select',
                    table: 'kecamatan',
                    view: ['name'],
                    value: 'name',
                    relation: 'city_name',
                    relationId: 'regencies',
                    relationSet: 'id',
                    placeholder: 'Inputkan kecamatan',
                    title: 'Kecamatan'
                },
                subdistrict_name: {
                    form: 'input',
                    type: 'select',
                    table: 'area',
                    view: ['name'],
                    value: 'name',
                    relation: 'kecamatan',
                    relationId: 'kecamatan',
                    relationSet: 'kode',
                    placeholder: 'Inputkan Area',
                    title: 'Area'
                },
                alamat: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan alamat (tanpa blok dan nomer properti)',
                    title: 'Alamat'
                },
                norumah: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan no rumah',
                    columns: 12,
                    typeColumns: 'lg',
                    title: 'No Rumah'
                },
                lat: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan latitude ',
                    title: 'Latitude',
                    columns: 6,
                    typeColumns: 'lg',
                },
                lng: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan longitude ',
                    title: 'Longitude',
                    typeColumns: 'lg',
                    columns: 6
                },
                hadap: {
                    form: 'input',
                    type: 'select',
                    view: ['name'],
                    table: 'hadap',
                    value: 'name',
                    placeholder: 'Inputkan orientasi',
                    title: 'Orientasi'
                },
                jum_kt: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan Kamar Tidur',
                    columns: 6,
                    typeColumns: 'lg',
                    title: 'KT'
                },
                jum_km: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan Kamar Mandi',
                    columns: 6,
                    typeColumns: 'lg',
                    title: 'KM'
                },
                lt: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan Luas Tanah',
                    columns: 6,
                    typeColumns: 'lg',
                    title: 'LT'
                },
                lb: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan Luas Bangunan',
                    columns: 6,
                    typeColumns: 'lg',
                    title: 'LB'
                },
                ltanah: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan dimensi tanah',
                    columns: 12,
                    typeColumns: 'lg',
                    title: 'Dimensi Tanah'
                },
                listrik: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan Listrik',
                    title: 'Listrik (WATT)'
                },
                air: {
                    form: 'input',
                    type: 'select',
                    table: 'air',
                    view: ['name'],
                    value: 'name',
                    placeholder: 'Inputkan count air / PDAM',
                    title: 'Air'
                },
                laku: {
                    form: 'input',
                    type: 'select',
                    table: 'laku',
                    view: ['name'],
                    value: 'kode',
                    placeholder: 'Inputkan',
                    title: 'Status Properti'
                },
                tgllaku: {
                    form: 'input',
                    type: 'date',
                    placeholder: 'Inputkan tanggal laku',
                    title: 'Tanggal Laku'
                },
                bisakpr: {
                    form: 'input',
                    type: 'select',
                    table: 'yorn',
                    view: ['name'],
                    value: 'kode',
                    placeholder: 'Inputkan kpr',
                    title: 'Bisa KPR'
                },
                komisi: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan komisi',
                    title: 'Komisi (%)'
                },
                idsales: {
                    form: 'input',
                    type: 'select',
                    table: 'sales',
                    view: ['nama'],
                    value: 'id',
                    placeholder: 'Inputkan sales',
                    title: 'Sales'
                },
                nama_vendor: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan vendor',
                    title: 'Vendor'
                },
                kontak_vendor: {
                    form: 'input',
                    type: 'text',
                    placeholder: 'Inputkan Telp. Vendor',
                    title: 'No. Telp. Vendor'
                },
                poin1: {
                    form: 'input',
                    type: 'select',
                    table: 'aorn',
                    view: ['name'],
                    value: 'kode',
                    columns: 6,
                    typeColumns: 'lg',
                    placeholder: 'Inputkan foto properti',
                    title: 'Foto Properti'
                },
                poin2: {
                    form: 'input',
                    type: 'select',
                    table: 'aorn',
                    view: ['name'],
                    value: 'kode',
                    columns: 6,
                    typeColumns: 'lg',
                    placeholder: 'Inputkan foto properti',
                    title: 'Data Listing'
                },
                poin3: {
                    form: 'input',
                    type: 'select',
                    table: 'aorn',
                    view: ['name'],
                    value: 'kode',
                    columns: 6,
                    typeColumns: 'lg',
                    placeholder: 'Inputkan foto properti',
                    title: 'Nama & kontak vendor'
                },
                poin4: {
                    form: 'input',
                    type: 'select',
                    table: 'aorn',
                    view: ['name'],
                    value: 'kode',
                    columns: 6,
                    typeColumns: 'lg',
                    placeholder: 'Inputkan foto properti',
                    title: 'Banner Terpasang'
                },
                poin5: {
                    form: 'input',
                    type: 'select',
                    table: 'aorn',
                    view: ['name'],
                    value: 'kode',
                    columns: 6,
                    typeColumns: 'lg',
                    placeholder: 'Inputkan foto properti',
                    title: 'Ada IMB'
                },
                poin6: {
                    form: 'input',
                    type: 'select',
                    table: 'aorn',
                    view: ['name'],
                    value: 'kode',
                    columns: 6,
                    typeColumns: 'lg',
                    placeholder: 'Inputkan foto properti',
                    title: 'Ada Blueprint'
                },
                poin7: {
                    form: 'input',
                    type: 'select',
                    table: 'aorn',
                    view: ['name'],
                    value: 'kode',
                    columns: 6,
                    typeColumns: 'lg',
                    placeholder: 'Inputkan foto properti',
                    title: 'PBB Terbaru'
                },
                poin8: {
                    form: 'input',
                    type: 'select',
                    table: 'aorn',
                    view: ['name'],
                    value: 'kode',
                    columns: 6,
                    typeColumns: 'lg',
                    placeholder: 'Inputkan foto properti',
                    title: 'Cp. Sertifikat'
                },
                poin9: {
                    form: 'input',
                    type: 'select',
                    table: 'aorn',
                    view: ['name'],
                    value: 'kode',
                    columns: 6,
                    typeColumns: 'lg',
                    placeholder: 'Inputkan foto properti',
                    title: 'Cp. KTP  Pemilik'
                },
                poin10: {
                    form: 'input',
                    type: 'select',
                    table: 'aorn',
                    view: ['name'],
                    value: 'kode',
                    columns: 6,
                    typeColumns: 'lg',
                    placeholder: 'Inputkan foto properti',
                    title: 'Koordinat Lokasi'
                },
                share: {
                    form: 'input',
                    type: 'slug',
                    from: 'judulproperti',
                    placeholder: 'Inputkan buat share link',
                    title: 'Share'
                }
            })
            .row({
                idprop: 'Id Properti',
                judulproperti: 'Judul Properti',
                kategori: 'Kategori',
                transaksi: 'Transaksi',
                sertifikat: 'Sertifikat',
            })
            .onsave(function(f){
              f.load();
            })
            .onback(function(a){
                if (globalThis.nextIncrement != undefined) {
                    db().table(a.data.table).condition([
                        {opsi: '', data: ['idProp', '=',  globalThis.nextIncrement]}
                    ])
                    .delete()
                    .get(function(){
                        delete globalThis.nextIncrement;
                        a.load();
                    })
                } else {
                    a.load();
                }
            })
            .oncreate(function(a){
                
                if(globalThis.sales != undefined){
                    var datsales = globalThis.sales[0]
                    document.getElementById('idsales').innerHTML = `<option value="${datsales.id}">${datsales.nama}</option>`;
                }
                
                document.getElementById('judulproperti').addEventListener('keyup', function(){
                    document.getElementById('share').value = this.value.replace(/ /g, '-').replace(/\?/g, '-').replace(/\//g, '-').replace(/\'/g, '-').replace(/\"/g, '-');
                },false)
                
                document.getElementById('simpan'+a.data.id).innerText = 'Next';
                $('#deskripsi').summernote('focus');
                $('#laku').html(`<option value='0'>Belum Laku</option>`);
                $('#tgllaku').val('');
                var blog = new db;
                blog.table(a.data.table)
                blog.nextIncrement()
                blog.get(function(v){

                    globalThis.nextIncrement = v[0].increment;
                    globalThis.uploadImage = v[0].increment;

                    loadImageUpdateCreate(v[0].increment);

                    document.getElementById('idprop').value = v[0].increment;

                    a.data.idUpdate = true;

                    a.data.loadDataEdit = {
                        idProp: v[0].increment
                    };

                    db().table(a.data.table).save({
                        idprop : nextIncrement
                    })
                    .get(function(){
                        console.log('saved')
                    })

                })

                document.querySelector('label[for=idprop]').style.display = 'none';

            })
            .validate({
                judulproperti: ""
            })
            .onupdate(function(a, b){
                if(globalThis.sales != undefined){
                    var datsales = globalThis.sales[0];
                    if(document.getElementById('idsales').value == ''){
                        document.getElementById('idsales').innerHTML = `<option value="${datsales.id}">${datsales.nama}</option>`;
                    }
                }
                
                document.getElementById('judulproperti').addEventListener('keyup', function(){
                    document.getElementById('share').value = this.value.replace(/ /g, '-').replace(/\?/g, '-').replace(/\//g, '-').replace(/\'/g, '-').replace(/\"/g, '-');
                },false)

                if (globalThis.nextIncrement != undefined) {
                    delete globalThis.nextIncrement;
                }

                globalThis.uploadImage = b.idprop;

                loadImageUpdateCreate(b.idprop);

                document.querySelector('label[for=idprop]').style.display = 'none';

                var cekLaku = document.getElementById('laku').value;

            })
            .order('idprop', 'DESC')
            .afterload(function(x,y,v){
                var data = globalThis.dataLoadtable;
                
                data = data.map(function(a){
                    return a.idprop;
                }).join('-')
                
                fetch('https://masuksini.com/cek/properti/bintang/'+data)
                .then(response => response.json())
                .then(res => {
                    console.log(res)
                    v();
                })
                
            })
            .load()


            var input = function(){
              return el('input');
            }

            var label = function(){
              return el('label');
            }

            function loadImageUpdateCreate(id){
                globalThis.idImagesCover = id;
              var dmpi = div()
              dmpi.child(
                el('style').html(`
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  .tab-upload{
                    position: relative;
                  }

                  .tab-upload .tab-menu{
                    display: inline-block;
                    position: absolute;
                    right: 0;
                  }

                  .tab-upload .tab-menu span{
                    display: inline-block;
                    padding: 5px 8px;
                    margin: 0 5px;
                    background-color: var(--blue);
                    color: white;
                    border-radius: 5px;
                    cursor: pointer;
                  }

                  .tab-upload .single{
                    display: block;
                    position: relative;
                    top: 40px;
                    margin-bottom: 60px;
                  }

                  .tab-upload .single > div{
                    display: grid;
                    grid-gap: 8px;
                    text-align: center;
                    grid-template-columns: auto auto auto;
                  }

                  .tab-upload .single > div input{
                    display: none;
                  }

                  .tab-upload .single > div .foto{
                    display: block;
                    width: 100%;
                    height: 150px;
                    background: var(--blue);
                    box-shadow: 0 0 10px rgba(0,0,0,0.2);
                    background-size: cover;
                    background-position: center;
                  }

                  .tab-upload .single > div label{
                    position: absolute;
                    display: block;
                    font-size: 30px;
                    top: calc(50% - 15px);
                    left: calc(50% - 15px);
                    text-shadow: 0 0 35px #333;
                    color: #fff;
                  }

                 .tab-upload .multi{
                    position: relative;
                    display: none;
                    justify-content: center;
                    align-items: center;
                    top: 40px;
                    height: 200px;
                    margin-bottom: 60px;
                  }

                  .tab-upload .multi input{
                      display: block;
                      position: absolute;
                      width: 100%;
                      height: 100%;
                      top: 0;
                      left: 0;
                      opacity: 0.0; 
                  }

                  .tab-upload .multi label{
                    z-index: 1;
                    font-size: 30px;
                    text-align: center;
                  }

                  .tab-upload .multi label::after{
                    position: relative; 
                    display: block;
                    font-size: 14pt !important;
                    content: "chose file";
                    font-size: 30px;
                  }

                  .tab-upload .multi label::before{
                    position: absolute;
                    content: "";
                    display: block;
                    background: #ddd;
                    height: 100%;
                    width: 100%;
                    top:0;
                    left:0;
                    z-index: -1;
                  }
                  .tab-upload .multi .progress{
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    z-index: 1;
                   }

                   #cover{
                    display: flex;
                    margin: 10px;
                    background: var(--blue);
                    position: relative;
                    padding: 10px;
                    height: 250px;
                    border: 1px solid #add;
                    justify-content: center;
                    align-items: center;
                     background-size: cover;
                     background-position: center;
                    }

                    #cover label{
                    display: inline-block;
                    font-size: 30px;
                    text-align: center;
                      color: white;
                      text-shadow: 0 0 25px #000;
                      cursor: pointer;
                    }

                    #cover label::after{
                    content: "Upload Cover";
                    display: block;
                    font-size: 20px;
                    }

                    #cover label input{
                      cursor: pointer;
                    position: absolute;
                    display: block;
                    width: 100%;
                    height: 100%;
                    top:0;
                    left: 0;
                    background: #ddd;
                    opacity: 0;
                    }
                    
                    .delete-foto{
  position: absolute;
  color: white;
  font-size: 16pt;
  text-shadow: 0 0 5px #000;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

                    #cover .progress{
  position: absolute;
  bottom: 0;
  width: 100%;
}


                  

                  


                  

                  `)
              )

              var dompImage = document.getElementById('load-properti').children[1].children[2];

              $.ajax({
                url: '/admin/api/foto/'+id,
                dataTtpe: 'JSON',
                success: function(response){
                  var data = JSON.parse(response);
                  globalThis.fros = data.data;
                  var setting = data.set;
                  
                  

                  setting.forEach(function(set){
                      
                  var nameTag = set.kategori;
                  if(nameTag == 'foto'){
                      nameTag = "Listing";
                  }else if(nameTag == 'blueprint'){
                      nameTag = "Blueprint";
                  }else if(nameTag == 'ktp'){
                      nameTag = "KTP Pemilik";
                  }else{
                      nameTag = nameTag.toUpperCase()
                  }
                      
                    dmpi.child(
                      div().class('tab-upload')
                      .child(
                        div().class('tab-menu')
                        .child(
                            el('span').data('id', set.kategori).text('Single Upload').attr('style', 'background-color: var(--blue); color: white').id('btn1'+set.kategori)
                            .click(function(){
                                var getId = this.getAttribute('data-id');
                                globalThis['single'+getId].el.css('display', 'block');
                                globalThis['multi'+getId].el.css('display', 'none');
                            })
                        )
                        .child(
                            el('span').data('id', set.kategori).text('Multi Upload').css('background-color', 'white').css('color', '#333').css('border', '1px solid #ddd').id('btn2'+set.kategori)
                            .click(function(){
                                var getId = this.getAttribute('data-id');
                                globalThis['single'+getId].el.css('display', 'none');
                                globalThis['multi'+getId].el.css('display', 'flex');
                            })
                        )
                      )
                      .child(
                          div().class('title-upload').text('Foto '+nameTag).size('14pt')
                      )
                      .child(
                        div().class('single').id('single'+set.kategori).data('tipe', set.kategori).load(singleUploadFunc)
                      )
                      .child(
                        div().class('multi').id('multi'+set.kategori)
                        .child(
                          label().attr('for', set.kategori)
                          .event('drag dragstart dragend dragover dragenter dragleave drop', function(event){
                                event.preventDefault();
			                    event.stopPropagation();
                          })
                          .child(
                              el('i').class('fas fa-upload')
                          )
                          .child(
                            input().type('file').id(set.kategori).attr('multiple', 'multiple')
                            .change(function(){
                                var condFile = this.files;
                                var id = this.id;
                                var prosent = 0;
                                var progress = globalThis['progress'+id];
                                var getId = globalThis.fros.filter(function(er){
                                    if(er.kategori == id){
                                        return er
                                    }
                                })

                                uploadMulti(getId[0].id, condFile[0], 0, getId, condFile, id);

                                function uploadMulti(id, file, num, getId, condFile, kat) {
                                    var show = 'https://masuksini.com/sistem-api/androapi/upload/foto/'+id+'.jpg?v='+Date.now();
                                    var pathFile = '../../sistem-api/androapi/upload/foto/'+id+'.jpg';
                                    // var pathFile = '../../sistem-api/androapi/upload/foto/'+a.id+'.jpg';
                                    const reader = new FileReader();
                                        reader.addEventListener("load", function () {
                                        var base64 = reader.result;
                                        var rendr = base64.split("base64,");
                                        rendr = rendr[1];
                                        rendr = rendr.match(/.{1,1200000}/g);
                                        var length = rendr.length;
                                        var start = 0;

                                        uploadProsses()

                                        function uploadProsses(){
                                                if (start < length) {
                                                    var leng = condFile.length;
                                                    if(getId.length < condFile.length){
                                                        leng = getId.length;
                                                    }
                                                    var n = Math.round(((start+1) / length) * 100) / leng;
                                                    prosent += Math.round(n);
                                                    progress.el.width(prosent+'%').text(prosent+'%')
                                                    $.ajax({
                                                        url: '/admin/upload',
                                                        method: 'POST',
                                                        dataType: 'text',
                                                        data: {
                                                            _token: $('meta[name=csrf-token]').attr('content'),
                                                            ok: rendr[start],
                                                            start: start,
                                                            tipe: 'upload'
                                                        },
                                                        success: function(e){
                                                            start += 1;
                                                            uploadProsses();
                                                        }
                                                    })
                                                }else{
                                                    $.ajax({
                                                        url: '/admin/upload',
                                                        method: 'POST',
                                                        dataType: 'text',
                                                        data: {
                                                            _token: $('meta[name=csrf-token]').attr('content'),
                                                            tipe: pathFile
                                                        },
                                                        success: function(e){
                                                            console.log((condFile.length - 1));
                                                            var leng = condFile.length;
                                                            if(getId.length < condFile.length){
                                                                leng = getId.length;
                                                            }
                                                            if(num == (leng - 1)){
                                                                progress.el.width('0%').text('0%')
                                                                globalThis['foto'+kat+num].el.attr('style', 'background-image: url("'+show+'")')
                                                                globalThis['single'+kat].el.css('display', 'block');
                                                                globalThis['multi'+kat].el.css('display', 'none');
                                                            }else{
                                                                console.log('foto'+kat+num);
                                                                globalThis['foto'+kat+num].el.attr('style', 'background-image: url("'+show+'")')
                                                                uploadMulti(getId[num + 1].id, condFile[num + 1], num + 1, getId, condFile, kat);
                                                            }
                                                        }
                                                    })
                                                }
                                        }
                                        // uploadProsses()
                                        }, false);
                                        if (file) {
                                            reader.readAsDataURL(file);
                                        }
                                }

                            })
                          )
                        )
                        .child(
                            div().class('progress')
                            .child(
                                div().id('progress'+set.kategori).class('progress-bar').attr('role','progressbar').width('10%').aria('valuenow', '25').aria('valuemin', '0').aria('valuemax', '100').text('0%')
                            )
                        )
                      )
                    )

                    function singleUploadFunc(formUpload){
                      var getForm = formUpload.el.getAttribute('data-tipe');
                      var parent = formUpload.el;
                      var dataf = data.data.filter(function(s){
                        if(s.kategori == getForm){
                          return s;
                        }
                      })
                      var sngl = div();
                      dataf.forEach(function(singleFile, i){
                        sngl.child(
                          div().css('position', 'relative')
                          
                          .child(
                            div().data('foto', '../../sistem-api/androapi/upload/foto/'+singleFile.id+'.jpg').id('foto'+getForm+i).class('foto').attr('style', 'background-image: url("../../sistem-api/androapi/upload/foto/'+singleFile.id+'.jpg?v='+Date.now()+'")').attr('draggable', true).cursor('move')
                            .event('drag',function(){
                                globalThis.transfer = this.getAttribute('data-foto');
                            })
                          )
                          .child(
                            label().attr('for', getForm+i).html('<i class="fas fa-upload"></i>').cursor('pointer')
                          )
                          .child(
                              div().class('progress')
                              .child(
                                  div().id('progress'+getForm+i).class('progress-bar').attr('role','progressbar').width('0%').aria('valuenow', '25').aria('valuemin', '0').aria('valuemax', '100').text('0%')
                              )
                          )
                          .child(
                            input().data('id', singleFile.id).type('file').id(getForm+i).change(function(){
                                var idfot = globalThis['foto'+this.id];
                                var progress = globalThis['progress'+this.id];
                                var file = this.files[0];
                                var size =  file.size / 1000;
                                var show = 'https://masuksini.com/sistem-api/androapi/upload/foto/'+this.getAttribute('data-id')+'.jpg?v='+Date.now();
                                var pathFile = '../../sistem-api/androapi/upload/foto/'+this.getAttribute('data-id')+'.jpg';
                                // var pathFile = '../../sistem-api/androapi/upload/foto/'+a.id+'.jpg';
                                if(size > 1000){
                                    alert('file tidak boleh lebih dari 1MB');
                                }else{
                                        const reader = new FileReader();
                                        reader.addEventListener("load", function () {
                                        var base64 = reader.result;
                                        var rendr = base64.split("base64,");
                                        rendr = rendr[1];
                                        rendr = rendr.match(/.{1,150000}/g);
                                        var length = rendr.length;
                                        var start = 0;

                                        uploadProsses()

                                        function uploadProsses(){
                                                if (start < length) {
                                                    progress.el.width(Math.round(((start+1) / length) * 100)+'%').text(Math.round(((start+1) / length) * 100)+'%')
                                                    // document.getElementById('upload-file-'+a.id).innerText = Math.round(((start+1) / length) * 100)+'%';
                                                    $.ajax({
                                                        url: '/admin/upload',
                                                        method: 'POST',
                                                        dataType: 'text',
                                                        data: {
                                                            _token: $('meta[name=csrf-token]').attr('content'),
                                                            ok: rendr[start],
                                                            start: start,
                                                            tipe: 'upload'
                                                        },
                                                        success: function(e){
                                                            console.log(e.length)
                                                            start += 1;
                                                            uploadProsses();
                                                        }
                                                    })
                                                }else{
                                                    $.ajax({
                                                        url: '/admin/upload',
                                                        method: 'POST',
                                                        dataType: 'text',
                                                        data: {
                                                            _token: $('meta[name=csrf-token]').attr('content'),
                                                            tipe: pathFile
                                                        },
                                                        success: function(e){
                                                            console.log('saved')
                                                            progress.el.width('0%').text('0%')
                                                            idfot.el.attr('style', 'background-image: url("'+show+'")')
                                                        }
                                                    })
                                                }
                                        }
                                        // uploadProsses()
                                        }, false);
                                        if (file) {
                                            reader.readAsDataURL(file);
                                        }


                                }
                            })
                          )
                          .child(
                             el('i').class('fas fa-trash-alt delete-foto').data('s', getForm+i).data('id', singleFile.id).id('delete'+getForm+i).data('foto', '../../sistem-api/androapi/upload/foto/'+singleFile.id+'.jpg').click(function(){
                                 var idfot = globalThis['foto'+this.getAttribute('data-s')];
                                 var getImageurl = this.getAttribute('data-foto');
                                 var show = 'https://masuksini.com/sistem-api/androapi/upload/foto/'+this.getAttribute('data-id')+'.jpg?v='+Date.now();
                                 console.log(getImageurl);
                                 Swal.fire({
                                    title: 'Apa anda yakin untuk menghapus data ini?',
                                    showDenyButton: true,
                                    confirmButtonText: `hapus`,
                                  }).then((result) => {
                                    /* Read more about isConfirmed, isDenied below */
                                    if (result.isConfirmed) {
                                        $.ajax({
                                            url: 'admin/deleteimage',
                                            method: 'POST',
                                            dataType: 'text',
                                            data: {
                                                _token: $('meta[name=csrf-token]').attr('content'),
                                                image: getImageurl
                                            }, success: function(res){
                                                alert('delete')
                                                idfot.el.attr('style', 'background-image: url("'+show+'")')
                                            }
                                        })
                                        
                                    }else{
                                        
                                    }
                                  })
                                 
                                 
                             })
                           )
                        )
                      })
                      parent.appendChild(sngl.get());
                    }

                  })

                  var containerUp = div()
                    .class('col-12 text-left mt-5')
                    .css('display','grid')
                    .css('grid-template-columns','auto 250px')
                    .child(dmpi)
                    .child(
                        div().id('cover').attr('style', 'background-image: url("assets/upload/cover/'+globalThis.idImagesCover+'.jpg")')
                        .event('dragover', function(ev){
                            ev.preventDefault();
                        })
                        .event('drop', function(ev){
                            ev.preventDefault();
                            console.log(ev.dataTransfer)
                            var data = globalThis.transfer;
                            var blob = null;
                            var xhr = new XMLHttpRequest();
                            xhr.open("GET", data);
                            xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
                            xhr.onload = function()
                            {
                                blob = xhr.response;//xhr.response is now a blob object
                                var x = blob.type.split('/')[1];

                                var file = new File([blob], "image."+x, {type:"image/"+x});

                                uploadCover(file)

                            }
                            xhr.send();
                        })
                        .child(
                            label().html('<i class="fas fa-upload"></i>').child(
                                input().data('fot', 'assets/upload/cover/'+globalThis.idImagesCover+'.jpg').type('file').change(function(){
                                    var dataimg = 'https://masuksini.com/'+this.getAttribute('data-fot');
                                    console.log(dataimg);
                                    var pack = this;
                                    $.ajax({
                                        url: dataimg,
                                        type:'HEAD',
                                        error: function()
                                        {
                                            uploadCover(pack.files[0])
                                            //file not exists
                                        },
                                        success: function()
                                        {
                                            alert('maaf anda tidak dapat menimpa cover, cover hanya dapat di ubah melalui drag foto dari foto listing')
                                        }
                                    });
                                })
                            )
                        )
                        .child(
                            div().class('progress')
                            .child(
                                div().id('progress'+globalThis.idImagesCover).class('progress-bar').attr('role','progressbar').width('0%').aria('valuenow', '25').aria('valuemin', '0').aria('valuemax', '100').text('0%')
                            )
                        )
                    )
                    dompImage.appendChild(containerUp.get());

                }
              })



            }

            function uploadCover(file){


                                var progress = globalThis['progress'+globalThis.idImagesCover];
                                var size =  file.size / 1000;
                                var show = 'assets/upload/cover/'+globalThis.idImagesCover+'.jpg?v='+Date.now();
                                var pathFile = 'assets/upload/cover/'+globalThis.idImagesCover+'.jpg';
                                // var pathFile = '../../sistem-api/androapi/upload/foto/'+a.id+'.jpg';
                                if(size > 1000){
                                    alert('file tidak boleh lebih dari 1MB');
                                }else{
                                        const reader = new FileReader();
                                        reader.addEventListener("load", function () {
                                        var base64 = reader.result;
                                        var rendr = base64.split("base64,");
                                        rendr = rendr[1];
                                        rendr = rendr.match(/.{1,150000}/g);
                                        var length = rendr.length;
                                        var start = 0;

                                        uploadProsses()

                                        function uploadProsses(){
                                                if (start < length) {
                                                    progress.el.width(Math.round(((start+1) / length) * 100)+'%').text(Math.round(((start+1) / length) * 100)+'%')
                                                    // document.getElementById('upload-file-'+a.id).innerText = Math.round(((start+1) / length) * 100)+'%';
                                                    $.ajax({
                                                        url: '/admin/upload',
                                                        method: 'POST',
                                                        dataType: 'text',
                                                        data: {
                                                            _token: $('meta[name=csrf-token]').attr('content'),
                                                            ok: rendr[start],
                                                            start: start,
                                                            tipe: 'upload'
                                                        },
                                                        success: function(e){
                                                            console.log(e.length)
                                                            start += 1;
                                                            uploadProsses();
                                                        }
                                                    })
                                                }else{
                                                    $.ajax({
                                                        url: '/admin/upload',
                                                        method: 'POST',
                                                        dataType: 'text',
                                                        data: {
                                                            _token: $('meta[name=csrf-token]').attr('content'),
                                                            tipe: pathFile
                                                        },
                                                        success: function(e){
                                                            globalThis['cover'].el.attr('style', 'background-image: url("'+show+'")')
                                                            progress.el.width('0%').text('0%')
                                                            console.log('saved')
                                                        }
                                                    })
                                                }
                                        }
                                        // uploadProsses()
                                        }, false);
                                        if (file) {
                                            reader.readAsDataURL(file);
                                        }


                                }



            }





        })
    }
}