@extends('layouts.master')

@push('style')
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
@endpush

@section('content')
<div class="container-fluid">

    <!-- Content Row -->
    <div class="row">
        <!-- Steps Section -->
        <div class="col-xl-12 col-lg-12">
            <div class="card shadow mb-4">
                <!-- Card Header -->
                <div class="card-header py-3 d-sm-flex align-items-center justify-content-between mb-4">
                    <h3 class="m-0 font-weight-bold text-primary">Langkah-Langkah Perhitungan</h3>
                    <a href="{{ route('export.clusters') }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
                        <i class="fas fa-file fa-sm text-white-50"></i> Download File
                    </a>
                </div>                
                <!-- Card Body -->
                <div class="card-body">
                    @if (isset($steps))
                        @foreach ($steps as $step)
                            <div class="mb-3">
                                <div class="d-sm-flex align-items-center justify-content-between mb-4">
                                    <h5 class="m-0 font-weight-bold text-primary">Iterasi: {{ $step['iteration'] }}</h5>
                                    <p>Centroid</p>
                                </div>
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="m-0 font-weight-bold text-primary">
                                            <th>Cluster</th>
                                            <th>Nama Kecamatan</th>
                                            <th>Jumlah Penduduk</th>
                                            <th>Jumlah Kasus</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($step['centroids'] as $index => $centroid)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $centroid['nama_kecamatan'] ?? 'N/A' }}</td>
                                                <td>{{ $centroid['jumlah_penduduk'] ?? 'N/A' }}</td>
                                                <td>{{ $centroid['jumlah_kasus'] ?? 'N/A' }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                @foreach ($step['clusters'] as $clusterIndex => $cluster)
                                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                                        <h6 class="m-0 font-weight-bold text-primary">Cluster {{ $clusterIndex + 1 }}</h6>
                                    </div>
                                    <table class="table table-bordered data-table">
                                        <thead>
                                            <tr class="m-0 font-weight-bold text-primary">
                                                <th>Index</th>
                                                <th>Nama Kecamatan</th>
                                                <th>Jumlah Penduduk</th>
                                                <th>Jumlah Kasus</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($cluster as $index => $datum)
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>{{ $datum['nama_kecamatan'] ?? 'N/A' }}</td>
                                                    <td>{{ $datum['jumlah_penduduk'] ?? 'N/A' }}</td>
                                                    <td>{{ $datum['jumlah_kasus'] ?? 'N/A' }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endforeach
                            </div>
                        @endforeach
                    @else
                        <p>Tidak ada data langkah-langkah perhitungan.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Hasil Clustering -->
    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="card shadow mb-4">
                <!-- Card Header -->
                <div class="card-header py-3">
                    <h3 class="m-0 font-weight-bold text-primary">Hasil Clustering</h3>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                    <table class="table table-bordered data-table">
                        <thead>
                            <tr class="m-0 font-weight-bold text-primary">
                                <th>ID Kecamatan</th>
                                <th>Nama Kecamatan</th>
                                <th>Jumlah Penduduk</th>
                                <th>Jumlah Kasus</th>
                                <th>Cluster</th>
                                <th>Kasus Per Kapita</th>
                                <th>Tingkat Kasus</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($clusterResults))
                                @foreach ($clusterResults as $result)
                                    <tr>
                                        <td>{{ $result['id_kecamatan'] }}</td>
                                        <td>{{ $result['nama_kecamatan'] }}</td>
                                        <td>{{ number_format($result['jumlah_penduduk'], 0) }}</td>
                                        <td>{{ number_format($result['jumlah_kasus'], 0) }}</td>
                                        <td>{{ $result['cluster'] }}</td>
                                        <td>{{ number_format($result['cases_per_capita'], 4) }}</td>
                                        <td> 
                                            <span class="button form-control text-center
                                                @if ($result['tingkat_kasus'] == 'Tinggi')
                                                    badge-danger
                                                @elseif ($result['tingkat_kasus'] == 'Sedang')
                                                    badge-primary
                                                @elseif ($result['tingkat_kasus'] == 'Rendah')
                                                    badge-success
                                                @endif
                                            ">
                                            {{ $result['tingkat_kasus'] }}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="4">Tidak ada data clustering yang tersedia</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
<script>
    $(document).ready(function() {
        // Inisialisasi DataTables untuk semua tabel dengan kelas 'table' di dalam kontainer 'container-fluid'
        $('.data-table').DataTable();
    });
</script>
@endpush

@section('js')
@endsection