<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Responden SKM</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .header-section {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        .card {
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        .table th {
            background-color: #2a5298;
            color: white;
            border: none;
            font-weight: 600;
        }
        .table td {
            vertical-align: middle;
            border-color: #dee2e6;
        }
        .filter-card {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .btn-filter {
            background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
            border: none;
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 25px;
        }
        .btn-filter:hover {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
        }
        .chart-container {
            position: relative;
            height: 300px;
        }
        .section-title {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem;
            border-radius: 10px 10px 0 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="header-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-12 text-center">
                    <h1 class="mb-2"><i class="fas fa-users me-3"></i>Data Responden SKM</h1>
                    <p class="mb-0 fs-5">Pada Tahun {{ $tahun }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- Filter -->
        <div class="filter-card">
            <form method="GET" action="{{ route('survei.data-responden') }}">
                <div class="row align-items-end">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Filter Semester</label>
                        <select name="semester" class="form-select">
                            <option value="">All Semester</option>
                            <option value="1" {{ request('semester') == '1' ? 'selected' : '' }}>Semester 1</option>
                            <option value="2" {{ request('semester') == '2' ? 'selected' : '' }}>Semester 2</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Filter Tahun</label>
                        <select name="tahun" class="form-select">
                            @foreach($tahunList as $thn)
                                <option value="{{ $thn }}" {{ $tahun == $thn ? 'selected' : '' }}>{{ $thn }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-filter w-100">
                            <i class="fas fa-filter me-2"></i>Filter Data
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Jenis Kelamin -->
        <div class="card mb-4">
            <h5 class="section-title">
                <i class="fas fa-venus-mars me-2"></i>
                Persentase Responden Menurut Jenis Kelamin
            </h5>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th class="text-center" width="10%">No</th>
                                        <th width="40%">Jenis Kelamin</th>
                                        <th class="text-center" width="25%">Responden</th>
                                        <th class="text-center" width="25%">Persentase</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($jenisKelamin as $jk)
                                    <tr class="{{ $jk['jenis'] == 'Total' ? 'table-info fw-bold' : '' }}">
                                        <td class="text-center">{{ $jk['no'] }}</td>
                                        <td>{{ $jk['jenis'] }}</td>
                                        <td class="text-center">{{ number_format($jk['responden']) }}</td>
                                        <td class="text-center">{{ $jk['persentase'] }}%</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart-container">
                            <canvas id="jenisKelaminChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Usia -->
        <div class="card mb-4">
            <h5 class="section-title">
                <i class="fas fa-birthday-cake me-2"></i>
                Persentase Responden Menurut Usia
            </h5>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th class="text-center" width="10%">No</th>
                                        <th width="40%">Range Usia</th>
                                        <th class="text-center" width="25%">Responden</th>
                                        <th class="text-center" width="25%">Persentase</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($usia as $u)
                                    <tr class="{{ $u['range'] == 'Total' ? 'table-info fw-bold' : '' }}">
                                        <td class="text-center">{{ $u['no'] }}</td>
                                        <td>{{ $u['range'] }}</td>
                                        <td class="text-center">{{ number_format($u['responden']) }}</td>
                                        <td class="text-center">{{ $u['persentase'] }}%</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart-container">
                            <canvas id="usiaChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="py-4"></div>

    <script>
        // Chart Jenis Kelamin
        const jenisKelaminCtx = document.getElementById('jenisKelaminChart').getContext('2d');
        new Chart(jenisKelaminCtx, {
            type: 'pie',
            data: {
                labels: ['Laki-laki', 'Perempuan'],
                datasets: [{
                    data: [56.67, 43.33],
                    backgroundColor: ['#dc3545', '#ffc107'],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.parsed + '%';
                            }
                        }
                    }
                }
            }
        });

        // Chart Usia
        const usiaCtx = document.getElementById('usiaChart').getContext('2d');
        new Chart(usiaCtx, {
            type: 'pie',
            data: {
                labels: ['≤ 24 tahun', '25 – 34 tahun', '35 – 44 tahun', '≥ 45 tahun'],
                datasets: [{
                    data: [23.33, 36.67, 26.67, 13.33],
                    backgroundColor: ['#28a745', '#17a2b8', '#fd7e14', '#6f42c1'],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.parsed + '%';
                            }
                        }
                    }
                }
            }
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>