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

@section('content')

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

<div class="row">
    <div class="row d-flex justify-content-center">
        @component('components.circle', [
            'document_title' => 'Perkiraan Potensi PBG Dari Tata Ruang',
            'document_color' => '#bf04bc',
            'document_type' => 'Pemohon',
            'document_id' => 'chart-all-task',
            'visible_small_circle' => true
        ])
        @endcomponent

        @component('components.circle', [
            'document_title' => 'Perkiraan Potensi PBG Dari Tata Ruang',
            'document_color' => '#f75b1b',
            'document_type' => 'Pemohon',
            'document_id' => 'chart-all-task',
            'visible_small_circle' => true
        ])
        @endcomponent

        <!-- <div id="circle1" class="absolute w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white text-lg font-bold top-40 left-40">
            1
        </div>

        <div id="circle2" class="absolute w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white text-lg font-bold top-80 left-80">
            2
        </div>

        <svg id="svg-container" class="absolute inset-0 w-full h-full pointer-events-none">
            <defs>
            <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
                <polygon points="0 0, 10 3.5, 0 7" fill="red"></polygon>
            </marker>
            </defs>
            <line id="connector-line" stroke="red" stroke-width="2" marker-end="url(#arrowhead)" />
        </svg> -->
    </div>
    <div class="row d-flex justify-content-center">
        @component('components.circle', [
            'document_title' => 'Target PAD 2024',
            'document_color' => '#020e42',
            'document_type' => 'Pemohon',
            'document_id' => 'chart-all-task',
            'visible_small_circle' => true
        ])
        @endcomponent
    </div>
    <div class="row d-flex justify-content-center">
    @component('components.circle', [
            'document_title' => 'Kekurangan Potensi',
            'document_color' => '#911701',
            'document_type' => 'Pemohon',
            'document_id' => 'chart-all-task',
            'visible_small_circle' => true
        ])
        @endcomponent

        @component('components.circle', [
            'document_title' => 'Total Potensi Berkas',
            'document_color' => '#02acfa',
            'document_type' => 'Pemohon',
            'document_id' => 'chart-all-task',
            'visible_small_circle' => true
        ])
        @endcomponent
    </div>
    <div class="row d-flex justify-content-center">
    @component('components.circle', [
            'document_title' => 'Berkas Terverifikasi',
            'document_color' => '#0561f5',
            'document_type' => 'Berkas',
            'document_id' => 'chart-business',
            'visible_small_circle' => true
        ])
        @endcomponent

        @component('components.circle', [
            'document_title' => 'Berkas Belum Terverifikasi',
            'document_color' => '#b973ff',
            'document_type' => 'Berkas',
            'document_id' => 'chart-business',
            'visible_small_circle' => true
        ])
        @endcomponent
    </div>
    <div class="row d-flex justify-content-center">
    @component('components.circle', [
            'document_title' => 'Non Usaha',
            'document_color' => '#028399',
            'document_type' => 'Berkas',
            'document_id' => 'chart-non-business',
            'visible_small_circle' => true
        ])
        @endcomponent
    
        @component('components.circle', [
            'document_title' => 'Usaha',
            'document_color' => '#616b7d',
            'document_type' => 'Berkas',
            'document_id' => 'chart-business',
            'visible_small_circle' => true
        ])
        @endcomponent

        @component('components.circle',[
            'document_title' => 'Realisasi Terbit PBG',
            'document_color' => '#09ab5a',
            'document_type' => 'Berkas',
            'document_id' => 'chart-business',
            'visible_small_circle' => true
            ])
        @endcomponent

        @component('components.circle',[
            'document_title' => 'Berproses Di Dinas Teknis',
            'document_color' => '#422519',
            'document_type' => 'Berkas',
            'document_id' => 'chart-business',
            'visible_small_circle' => true
            ])
        @endcomponent
    </div>
    <div class="row d-flex justify-content-center">
        @component('components.circle',[
            'document_title' => 'Progress Manual',
            'document_color' => '#0294ad',
            'document_type' => 'Berkas',
            'document_id' => 'chart-business',
            'visible_small_circle' => true
            ])
        @endcomponent
    </div>
</div>

@endsection

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