@extends('layouts.app')

@section('subtitle', 'Data Penduduk')

@section('content_body')
    <x-page-header 
        title="Data Penduduk" 
        subtitle="Basis Data Penduduk Terintegrasi Desa Siofa Banua"
        :breadcrumbs="['Dashboard' => route('dashboard'), 'Data Penduduk' => route('penduduk.index')]"
    >
        <x-slot name="buttons">
            <div class="d-flex" style="gap: 8px;">
                <a href="{{ route('penduduk.create') }}" class="btn btn-primary font-weight-bold shadow-sm d-inline-flex align-items-center justify-content-center" style="height: 38px; border-radius: 8px;">
                    <i class="fas fa-plus mr-1.5" style="margin-right: 6px;"></i> Tambah Penduduk
                </a>
                <button type="button" class="btn btn-outline-primary font-weight-bold shadow-sm d-inline-flex align-items-center justify-content-center bg-white" style="height: 38px; border-radius: 8px; color: #0F766E; border-color: #0F766E !important;" data-toggle="modal" data-target="#modalImportPenduduk">
                    <i class="fas fa-file-import mr-1.5" style="margin-right: 6px;"></i> Import
                </button>
            </div>
        </x-slot>
    </x-page-header>

    <div class="container-fluid px-0">
        <div class="row">
            @foreach ($cards as $key => $card)
                @php
                    $cTitle = $card['title'] ?? ucwords(str_replace('_', ' ', $key));
                    $cValue = $card['value'] ?? 0;
                    $cIcon = $card['icon'] ?? 'fas fa-chart-bar';
                    $cColor = $card['color'] ?? 'primary';
                    $cDesc = $card['description'] ?? 'Informasi Data';
                    
                    // Map color classes
                    $mappedColor = 'primary';
                    if (str_contains($cColor, 'success') || str_contains($cColor, 'green')) {
                        $mappedColor = 'success';
                    } elseif (str_contains($cColor, 'warning') || str_contains($cColor, 'yellow')) {
                        $mappedColor = 'warning';
                    } elseif (str_contains($cColor, 'danger') || str_contains($cColor, 'red')) {
                        $mappedColor = 'danger';
                    } elseif (str_contains($cColor, 'info') || str_contains($cColor, 'blue')) {
                        $mappedColor = 'secondary';
                    }
                @endphp
                <div class="col-lg-3 col-md-6 mb-4">
                    <x-statistic-card 
                        :title="$cTitle" 
                        :value="number_format($cValue, 0, ',', '.') . ' Jiwa'" 
                        :icon="$cIcon" 
                        :color="$mappedColor" 
                        :description="$cDesc" 
                    />
                </div>
            @endforeach
        </div>

        <!-- Tabel Data Penduduk (menggunakan x-data-table) -->
        @include('penduduk.partials.table')
    </div>

    <!-- Modal Pengajuan Surat -->
    @include('pengajuan-surat.partials.modal-create')
    
    <!-- Modal Import Penduduk -->
    @include('penduduk.partials.modal-import')
@stop

@section('css')
    @parent
    <!-- Select2 & Theme Styles -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.1.2/dist/select2-bootstrap4.min.css" rel="stylesheet" />
    <!-- DataTables Buttons Styles -->
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap4.min.css" />
@stop

@section('js')
    @parent
    @include('penduduk.partials.scripts')
@stop