@extends('layouts.app')

@section('title', 'Home')
@section('home', 'm-menu__item--active')
@section('css') 
<style>

    @import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');
    @import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

    .card_link {
        text-decoration: none !important;
        color: black;
    }
    .cards {
        width: 100%;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
    }
    .card--1 .card__img, .card--1 .card__img--hover {
        background-position: top;
    }
    .card--2 .card__img, .card--2 .card__img--hover {
        background-position: top;
    }
    .card--3 .card__img, .card--3 .card__img--hover {
        background-position: top;
    }
    .card--4 .card__img, .card--4 .card__img--hover {
        background-position: top;
    }
    .card--5 .card__img, .card--5 .card__img--hover {
        background-position: center;
    }
    .card--6 .card__img, .card--6 .card__img--hover {
        background-position: top;
    }
    .card__like {
        width: 18px;
    }
    .card__clock {
        width: 15px;
        vertical-align: middle;
        fill: #AD7D52;
    }
    .card__time {
        font-size: 12px;
        color: #AD7D52;
        vertical-align: middle;
        margin-left: 5px;
    }
    .card__clock-info {
        float: right;
    }
    .card__img {
        visibility: hidden;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 235px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    .card__img--hover {
        transition: 0.2s all ease-out;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
        height: 235px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        top: 0;
    }
    .card {
        flex: 1 1 400px;
        margin: 15px;
        transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
        background-color: #fff;
        width: 33.3%;
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
    }
    .card:hover {
        box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
        transform: scale(1.10, 1.10);
    }
    .card__info {
        z-index: 2;
        background-color: #fff;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 16px 24px 24px 24px;
    }
    .card__category {
        font-family: 'Raleway', sans-serif;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 2px;
        font-weight: 600;
        color: #000;
    }
    .card__title {
        margin-top: 5px;
        margin-bottom: 10px;
        font-family: 'Roboto Slab', serif;
    }
    .card__by {
        font-size: 12px;
        font-family: 'Raleway', sans-serif;
        font-weight: 500;
    }
    .card__author {
        font-weight: 600;
        text-decoration: none;
        color: #AD7D52;
    }
    .card:hover .card__img--hover {
        height: 100%;
        opacity: 0.5;
    }
    .card:hover .card__info {
        background-color: transparent;
        position: relative;
    }
    .modal-hr {
        margin-top: 2rem;
        margin-bottom: 2rem;
        border-top: 1px dashed rgba(0,0,0,.3);
    }
</style>
@endsection

@section('content')
@role(['rakyat'])
    <div class="row">
        <div class="col-xl-12">
            <div class="m-stack m-stack--ver m-stack--desktop m-stack--demo">
                <div id="ipr_ditawarkan" class="m-stack__item m-stack__item--center m-stack__item--middle text-center" style="background-color: #716aca; color: white;">
                    <div class="mb-2"><i class="flaticon-layers" style="font-size: 40px"></i></div>
                    <h4>IPR Ditawarkan</h4>
                    <div class="m-dropdown m-dropdown--inline m-dropdown--align-center">
                        <h3 id="count_ditawarkan"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></h3>
                        <div class="m-dropdown__wrapper" id="dropdown_ipr_ditawarkan"><div class="m-dropdown__inner"><div class="m-dropdown__body"><div class="m-dropdown__content"><ul class="m-nav" id="data_ditawarkan"></ul></div></div></div></div>
                    </div>
                </div>
                <div id="ipr_dimohon" class="m-stack__item m-stack__item--center m-stack__item--middle text-center" style="background-color: #36a3f7; color: white;">
                    <div class="mb-2"><i class="flaticon-file" style="font-size: 40px"></i></div>
                    <h4>IPR Dimohon</h4>
                    <div class="m-dropdown m-dropdown--inline m-dropdown--align-center">
                        <h3 id="count_dimohon"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></h3>
                        <div class="m-dropdown__wrapper" id="dropdown_ipr_dimohon"><div class="m-dropdown__inner"><div class="m-dropdown__body"><div class="m-dropdown__content"><ul class="m-nav" id="data_dimohon"></ul></div></div></div></div>
                    </div>
                </div>
                <div id="ipr_lulus" class="m-stack__item m-stack__item--center m-stack__item--middle text-center" style="background-color: #34bfa3; color: white;">
                    <div class="mb-2"><i class="la la-check-circle" style="font-size: 40px"></i></div>
                    <h4>IPR Lulus</h4>
                    <div class="m-dropdown m-dropdown--inline m-dropdown--align-center">
                        <h3 id="count_lulus"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></h3>
                        <div class="m-dropdown__wrapper" id="dropdown_ipr_lulus"><div class="m-dropdown__inner"><div class="m-dropdown__body"><div class="m-dropdown__content"><ul class="m-nav" id="data_lulus"></ul></div></div></div></div>
                    </div>
                </div>
                <div id="ipr_ditolak" class="m-stack__item m-stack__item--center m-stack__item--middle text-center" style="background-color: #f4516c; color: white;">
                    <div class="mb-2"><i class="flaticon-cancel" style="font-size: 40px"></i></div>
                    <h4>IPR Ditolak</h4>
                    <div class="m-dropdown m-dropdown--inline m-dropdown--align-center">
                        <h3 id="count_ditolak"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></h3>
                        <div class="m-dropdown__wrapper" id="dropdown_ipr_ditolak"><div class="m-dropdown__inner"><div class="m-dropdown__body"><div class="m-dropdown__content"><ul class="m-nav" id="data_ditolak"></ul></div></div></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <section class="cards" style="display: flex;flex-wrap: wrap;">
                                @foreach ($clusters as $cluster)
                                    <article class="card card--{{ $count }}">
                        <a href="{{ url('cluster/'.$cluster->name) }}" class="card_link">
                        <div class="card__img" style="background-image: url('{{ asset('img/cluster/'.$cluster->name.'.jpg') }}');"></div>
                        <div class="card__img--hover" style="background-image: url('{{ asset('img/cluster/'.$cluster->name.'.jpg') }}');"></div>
                        <div class="card__info">
                            <span class="card__category"> Inisiatif Peduli Rakyat</span>
                            <h3 class="card__title">{{ $cluster->display_name }}</h3>
                        </div>
                        </a>
                    </article>
                @endforeach
            </section>
        </div>
    </div>
@endrole
@endsection

@section('js')
<script>
    $(document).ready(function() {
        var data = {
            _token: '{{ csrf_token() }}'
        };

        $.ajax({
            url: '{{ url('ipr/ditawarkan') }}',
            type: 'GET',
            data: data,
            success: function(response) {
                $('#count_ditawarkan').html(0);
                $('#data_ditawarkan').html('');
                if (response.data != null) {
                    $('#count_ditawarkan').html(response.count);
                    $('#data_ditawarkan').html('<li class="m-nav__section m-nav__section--first"><span class="m-nav__section-text" style="font-size: 14px"> IPR Ditawarkan</span></li>');
                    
                    if (Object.keys(response.data).length) {
                        for (d in response.data) {
                            $('#data_ditawarkan').append('<li class="m-nav__item"><a href={{ url("cluster/" ) }}/'+response.data[d].cluster_name+' class="m-nav__link" style="padding: 5px 0;"><span class="m-nav__link-text">'+response.data[d].display_name+'</span></a></li>');
                        };

                        $('#ipr_ditawarkan').attr('onclick', "showIPR('ipr_ditawarkan')");
                        $("#ipr_ditawarkan").css("cursor", "pointer");
                    }
                }
            },
            error: function(response) {
                $('#count_ditawarkan').html('-');
            }
        });

        $.ajax({
            url: '{{ url('ipr/dimohon') }}',
            type: 'GET',
            data: data,
            success: function(response) {
                $('#count_dimohon').html(0);
                $('#data_dimohon').html('');
                if (response.data != null) {
                    $('#count_dimohon').html(response.count);
                    $('#data_dimohon').html('<li class="m-nav__section m-nav__section--first"><span class="m-nav__section-text" style="font-size: 14px; color: #36a3f7">IPR Dimohon</span></li>');
                    
                    if (Object.keys(response.data).length) {
                        for (d in response.data) {
                            $('#data_dimohon').append('<li class="m-nav__item"><a href={{ url("cluster/" ) }}/'+response.data[d].cluster_name+' class="m-nav__link" style="padding: 5px 0;"><span class="m-nav__link-text">'+response.data[d].display_name+'</span></a></li>');
                        };

                        $('#ipr_dimohon').attr('onclick', "showIPR('ipr_dimohon')");
                        $("#ipr_dimohon").css("cursor", "pointer");
                    }
                }
            },
            error: function(response) {
                $('#count_dimohon').html('-');
            }
        });


        $.ajax({
            url: '{{ url('ipr/lulus') }}',
            type: 'GET',
            data: data,
            success: function(response) {
                $('#count_lulus').html(0);
                $('#data_lulus').html('');
                if (response.data != null) {
                    $('#count_lulus').html(response.count);
                    $('#data_lulus').html('<li class="m-nav__section m-nav__section--first"><span class="m-nav__section-text" style="font-size: 14px; color: #34bfa3">IPR Lulus</span></li>');
                    
                    if (Object.keys(response.data).length) {
                        for (d in response.data) {
                            $('#data_lulus').append('<li class="m-nav__item"><a href={{ url("cluster/" ) }}/'+response.data[d].cluster_name+' class="m-nav__link" style="padding: 5px 0;"><span class="m-nav__link-text">'+response.data[d].display_name+'</span></a></li>');
                        };

                        $('#ipr_lulus').attr('onclick', "showIPR('ipr_lulus')");
                        $("#ipr_lulus").css("cursor", "pointer");
                    }
                }
            },
            error: function(response) {
                $('#count_lulus').html('-');
            }
        });


        $.ajax({
            url: '{{ url('ipr/ditolak') }}',
            type: 'GET',
            data: data,
            success: function(response) {
                $('#count_ditolak').html(0);
                $('#data_ditolak').html('');
                if (response.data != null) {
                    $('#count_ditolak').html(response.count);
                    $('#data_ditolak').html('<li class="m-nav__section m-nav__section--first"><span class="m-nav__section-text" style="font-size: 14px; color: #f4516c">IPR Ditolak</span></li>');
                    
                    if (Object.keys(response.data).length) {
                        for (d in response.data) {
                            $('#data_ditolak').append('<li class="m-nav__item"><a href={{ url("cluster/" ) }}/'+response.data[d].cluster_name+' class="m-nav__link" style="padding: 5px 0;"><span class="m-nav__link-text">'+response.data[d].display_name+'</span></a></li>');
                        };

                        $('#ipr_ditolak').attr('onclick', "showIPR('ipr_ditolak')");
                        $("#ipr_ditolak").css("cursor", "pointer");
                    }
                }
            },
            error: function(response) {
                $('#count_ditolak').html('-');
            }
        });
    });

    function showIPR(x) {
        $('#dropdown_'+x).toggle();
    }
</script>
@endsection