Elep

// step 1

// let plusClick = document.querySelector(".sms-direct span.plus");
let tickClick = document.querySelector(".sms-direct span.tick");
// let crossClick = document.querySelector(".sms-direct span.cross");
// let filterClick = document.querySelector(".sms-direct span.filter");
let underList = document.querySelector(".sms-direct .under-list");
let anotherInputs = document.querySelector('.sms-direct .another-inputs')
// let civilContetn = document.querySelector('.sms-direct .main-two-inners')

// step 2
let spans = document.querySelectorAll(" span.ready");
let inputs = document.querySelectorAll("span input");
let selects = document.querySelectorAll("select");
let textAreas = document.querySelectorAll('textarea')

// // step 3
let arrowMenuGo = document.querySelector(".account span.arrow-go");
let arrowMenuBack = document.querySelector(".account div.arrow-back");
let sidebar = document.querySelector(".menu");
let account = document.querySelector(".account");
let accountDesc = document.querySelector(".account .a-title ");
// let accountDescS = document.querySelector(".account .a-title span");
let accountImg = document.querySelector(".account img");
let civilMenu = document.querySelector('.li-menu')
let titleMenu = document.querySelectorAll(".li-menu ul li a .title");
let titleMenuBack = document.querySelectorAll(".menu ul li");
let iconMenu = document.querySelectorAll(".menu ul li .icon");
let exitSetting = document.querySelector(".exit-setting");
let exitSettingTitle = document.querySelectorAll(".exit-setting li .title");
let exitSettingIcon = document.querySelectorAll(".exit-setting li .icon");
let innerMenu = document.querySelector('.inner-menu')
let liClicked = document.querySelector('li.clicked')

// step 4
let now = new Date()
let result = document.querySelector('.mabhas .add-to-list')
// let nameInput = document.querySelector('span.i-name input')
// let numInput = document.querySelector('span.i-num input')
// let accountInput = document.querySelector('span.i-account input')
// let passInput = document.querySelector('span.i-pass input')
// let accountList = document.querySelector('.add-to-list')

// sms-redemption step 1

// let plusClickSmsRe = document.querySelector(".sms-redemption span.plus");
// let tickClickSmsRe = document.querySelector(".sms-redemption span.tick");
// let crossClickSmsRe = document.querySelector(".sms-redemption span.cross");
// let filterClickSmsRe = document.querySelector(".sms-redemption span.filter");
// let underListSmsRe = document.querySelector(".sms-redemption .under-list");
// let anotherInputsSmsRe = document.querySelector('.sms-redemption .another-inputs')
// let civilContetnSmsRe = document.querySelector('.sms-redemption .main-two-inners')
// console.log(anotherInputsSmsRe)

// AJAX tab

let behineTabsOne = document.querySelectorAll('li.behinde-tab-one')
let behineTabsTwo = document.querySelectorAll('li.behinde-tab-two')
let behineTabsThree = document.querySelectorAll('li.behinde-tab-three')
let behineTabsFour = document.querySelectorAll('li.behinde-tab-four')

// let frontTabs = document.querySelectorAll(' li.front')
// let behindeTabs = document.querySelectorAll('li.behinde')
// let frontPages = document.querySelector('div.mabhas')
let violationPage = document.querySelector('div.sms-redemption')
let notificationsPage = document.querySelector('div.sms-direct')
let classesPage = document.querySelector('div.sms-notification')
// let logsPage = document.querySelector('div.redemptions-logs')

// sms redemption
let plusClickZ = document.querySelector(".sms-redemption span.plus");
let tickClickZ = document.querySelector(".sms-redemption span.tick");
let crossClickZ = document.querySelector(".sms-redemption span.cross");
let filterClickZ = document.querySelector(".sms-redemption span.filter");
let underListZ = document.querySelector(".sms-redemption .under-list");
let anotherInputsZ = document.querySelector('.sms-redemption .another-inputs')
let civilContetnZ = document.querySelector('.sms-redemption .main-two-inners')

