@extends('dashboard.components.layout')

@section('title')
Dashboard - Jadwal Kelas
@endsection

@section('style')
<link rel="stylesheet" href="../../assets/css/custom.css" type="text/css">
<link rel="stylesheet" href="../../assets/css/theme-sugar.css" type="text/css">
<link rel="stylesheet" href="../../assets/css/element-ui/index.css" type="text/css">

<style>
    .page-item .page-link {
        width: 2rem;
        height: 2rem;

        font-size: 0.75rem;
    }

    .overlay-container {
        position: relative;
    }

    .overlay-image {
        opacity: 1;
        display: block;

        transition: .5s ease;
        backface-visibility: hidden;
    }

    .overlay-middle {
        transition: .5s ease;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
    }

    .overlay-container:hover .overlay-image {
        opacity: 0.3;
    }

    .overlay-container:hover .overlay-middle {
        opacity: 1;
    }

    .overlay-text {
        background-color: #4CAF50;
        color: white;
        font-size: 16px;
        padding: 16px 32px;
    }
    .item-latihan{
        cursor: pointer;
        background-color: #F5F5F5;
    }
    .item-latihan:hover,
    .item-latihan.active{
        background-color: #5E72E4;
        transition: background-color 0.3s ease-out;
        color: #F5F5F5;
    }
</style>

@endsection

@section('page-title')
<h6 class="h2 text-white d-inline-block mb-0">
   Jadwal 
</h6>
@endsection

@section('breadcrumb')
<li class="breadcrumb-item text-white">
    <i class="ni ni-ungroup"></i>
</li>
<li class="breadcrumb-item text-white">{{ ucfirst(Request::segment(1)) }}</li>
<li class="breadcrumb-item text-white">Jadwal</li>
<li class="breadcrumb-item text-white">{{ ucfirst(Request::segment(2)) }}</li>

@endsection

@section('action-bar')

<div class="mt-3 d-sm-none"></div>

<div v-if="isLoaded && !isFailed" class="d-flex justify-content-end d-none" :class="{'d-block':isLoaded && !isFailed}">

</div>
@endsection

