@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <!-- Card Filter -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Filter Kompetensi</h5>
                    </div>
                    <div class="card-body">
                        <form method="GET" action="{{ request()->url() }}" class="row">
                            <!-- Filter Paket -->
                            <div class="col-md-6 mb-3">
                                <label for="filter-paket" class="form-label">Pilih Paket:</label>
                                <select name="filter-paket" id="filter-paket" class="form-select">
                                    <option value="%">Semua Paket</option>
                                    @foreach ($paketList as $paket)
                                        <option value="{{ $paket->id }}"
                                            {{ $paket->id == $filterPaket ? 'selected' : '' }}>
                                            {{ $paket->nama_paket }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <!-- Submit Button -->
                            <div class="col-md-6 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary">Terapkan Filter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card Tabel -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Matrik Skill Kompetensi</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="kompetensiTable" class="table table-bordered table-striped" style="width:100%">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th rowspan="2">Paket</th>
                                        <th rowspan="2">Sub Paket</th>
                                        @foreach ($headers as $header)
                                            <th colspan="1" class="text-center">{{ $header }}</th>
                                        @endforeach
                                    </tr>
                                    <tr>
                                        @foreach ($headers as $header)
                                            <th class="text-center">Nilai Target</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($kompetensi as $id_sub_paket => $items)
                                        <tr>
                                            <td>{{ $items->first()->nama_paket }}</td>
                                            <td>{{ $items->first()->nama_sub_paket }}</td>
                                            @foreach ($headers as $id_kompetensi => $header)
                                                @php
                                                    $target = $items->where('id_kompetensi', $id_kompetensi)->first();
                                                @endphp
                                                <td class="text-center">
                                                    {{ $target ? $target->target : '-' }}
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $('#kompetensiTable').DataTable({
            responsive: true,
            scrollX: true,
            ordering: false, // Mematikan pengurutan seluruh tabel
            language: {
                search: "Cari:",
                lengthMenu: "Tampilkan _MENU_ baris",
                zeroRecords: "Data tidak ditemukan",
                info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                infoEmpty: "Tidak ada data",
                infoFiltered: "(disaring dari _MAX_ total data)"
            }
        });
    </script>
@endpush