// zir-mabhas step 4

// let nowZ = new Date()
let resultZ = document.querySelector('.sms-redemption .add-to-list')
// let nameInputZ = document.querySelector('span.i-name input')
// let numInputZ = document.querySelector('span.i-num input')
// let accountInputZ = document.querySelector('span.i-account input')
// let passInputZ = document.querySelector('span.i-pass input')
// let accountListZ = document.querySelector('.sms-redemption .add-to-list')
console.log(resultZ)

// sms notification
let plusClickSmsNo = document.querySelector(".sms-notification span.plus");
let tickClickSmsNo = document.querySelector(".sms-notification span.tick");
let crossClickSmsNo = document.querySelector(".sms-notification span.cross");
let filterClickSmsNo = document.querySelector(".sms-notification span.filter");
let underListSmsNo = document.querySelector(".sms-notification .under-list");
let anotherInputsSmsNo = document.querySelector('.sms-notification .another-inputs')
// let civilContetnSmsNo = document.querySelector('.sms-notification .main-two-inners')
let resultSmsNo = document.querySelector('.sms-notification .add-to-list')
console.log(crossClickSmsNo)

// step 1

// class AddTOList {
//     plusToTick() {
//             plusClick.classList.remove("flex");
//             plusClick.classList.add("hidden");
            
//             tickClick.classList.add('flex')
//             tickClick.classList.remove('hidden')
//             crossClick.classList.add("translate", "clicked");
//             crossClick.classList.remove("not-clicked");
            
//             filterClick.classList.add("translate", "clicked");

//     }
//     backTOPlus() {
//             plusClick.classList.add("flex");
//             plusClick.classList.remove("hidden");
            
//             tickClick.classList.remove('flex')
//             tickClick.classList.add('hidden')
//             crossClick.classList.remove("translate", "clicked");
//             crossClick.classList.add("not-clicked");
            
//             filterClick.classList.remove("translate", "clicked");
//     }
//     plusHeight() {
            
//             underList.classList.add("under-list-clicked");
//             underList.classList.remove("under-list");
//         // civilContetn.classList.add('min-heights')

//         setTimeout(() => {
//                 anotherInputs.classList.remove('-z-10')

//         }, 500);
//     }
//     minesHeight() {
            
//             underList.classList.remove("under-list-clicked");
//             underList.classList.add("under-list");
//             anotherInputs.classList.add('-z-10')
            
//         // civilContetn.classList.remove('min-heights')

//         //

//     }
// }

// let addToList = new AddTOList();

//     plusClick.addEventListener("click", () => {
//         addToList.plusToTick();
//         addToList.plusHeight();
// });
// // tickClick.addEventListener('click',()=>{
// //     addToList.backTOPlus()
// // })
    
//     crossClick.addEventListener("click", () => {
//         addToList.backTOPlus();
//         addToList.minesHeight();
//     });

// // step 2

class BorderColor {
    addBorder(e) {
        let that = e;
        let parent = that.parentElement;
        parent.classList.add("borderd");

// console.log(parent);
    }
    removeBorder() {
        spans.forEach((span) => {
            if (span.classList.contains("borderd")) {
                span.classList.remove("borderd");
            }
        });
    }
    blurBorder() {
        spans.forEach((span) => {
            span.classList.remove("borderd");
        });
    }
}
let borderColor = new BorderColor();

