sibedas/resources/views/dashboards/bigdata.blade.php

@extends('layouts.vertical', ['subtitle' => 'Dashboards'])

@section('content')

@include('layouts.partials/page-title', ['title' => 'Dashboards', 'subtitle' => 'Dashboard Pimpinan'])

<style>
    .square{
        height: 100px;
        width: 100px;
        position: absolute;
        z-index:-1;
    }

    .dia-top-left-bottom-right:after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;

      top: 0;
      left: 0;
      background: linear-gradient(to top right, transparent calc(50% - 2px), black, transparent calc(50% + 2px));
    }

    .dia-top-right-bottom-left:after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(to top left, transparent calc(50% - 2px), black, transparent calc(50% + 2px));
    }

    #dashboard-fixed-wrapper {
        background-image:url('/images/bg-dashboard.jpg');background-size: cover;background-position: center;
    }

    #dashboard-fixed-wrapper::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.7); /* Black overlay with 50% opacity */
    }
</style>

<div id="dashboard-fixed-wrapper" class="row">
    <h2 style="margin-top:30px;margin-left:15px;color:#911701">
        <span style="float:right;font-size:14px;margin-right:25px;color:black">Terakhir di update - {{$latest_created}}</span>
        ANALISA BIG DATA PROSES PBG <br> 
        MELALUI APLIKASI SIBEDAS PBG

    </h2>

    <div class="d-flex justify-content-end">
        <div class="d-flex">
            <select class="me-2 form-select" id="yearPicker" name="year">
            @for ($i = date('Y'); $i > date('Y') - 5; $i--)
                <option value="{{ $i }}" {{ $i == date('Y') ? 'selected' : '' }}>{{ $i }}</option>
            @endfor
            </select>
            <button class="btn btn-sm btn-primary" id="btnFilterYear">Filter</button>
        </div>
    </div>
    <div id="dashboard-fixed-container" style="width:1110px;height:770px;position:relative;margin:auto;">
        @component('components.circle', [
            'document_title' => 'Kekurangan Potensi',
            'document_color' => '#911701',
            'document_type' => '',
            'document_id' => 'chart-kekurangan-potensi',
            'visible_small_circle' => true,
            'style' => 'top:150px;'
        ])
        @endcomponent

        @component('components.circle', [
            'document_title' => 'Target PAD 2024',
            'document_color' => '#020e42',
            'document_type' => '',
            'document_id' => 'chart-target-pad',
            'visible_small_circle' => true,
            'style' => 'left:200px;'
        ])
        @endcomponent

         <div class="square dia-top-left-bottom-right" style="top:150px;left:350px;">
        </div>

        <div class="square dia-top-right-bottom-left" style="top:150px;left:150px;">
        </div>



        @component('components.circle', [
            'document_title' => 'Total Potensi Berkas',
            'document_color' => '#02acfa',
            'document_type' => 'Pemohon',
            'document_id' => 'chart-total-potensi',
            'visible_small_circle' => true,
            'style' => 'left:400px;top:150px;'
        ])
        @endcomponent

        <div class="square dia-top-right-bottom-left" style="top:300px;left:350px;">
        </div>

        <div class="square dia-top-left-bottom-right" style="top:300px;left:550px;">
        </div>

        @component('components.circle', [
            'document_title' => 'Perkiraan Potensi PBG Dari Tata Ruang',
            'document_color' => '#bf04bc',
            'document_type' => '',
            'document_id' => 'chart-potensi-tata-ruang',
            'visible_small_circle' => true,
            'style' => 'left:600px;'
        ])
        @endcomponent

        <div class="square dia-top-right-bottom-left" style="top:150px;left:550px;">
        </div>

        @component('components.circle', [
            'document_title' => 'Non Usaha',
            'document_color' => '#028399',
            'document_type' => 'Berkas',
            'document_id' => 'chart-non-business',
            'visible_small_circle' => true,
            'style' => 'left:900px;top:150px;'
        ])
        @endcomponent

        @component('components.circle', [
            'document_title' => 'Usaha',
            'document_color' => '#616b7d',
            'document_type' => 'Berkas',
            'document_id' => 'chart-business',
            'visible_small_circle' => true,
            'style' => 'left:900px;top:400px;'
        ])
        @endcomponent

        @component('components.circle', [
            'document_title' => 'Berkas Terverifikasi',
            'document_color' => '#0561f5',
            'document_type' => 'Berkas',
            'document_id' => 'chart-berkas-terverifikasi',
            'visible_small_circle' => true,
            'style' => 'top:300px;left:200px;'
        ])
        @endcomponent

        <div class="square dia-top-right-bottom-left" style="top:500px;left:200px;width:50px">
        </div>

        <div class="square dia-top-left-bottom-right" style="top:450px;left:350px;width:500px;height:200px;">
        </div>

        @component('components.circle', [
            'document_title' => 'Berkas Belum Terverifikasi',
            'document_color' => '#b973ff',
            'document_type' => 'Berkas',
            'document_id' => 'chart-berkas-belum-terverifikasi',
            'visible_small_circle' => true,
            'style' => 'top:300px;left:600px;'
        ])
        @endcomponent

        <div class="square dia-top-right-bottom-left" style="top:200px;left:750px;width:250px;height:150px;">
        </div>

        <div class="square dia-top-left-bottom-right" style="top:400px;left:750px;width:250px;height:150px;">
        </div>


        @component('components.circle',[
            'document_title' => 'Realisasi Terbit PBG',
            'document_color' => '#09ab5a',
            'document_type' => 'Berkas',
            'document_id' => 'chart-realisasi-tebit-pbg',
            'visible_small_circle' => true,
            'style' => 'top:550px;left:100px;'
            ])
        @endcomponent

        <div class="square" style="top:650px;left:200px;width:250px;height:2px;background-color:black;">
        </div>

        @component('components.circle',[
            'document_title' => 'Menunggu Klik DPMPTSP',
            'document_color' => '#0294ad',
            'document_type' => 'Berkas',
            'document_id' => 'chart-menunggu-klik-dpmptsp',
            'visible_small_circle' => true,
            'style' => 'top:550px;left:400px'
            ])
        @endcomponent

        <div class="square" style="top:650px;left:600px;width:250px;height:2px;background-color:black;">
        </div>

        @component('components.circle',[
            'document_title' => 'Berproses Di Dinas Teknis',
            'document_color' => '#422519',
            'document_type' => 'Berkas',
            'document_id' => 'chart-proses-dinas-teknis',
            'visible_small_circle' => true,
            'style' => 'top:550px;left:700px'
            ])
        @endcomponent
    </div>
</div>

@endsection

@section('scripts')
@vite(['resources/js/dashboards/bigdata.js'])
@endsection