<template>
    
  <!-- Add Organisation Model End-->
  <!-- Header Start-->

   <SideNav  />
  <!-- Body Start -->
  <div style="background-color:#F5F7F9; ">
  <div class="wrapper wrapper-body" style="background-color:#F5F7F9;  margin-top: -10px; x">
    <div class="dashboard-body container">
      <div class="container-fluid">
        <Transition name="slide-fade">
        <v-alert style="position: fixed; z-index: 2000;" v-if="success" class="mb-6" color="#008000" type="success" variant="flat" closable > Success
        </v-alert>
        </Transition>
        <Transition name="slide-fade">
        <v-alert style="position: fixed; z-index: 2000;" v-if="empty" class="mb-6" color="red" type="error" variant="flat" closable >Empty Fields! Please Fill all details 
        </v-alert>
        </Transition>
        <Transition name="slide-fade">
        <v-alert style="position: fixed; z-index: 2000;" v-if="err" class="mb-6" color="red" type="warning" variant="flat" closable > {{err}} 
        </v-alert>
        </Transition>
        <Transition name="slide-fade">
        <v-alert style="position: fixed; z-index: 2000;" v-if="deleted" class="mb-6" color="red" type="warning" variant="flat" closable > Deleted 
        </v-alert>
        </Transition>

          <div class="row">
          <div class="col-md-12">
            <div class="d-main-title">
              <router-link to="/teams" style="color: #008000;"><i style="font-size:16px;" class="fa-solid fa-people-group me-3"></i>Maelezo Binafsi</router-link>
            </div>
            <v-divider></v-divider>
          </div>
          
          <div class="col-md-12">
          	<div class="main-card mt-4" style="">
	          	<div class="main-card "  >
	              <div class="dashboard-wrap-content " style="">
	                <div class="text-center align-items-center p-2" style="background-color:#e2f8f1; margin-bottom: -19px; border-radius: 0px;">
	                  <h5 class="text-center">Add New</h5>
	                </div>
	              </div>
	            </div>
	            <div class="main-card mt-4">
                <div class="dashboard-wrap-content">
                  <form @submit.prevent="formData" enctype="multipart/form-data">
	                <div class="d-flex flex-wrap justify-content-center align-items-center " style="margin-top:0px;"> 
                    <div class="row " style=" font-size: 14px">
                      <div class="col-md-4 mt-9">
  	                	<input v-model="Jina1" type="text" placeholder="Jina la kwanza" class="form-control ml-4"  style="max-width:300px;">
        						  </div>
                      <div class="col-md-4 mt-9">
                      <input v-model="Jina2" type="text" placeholder="Jina la kati" class="form-control ml-4"  style="max-width:300px;">
                      </div>
                      <div class="col-md-4 mt-9">
                      <input v-model="Jina3" type="text" placeholder="Jina la mwisho" class="form-control ml-4"  style="max-width:300px;">
                      </div>
                      <div class="col-md-4 mt-9">
                        <div class="col-12 d-flex flex-wrap justify-content-left align-items-left">
                           <span class="ml-3 mt-1">ID</span>
                           <input @change="onFileChange" type="file" placeholder="ID" class="form-control "  style="max-width:280px;margin-left: 15px;">
                        </div>
                        
                        <div class="row m-0 p-0" style="">
                          
                           
                           <div class="col-12 mt-4 d-flex flex-wrap justify-content-center align-items-center mb-4">
                            <v-avatar 
                              rounded="0"
                              size="80px" color="#d4d4d4"
                            >
                              <v-img
                                v-if="imgurl"
                                alt="Avatar"
                                :src="imgurl"
                              ></v-img>
                              <v-icon
                                v-else
                                icon="mdi-plus"
                              ></v-icon>
                            </v-avatar>
                           </div>
                        </div>
                      </div>
                      <div class="col-md-4 mt-9">
                      <input v-model="IDno" type="text" placeholder="ID (namba)" class="form-control ml-4"  style="max-width:300px;">
                      </div>
                      <div class="col-md-4 mt-9">
                        <input v-model="Umri" type="text" placeholder="Umri" class="form-control ml-4"  style="max-width:300px;">
                      </div>
                      <div class="col-md-4 mt-9">
                        <input v-model="Kijiji" type="text" placeholder="Kijiji" class="form-control ml-4"  style="max-width:300px;">
                      </div>
                      <div class="col-md-4 mt-9">
                        <input v-model="Kata" type="text" placeholder="Kata" class="form-control ml-4"  style="max-width:300px;">
                      </div>
                      <div class="col-md-4 mt-9">
                        <input v-model="Wilaya" type="text" placeholder="Wilaya" class="form-control ml-4"  style="max-width:300px;">
                      </div>

				            </div>
                  </div>
	                <div class="d-flex flex-wrap justify-content-center align-items-center pb-8">
		                  <v-btn :loading="loading" @click="sData" variant="flat" color="#008000" style="font-size: 14px; height: 50px; margin-top: 24px;">
		              			<span class="menu--label" style="text-transform: capitalize;">Save</span>
		                  </v-btn>
					        </div>
                  </form>
                </div>
	            </div>	
          	</div>
          </div>

        
       <!--    
          <div class="col-md-12 mt-8">
          	<div class="d-flex flex-wrap justify-content-center align-items-center m-6">
	                  <v-btn variant="tonal" color="#132f65" style="font-size: 14px; height: 50px;" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
	              			<span class="menu--label" style="text-transform: capitalize;">Save Date Configuration</span>
	                  </v-btn>
        		</div>
          </div> -->
        </div>
      </div>
    </div>
  </div>    
  </div>



    
  </template>
  
  <script setup>
  import { useStore } from 'vuex';
  import { ref, onMounted,onBeforeMount, computed } from 'vue'
  import axiosClient from "../../axios";
  import { useRoute } from 'vue-router';
  import router from '@/router';
  import SideNav from "../../components/SideNav.vue"
  // Import Vue FilePond
  import { watch } from 'vue'
  import { read, utils, writeFile } from 'xlsx';
 

  
  // Date picker


  
  const newdates = ref();

  const dialog = ref(false);
  const dialogDelete = ref(false);
  const editteam = ref([]);

  // ---data ---//

  const Tid = ref('');
  const Teamname = ref('');
  const Tlogo = ref('');
  const Tbigmatch = ref('');
  const imgurl = ref('');
  const imgurl2 = ref('');
  const file = ref('') ;
  const file2 = ref('') ;
  const teams = ref([]) ;

  const Jina1 = ref();
  const Jina2 = ref('');
  const Jina3 = ref('');
  const IDno = ref('');
  const Umri = ref();
  const Kijiji = ref();
  const Kata = ref();
  const Wilaya = ref();


  const loading = ref(false);
  const success = ref(false);
  const err = ref('');
  const empty = ref(false);
  const tableloading = ref(true);
  const deleted = ref(false);
  const search = ref('');
  const exceldata =ref([])

  //--- end data ---//

  const store = useStore();
  const user = ref('');
  const route = useRoute();
  const routeName = computed(() => route.name);
  
  const itemsPerPage = ref(10)

  const  headers =ref([
          // {
          //   title: 'Id',
          //   align: 'start',
          //   sortable: false,
          //   key: 'id',
          // },
          { title: 'Jina kwanza', align: 'start', key: 'jina1' },
          { title: 'Jina Kati', align: 'start', key: 'jina2' },
          { title: 'Jina Mwisho name', align: 'start', key: 'jina3' },
          { title: 'Umri', align: 'start', key: 'umri' },
          { title: 'ID picha', align: 'start', key: 'IDpic' },
          { title: 'ID namba', align: 'start', key: 'IDno' },
          { title: 'Kijiji', align: 'start', key: 'kijiji' },
          { title: 'Kata', align: 'start', key: 'kata' },
          { title: 'Wilaya', align: 'start', key: 'wilaya' },
          
          { title: 'Actions', align: 'start', key: 'actions' },
        ])

  const teamdetails= ref([''])
  const tournament= ref([])
  // teamdetails.value =  teams.value
  let userdata=''
  let userdata2=''
  let usertoken=''
  if(store.state){
    userdata = computed(() => JSON.parse(store.state.user.data))
    userdata2 = computed(() => store.state.user.data)
    usertoken = computed(() => store.state.user.token)

    // console.log(userdata)  
  }
  onMounted(()=>{


    // axiosClient.get('/tournament/show').then((res)=>{
    //   tournament.value = res.data;
    //   // tableloading.value = false
    //   // console.log(teams.value);
    //   for (var bm = 0; bm < tournament.value.length; bm++) {
    //    if(tournament.value[bm].active==1){
    //     tournament.value=tournament.value[bm].id
    //    }
    //   }

    // })

    setTimeout(()=>{
      axiosClient.get('/maelezo/get').then((res)=>{
        let data  = res.data;

        tableloading.value = false
        for (var bm = 0; bm < data.length; bm++) {
          teams.value.push(data[bm])
          tableloading.value = false
           exceldata.value.push({
            Jina: data[bm].jina1+' '+data[bm].jina2+' '+data[bm].jina2,
            Umri:data[bm].umri,
            ID:data[bm].IDno,
            Kijiji:data[bm].kijiji,
            Kata:data[bm].kata,
            Wilaya:data[bm].wilaya
           })
         
        }

      })

    },950)


  })


    
    function editItem (item) {
        // this.editedIndex = this.desserts.indexOf(item)
        // this.editedItem = Object.assign({}, item)
        dialog.value = true
        editteam.value = item
        

        
    }

    function deleteItem (item) {
        // this.editedIndex = this.desserts.indexOf(item)
        // this.editedItem = Object.assign({}, item)
        editteam.value = item
        dialogDelete.value = true
    }

    function deleteItemConfirm (id) {
        closeDelete()

        axiosClient.delete('/maelezo/delete/'+id).then(()=>{

        deleted.value = true
        setTimeout(function() {
        deleted.value = false
        location.reload()
        }, 1300);
        })
        // console.log(id);
        
    }

    function close () {
      dialog.value = false
        
    }

    function closeDelete () {
      dialogDelete.value = false

    }

    function editForm (id,a,b,c,d,e,f,g,h) {

      

      const formData2 = new FormData();
      formData2.append('image', file2.value);
      formData2.append('id', id);
      formData2.append('Jina1', a);
      formData2.append('Jina2', b);
      formData2.append('Jina3', c);
      formData2.append('IDno', d);
      formData2.append('Umri', e);
      formData2.append('Kata', f);
      formData2.append('Wilaya', g);
      formData2.append('Kijiji', h);

      // console.log(formData2);
      const config = {
          headers: { 'content-type': 'multipart/form-data', 'accepts':'application/json','Access-Control-Allow-Origin':'*' }
         }


      axiosClient.post('/medit' ,formData2,config).then(()=>{
      loading.value = false 
      success.value = true
      close()
      // setTimeout(function() {
      // success.value = false
      // window.location.replace('/teams');
      // }, 3000);

      }).catch(error => {
      console.log(error.response.data.message)
      loading.value = false
      dialog.value=false
      err.value = error.response.data.message

      setTimeout(function() {
      err.value = ''
      }, 6000);  


      })
      console.log(a,b,file2.value);

    }

    function onFileChange(e) {
       file.value = e.target.files[0] ;

      imgurl.value = URL.createObjectURL(file.value)
      console.log(imgurl.value);

    }

    function onFileChange2(e) {
       file2.value = e.target.files[0] ;

      imgurl2.value = URL.createObjectURL(file2.value)
      console.log(imgurl2.value);

    }

  //------------------------------- data--------------------------------------

   function sData(e){
   
    const config = {
        headers: { 'content-type': 'multipart/form-data' }
    }
    if (!Jina1.value || !Kata.value || !Wilaya.value || !Kijiji.value || !Umri.value ) {
         empty.value = true
         loading.value = true
         setTimeout(function() {
         empty.value = false
         loading.value = false
         }, 2000);

    }

    else {

    const formData = new FormData();
    formData.append('file', file.value);
    formData.append('IDno',IDno.value);
    formData.append('Jina1', Jina1.value);
    formData.append('Jina2', Jina2.value);
    formData.append('Jina3', Jina3.value);
    formData.append('Umri', Umri.value);
    formData.append('Kata', Kata.value);
    formData.append('Wilaya', Wilaya.value);
    formData.append('Kijiji', Kijiji.value);


    loading.value = true


    try {
         axiosClient.post('/maelezo/add' ,formData,config ).then(()=>{
         loading.value = false 
         success.value = true

         setTimeout(function() {
         success.value = false
         window.location.replace('/maelezo');
         }, 3000);

         }).catch(error => {
         console.log(error.response.data.message)
        err.value = error.response.data.message
        loading.value = false 

        setTimeout(function() {
         err.value = ''
         }, 6000);  
 

      })

    }
    catch(error) {
      if(error){
        console.log(error)
        
      }
        
    }

    }  

 }

  function  exportExcel() {
    const workbook = utils.book_new();
    const worksheet = utils.json_to_sheet(exceldata.value);
    utils.book_append_sheet(workbook, worksheet, "exceldata");
    writeFile(workbook, "Maelezo.xlsx");
  }


 // 

 // watch(()=>teams.value, (newQuestion, oldQuestion) => {
 //     console.log("changes have happened")
 //  })
  </script>

  <style >
    
    .v-enter-active,
    .v-leave-active {
      transition: opacity 0.5s ease;
    }

    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }

    .topsearch{
      border: 1px solid #d7d7d7;
      background: white;
      width: 200px;
      height: 44px;
/*      color: #d6d6d6;
*/      padding: 15px;
    }



		:root {
	    /*General*/
	    --dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans",
	    "Helvetica Neue", sans-serif;
	    --dp-border-radius: 4px; /*Configurable border-radius*/
	    --dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/
	    --dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/

	    /*Sizing*/
	    --dp-button-height:38px; /*Size for buttons in overlays*/
	    --dp-month-year-row-height: 35px; /*Height of the month-year select row*/
	    --dp-month-year-row-button-size: 35px; /*Specific height for the next/previous buttons*/
	    --dp-button-icon-height: 20px; /*Icon sizing in buttons*/
	    --dp-cell-size: 35px; /*Width and height of calendar cell*/
	    --dp-cell-padding: 5px; /*Padding in the cell*/
	    --dp-common-padding: 10px; /*Common padding used*/
	    --dp-input-icon-padding: 35px; /*Padding on the left side of the input if icon is present*/
	    --dp-input-padding: 6px 30px 6px 12px; /*Padding in the input*/
	    --dp-menu-min-width: 310px; /*Adjust the min width of the menu*/
	    --dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
	    --dp-row-maring:  5px 0; /*Adjust the spacing between rows in the calendar*/
	    --dp-calendar-header-cell-padding:  0.5rem; /*Adjust padding in calendar header cells*/
	    --dp-two-calendars-spacing:10px; /*Space between multiple calendars*/
	    --dp-overlay-col-padding:  3px; /*Padding in the overlay column*/
	    --dp-time-inc-dec-button-size:  32px; /*Sizing for arrow buttons in the time picker*/
	    --dp-menu-padding: 6px 8px; /*Menu padding*/
	    
	    /*Font sizes*/
	    --dp-font-size: 1rem; /*Default font-size*/
	    --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
	    --dp-time-font-size: 0.8rem; /*Font size in the time picker*/
	    
	    /*Transitions*/
	    --dp-animation-duration: 0.1s; /*Transition duration*/
	    --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
	    --dp-transition-timing: ease-out; /*Timing on slide animations*/


		}

		.dp-custom-calendar 
		.dp__calendar_item {
/*		 border: 1px solid var(--dp-border-color-hover);
*/		}



		.dp-custom-cell {
			color:#132f65 ;
		}

		.dp__theme_light {
   --dp-background-color: #ffffff;
   --dp-text-color: #132f65;
   --dp-hover-color: #f3f3f3;
   --dp-hover-text-color: #212121;
   --dp-hover-icon-color: #959595;
   --dp-primary-color: #ff6f60;
   --dp-primary-text-color: #fff;
   --dp-secondary-color: #c0c4cc;
   --dp-border-color: #ddd;
   --dp-menu-border-color: #fff;
   --dp-border-color-hover: #aaaeb7;
   --dp-disabled-color: #f6f6f6;
   --dp-scroll-bar-background: #f3f3f3;
   --dp-scroll-bar-color: #959595;
   --dp-success-color: #959595;
   --dp-success-color-disabled: #a3d9b1;
   --dp-icon-color: #959595;
   --dp-danger-color: #ff6f60;
   --dp-highlight-color: rgba(25, 118, 210, 0.3);
}


   .custom-select{
 			cursor: pointer;
      color: white;
      background: #132f65;
      margin: 0 0 0 20px;
      padding: 7px;
/*      width: 140px;
*/      font-size: 16px;
      border-radius: 3px;
      display: inline-block;
   }

  .btn2-primary{
    background: #132f65;
    color: #fff;
}

.btn2-secondary{
/*    background: #F5F7F9;
*/    color: #fff;
}
  </style>