inputs.forEach((input) => {
    input.addEventListener("mouseup", (e) => {
        borderColor.addBorder(e.target);
    });
});
selects.forEach(select => {
    
    select.addEventListener("mouseup", (e) => {
        borderColor.addBorder(e.target);
    });
});
// select2.addEventListener("mouseup", (e) => {
//     borderColor.addBorder(e.target);
// });
inputs.forEach((input) => {
    input.addEventListener("mousedown", () => {
        borderColor.removeBorder();
    });
});
inputs.forEach((input) => {
    input.addEventListener("blur", () => {
        borderColor.blurBorder();
    });
});
selects.forEach(select => {
    
    select.addEventListener("blur", () => {
        borderColor.removeBorder();
    });
});
// select2.addEventListener("blur", () => {
//     borderColor.removeBorder();
// });
textAreas.forEach(textArea => {
    textArea.addEventListener("mouseup", (e) => {
        borderColor.addBorder(e.target);
    });
});
textAreas.forEach(textArea => {
    textArea.addEventListener("blur", () => {
        borderColor.removeBorder();
    });
});

// // step 3

class Sidebar {
    littleWidth() {
        // sidebar.classList.remove('menu')
        sidebar.classList.add('menu-two')
        arrowMenuGo.classList.add('hidden')
        arrowMenuBack.classList.remove('hidden')
        accountDesc.classList.add('hidden')
        // accountDescS.classList.add('hidden')
        titleMenu.forEach(title => {
            title.classList.add('hidden')
        });
        innerMenu.classList.remove('inner-menu')
        civilMenu.classList.add('li-menu-two')
        accountImg.classList.add('image-account')
        liClicked.classList.remove('clicked')
        liClicked.classList.add('bccolor')
        exitSetting.classList.add('li-menu-two')
        exitSettingTitle.forEach(title => {
            title.classList.add('hidden')
        });
        iconMenu.forEach(icon => {
            icon.classList.add('icon-two')
        });
        titleMenuBack.forEach(liTitle => {
            liTitle.classList.remove('big-width')
            liTitle.classList.add('little-width')
        });

}
    bigWidth() {
        sidebar.classList.remove('menu-two')
        arrowMenuGo.classList.remove('hidden')
        arrowMenuBack.classList.add('hidden')
        setTimeout(() => {
            titleMenu.forEach(title => {
                title.classList.remove('hidden')
            });
        }, 500);
        innerMenu.classList.add('inner-menu')
        civilMenu.classList.remove('li-menu-two')
        accountImg.classList.remove('image-account')
        setTimeout(() => {
            accountDesc.classList.remove('hidden')
            // accountDescS.classList.remove('hidden')

}, 500);
        liClicked.classList.add('clicked')
        liClicked.classList.remove('bccolor')
        exitSetting.classList.remove('li-menu-two')
        exitSettingTitle.forEach(title => {
            title.classList.remove('hidden')
        });
        iconMenu.forEach(icon => {
            icon.classList.remove('icon-two')
        });
        titleMenuBack.forEach(liTitle => {
            liTitle.classList.add('big-width')
            liTitle.classList.remove('little-width')
        });
        setTimeout(() => {

}, 500);

}
}

let changWidth = new Sidebar

arrowMenuGo.addEventListener('click', () => {
    changWidth.littleWidth()
})
arrowMenuBack.addEventListener('click', () => {
    changWidth.bigWidth()
})

// step 4

class AddAccountToListSmsNo {
    placement() {
        // console.log('first2')
        let liInResultSmsNo = `

<li class="civil-inner-trhee relative cursor-pointer ">
        <div class="add-lists items-center">
            <span class="num">1</span>
            <p class="receive-account-three ">حببی بهرامی</p>
            <p class="text-three">برای ثبت افدام کنید لطفا !</p>
            <p class=" time-three">۱۱:۳۹ , ۱۳۷۸/۱۲/۲</p>
            <p class="sender-admin-three ">آرش مهرآبادی</p>
        </div>
    </li>
    
  
    `
        resultSmsNo.innerHTML += liInResultSmsNo

}
}

let addAccountToListSmsNo = new AddAccountToListSmsNo()

// tickClickSmsNo.addEventListener('click', () => {
    //     addAccountToListSmsNo.placement();
    // })

// zir-mabhas step 1