@section('content')
<div class="mb-4">
    <div class="d-flex justify-content-center" v-if="!isLoaded && !isFailed" :class="{'d-none' : isLoaded && !isFailed}">
        <div class="col-12 card">
            <div class="card-body text-center">
                <div class="spinner">
                    <div class="rect1 bg-primary"></div>
                    <div class="rect2 bg-primary"></div>
                    <div class="rect3 bg-primary"></div>
                    <div class="rect4 bg-primary"></div>
                    <div class="rect5 bg-primary"></div>
                </div>
                <h4 class="mt-4 text-primary">
                    Sedang memuat data..
                </h4>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-center d-none" :class="{'d-block':isFailed}" v-if="isFailed">
        <div class="col-12 card">
            <div class="card-body text-center text-warning">
                <i class="mt-4 fas fa-exclamation-triangle fa-5x"></i>
                <h4 class="mt-4 text-warning">
                    Gagal memuat data. Silahkan refresh halaman.
                </h4>
            </div>
        </div>
    </div>

    <div v-if="isLoaded" class="d-none" :class="{'d-block':isLoaded}">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="text-primary">Kelas {{ ucfirst(Request::segment(2)) }} </h3>
                    </div>
                    <div class="card-body">
                        <data-tables ref="dt" style="width: 100%" :page-size.sync="table.pagination.perPage" :current-page.sync="table.pagination.current" @@current-page-change="handleCurrentPageChange" :filters="table.filters" :table-props="table.props" :data="jadwals" :pagination-props="table.pagination">
                            
                            <el-table-column label="Waktu" min-width="100" prop="waktu" sortable="true">
                                <template slot-scope="scope">
                                    <div class="d-flex flex-column">
                                        <span class="">
                                            <b>  @{{ new Date(scope . row . tanggal).toLocaleDateString('id-ID',{ weekday: 'long' })}}, @{{ new Date(scope . row . tanggal).toLocaleDateString('id-ID')}} </b>
                                        </span>
                                        <span class="">
                                            <small>
                                              <i> Pukul @{{ new Date(scope . row . tanggal).toLocaleTimeString('id-ID')}} WIB</i>
                                            </small>
                                        </span>
                                    </div>
                                    {{-- <span>
                                        @{{ scope . row . tanggal }} - @{{ scope . row . jam_mulai }} 
                                    </span> --}}
                                </template>
                            </el-table-column>

                            <el-table-column label="Judul" min-width="190" prop="judul" sortable="true">
                                <template slot-scope="scope">
                                    <div class="d-flex flex-column">
                                    <span>
                                        @{{ scope . row . nama  }}
                                    </span>
                                    <span>
                                        <small>
                                            <i> Coach @{{ scope . row . nama_coach  }}</i>
                                        </small>
                                    </span>
                                </div>
                                </template>
                            </el-table-column>

                            <el-table-column label="Mini Tes" min-width="90" prop="mini_tes">
                                <template slot-scope="scope">
                                <div class="" v-if= "scope.row.latihan.length > 0">
                                    <el-tooltip class="item" effect="dark" content="Kerjakan" placement="top">
                                        <a :href="'#'" v-on:click="showModalLatihan(scope.row)" class="text-success">
                                            <i class="fas fa-scroll"></i> kerjakan
                                        </a>
                                        
                                </el-tooltip>
                                </div>
                                <div v-else>
                                    <div class="badge badge-pill badge-success">
                                        
                                        <span class="text-wrap">belum tersedia</span>
                                    </div>
                                </div>
                               
                                    
                                    
                                </template>
                            </el-table-column>

                            <el-table-column label="Materi" min-width="90" prop="materi">
                                <template slot-scope="scope">
                                    <div class="" v-if= "scope.row.materi_url">
                                        
                                        <el-tooltip class="item" effect="dark" content="Download" placement="top">
                                            <a :href="'https://drive.google.com/file/d/'+scope . row . materi_url+'/view?usp=sharing'" target="_blank" rel="noopener noreferrer">
                                                <i class="fas fa-download"></i> Download
                                            </a>
                                        </el-tooltip>
                                    </div>
                                    <div v-else>
                                        <div class="badge badge-pill badge-primary">

                                            <span class="text-wrap">belum tersedia</span>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column label="Zoom" min-width="90" prop="zooms">
                                <template slot-scope="scope">
                                    <el-tooltip class="item" effect="dark" content="Lihat" placement="top">
                                            <a href="#" @@click="showModalZoom(scope.row)" >
                                                <i class="fas fa-video"></i> Masuk
                                            </a>
                                        </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column label="Rekaman" min-width="90" prop="rekaman">
                                <template slot-scope="scope">
                                    <div class="" v-if= "scope.row.youtube_url !== null">
                                        <el-tooltip class="item" effect="dark" content="Masuk" placement="top">
                                            <a href="#" v-on:click="showModalRekaman(scope.row)">
                                                <i class="fas fa-eye"></i> Lihat
                                            </a>
                                        </el-tooltip>

                                    </div>
                                    <div class="" v-else>
                                        <div class="badge badge-pill badge-primary">

                                            <span class="text-wrap">belum tersedia</span>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>

                        </data-tables>
                    </div>

                    <div class="card-footer d-flex  justify-content-around align-items-end pt-2">

                        <div class="col-md-2 col-sm-6 px-2 d-flex flex-column">
                            <label class="h5" for="perpage">Item/Halaman</label>

                            <select id="perpage" v-model="table.pagination.perPage" class="form-control form-control-sm" id="inlineFormCustomSelect">
                                <option v-for="item in pageSizes.length" :key="item" :value="pageSizes[item-1]">
                                    @{{ pageSizes[item - 1] + '/page' }}</option>
                            </select>
                        </div>

                        <div class="col-md-8 col-sm-12 d-flex flex-column justify-content-center text-center">
                            <h5>Jumlah data: @{{ table.itemSize }}</h5>
                            <paginate :value="table.pagination.current" :page-count="numberPages" :page-range="3" :click-handler="clickCallback" :prev-text="''" :next-text="''" :container-class="'pagination justify-content-center mb-0'" :page-class="'page-item'" :page-link-class="'page-link btn-sm'" :prev-class="'page-item'" :prev-link-class="'fas fa-angle-left page-link'" :next-class="'page-item'" :next-link-class="'fas fa-angle-right page-link'" :hide-prev-next="false" :break-view-text="''" :break-view-link-class="'fas fa-ellipsis-h'">
                            </paginate>
                        </div>

                        <div class="col-md-2 col-sm-6 px-2 d-flex flex-column">
                            <label class="h5" for="to-page">Ke Halaman</label>
                            <input type="number" min="1" max="numberPage" v-model.number="table.pagination.current" id="to-page" class="form-control form-control-sm">
                        </div>

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

        </div>


        {{-- modal zoom/youtube  --}}
        <div v-if="modal.zooms.show" class="d-none" :class="{'d-block':modal.zooms.show}">
            <div class="modal fade show modal-active" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-dialog-centered " role="document">
                    <div class="modal-content">
                        <div  class="modal-header py-2 px-3 align-items-center">
                            <h5 class="modal-title">
                                <span class="text-primary align-middle">
                                    {{-- @{{(!form.isEditing)?'Tambah':'Edit'}} --}}
                                    Zoom Meeting
                                </span>
                            </h5>
                            <button type="button" class="close" @@click="closeModalZoom">
                                <i class="fas fa-times-circle text-primary"></i>
                            </button>
                        </div>
                        <div class="modal-body px-3 pt-3 pb-0" style="max-height: 30rem; overflow-y: auto;">
                       <div class="row">
                        <div class="col-md-9 mx-auto" v-if="this.modal.zooms.iszoom" >
                            <div class="form-group">
                               
                                <div class="form-group">
                                    <label class="form-control-label" for="meeting_id">Meeting ID</label>
                                    <input id="zoom_url" class="form-control" placeholder="Masukkan nama" type="text" :value=" this.modal.zooms.user">
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label" for="Password">Passcode</label>
                                    <input id="zoom_url" class="form-control" placeholder="Masukkan nama" type="text" :value=" this.modal.zooms.passw">
                                </div>
                                <h4 class="form-control-label mb-3 text-center" >Atau</h4>
                                <div class="form-group">
                                    <a :href="this.modal.zooms.link" class="btn btn-primary form-control" target="_blank">
                                        <i class="fas fa-paper-plane"></i> Gabung via Link
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" v-else>
                            <div class="rounded mx-auto font-weight-bold mb-3 pb-2" style="background-color: #F5F5F5">
                                <div class="d-flex p-3 justify-content-center">
                                    <div class="p-3"><i class="fas fa-exclamation-triangle fa-5x text-warning"></i></div>

                                </div>
                                <div class="d-flex px-3 justify-content-center">
                                    <div class="px-">

                                        <h4 class="text-primary">Akses Zoom meeting belum tersedia</h4>
                                    </div>
                                </div>
                                <div class="d-flex px-3 justify-content-center">
                                    <div class="px-3"> <h5>Periksa kembali <span class="font-weight-bolder"><u>30 menit</u></span> sebelum meeting dimulai</h5></div>
                                </div>
                            </div>
                        </div>
                       </div>
                        </div>
                   
                    </div>
                </div>
            </div>
        </div>
         {{-- modal zoom/youtube  --}}
        {{-- modal Latihan  --}}
        <div v-if="modal.latihans.show" class="d-none" :class="{'d-block':modal.latihans.show}">
            <div class="modal fade show modal-active" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-dialog-centered " role="document">
                    <div class="modal-content">
                        <div  class="modal-header py-2 px-3 align-items-center">
                            <h5 class="modal-title">
                                <span class="text-primary align-middle">
                                    Mini Tes @{{this.modal.latihans.nama}}
                                        
                                </span>
                            </h5>
                            <button type="button" class="close" @@click="closeModalLatihan">
                                <i class="fas fa-times-circle text-primary"></i>
                            </button>
                        </div>
                        <div class="modal-body px-3 pt-3 pb-0" style="max-height: 30rem; overflow-y: auto;">
                            <div class="rounded mx-auto font-weight-bold mb-3 pb-2">
                            <div class="text-center">
                                List Latihan
                            </div>
                            <div class="list-latihans" v-for = "(latihan,index) in this.modal.latihans.dataLatihan">
                                <a data-toggle="collapse" :href="'#collapseExample'+index" role="button" aria-expanded="false" aria-controls="collapseExample">
                                <div class="d-flex p-3 item-latihan">
                                    <div class="px-3  flex-shrink-1"><span>@{{index+1}}.</span></div>
                                    <div class="px-4  flex-grow-1"><span>@{{latihan.nama}} </span></div>
                                    
                                </div>
                            </a>
                              
                                <div>
                                      <div class="collapse" :id="'collapseExample'+index" >
                                        <div class="d-flex p-3">
                                            <div class="px-3  flex-shrink-1"><i class="fa fa-file text-primary"></i></div>
                                            <div class="px-4  flex-grow-1"><span>jumlah</span></div>
                                            <div class="px-1  flex-shrink-1">:</div>
                                            <div class="px-3  flex-grow-1 ">  @{{latihan.paket.jumlah_soal}} Soal</div>
                                        </div>
                                        <div class="d-flex p-3">
                                            <div class="px-3  flex-shrink-1"><i class="fa fa-stopwatch text-primary"></i></div>
                                            <div class="px-4  flex-grow-1"><span>Durasi</span></div>
                                            <div class="px-1  flex-shrink-1">:</div>
                                            <div class="px-3  flex-grow-1 ">  @{{latihan.durasi}} Menit</div>
                                        </div>
                                        <div class="d-flex p-3">
                                            <div class="px-3  flex-shrink-1"><i class="fa fa-trophy text-primary"></i></div>
                                            <div class="px-4  flex-grow-1"><span>Ranking</span></div>
                                            <div class="px-1  flex-shrink-1">:</div>
                                            <div class="px-3  flex-grow-1 ">  <a :href="'{{url('/ujian/latihan/')}}/'+latihan.kode+'/rangking'" target="_blank">
                                                <u> Lihat peringkat keseluruhan <i class="fa-regular fa-arrow-up-right-from-square"></i></u>
                                            </a></i></div>
                                        </div>
                                        <div class="d-flex p-3" >
                                            <div class="px-3  flex-fill"><a :href="'{{url('/ujian/latihan/')}}/'+latihan.kode+'/start'" class="btn btn-primary form-control" target="_blank">
                                                <i class="fa fa-file-export"></i> Kerjakan sekarang
                                            </a></i>
                                            </div>
                                        </div>
                                        <div class="d-flex px-3 pb-3" v-if="modal.latihans.riwayat[index].length > 0" >
                                            <div class="px-3 flex-fill">

                                                <a :href="'{{url('/ujian/latihan/')}}/'+latihan.kode+'/riwayat'" class="btn btn-outline-primary form-control"  target="_blank">
                                                Lihat hasil
                                                       </a></i>
                                            </div>
                                        </div>
                                        <div class="d-flex px-3 pb-3" v-else >
                                            <div class="px-3 flex-fill">
                                                <a :href="'{{url('/ujian/latihan/')}}/'+latihan.kode+'/riwayat'" class="btn btn-outline-primary form-control disabled"  target="_blank">
                                                Lihat hasil
                                                       </a></i>
                                            </div>
                                        </div>
                                      </div>
                                </div>
                            </div>
                            
                            

                            </div>
                           
                       </div>
                        </div>
                   
                    </div>
                </div>
            </div>
        </div>
         {{-- end modal Latihan  --}}
         <modal-video v-if="modal.rekaman.show" :judul="modal.rekaman.video.nama.toUpperCase()"
         :youtube_id="modal.rekaman.video.youtube_url" v-on:close="closeModalRekaman">
     </modal-video>
    </div>
