@extends('temp.admin')
@php
use NN\Module\DB;
use NN\Module\View;
@endphp
@section("content")

<div class="content-header row">
    <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
        <h3 class="content-header-title mb-0 d-inline-block">Dasbor</h3>
        <div class="row breadcrumbs-top d-inline-block">
            <div class="breadcrumb-wrapper col-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active">Dasbor</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="content-header-right col-md-6 col-12">
        <div class="btn-group float-md-right">
            <!-- <ul class="list-inline mb-0">
                <li style="max-width:140px">
                    <fieldset class="form-group position-relative">
                        <input type="text" value="18-04-2023" class="period datepicker form-control form-control-sm input-sm mb-1" id="tglawal" placeholder="Tanggal Awal">
                        <div class="form-control-position">
                            <i class="la la-calendar-o font-small-4"></i>
                        </div>
                    </fieldset>
                </li>
                <li style="max-width:140px">
                    <fieldset class="form-group position-relative">
                        <input type="text"value="18-04-2023" class="period datepicker form-control form-control-sm input-sm mb-1" id="tglakhir" placeholder="Tanggal Akhir">
                        <div class="form-control-position">
                            <i class="la la-calendar-o font-small-4"></i>
                        </div>
                    </fieldset>
                </li>
            </ul> -->
        </div>
    </div>
</div>
<div class="content-body">
    <section id="dasbor">
        <!-- Welcome Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">
                            <i class="la la-user text-primary"></i>
                            Selamat Datang
                        </h4>
                    </div>
                    <div class="card-body">
                        <div style="
                            min-height:200px;
                            background-size:contain;
                            background-repeat: no-repeat;
                            background-position: right center;
                            background-image:url('/usp/logo/man.png');
                        ">
                            <div id="show-user"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Financial Overview Cards -->
        <div class="row mb-4">
            <!-- Total Simpanan -->
            <div class="col-sm-12 col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">
                            <i class="la la-piggy-bank text-success"></i>
                            Total Simpanan
                        </h6>
                    </div>
                    <div class="card-content">
                        <div class="card-body sales-growth-chart">
                            <div id="monthly-sales" style="height:180px;"></div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="chart-title text-center">
                            <h3 id="sp" class="text-success">Rp 0</h3>
                            <small class="text-muted">Total saldo simpanan</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Pinjaman -->
            <div class="col-sm-12 col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">
                            <i class="la la-handshake-o text-warning"></i>
                            Total Pinjaman
                        </h6>
                    </div>
                    <div class="card-content">
                        <div class="card-body sales-growth-chart">
                            <div id="donut-example" style="height:180px;"></div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="chart-title text-center">
                            <h3 id="pj" class="text-warning">Rp 0</h3>
                            <small class="text-muted">Total pinjaman aktif</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pengambilan -->
            <div class="col-sm-12 col-lg-6">
                <div class="card pull-up">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="media-body text-left">
                                    <h6 class="text-muted">
                                        <i class="la la-download text-danger"></i>
                                        Pengambilan
                                    </h6>
                                    <h3 id="pb" class="text-danger">Rp 0</h3>
                                    <small class="text-muted">Penarikan simpanan</small>
                                </div>
                                <div class="align-self-center">
                                    <i class="la la-money danger font-large-1 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Angsuran -->
            <div class="col-sm-12 col-lg-6">
                <div class="card pull-up">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="media d-flex">
                                <div class="media-body text-left">
                                    <h6 class="text-muted">
                                        <i class="la la-credit-card text-info"></i>
                                        Angsuran
                                    </h6>
                                    <h3 id="ag" class="text-info">Rp 0</h3>
                                    <small class="text-muted">Pembayaran pinjaman</small>
                                </div>
                                <div class="align-self-center">
                                    <i class="la la-money danger font-large-1 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Revenue Style Panel -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">
                            <i class="la la-chart-line text-primary"></i>
                            Sisa Hasil Usaha (SHU)
                        </h4>
                        <div class="heading-elements">
                            <i class="la la-refresh text-muted cursor-pointer" id="refresh-shu"></i>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <div id="totalRevenueChart" style="height: 300px;"></div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span class="text-muted">Tahun Berjalan</span>
                                        <span class="font-weight-bold text-primary" id="shu-current">Rp 0</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span class="text-muted">Tahun Lalu</span>
                                        <span class="font-weight-bold text-success" id="shu-previous">Rp 0</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span class="text-muted">Pertumbuhan</span>
                                        <span class="font-weight-bold text-info" id="shu-growth">0%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
@section('css')
<style>
    h3{
        font-size: 1rem;
    }
    .card-header {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-bottom: 1px solid #dee2e6;
    }
    .card-title {
        margin-bottom: 0;
        font-weight: 600;
    }
    .card-title i {
        margin-right: 8px;
    }
    .heading-elements {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 10;
        display: flex;
        align-items: center;
        padding: 0 1.5rem;
    }
    .cursor-pointer {
        cursor: pointer;
    }
    .text-success { color: #28a745 !important; }
    .text-warning { color: #ffc107 !important; }
    .text-danger { color: #dc3545 !important; }
    .text-info { color: #17a2b8 !important; }
    .text-primary { color: var(--greenKop) !important; }
</style>
@endsection
@section('script')
<script>
    (function updateGreeting(){
        _setHTML('show-user', '<h1 style="color:var(--primary)">'+ucapanSelamat()+'</h1><h3 style="font-size:20px;font-weight:bold">'+_valHTML('nama-user')+'</h3>')
        setTimeout(() => {
            updateGreeting();
        }, 500);
    })();
</script>
{!! View::jsm('home/acc.js') !!} 
@endsection