@extends('layouts.app')

@section('title','Dashboard Monitoring PT BPR CERDAS')


@section('content')


@if(!$data)

<div class="alert alert-warning">

Belum ada data monitoring.
Silakan lakukan import Excel terlebih dahulu.

</div>

@else


@php


function formatRupiah($nilai)
{
    return number_format(
        $nilai,
        0,
        ',',
        '.'
    );
}


$asset =
$data['asset']['nilai'] ?? 0;


$dpk =
$data['dpk']['nilai'] ?? 0;


$kredit =
$data['kredit']['nilai'] ?? 0;


$laba =
$data['laba']['nilai'] ?? 0;



@endphp



{{-- ================================================= --}}
{{-- HEADER --}}
{{-- ================================================= --}}


<div class="page-header mb-4">

<div class="row align-items-center">


<div class="col">


<div class="page-pretitle text-primary">

Dashboard Monitoring

</div>


<h2 class="page-title">

PT BPR CERDAS

</h2>


<div class="text-secondary">


Posisi Data :

<strong>

{{ \Carbon\Carbon::parse($data['periode'])->translatedFormat('d F Y') }}

</strong>


</div>


</div>



<div class="col-auto">


@auth
<a href="{{ route('import.index') }}" class="btn btn-primary">
    <i class="ti ti-upload me-2"></i>
    Import Excel
</a>
@endauth


</div>


</div>

</div>





{{-- ================================================= --}}
{{-- KPI --}}
{{-- ================================================= --}}



<div class="row g-3 mb-4">


@php


$kpi=[


[
'title'=>'Total Asset',
'value'=>formatRupiah($asset),
'icon'=>'building-bank',
'color'=>'primary'
],


[
'title'=>'Dana Pihak Ketiga',
'value'=>formatRupiah($dpk),
'icon'=>'wallet',
'color'=>'success'
],


[
'title'=>'Total Kredit',
'value'=>formatRupiah($kredit),
'icon'=>'credit-card',
'color'=>'warning'
],


[
'title'=>'Laba Bersih',
'value'=>formatRupiah($laba),
'icon'=>'chart-bar',
'color'=>'purple'
]


];


@endphp




@foreach($kpi as $item)


<div class="col-12 col-sm-6 col-xl-3">


<div class="card h-100">


<div class="card-body">


<div class="d-flex justify-content-between align-items-center">


<div>


<div class="text-secondary small">

{{$item['title']}}

</div>


<h2 class="mt-2">

Rp {{$item['value']}}

</h2>



</div>


<span class="avatar avatar-lg bg-{{$item['color']}}-lt">


<i class="ti ti-{{$item['icon']}} text-{{$item['color']}}"></i>


</span>



</div>



</div>


</div>



</div>



@endforeach


</div>



{{-- ================================================= --}}
{{-- RASIO BANK --}}
{{-- ================================================= --}}


<div class="row g-3 mb-4">


@php


$rasio=[


[
'nama'=>'KAP',
'nilai'=>$data['rasio']['KAP'],
'warna'=>'success'
],


[
'nama'=>'NPL',
'nilai'=>$data['rasio']['NPL'],
'warna'=>'danger'
],


[
'nama'=>'LDR',
'nilai'=>$data['rasio']['LDR'],
'warna'=>'warning'
],


[
'nama'=>'Cash Ratio',
'nilai'=>$data['rasio']['CR'],
'warna'=>'primary'
],


];


@endphp




@foreach($rasio as $r)



<div class="col-6 col-md-3">


<div class="card">


<div class="card-body text-center">


<div class="text-secondary small">

{{$r['nama']}}

</div>



<div class="h1 mt-2 mb-2">


{{number_format($r['nilai'],2,',','.')}}%

</div>



<span class="badge bg-{{$r['warna']}}-lt">


Monitoring


</span>



</div>


</div>


</div>



@endforeach


</div>


{{-- ================================================= --}}
{{-- DAILY MOVEMENT --}}
{{-- ================================================= --}}


<div class="row g-3 mb-4">


<div class="col-12">

<div class="card">


<div class="card-header">

<h3 class="card-title">

Pergerakan Harian

</h3>

</div>



<div class="card-body">


<div class="row text-center">


<div class="col-md-3">

<div class="text-secondary">
Asset
</div>


<h2>
Rp {{ number_format(
    $movement['asset']['nilai'],
    0,
    ',',
    '.'
) }}
</h2>