class AddTOListZ {
    plusToTick() {
            plusClickZ.classList.remove("flex");
            plusClickZ.classList.add("hidden");
            
            tickClickZ.classList.add('flex')
            tickClickZ.classList.remove('hidden')
            crossClickZ.classList.add("translate", "clicked");
            crossClickZ.classList.remove("not-clicked");
            
            // filterClickZ.classList.add("translate", "clicked");

}
    backTOPlus() {
            plusClickZ.classList.add("flex");
            plusClickZ.classList.remove("hidden");
            
            tickClickZ.classList.remove('flex')
            tickClickZ.classList.add('hidden')
            crossClickZ.classList.remove("translate", "clicked");
            crossClickZ.classList.add("not-clicked");
            
            // filterClickZ.classList.remove("translate", "clicked");
    }
    plusHeight() {
        anotherInputsZ.classList.add('SRplus-height')
        anotherInputsZ.classList.remove('SRmin-height')
      setTimeout(() => {
          anotherInputsZ.classList.add('z-20')
          anotherInputsZ.classList.remove('z-0')
          underListZ.classList.remove('z-30')
        }, 500);
          
        
    }
    minesHeight() {
        anotherInputsZ.classList.add('SRmin-height')
        anotherInputsZ.classList.remove('SRplus-height')
        anotherInputsZ.classList.remove('z-20')
        anotherInputsZ.classList.add('z-0')
            // underListZ.classList.remove("under-list-clicked");
            // underListZ.classList.add("under-list");
            // anotherInputsZ.classList.add('-z-10')
            // if (resultZ.children.length>=4) {
            //     setTimeout(() => {
            //         anotherInputsZ.classList.add('opacity-0')
            //     }, 500);
            // }else {
            //     anotherInputsZ.classList.add('opacity-0')
            // }
            
        // civilContetn.classList.remove('min-heights')

}
}

let addToListZ = new AddTOListZ();

plusClickZ.addEventListener("click", () => {
        addToListZ.plusToTick();
        addToListZ.plusHeight();
});
// tickClick.addEventListener('click',()=>{
//     addToList.backTOPlus()
// })
    
    crossClickZ.addEventListener("click", () => {
        addToListZ.backTOPlus();
        addToListZ.minesHeight();
    });

// AJAX tab

class Front{
    
    showPageOne(){
       violationPage.classList.remove('hidden')
       notificationsPage.classList.add('hidden')
       classesPage.classList.add('hidden')
    //    logsPage.classList.add('hidden')
    }
    showPageTwo(){
        notificationsPage.classList.remove('hidden')
        violationPage.classList.add('hidden')
        classesPage.classList.add('hidden')
        // logsPage.classList.add('hidden')
    }
    showPageThree(){
        classesPage.classList.remove('hidden')
        violationPage.classList.add('hidden')
        notificationsPage.classList.add('hidden')
        // logsPage.classList.add('hidden')
    }
    showPageFour(){
        logsPage.classList.remove('hidden')
        violationPage.classList.add('hidden')
        notificationsPage.classList.add('hidden')
        classesPage.classList.add('hidden')
    }
    
}

let front = new Front()

behineTabsOne.forEach(behineTabOne => {
    behineTabOne.addEventListener('click',(e)=>{

front.showPageOne()
        console.log('one')

})
   });
    
   behineTabsTwo.forEach(behineTabTwo => {
    behineTabTwo.addEventListener('click',(e)=>{

front.showPageTwo()
        console.log('Two')

})
   });
   behineTabsThree.forEach(behineTabThree => {
    behineTabThree.addEventListener('click',(e)=>{

front.showPageThree()
        console.log('Three')

})
   });
   behineTabsFour.forEach(behineTabFour => {
    behineTabFour.addEventListener('click',(e)=>{

front.showPageFour()
        console.log('Four')

})
   });

// step 4

