@extends('Master.master')
@section('content')
<style>
    .switch-holder {
        display: flex;
        padding: 10px 20px;
        border-radius: 10px;
        margin-bottom: 30px;
        box-shadow: -1px -1px 5px rgba(255,255,255,.7),
                    1px 1px 5px rgba(0,0,0, .3),
                    inset 1px 1px 5px rgba(255,255,255,.7),
                    inset 1px 1px 5px rgba(0,0,0, .3);
        justify-content: space-between;
        align-items: center;
    }

    .switch-label {
        width: 250px;
    }

    .switch-label i {
        margin-right: 5px;
    }

    .switch-toggle {
        height: 40px;
    }

    .switch-toggle input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        z-index: -2;
    }

    .switch-toggle input[type="checkbox"] + label {
        position: relative;
        display: inline-block;
        width: 100px;
        height: 40px;
        border-radius: 20px;
        margin: 0;
        cursor: pointer;
        box-shadow: inset -8px -8px 15px rgba(255,255,255,.6),
                    inset 10px 10px 10px rgba(0,0,0, .25);
        
    }

    .switch-toggle input[type="checkbox"] + label::before {
        position: absolute;
        content: 'TUTUP';
        font-size: 13px;
        text-align: center;
        line-height: 25px;
        top: 8px;
        left: 8px;
        width: 45px;
        height: 25px;
        border-radius: 20px;
        background-color: #d1dad3;
        box-shadow: -3px -3px 5px rgba(255,255,255,.5),
                    3px 3px 5px rgba(0,0,0, .25);
        transition: .3s ease-in-out;
    }

    .switch-toggle input[type="checkbox"]:checked + label::before {
        left: 50%;
        content: 'BUKA';
        color: #fff;
        background-color: #00b33c;
        box-shadow: -3px -3px 5px rgba(255,255,255,.5),
                    3px 3px 5px #00b33c;
    }