@if($movement['asset']['selisih']>=0)

<span class="badge bg-success-lt text-success">

▲
{{ number_format(
    abs($movement['asset']['selisih']),
    0,
    ',',
    '.'
) }}

</span>

@else

<span class="badge bg-danger-lt text-danger">

▼
{{ number_format(
    abs($movement['asset']['selisih']),
    0,
    ',',
    '.'
) }}

</span>

@endif

</div>




<div class="col-md-3">


<div class="text-secondary">
Dana Pihak Ketiga
</div>


<h2>
Rp {{ number_format(
    $movement['dpk']['nilai'],
    0,
    ',',
    '.'
) }}
</h2>



<span class="badge bg-primary-lt">

{{ number_format(
    abs($movement['dpk']['selisih']),
    0,
    ',',
    '.'
) }}

</span>


</div>





<div class="col-md-3">


<div class="text-secondary">
Kredit
</div>


<h2>
Rp {{ number_format(
    $movement['kredit']['nilai'],
    0,
    ',',
    '.'
) }}
</h2>



<span class="badge bg-warning-lt">

{{ number_format(
    abs($movement['kredit']['selisih']),
    0,
    ',',
    '.'
) }}

</span>


</div>






<div class="col-md-3">


<div class="text-secondary">

NPL

</div>


<h2>

{{number_format(
$movement['npl']['nilai'],
2,
',',
'.'
)}} %

</h2>



@if($movement['npl']['selisih']>0)

<span class="badge bg-danger-lt text-danger">

Naik

</span>

@else

<span class="badge bg-success-lt text-success">

Turun

</span>

@endif


</div>



</div>


</div>


</div>

</div>

</div>






{{-- ================================================= --}}
{{-- DETAIL NERACA --}}
{{-- ================================================= --}}


<div class="row g-3 mb-4">


<div class="col-lg-6">


<div class="card h-100">


<div class="card-header">

<h3 class="card-title">

Komposisi Dana

</h3>

</div>



<div class="table-responsive">


<table class="table table-vcenter">


<tr>

<td>Tabungan</td>

<td class="text-end fw-bold">

Rp {{formatRupiah($data['detail']['tabungan'])}}

</td>

</tr>


<tr>

<td>Deposito</td>

<td class="text-end fw-bold">

Rp {{formatRupiah($data['detail']['deposito'])}}

</td>

</tr>


<tr>

<td>DPK</td>

<td class="text-end fw-bold">

Rp {{formatRupiah($dpk)}} 

</td>

</tr>


</table>


</div>


</div>


</div>







<div class="col-lg-6">


<div class="card h-100">


<div class="card-header">

<h3 class="card-title">

Struktur Neraca

</h3>

</div>



<table class="table table-vcenter">


<tr>

<td>Kas</td>

<td class="text-end">

Rp {{formatRupiah($data['detail']['kas'])}}

</td>

</tr>



<tr>

<td>ABA</td>

<td class="text-end">

Rp {{formatRupiah($data['detail']['aba'])}}

</td>

</tr>



<tr>

<td>Modal</td>

<td class="text-end">

Rp {{formatRupiah($data['detail']['modal'])}}

</td>

</tr>



<tr>

<td>Pinjaman Diterima</td>

<td class="text-end">

Rp {{formatRupiah($data['detail']['pinjaman'])}}

</td>

</tr>


</table>


</div>


</div>


</div>





{{-- ================================================= --}}
{{-- LIKUIDITAS --}}
{{-- ================================================= --}}



<div class="card mb-4">


<div class="card-header">

<h3 class="card-title">

Monitoring Likuiditas

</h3>

</div>



<div class="table-responsive">


<table class="table table-striped">


<thead>

<tr>

<th>Parameter</th>

<th class="text-end">Nilai</th>

</tr>


</thead>


<tbody>


<tr>

<td>Alat Likuid</td>

<td class="text-end fw-bold">

Rp {{formatRupiah($data['detail']['alat_likuid'])}}

</td>


</tr>



<tr>

<td>Kewajiban Lancar</td>

<td class="text-end fw-bold">

Rp {{formatRupiah($data['detail']['kewajiban'])}}

</td>


</tr>


<tr>

<td>Likuiditas</td>

<td class="text-end fw-bold">

Rp {{formatRupiah($data['detail']['alat_likuid'])}}

</td>


</tr>



</tbody>


</table>


</div>


</div>


{{-- ================================================= --}}
{{-- GRAFIK MONITORING --}}
{{-- ================================================= --}}



