@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        <div class="card shadow-lg mx-0 mb-4">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap">
                    <button class="btn btn-secondary mb-0" onclick="history.back()">
                        <i class="fas fa-circle-left me-1"></i>
                        <span class="font-weight-bold">Back</span>
                    </button>

                    <div class="input-group input-group-outline" style="max-width: 320px;">
                        <span class="input-group-text">Cari</span>
                        <input type="text" class="form-control" id="searchParticipant"
                               placeholder="NIK / Nama Peserta...">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Training Summary by Participant</h6>
                    </div>
                    <hr class="horizontal dark mt-2">

                    <div class="card-body pt-0" id="participant_accordion_{{ $dmenu }}">
                        @if (!empty($participant_summary) && $participant_summary->count())
                            @foreach ($participant_summary as $i => $p)
                                @php $collapseId = 'collapse_' . $dmenu . '_' . $i; @endphp
                                <div class="card participant-card mb-3 shadow-sm">
                                    <div class="card-header d-flex align-items-center p-3"
                                         style="cursor: pointer;"
                                         data-bs-toggle="collapse"
                                         data-bs-target="#{{ $collapseId }}"
                                         aria-expanded="false"
                                         aria-controls="{{ $collapseId }}">
                                        <div class="d-flex align-items-center" style="min-width: 0;">
                                            <span class="badge bg-primary px-3 py-2 text-start" style="width: 170px; flex: 0 0 170px;">
                                                NIK : {{ $p['nik'] }}
                                            </span>
                                            <span class="text-secondary fw-bold" style="flex: 0 0 auto; font-size: 1.25rem; line-height: 1;"></span>
                                            <span class="text-sm font-weight-bold text-dark text-truncate ps-3"
                                                  style="width: 260px; flex: 0 0 260px; min-width: 0;" title="{{ $p['nama'] }}">
                                                {{ $p['nama'] }}
                                            </span>
                                            <span class="text-secondary fw-bold me-2" style="flex: 0 0 auto; font-size: 1.25rem; line-height: 1;"> | </span>
                                            <span class="badge bg-secondary text-center" style="width: 110px; flex: 0 0 110px;">
                                                {{ $p['total_training'] }} Training
                                            </span>
                                        </div>
                                        <button type="button" class="btn btn-icon-only btn-sm btn-outline-primary mb-0 ms-auto toggle-icon"
                                                style="flex: 0 0 auto;">
                                            <i class="fas fa-arrow-down"></i>
                                        </button>
                                    </div>

                                    <div class="collapse participant-collapse" id="{{ $collapseId }}">
                                        <div class="card-body px-0 pb-2">
                                            <div class="table-responsive px-4">
                                                <table class="table align-items-center mb-0 display"
                                                       id="tbl_{{ $collapseId }}">
                                                    <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                        <tr>
                                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">No</th>
                                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Training Name</th>
                                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Absent Status</th>
                                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Score</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($p['rows'] as $r)
                                                            @php
                                                                $status = $r->{'Absent Status'} ?? '-';
                                                                $badge = match ($status) {
                                                                    'Hadir' => 'bg-success',
                                                                    'Tidak Hadir' => 'bg-danger',
                                                                    'Reschedule' => 'bg-warning',
                                                                    default => 'bg-secondary',
                                                                };
                                                                $score = $r->{'Score'} ?? null;
                                                            @endphp
                                                            <tr>
                                                                <td><span class="text-secondary text-xs">{{ $loop->iteration }}</span></td>
                                                                <td class="text-sm font-weight-normal">{{ $r->{'Training Name'} }}</td>
                                                                <td class="text-center">
                                                                    <span class="badge {{ $badge }}">{{ $status }}</span>
                                                                </td>
                                                                <td class="text-center text-sm">
                                                                    {{ $score !== null ? number_format($score, 2) : '-' }}
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="text-center py-4">
                                <code>No data found for the selected filter.</code>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
$(document).ready(function () {

    // Init DataTable saat card di-expand supaya perhitungan lebar kolom benar
    $('.participant-collapse').on('shown.bs.collapse', function () {
        var $table = $(this).find('table');
        var tableId = '#' + $table.attr('id');

        if (!$.fn.DataTable.isDataTable(tableId)) {
            $(tableId).DataTable({
                paging: false,
                searching: false,
                info: false,
                ordering: true,
                responsive: true,
                dom: 'Bfrtip',
                language: {
                    zeroRecords: "No data available"
                },
                buttons: [
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-success"></i> <span class="font-weight-bold">Excel</span>',
                        sheetName: 'Training Detail',
                        exportOptions: { columns: ':visible' }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-danger"></i> <span class="font-weight-bold">PDF</span>',
                        orientation: 'landscape',
                        pageSize: 'A4',
                        exportOptions: { columns: ':visible' }
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-info"></i> <span class="font-weight-bold">Print</span>',
                        orientation: 'landscape',
                        pageSize: 'A4',
                        exportOptions: { columns: ':visible' }
                    }
                ]
            });

            $(this).find('.dt-button').addClass('btn btn-secondary btn-sm').removeClass('dt-button');

            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptru/result.blade.php</b> on line <b>163</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptru/result.blade.php</b> on line <b>163</b><br />
            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptru/result.blade.php</b> on line <b>164</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptru/result.blade.php</b> on line <b>164</b><br />
            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptru/result.blade.php</b> on line <b>165</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptru/result.blade.php</b> on line <b>165</b><br />
        }
    });

    // Swap ikon arrow-down/arrow-up saat card dibuka/ditutup
    $('.participant-collapse').on('shown.bs.collapse', function () {
        $(this).closest('.participant-card').find('.toggle-icon i')
            .removeClass('fa-arrow-down').addClass('fa-arrow-up');
    });
    $('.participant-collapse').on('hidden.bs.collapse', function () {
        $(this).closest('.participant-card').find('.toggle-icon i')
            .removeClass('fa-arrow-up').addClass('fa-arrow-down');
    });

    // Filter card berdasarkan NIK / Nama peserta
    $('#searchParticipant').on('keyup', function () {
        var val = $(this).val().toLowerCase();
        $('.participant-card').filter(function () {
            var text = $(this).find('.card-header').first().text().toLowerCase();
            $(this).toggle(text.indexOf(val) > -1);
        });
    });
});
</script>
@endpush