</style>
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Dashboard</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        @if (auth()->user()->role == 'user')
            <div class="row">
                <div class="col-1" style="width: 0px; max-width: 25px;">
                    <i class="fas fa-bullhorn"></i>
                </div>
                <div class="col-10">
                @if(Penerimaan() == 0)
                    <marquee height="40" style="color: red;"><i>Maaf permohonan penetapan angka kredit saat ini sedang ditutup dan akan dibuka kembali {{Carbon\carbon::parse(tgl_buka())->translatedFormat('d F Y')}} {{Carbon\carbon::parse(tgl_buka())->translatedFormat('H:i')}}</i></marquee>
                @elseif (Penerimaan() == 1)
                    <marquee height="40" style="color: red;"><i>Permohonan penetapan angka kredit akan ditutup {{Carbon\carbon::parse(tgl_tutup())->translatedFormat('d F Y')}} {{Carbon\carbon::parse(tgl_tutup())->translatedFormat('H:i')}}</i></marquee>
                @endif
                </div>
            </div>
        @endif
        @if(session('success'))
            <div class="alert alert-success alert-dismissible text-center">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> x </button>
                {{session('success')}} {{auth()->user()->name}}
            </div>
        @endif
        <div class="row">
            @if (auth()->user()->role == 'user')
                @if(Count_Nav() != 0 && position() != null)
                    <div class="col-lg-3 col-6">
                        <div class="small-box bg-info">
                            <div class="inner">
                                <h3>{{$Count_Permohonan}}</h3>
                                <p>Permohonan</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-document"></i>
                            </div>
                            <a href="{{route('list_permohonan_user')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                @else
                    <div class="col-lg-3 col-6">
                        <div class="small-box bg-warning">
                            <div class="inner">
                                <h3>Alert!</h3>
                                <p>Silahkan ubah data diri terlebih dahulu!</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-alert-circled"></i>
                            </div>
                            <a href="{{route('profile')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                @endif
                @if(Count_Nav() != 0 && tgl_golongan() != null)
                    @if (tmt() >= 3)
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-danger">
                                <div class="inner">
                                    <h3>Alert!</h3>
                                    <p>Harus Naik Pangkat!</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-alert-circled"></i>
                                </div>
                                <a href="{{route('list_permohonan_user')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @else
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>TMT</h3>
                                    <p>Aman</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-checkmark-circled"></i>
                                </div>
                                <a href="{{route('list_permohonan_user')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endif
                @endif
            @endif
            @if (auth()->user()->role == 'admin')
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>{{$Count_Permohonan1}}</h3>
                            <p>Permohonan Baru</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-document"></i>
                        </div>
                        <a href="{{route('list_permohonan_admin')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3>{{$Count_Permohonan2}}</h3>
                            <p>Permohonan Proses</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-document"></i>
                        </div>
                        <a href="{{route('list_permohonan_admin_proses')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>{{$Count_Permohonan3}}</h3>
                            <p>Permohonan Selesai</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-document"></i>
                        </div>
                        <a href="{{route('list_permohonan_admin_selesai')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
            @endif
            @if (auth()->user()->role == 'super' || auth()->user()->role == 'pembina')
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>{{$Count_Permohonan_Super}}</h3>
                            <p>Permohonan</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-document"></i>
                        </div>
                        <a href="{{route('list_permohonan_super')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3>{{$Count_Employee1}}</h3>
                            <p>Jafung</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <a href="{{route('list_employee_user')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3>{{$Count_Employee2}}</h3>
                            @if (auth()->user()->role == 'super')
                                <p>Tim Penilai</p>
                            @elseif (auth()->user()->role == 'pembina')
                                <p>Administrator</p>
                            @endif
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <a href="{{route('list_employee_admin')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3>{{$Count_TMT}}</h3>
                            <p>TMT Pegawai</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-ios-people"></i>
                        </div>
                        <a href="{{route('early_warning')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
            @endif
        </div>
        @if (auth()->user()->role == 'admin')
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <canvas id="pieChart2" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card">
                        <div class="card-body">
                            <p>Progress: </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="{{$Progress_Admin}}" aria-valuemin="0" aria-valuemax="100">{{$Progress_Admin}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if (auth()->user()->role == 'super' || auth()->user()->role == 'pembina')
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <canvas id="pieChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                </div>
                @if (auth()->user()->role == 'super')
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body table-responsive p-0" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;">
                                <div class="col-lg-8" style="margin-top: 10px; margin-left: 5px; margin-bottom: 1px;">
                                    <form id="pilih_status_super" method="post" enctype="multipart/form-data">
                                        <div class="switch-holder">
                                            <div class="switch-label">
                                                <i class="fas fa-inbox"></i><span>Penerimaan Permohonan</span>
                                            </div>
                                            <div class="switch-toggle">
                                                @if (pernerimaan_permohonan_super() == 0)
                                                    <input type="checkbox" id="status">
                                                @else
                                                    <input type="checkbox" id="status" checked>
                                                @endif
                                                <label for="status"></label>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <table class="table table-striped table-valign-middle">
                                    <thead>
                                        <tr>
                                            <th>Tanggal Buka</th>
                                            <th>Tanggal Tutup</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{{Carbon\carbon::parse(tgl_buka())->translatedFormat('d F Y H:i')}}</td>
                                            <td>{{Carbon\carbon::parse(tgl_tutup())->translatedFormat('d F Y H:i')}}</td>
                                            <td><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modal-tanggal">Ubah <i class="fas fa-pen"></i></button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body table-responsive">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th class="text-center">No</th>
                                            <th class="text-center">Nama Penilai</th>
                                            <th class="text-center bg-gradient-info">Permohonan Verifikasi</th>
                                            <th class="text-center bg-gradient-warning">Permohonan Proses</th>
                                            <th class="text-center bg-gradient-success">Permohonan Selesai</th>
                                            <th class="text-center">Jumlah</th>
                                            <th class="text-center">Aksi</th>
                                        </tr>
                                    </thead>
                                    @php $no = 1; @endphp
                                    <tbody>
                                        @foreach($Count_Permohonan_Penilai as $cp)
                                        <tr>
                                            <td class="text-center">{{$no++}}</td>
                                            <td>{{$cp->name}}</td>
                                            <td class="text-center">{{$cp->verifikasi}}</td>
                                            <td class="text-center">{{$cp->proses}}</td>
                                            <td class="text-center">{{$cp->selesai}}</td>
                                            <td class="text-center">{{$cp->verifikasi + $cp->proses +$cp->selesai}}</td>
                                            <td style="width: 10px;">
                                                <a href="https://wa.me/62{{$cp->phone}}? text=Tolong%20segera%20selesaikan" target="_balnk"><button type="button" class="btn btn-block bg-gradient-success"><i class="fab fa-whatsapp"></i></button></a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        @endif
    </div>
</section>
@include('Alert.alert_status_penerimaan_permohonan')
@if (auth()->user()->role == 'super' || auth()->user()->role == 'pembina')
    @php
    $tanggal_buka = tgl_buka();
    $splittanggalwaktu = explode(" ",$tanggal_buka);
    $tanggal = $splittanggalwaktu[0];
    $waktu = $splittanggalwaktu[1];

    $pecah_tgl = explode("-",$tanggal);
    $thn = $pecah_tgl[0];
    $bln = $pecah_tgl[1];
    $tgl = $pecah_tgl[2];

    $pecah_waktu = explode(":",$waktu);
    $jam = $pecah_waktu[0];
    $menit = $pecah_waktu[1];  

    $tanggal_tutup = tgl_tutup();
    $splittanggalwaktututup = explode(" ",$tanggal_tutup);
    $tanggal_ttp = $splittanggalwaktututup[0];
    $waktu_tutup = $splittanggalwaktututup[1];

    $pecah_tgl_tutup = explode("-",$tanggal_ttp);
    $thn_tutup = $pecah_tgl_tutup[0];
    $bln_tutup = $pecah_tgl_tutup[1];
    $tgl_tutup = $pecah_tgl_tutup[2];

    $pecah_waktu_tutup = explode(":",$waktu_tutup);
    $jam_tutup = $pecah_waktu_tutup[0];
    $menit_tutup = $pecah_waktu_tutup[1];
    @endphp
    <script>
        $(document).ready(function() {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#status").change(function() {
                event.preventDefault()
                let formData = new FormData();
                var status = $("#status").val();
		
                if ($('#status').is(":checked")) {
                    status = 1;

                    formData.append('status', status);
		    console.log(status);
                    $.ajax({
                        url: '{{route("store_penerimaan_permohonan")}}',
                        type: "POST",
                        enctype: 'multipart/form-data',
                        contentType: false,
                        processData: false,
                        data: formData,
                        dataType: 'json',
                        success: function(data) {
                        $('#modal-penerimaan-permohonan').trigger("reset");
                        $('#modal-penerimaan-permohonan').modal('hide');
                        Swal.fire({
                            title: 'Tersimpan',
                            text: 'Data Berhasil disimpan.',
                            icon: 'success',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                            }
                        })
                    }
                    });
                } else {
                    status = 0;
                    formData.append('status', status);
                    $.ajax({
                        url: '{{route("store_penerimaan_permohonan")}}',
                        type: "POST",
                        enctype: 'multipart/form-data',
                        contentType: false,
                        processData: false,
                        data: formData,
                        dataType: 'json',
                        success: function(data) {
                        $('#modal-penerimaan-permohonan').trigger("reset");
                        $('#modal-penerimaan-permohonan').modal('hide');
                        Swal.fire({
                            title: 'Tersimpan',
                            text: 'Data Berhasil disimpan.',
                            icon: 'success',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                            }
                        })
                    }
                    });
                }
            });

            setInterval(customClock, 1000);
            function customClock() {
                arrbulan = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
                date = new Date();
                millisecond = date.getMilliseconds();
                detik = date.getSeconds();
                menit = date.getMinutes();
                jam = date.getHours();
                hari = date.getDay();
                tanggal = date.getDate();
                bulan = ("0" + (date.getMonth() + 1)).slice(-2)
                tahun = date.getFullYear();
                let formData = new FormData();
                var status = $("#status").val();
                
                if ( == tanggal &&  == bulan &&  == tahun &&  == jam &&  == menit && detik == 1){

                    status = 1;
                    formData.append('status', status);

                    $.ajax({
                        url: '{{route("store_penerimaan_permohonan")}}',
                        type: "POST",
                        enctype: 'multipart/form-data',
                        contentType: false,
                        processData: false,
                        data: formData,
                        dataType: 'json',
                        success: function(data) {
                        $('#modal-penerimaan-permohonan').trigger("reset");
                        $('#modal-penerimaan-permohonan').modal('hide');
                        document.getElementById("status").checked = true;
                        Swal.fire({
                            title: 'Info',
                            text: 'Penerimaan Permohonan Telah Dibuka.',
                            icon: 'info',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        })
                        }
                    });
                } else if ( == tanggal &&  == bulan &&  == tahun &&  == jam &&  == menit && detik == 1){
                    
                    status = 0;
                    formData.append('status', status);

                    $.ajax({
                        url: '{{route("store_penerimaan_permohonan")}}',
                        type: "POST",
                        enctype: 'multipart/form-data',
                        contentType: false,
                        processData: false,
                        data: formData,
                        dataType: 'json',
                        success: function(data) {
                        $('#modal-penerimaan-permohonan').trigger("reset");
                        $('#modal-penerimaan-permohonan').modal('hide');
                        document.getElementById("status").checked = false;
                        Swal.fire({
                            title: 'Info',
                            text: 'Penerimaan Permohonan Telah Ditutup.',
                            icon: 'info',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        })
                        }
                    });

                }
            } 

            $('body').on('click', '#submit', function(event) {
                event.preventDefault()
                let formData = new FormData();
                var id = $("#id").val();
                var tgl_buka = $("#tgl_buka").val();
                var tgl_tutup = $("#tgl_tutup").val();

                formData.append('id', id);
                formData.append('tgl_buka', tgl_buka);
                formData.append('tgl_tutup', tgl_tutup);

                Swal.fire({
                title: 'Mengirim Data',
                html: 'Tunggu hingga proses kirim selesai.',
                didOpen: () => {
                    Swal.showLoading()
                }
                })
                $.ajax({
                    url: '{{route("store_tanggal_penerimaan_permohonan")}}',
                    type: "POST",
                    enctype: 'multipart/form-data',
                    contentType: false,
                    processData: false,
                    data: formData,
                    dataType: 'json',
                    success: function(data) {
                        $('#modal-tanggal').trigger("reset");
                        $('#modal-tanggal').modal('hide');
                        Swal.fire({
                            title: 'Tersimpan',
                            text: 'Data Berhasil disimpan.',
                            icon: 'success',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.reload(true);
                            }
                            Swal.close(window.location.reload(true));
                        })
                    }
                });
            });
        });
    </script>
    <script>
        $(function () {
            //-------------
            //- DONUT CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var Count_Permohonan_Super_1 = ;
            var Count_Permohonan_Super_2 = ;
            var Count_Permohonan_Super_3 = ;
            var donutData        = {
            labels: [
                'Permohonan Baru',
                'Permohonan Pleno',
                'Permohonan Selesai',
            ],
            datasets: [
                {
                data: [Count_Permohonan_Super_1,Count_Permohonan_Super_2,Count_Permohonan_Super_3],
                backgroundColor : ['#17a2b8', '#ffc107', '#00a65a'],
                }
            ]
            }
            //-------------
            //- PIE CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
            var pieData        = donutData;
            var pieOptions     = {
            maintainAspectRatio : false,
            responsive : true,
            }
            //Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            new Chart(pieChartCanvas, {
            type: 'pie',
            data: pieData,
            options: pieOptions
            })
        })
    </script>
    @include('Form_Modal.edit_tanggal')