<div class="row g-3 mb-4">


<div class="col-lg-6">


<div class="card">


<div class="card-header">

<h3 class="card-title">

Trend Total Asset

</h3>

</div>


<div class="card-body">


<div id="chartAsset"
style="height:320px"></div>


</div>


</div>


</div>





<div class="col-lg-6">


<div class="card">


<div class="card-header">

<h3 class="card-title">

Trend Kredit

</h3>

</div>


<div class="card-body">


<div id="chartKredit"
style="height:320px"></div>


</div>


</div>


</div>



</div>





<div class="row g-3 mb-4">


<div class="col-lg-6">


<div class="card">


<div class="card-header">

<h3 class="card-title">

Trend DPK

</h3>

</div>


<div class="card-body">


<div id="chartDPK"
style="height:320px"></div>


</div>


</div>


</div>





<div class="col-lg-6">


<div class="card">


<div class="card-header">

<h3 class="card-title">

Trend NPL

</h3>

</div>


<div class="card-body">


<div id="chartNPL"
style="height:320px"></div>


</div>


</div>


</div>


</div>

@push('js')

<script>

document.addEventListener("DOMContentLoaded", function(){


/*
|--------------------------------------------------------------------------
| Asset
|--------------------------------------------------------------------------
*/


new ApexCharts(
document.querySelector("#chartAsset"),
{

chart:{
    type:'area',
    height:340,
    toolbar:{
        show:false
    }
},

series:[{

name:'Asset (Miliar)',

data:@json($chart['asset'])

}],


xaxis:{

categories:@json($chart['periode'])

},


stroke:{

curve:'smooth'

},


dataLabels:{

enabled:false

}


}

).render();





/*
|--------------------------------------------------------------------------
| DPK
|--------------------------------------------------------------------------
*/


new ApexCharts(
document.querySelector("#chartDPK"),
{

chart:{
type:'bar',
height:340
},


series:[{

name:'DPK',

data:@json($chart['dpk'])

}],


xaxis:{

categories:@json($chart['periode'])

},


dataLabels:{
enabled:false
}


}

).render();





/*
|--------------------------------------------------------------------------
| Kredit
|--------------------------------------------------------------------------
*/


new ApexCharts(
document.querySelector("#chartKredit"),
{

chart:{
type:'line',
height:340
},


series:[{

name:'Kredit',

data:@json($chart['kredit'])

}],


xaxis:{

categories:@json($chart['periode'])

},


stroke:{
curve:'smooth'
},


dataLabels:{
enabled:false
}


}

).render();





/*
|--------------------------------------------------------------------------
| NPL
|--------------------------------------------------------------------------
*/


new ApexCharts(
document.querySelector("#chartNPL"),
{

chart:{
type:'line',
height:340
},


series:[{

name:'NPL',

data:@json($chart['npl'])

}],


xaxis:{

categories:@json($chart['periode'])

},


stroke:{
curve:'smooth'
},


dataLabels:{
enabled:false
}


}

).render();



});


</script>

@endpush
{{-- ================================================= --}}
{{-- MONITORING HARIAN --}}
{{-- ================================================= --}}



<div class="card mb-4">


<div class="card-header">

<h3 class="card-title">

Monitoring Harian Neraca

</h3>

</div>



<div class="table-responsive">


<table class="table table-vcenter table-striped">


<thead>

<tr>

<th>Tanggal</th>

<th>Asset</th>

<th>Kas</th>

<th>ABA</th>

<th>Kredit</th>

<th>DPK</th>

<th>Laba</th>

<th>Modal</th>

</tr>


</thead>



<tbody>


@foreach($history as $row)


<tr>


<td>

{{\Carbon\Carbon::parse($row->periode)
->format('d-m-Y')}}

</td>



<td>

Rp {{number_format($row->asset,0,',','.')}}

</td>



<td>

Rp {{number_format($row->kas,0,',','.')}}

</td>



<td>

Rp {{number_format($row->aba,0,',','.')}}

</td>



<td>

Rp {{number_format($row->kredit,0,',','.')}}

</td>



<td>

Rp {{number_format($row->dpk,0,',','.')}}

</td>



<td>

Rp {{number_format($row->laba,0,',','.')}}

</td>



<td>

Rp {{number_format($row->modal,0,',','.')}}

</td>



</tr>


@endforeach



</tbody>


</table>


</div>


</div>

@endif


@endsection