@extends('dashboard.components.layout')

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

@section('style')
<!-- <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>
    .croppa-container canvas {
        width: 100% !important;
        height: inherit !important;
    }
</style>

@endsection

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

@section('breadcrumb')
<li class="breadcrumb-item text-white">
    <i class="fas fa-users"></i>
</li>
<li class="breadcrumb-item text-white"><a href="{{url('/')}}">Dashboard</a></li>
<li class="breadcrumb-item text-white">{{ ucfirst(Request::segment(1)) }}</li>
@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 px-4 pt-4 pb-3">
                    <div class="card px-4 pt-4 pb-3">
                        <div class="d-flex justify-content-center d-block"  v-if = "this.kelases.length < 1">
                            <div class="col-12 card">
                                <div class="card-body text-center text-primary">
                                    <i class="mt-4 fa fa-exclamation-triangle fa-5x"></i>
                                    <h4 class="mt-4 text-primary">
                                        Anda belum terdaftar di kelas manapun.
                                    </h4>
                                </div>
                            </div>
                        
                    </div>
                    <div class="row" v-else>
                        <div v-for="(e, i) in kelases" :key="i" class="col-sm-6 col-md-3 mb-3">
                            <div class="card mb-3 h-100">
                                <!-- <img class="card-img-top img-fluid" src="https://dummyimage.com/400x200/563d7c/ffffff&text=.card-img-topfff&text=.card-img-top" alt="Card image cap" width="400"> -->
                                <div class="card-body">
                                    <div class="d-flex flex-column align-content-between flex-wrap">
                                        <h4 class="card-title">@{{e.nama}}</h4>

                                        <div class="d-flex flex-column">
                                            <p class="card-text">
                                                <span v-if="e.telegram == null" class="badge badge-info">
                                                    <i class="fa fa-info-circle"></i> Tidak Terdapat Grup Telegram
                                                </span>
                                                <a v-else :href="e.telegram?e.telegram:'#'" role="button" target="_blank"
                                                    class="btn btn-twitter btn-icon" :class="{'disabled':!e.telegram}">
                                                    <span class="btn-inner--icon"><i
                                                            class="fab fa-telegram-plane"></i></span>
                                                    <span class="btn-inner--text">Link Grup Bimbel</span>
                                                </a>
                                            </p>
                                            <p class="card-text">
                                                <a :href="'/kelas-saya/'+e.kode+'/jadwal'" role="button"
                                                class="btn btn-primary btn-icon">
                                                <span class="btn-inner--icon"><i class="fa fa-clipboard-list"></i></span>
                                                <span class="btn-inner--text">Lihat Jadwal</span>
                                                </a>
                                            </p>
                                        </div>
                                    </div>

                                    {{-- <div class="d-flex ">
                                        <h4 class="card-title">@{{e.nama}}</h4>

                                    <p class="card-text">
                                        <a :href="e.telegram?e.telegram:'#'" role="button" target="_blank"
                                            class="btn btn-twitter btn-icon" :class="{'disabled':!e.telegram}">
                                            <span class="btn-inner--icon"><i class="fab fa-telegram-plane"></i></span>
                                            <span class="btn-inner--text">Link Grup Bimbel</span>
                                        </a>
                                    </p>
                                </div> --}}
                            </div>

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

</div>
</div>

@endsection

@section('script')

<script src="{{ asset('assets/js/axios.js') }}"></script>
<!-- <script src="{{ asset('assets/js/element-ui/index.js') }}"></script>
<script src="{{ asset('assets/js/element-ui/locales/en.js') }}"></script> -->
<script>
    let base_url = "{{ url('/') }}/api/kelas-saya"
    // ELEMENT.locale(ELEMENT.lang.en)

    var app = new Vue({
        el: '#panel',
        data: {
            isFailed: false,
            isLoaded: false,
            kelases: [],
        },
        methods: {
            async initialLoad() {
                await axios
                    .get(base_url)
                    .then((response) => {
                        this.kelases = response.data.data

                        this.isLoaded = true
                    }, (error) => {
                        this.isLoaded = false
                        this.isFailed = true
                    })
            }
        },
        created() {
            this.initialLoad()


        }

    })
</script>
@endsection