@endif
@if (auth()->user()->role == 'admin')
    <script>
        //Progress Bar
        var delay = 500;
        $(".progress-bar").each(function(i) {
            $(this).delay(delay * i).animate({
                width: $(this).attr('aria-valuenow') + '%'
            }, delay);

            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: delay,
                // easing: 'swing',
                step: function(now) {
                $(this).text(Math.ceil(now) + '%');
                }
            });
        });

        $(function () {
            //-------------
            //- DONUT CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var Count_Permohonan1 = ;
            var Count_Permohonan2 = ;
            var Count_Permohonan3 = ;
            var donutData2        = {
            labels: [
                'Permohonan Baru',
                'Permohonan Proses',
                'Permohonan Selesai',
            ],
            datasets: [
                {
                data: [Count_Permohonan1,Count_Permohonan2,Count_Permohonan3],
                backgroundColor : ['#17a2b8', '#ffc107', '#00a65a'],
                }
            ]
            }
            //-------------
            //- PIE CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var pieChartCanvas = $('#pieChart2').get(0).getContext('2d')
            var pieData        = donutData2;
            var pieOptions     = {
            maintainAspectRatio : false,
            responsive : true,
            }
            //Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            new Chart(pieChartCanvas, {
            type: 'pie',
            data: pieData,
            options: pieOptions
            })
        })
    </script>
@endif
@endsection