</div>

@endsection

@section('script')
<script src="{{ asset('assets/js/element-ui/index.js') }}"></script>
<script src="{{ asset('assets/js/element-ui/locales/en.js') }}"></script>
<script src="{{ asset('assets/js/element-ui/data-tables.js') }}"></script>

<script src="{{ asset('assets/js/vue-paginate.js') }}"></script>

<script src="{{ asset('assets/js/vue-toast-notification.js') }}"></script>

<script src="{{ asset('assets/js/vue/modal-video.js') }}"></script>
<script src="{{ asset('assets/js/vue/confirm-delete.js') }}"></script>


<script>
    let kode = '{{Request::segment(2)}}'
    let base_url = `{{ url('/') }}/api/kelas-saya/`+kode+`/jadwal`
    let coach_url =  `{{url('/')}}/api/coach`

    ELEMENT.locale(ELEMENT.lang.en)
    Vue.use(VueToast);
    Vue.use(DataTables.DataTables)

    Vue.component('paginate', VuejsPaginate)

    var app = new Vue({
        el: '#panel',
        data: {
            table: {
                itemSize: 0,
                filters: [{
                    prop: ['waktu', 'judul', 'mini_tes', 'materi', 'zooms','rekaman'],
                    value: '',
                    focus: false
                }],
                pagination: {
                    pageSizes: [10, 30, 50],
                    current: 1,
                    perPage: 10
                }
            },
       
            modal:{
                zooms:{
                    show : false,
                    link :'',
                    user :'',
                    passw:'',
                    iszoom: true
                },
                rekaman:{
                    show: false,
                    video: {},
                }, 
                latihans:{
                    show: false,
                    nama:'',
                    dataLatihan:{},
                    riwayat:{}
                    
                }
            },
            currentTimes:'',
            isFailed: false,
            isLoaded: false,
            isRiwayat: [],
            carousels: [],
            jadwals: [],
            
           
        },
        methods: {
            openFile() {
                this.$refs.file.click()
            },
            onFileChange(e) {
                const image = e.target.files[0];
                const reader = new FileReader();
                reader.readAsDataURL(image);
                reader.onload = e => {
                    this.form.data.img = e.target.result;
                };
            },
            clickCallback(page) {
                this.table.pagination.current = page
            },
            handleCurrentPageChange(page) {
                this.table.pagination.current = page
            },
          
       
            showToast(msg, type) {
                Vue.$toast.open({
                    message: msg,
                    type: type,
                    // all of other options may go here
                });
            },
            
            showModalZoom(row) {
                this.modal.zooms.show = true
                this.modal.zooms.link = row.zoom_url
                this.modal.zooms.user = row.zoom_user
                this.modal.zooms.passw = row.zoom_passcode

                const scheduleDate = new Date(row.tanggal);
                let date = scheduleDate.getTime();
                let totalSched = Math.round(date-(600000*3))
             
                if (this.currentTimes <= totalSched ) {
                    
                    this.modal.zooms.iszoom = false
                }else{
                    this.modal.zooms.iszoom = true
                }

            },
            closeModalZoom() {
                this.modal.zooms.show = false
            },
            showModalLatihan(row) {
                this.modal.latihans.show = true
                this.modal.latihans.nama = row.nama
                this.modal.latihans.dataLatihan = row.latihan
                
                let data = []
                row.is_riwayat.forEach(x=>{
                  data.push(x.original.data.ujian)
                });
                this.modal.latihans.riwayat  = data
              
            },
            closeModalLatihan() {
                this.modal.latihans.show = false
                // this.isRiwayat = []
            },
            showModalRekaman(row) {
                this.modal.rekaman.show = true
                this.modal.rekaman.video = row
            }
            ,closeModalRekaman() {
                this.modal.rekaman.show = false
                this.modal.rekaman.video = {}
            },
            getTimes() {
                const date = new Date();
                let theDate = date.getTime();
                this.currentTimes = theDate
            },
            async initialLoad() {
                await axios
                    .get(base_url)
                    .then((response) => {
                        response.data.data.forEach(jd => {
                            this.jadwals.push({
                                id: jd.id,
                                nama: jd.nama,
                                nama_coach: jd.nama_coaches,
                                no_wa: jd.noWa,
                                tanggal: jd.tanggal,
                                zoom_url: jd.zoom_url,
                                zoom_user: jd.zoom_user,
                                zoom_passcode: jd.zoom_passcode,
                                materi_url:jd.materi_url,
                                youtube_url: jd.youtube_url,
                                latihan: jd.latihan,
                                kelas_id: jd.kelas_id,
                                coach_id: jd.coach_id,
                                jumlah_soal: jd.jumlah_soal,
                                is_riwayat: jd.isRiwayat
                                    
                            })
                        });
                        
                        // console.log(this.jadwals);
                        this.isLoaded = true
                    }, (error) => {
                        this.isLoaded = false
                        this.isFailed = true
                    })

            }
        },
        computed: {
        
            numberPages() {
                return Math.ceil(this.table.itemSize / this.table.pagination.perPage)
            },
            pageSizes() {
                if (this.jadwals.length > 100) {
                    return [
                        5, 10, 30, 50, 100
                    ]
                }

                return [
                    5, 10, 30, 50, this.jadwals.length
                ]
            }
        },
        watch: {
            'table.pagination.current'(newVal) {
                if (!newVal || newVal == 0) {
                    this.table.pagination.current = 1
                }
                if (newVal > this.numberPages) {
                    this.table.pagination.current = this.numberPages
                }
            }
           
        },
        // created() {
        //     this.initialLoad()
     

        // },
        updated() {
            Vue.set(this.table, 'itemSize', this.$refs.dt.total)
            if (this.$refs.dt.$refs.elPagination) {
                this.$refs.dt.$refs.elPagination.$el.className = 'd-none'
            }
            
        },
        mounted(){
            this.initialLoad()
            setInterval(() => this.getTimes(), 1000)
        }
    })
</script>
@endsection