@extends('employee.layouts.app')
@section('title', 'Representasi Aturan | Career Development and Consultation (CDC)')
@push('styles')
    <link href="{{ asset('assets/employee/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet"
        type="text/css" />
@endpush
@section('navigation')
    <h1 class="my-1 d-flex align-items-center text-dark fw-bolder fs-3">Aturan
        <span class="mx-2 border-gray-200 h-20px border-start ms-3"></span>
        <small class="my-1 text-muted fs-7 fw-bold ms-1">Representasi Aturan</small>
    </h1>
@endsection
@section('content')
    <div class="card">
        <div class="pt-4 border card-body">
            <table class="table align-middle border table-row-bardered fs-6 gy-5 gs-7 responsive">
                <thead>
                    <tr>
                        <th rowspan="2" class="text-center align-middle border-bottom border-end">Statemen/Pernyataan
                        </th>
                        <th colspan="{{ count($personalities) }}" class="text-center border-bottom">Tipe Kepribadian</th>
                    </tr>
                    <tr>
                        @foreach ($personalities as $personality)
                            <th class="text-center min-w-50px border-bottom">{{ $personality->personality }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody class="text-gray-600 fw-bold">
                    @foreach ($uniqueStatements as $index => $statement)
                        <tr>
                            <td>[{{ $statement['statement_code'] }}] {{ $index }}</td>
                            @foreach ($personalities as $personality)
                                @if (in_array($personality->personality, $statement['personalities']))
                                    <td class="text-center">✔️</td>
                                @else
                                    <td class="text-center">-</td>
                                @endif
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{ asset('assets/employee/plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <script>
        $("#datatable").DataTable({
            "columnDefs": [{
                "visible": false,
            }]
        });
    </script>
@endpush