@extends('layouts.main')

@section('content')

<main class="flex-1 overflow-y-auto p-4 md:p-8 bg-gray-50">


<div class="mb-6">

    <a href="{{ route('admin.desa.index') }}"
        class="inline-flex items-center text-blue-700 font-medium hover:text-blue-900 mb-4">

        <i class="fas fa-chevron-left mr-2"></i>
        Kembali

    </a>


    <h2 class="text-2xl font-bold text-gray-900 uppercase">
        DETAIL DESA
    </h2>


</div>



{{-- NAMA DESA --}}

<div class="bg-white rounded-xl shadow-sm border p-5 flex items-center mb-6">


<div class="bg-blue-50 text-blue-600 rounded-full w-12 h-12 flex items-center justify-center mr-4">

<i class="fas fa-home text-xl"></i>

</div>


<h3 class="text-xl font-bold uppercase">

{{ $desa->nama_desa }}

</h3>


</div>







{{-- DATA KEPENDUDUKAN --}}


<div class="bg-white rounded-xl shadow-sm border p-6 mb-6">


<h4 class="text-blue-700 font-bold uppercase text-sm mb-5">

DATA KEPENDUDUKAN

</h4>



@php

$penduduk=[

'jumlah_penduduk'=>'Penduduk',
'jumlah_kk'=>'KK',
'laki_laki'=>'Laki-laki',
'perempuan'=>'Perempuan',
'balita'=>'Balita',
'lansia'=>'Lansia',
'desil_1'=>'Desil 1',
'desil_2'=>'Desil 2',
'desil_3'=>'Desil 3',
'desil_4'=>'Desil 4'

];


@endphp



<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">


@foreach($penduduk as $field=>$label)


<div class="flex items-center p-4 border rounded-xl bg-gray-50">


<i class="fas fa-users text-blue-600 text-2xl mr-4"></i>


<div>


<p class="text-xs text-gray-500">

{{ $label }}

</p>


<p class="text-2xl font-bold text-blue-700">

{{ number_format($desa->$field ?? 0) }}

</p>


</div>


</div>


@endforeach



</div>


</div>









{{-- SARANA PRASARANA --}}


<div class="bg-white rounded-xl shadow-sm border p-6 mb-6">


<h4 class="text-blue-700 font-bold uppercase text-sm mb-5">

SARANA DAN PRASARANA

</h4>



@php

$sarana=[

'mesjid'=>'Mesjid',
'sekolah'=>'Sekolah',
'posyandu'=>'Posyandu',
'postu_puskesmas'=>'Postu / Puskesmas',
'kantor_desa'=>'Kantor Desa'

];


@endphp




<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4">


@foreach($sarana as $field=>$label)


<div class="flex items-center p-4 border rounded-xl bg-gray-50">


<i class="fas fa-building text-blue-600 text-2xl mr-4"></i>


<div>


<p class="text-xs text-gray-500">

{{ $label }}

</p>


<p class="text-2xl font-bold text-blue-700">

{{ $desa->$field ?? 0 }}

</p>


</div>


</div>


@endforeach


</div>


</div>









{{-- KESIAPSIAGAAN BENCANA --}}


<div class="bg-white rounded-xl shadow-sm border p-6">


<h4 class="text-blue-700 font-bold uppercase text-sm mb-5">

KESIAPSIAGAAN BENCANA

</h4>



@php

$kesiapsiagaan=[

'pengetahuan_longsor'=>'Pengetahuan Longsor',
'jalur_evakuasi'=>'Jalur Evakuasi',
'tempat_evakuasi'=>'Tempat Evakuasi',
'tim_penanggulangan'=>'Tim Penanggulangan Bencana',
'sosialisasi_bencana'=>'Sosialisasi Bencana',
'dana_bencana'=>'Dana Bencana'

];


@endphp





<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">



@foreach($kesiapsiagaan as $field=>$label)



<div class="flex items-center p-4 border rounded-xl bg-gray-50">



<div class="
{{ $desa->$field ? 'bg-green-500':'bg-red-500' }}
text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">


<i class="fas 
{{ $desa->$field ? 'fa-check':'fa-times' }}">
</i>


</div>




<div>


<p class="text-sm font-medium text-gray-800">

{{ $label }}

</p>



<p class="
text-xs font-bold
{{ $desa->$field ? 'text-green-500':'text-red-500' }}
">


{{ $desa->$field ? 'Ada':'Tidak Ada' }}


</p>


</div>



</div>


@endforeach



</div>


</div>




</main>


@endsection