class AddAccountToListZ {
    placement() {
        console.log('first2')
        let liInResultZ = `

<li class="civil-inner-trhee relative cursor-pointer ">
        <div class="add-lists items-center">
            <span class="num">1</span>
            <p class="text-one ">نیازمند تمدید هستم لطفا رسیدگی کنید !</p>
            <p class="lesson-one">۱۲ اردیبهشت</p>
            <img class="kind-one" src="../img/questions/Rectangle 1426.png" alt="">
            <p class=" condition-one">در انتظار</p>
            
        </div>
    </li>
    
  
    `
        resultZ.innerHTML += liInResultZ

}
}

let addAccountToListZ = new AddAccountToListZ()

tickClickZ.addEventListener('click', () => {
        addAccountToListZ.placement();
    })

// sms notofication
    class AddTOListNotif {
    plusToTick() {
            plusClickSmsNo.classList.remove("flex");
            plusClickSmsNo.classList.add("hidden");
            
            tickClickSmsNo.classList.add('flex')
            tickClickSmsNo.classList.remove('hidden')
            crossClickSmsNo.classList.add("translate", "clicked");
            crossClickSmsNo.classList.remove("not-clicked");
            
            // filterClickSmsNo.classList.add("translate", "clicked");

}
    backTOPlus() {
            plusClickSmsNo.classList.add("flex");
            plusClickSmsNo.classList.remove("hidden");
            
            tickClickSmsNo.classList.remove('flex')
            tickClickSmsNo.classList.add('hidden')
            crossClickSmsNo.classList.remove("translate", "clicked");
            crossClickSmsNo.classList.add("not-clicked");
            
            // filterClickSmsNo.classList.remove("translate", "clicked");
    }
    plusHeight() {
            
            underListSmsNo.classList.add("under-list-clicked");
            underListSmsNo.classList.remove("under-list");
        // civilContetn.classList.add('min-heights')

setTimeout(() => {
                anotherInputsSmsNo.classList.remove('-z-10')

}, 500);
    }
    minesHeight() {
            
            underListSmsNo.classList.remove("under-list-clicked");
            underListSmsNo.classList.add("under-list");
            anotherInputsSmsNo.classList.add('-z-10')
            
        // civilContetn.classList.remove('min-heights')

}
}

let addToListNotif = new AddTOListNotif();

//     plusClickSmsNo.addEventListener("click", () => {
//         addToListNotif.plusToTick();
//         addToListNotif.plusHeight();
// });
// tickClick.addEventListener('click',()=>{
//     addToListNotif.backTOPlus()
// })
    
    // crossClickSmsNo.addEventListener("click", () => {
    //     addToListNotif.backTOPlus();
    //     addToListNotif.minesHeight();
    // });

let input = document.getElementById("inputTag");
let imageName = document.getElementById("imageName")
console.log(imageName)

input.addEventListener("change", () => {
    let inputImage = document.querySelector("input[type=file]").files[0];
    imageName.classList.add('add-green')
    imageName.innerText = inputImage.name;
})

import {BVSelect} from '../BVSelect-VanillaJS-master/js/bvselect.js'
    // console.log(BVSelect)
    var mySelect = new BVSelect({
        selector: "#selectbox1",
        searchbox: true,
        placeholder: "انتخاب ماه یا ماه های مورد نظر",
        search_placeholder: "جستجو"
    });
    var mySelect = new BVSelect({
        selector: "#selectbox2",
        searchbox: true,
        placeholder: "انتخاب کارت های مورد نظر",
        search_placeholder: "جستجو"
    });
    var mySelect = new BVSelect({
        selector: "#selectbox3",
        searchbox: true,
        placeholder: "رشته",
        search_placeholder: "جستجو"
    });
    var mySelect = new BVSelect({
        selector: "#selectbox4",
        searchbox: true,
        placeholder: "پایه",
        search_placeholder: "جستجو"
    });
    // var mySelect = new BVSelect({
    //     selector: "#selectbox5",
    //     searchbox: true,
    //     placeholder: "دسترسی",
    //     search_placeholder: "جستجو"
    // });