@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">
<link rel="stylesheet" href="../../assets/vendor/vue-select/vue-select.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}">
    <a href="/master/coach" class="m-1 btn btn-sm btn-neutral">Manajemen Coach</a>
    <button @@click="showModalTambah" class="m-1 btn btn-sm btn-neutral">Tambah Jadwal</button>

</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">
                                <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>
                                </template>
                            </el-table-column>

                            <el-table-column label="Judul" min-width="190" prop="judul">
                                <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_id.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 class="" 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 !== null">
                                        <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 class="" 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">
                                    <div class="" v-if="scope.row.zoom_url">
                                        <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>
                                    </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>
                            <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>
                          


                            <el-table-column label="Actions" min-width="80" align="center">
                                <template slot-scope="scope">
                                    <el-tooltip class="item" effect="dark" content="Hapus" placement="top">
                                        <button @@click="confirmDelete(scope.row)" type="button" class="mr-0 mt-1 btn btn-outline-danger btn-sm btn-icon-only">
                                            <span class="btn-inner--icon"><i class="fas fa-trash"></i></span>
                                        </button>
                                    </el-tooltip>

                                    <el-tooltip class="item" effect="dark" content="Edit" placement="top">
                                        <button @@click="editJadwal(scope.row)" type="button" class="mr-0 mt-1 btn btn-outline-primary btn-sm btn-icon-only">
                                            <span class="btn-inner--icon"><i class="fas fa-pencil-alt"></i></span>
                                        </button>
                                    </el-tooltip>

                                </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>

        <confirm-delete v-if="form.delete.confirm" :show-modal="form.delete.confirm" :is-deleting="form.delete.isDeleting" @@onclose="closeConfirmDelete" @@onconfirm="hapusJadwal">
        </confirm-delete>

        <div v-if="form.tambah.show" class="d-none" :class="{'d-block':form.tambah.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 v-if="!form.isSubmitting" class="modal-header py-2 px-3 align-items-center">
                            <h5 class="modal-title">
                                <span class="text-primary align-middle">
                                    @{{(!form.isEditing)?'Tambah':'Edit'}}

                                </span>
                            </h5>
                            <button type="button" class="close" @@click="closeModalTambah">
                                <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 v-if="form.isSubmitting">
                                <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>
                                <h3 class="mt-4 mb-5 text-primary text-center">
                                    Sedang menyimpan data..
                                </h3>
                            </div>
                            <div v-if="!form.isSubmitting">

                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="nama">Nama</label>
                                                <input id="nama" v-model.trim="form.data.nama" class="form-control" placeholder="Masukkan nama" type="text" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="kode">Kode</label>
                                                <input id="kode" v-model.trim="form.data.kode" class="form-control" placeholder="Kode" type="text" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="jenis_ujian">Jenis Ujian</label>
                                                <select v-model="form.data.jenis_ujian" class="form-control" id="jenis_ujian">
                                                    <option value="skb">SKB</option>
                                                    <option value="skd">SKD</option>
                                                    <option value="pppk">PPPK</option>
                                                  </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="pg">PG</label>
                                                <input id="pg" v-model.number="form.data.pg" class="form-control" placeholder="Passing Grades" type="number" min="0" max="1000" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="!form.isSubmitting" class="modal-footer p-3">
                            <button @@click="handleReset(form.isEditing)" class="btn btn-secondary">Reset</button>

                            <button @@click="handleSubmit(form.isEditing)" class="btn btn-primary" :disabled="!cekFormTambah">
                                @{{(form.isEditing)?'Update':'Tambah'}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
        
        <div v-if="form.tambah.show" class="d-none" :class="{'d-block':form.tambah.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 v-if="!form.isSubmitting" class="modal-header py-2 px-3 align-items-center">
                            <h5 class="modal-title">
                                <span class="text-primary align-middle">
                                    @{{(!form.isEditing)?'Tambah':'Edit'}}

                                </span>
                            </h5>
                            <button type="button" class="close" @@click="closeModalTambah">
                                <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 v-if="form.isSubmitting">
                                <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>
                                <h3 class="mt-4 mb-5 text-primary text-center">
                                    Sedang menyimpan data..
                                </h3>
                            </div>
                            <div v-if="!form.isSubmitting">
                                {{-- khususu add data jadwal  --}}
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="nama">Judul</label>
                                                <input id="judul" v-model.trim="form.data.nama" class="form-control" placeholder="Masukkan Judul" type="text" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="pilih-caoch">Pilih Coach</label>
                                                {{-- <input id="nama" v-model.trim="form.data.coach_id" class="form-control" placeholder="Pilih Coach" type="text" required> --}}
                                                <v-select id="pilih-coach" label="nama" v-model="coaches.selected" :options="coaches.value"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="mini tes">Mini tes (Pilih Latihan)</label>
                                                {{-- <input id="nama" v-model.trim="form.data.latihan_id" class="form-control" placeholder="Pilih mini tes" type="text"> --}}
                                                <v-select id="pilih-latihan" label="nama" multiple v-model="latihans.selected" :options="latihans.value"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="tanggal">Tanggal</label>
                                                {{-- <input id="tanggal" v-model.trim="form.data.tanggal" class="form-control" placeholder="Masukkan tanggal" type="text"> --}}
                                                <el-date-picker v-model="form.data.tanggal" type="datetime"
                                            value-format="yyyy-MM-dd HH:mm:ss" placeholder="Tanggal dan waktu mulai">
                                        </el-date-picker>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-group">
                                                {{-- <label class="form-control-label" for="jam">Jam Mulai</label> --}}
                                                {{-- <input id="jam" v-model.trim="form.data.jam_mulai" class="form-control" placeholder="Masukkan jam" type="text" > --}}
                                                {{-- <el-date-picker v-model="form.data.jam_mulai" type="time"
                                            value-format="HH-MM-ss" placeholder="Batas mulai">
                                        </el-date-picker> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="nama">Link Materi (ID Document)</label>
                                                <input id="nama" v-model.trim="form.data.materi_url" class="form-control" placeholder="Masukkan ID Document" type="text">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="nama">Username zoom</label>
                                                <input id="nama" v-model.trim="form.data.zoom_user" class="form-control" placeholder="Masukkan Username" type="text">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="nama">Passcode Zoom</label>
                                                <input id="nama" v-model.trim="form.data.zoom_passcode" class="form-control" placeholder="Masukkan Passcode" type="text">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="nama">Link Zoom</label>
                                                <input id="nama" v-model.trim="form.data.zoom_url" class="form-control" placeholder="Masukkan URL" type="text">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="form-group">
                                                <label class="form-control-label" for="nama">Link Rekaman (ID youtube)</label>
                                                <input id="nama" v-model.trim="form.data.youtube_url" class="form-control" placeholder="Masukkan ID Youtube rekaman" type="text">
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                {{-- khususu add data jadwal  --}}
                            </div>
                        </div>
                        <div v-if="!form.isSubmitting" class="modal-footer p-3">
                            <button @@click="handleReset(form.isEditing)" class="btn btn-secondary">Reset</button>

                            <button @@click="handleSubmit(form.isEditing)" class="btn btn-primary" :disabled="!cekFormTambah">
                                @{{(form.isEditing)?'Update':'Tambah'}}
                            </button>
                        </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 v-if="!form.isSubmitting" 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">
                            <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="Passcode">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>
                        </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>
                            </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 src="{{ asset('assets/vendor/vue-select/vue-select.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)
    Vue.component('v-select', VueSelect.VueSelect)

    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
                }
            },
            form: {
                data: {
                    nama: '',
                    tanggal: '',
                    coach_id: '',
                    latihan_id: [],
                    zoom_user:'',
                    zoom_passcode:'',
                    zoom_url:'',
                    materi_url: '',
                    youtube_url: '',
                    show: true,
                },
                tambah: {
                    show: false
                },
                isSubmitting: false,
                isEditing: false,
                update: {
                    show: false,
                    index: '',
                    old: {}
                },
                delete: {
                    confirm: false,
                    isDeleting: false,
                    data: {}
                }
            },
            modal:{
                zooms:{
                    show : false,
                    link :'',
                    user :'',
                    passw:''
                },
                rekaman:{
                    show: false,
                    video: {},
                },
                latihans:{
                    show: false,
                    dataLatihan:{},
                }
            },
            coaches:{
                value:[],
                selected:''
            },
            latihans:{
                value:[],
                selected:[],
                dataLatihan:{}
            },
            isFailed: false,
            isLoaded: false,
            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
            },
            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

            },
            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_id
              

            },
            closeModalLatihan() {
                this.modal.latihans.show = false
            },
            showModalRekaman(row) {
                this.modal.rekaman.show = true
                this.modal.rekaman.video = row
            }
            ,closeModalRekaman() {
                this.modal.rekaman.show = false
                this.modal.rekaman.video = {}
            }
            ,showModalTambah() {
                this.form.tambah.show = true
            },
            closeModalTambah() {
                this.resetFormTambah()
                this.form.isSubmitting = false
                this.form.isEditing = false
                this.form.isDeleting = false
                this.form.tambah.show = false
                this.latihans.selected = []
                this.coaches.selected = ''
            },
            handleReset(isEditing) {
                if (isEditing) {
                    this.resetFormUpdate()
                } else {
                    this.resetFormTambah()
                }
            },
            handleSubmit(isEditing) {
                if (!isEditing) {
                    this.insertJadwal()
                } else {
                    this.updateJadwal()
                }
            },
            resetFormTambah() {
                const data = {
                    nama: '',
                    tanggal: '',
                    coach_id: '',
                    // latihan_id: [],
                    zoom_user:'',
                    zoom_passcode:'',
                    zoom_url:'',
                    materi_url: '',
                    youtube_url:'',
                    show: '',
                    show: true,
                }
                // this.$refs.file.value = null
                Vue.set(this.form, 'data', data)
                this.form.isSubmitting = false
            },
            resetFormUpdate() {
                const old = this.form.update.old

                const data = {
                    nama: old.nama,
                    tanggal: old.tanggal,
                    coach_id: old.coach_id,
                    latihan_id: old.latihan_id,
                    zoom_user:old.zoom_user,
                    zoom_passcode:old.zoom_passcode,
                    zoom_url:old.zoom_url,
                    materi_url: old.materi_url,
                    youtube_url: old.youtube_url,
                    show: old.show,
                }

                Vue.set(this.form, 'data', data)
                this.form.isSubmitting = false
            },
            showToast(msg, type) {
                Vue.$toast.open({
                    message: msg,
                    type: type,
                    // all of other options may go here
                });
            },
            async insertJadwal() {
                let form = this.form.data
                let selectedCoach = this.coaches.selected
                
                form.coach_id = selectedCoach.id
                form.latihan_id = this.latihans.selected
                this.form.isSubmitting = true
                await axios
                    .post(base_url, form)
                    .then((response) => {
                        

                        this.jadwals.push(response.data.data)

                        this.resetFormTambah()
                        this.showToast(
                            "Berhasil disimpan.", 'info'
                        )
                        console.log(form);
                    }, (error) => {
                        this.form.isSubmitting = false
                        this.showToast('Gagal disimpan.', 'error')
                     

                    })

            },
            editJadwal(row) {
                this.form.isEditing = true
                const update = this.form.update
                let index = this.jadwals.indexOf(row)
                this.latihans.selected = row.latihan_id
                let isiCoach = this.coaches.value

                isiCoach.forEach((c) => {
                    
                    if (row.coach_id == c.id) {
                        this.coaches.selected = c
                    }
                })

                update.index = index
                Vue.set(update, 'old', JSON.parse(JSON.stringify(this.jadwals[index])))
                Vue.set(this.form, 'data', JSON.parse(JSON.stringify(this.jadwals[index])))

               
               

                this.form.tambah.show = true
            },
            async updateJadwal() {
                this.form.isSubmitting = true
                let form = this.form.data
                let selectedCoach = this.coaches.selected

                form.coach_id = selectedCoach.id
                form.latihan_id = this.latihans.selected
            

                const id_to = this.form.update.old.id
                let id = this.jadwals.findIndex(function(to) {
                    return to.id == id_to
                })

                await axios
                    .put(base_url, form)
                    .then((response) => {

                        Vue.set(this.jadwals, id, response.data.data)

                        this.showToast(
                            `Berhasil update`, 'info'
                        )
                        
                        this.form.isSubmitting = false
                        this.closeModalTambah()

                    }, (error) => {
                        this.showToast('Gagal update data', 'error')
                        this.form.isSubmitting = false
                        this.form.update.show = false

                    })
            },

  
            cancelUpdate() {
                this.resetFormTambah()
                this.showToast('Batal edit data Jadwal', 'default')

            },
            confirmDelete(row) {
                this.form.delete.data = row
                this.form.delete.confirm = true
            },
            closeConfirmDelete() {
                this.form.delete.data = {}
                this.form.delete.confirm = false
                this.form.delete.isDeleting = false
            },
            async hapusJadwal() {
                this.form.delete.isDeleting = true

                let item = this.form.delete.data
                let id = this.jadwals.indexOf(item)

                await axios
                    .delete(base_url, {
                        data: {
                            id: item.id
                        }
                    })
                    .then((response) => {
                        this.jadwals.splice(id, 1)

                        this.showToast(
                            `Berhasil menghapus Data`, 'info'
                        )

                        this.closeConfirmDelete()

                    }, (error) => {
                        this.showToast('Gagal menghapus data', 'error')

                        this.closeConfirmDelete()
                    })

            },
            async getCoach(){
                await axios
                    .get(coach_url)
                    .then((response) => {

                        response.data.data.forEach(ch=>{
                            this.coaches.value.push({
                                id:ch.id,
                                nama:ch.nama,
                                wa:ch.wa
                            })
                        })
                        
                    
                    })
                    
            },
            async getLatihan(){
                await axios
                    .get(base_url)
                    .then((response) => {
                        let lat = response.data.dataLatihan
                        lat.forEach(lt=>{
                            this.latihans.value.push({
                                id:lt.id,
                                nama:lt.nama,
                                paket_id:lt.paket_id
                            })
                        })
                        
                    
                    })
                    
            },
            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,
                                youtube_url: jd.youtube_url,
                                materi_url: jd.materi_url,
                                latihan_id: jd.latihan,
                                kelas_id: jd.kelas_id,
                                coach_id: jd.coach_id,
                                jumlah_soal: jd.jumlah_soal
                                
                            })
                        });
                        // console.log(this.jadwals);
                        this.isLoaded = true
                    }, (error) => {
                        this.isLoaded = false
                        this.isFailed = true
                    })

            }
        },
        computed: {
            cekFormTambah() {
                let tambah = this.form.data

                return (tambah.nama && tambah.tanggal)
            },
            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
                }
            },
            'modal.edit.show'(newVal) {
                if (newVal) {
                    this.getCoach()
                    this.getLatihan()
                }
            }
            
           
        },
        created() {
            this.getCoach()
            this.getLatihan()

        },
        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()   
        }
    })
</script>
@endsection