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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        @include('components.alert')

        {{-- Filter Range Tanggal --}}
        <div class="card mb-4 shadow-sm border-0">
            <div class="card-body p-3">
                <div class="row align-items-end g-3">
                    <div class="col-md-4 col-sm-6">
                        <label for="filter_start_date" class="form-label text-xs font-weight-bold text-uppercase text-secondary mb-1">
                            <i class="fas fa-calendar-alt me-1 text-primary"></i> Tanggal Mulai
                        </label>
                        <input type="date" class="form-control" id="filter_start_date" name="start_date">
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <label for="filter_end_date" class="form-label text-xs font-weight-bold text-uppercase text-secondary mb-1">
                            <i class="fas fa-calendar-alt me-1 text-primary"></i> Tanggal Selesai
                        </label>
                        <input type="date" class="form-control" id="filter_end_date" name="end_date">
                    </div>
                    <div class="col-md-4 col-sm-12 d-flex gap-2">
                        <button type="button" class="btn btn-primary mb-0 px-4 flex-fill" id="btn-filter">
                            <i class="fas fa-filter me-1"></i> Filter
                        </button>
                        <button type="button" class="btn btn-outline-secondary mb-0 px-3" id="btn-reset" title="Reset Filter">
                            <i class="fas fa-undo me-1"></i> Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tabel Daftar Tes --}}
        <div class="card shadow-sm border-0">
            <div class="card-header pb-0 bg-transparent">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0 text-dark font-weight-bold">
                            <i class="fas fa-clipboard-list text-primary me-2"></i>Daftar Hasil Tes Psikotes
                        </h6>
                        <p class="text-xs text-muted mb-0">Daftar sesi tes pelamar dengan persentase job fit dan laporan hasil tes</p>
                    </div>
                </div>
            </div>
            <div class="card-body px-0 pt-3 pb-2">
                <div class="table-responsive p-3">
                    <table class="table display align-items-center mb-0 w-100" id="table_test_report">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="80" class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 text-center">Action</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 ps-2">Tanggal Tes</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 ps-2">Kode Tes</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 ps-2">Posisi</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 text-center">Foto</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 ps-2">NIK</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 ps-2">Nama Pelamar</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 text-center">Test 1</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 text-center">Test 2</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 text-center">Test 3</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 text-center">Test 4</th>
                                <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 text-center">Job Fit</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#table_test_report')) {
                $('#table_test_report').DataTable().destroy();
            }

            const renderTestStatus = function(data, type, row) {
                return data ?
                    `<span class="badge bg-success">Selesai</span>` :
                    `<span class="badge bg-secondary">Belum</span>`;
            };

            let table = $('#table_test_report').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('rptest.ajax') }}",
                    type: "GET",
                    data: function(d) {
                        d.start_date = $('#filter_start_date').val();
                        d.end_date = $('#filter_end_date').val();
                    }
                },
                columns: [
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        className: 'text-center align-middle',
                        render: function(data, type, row) {
                            return `
                                <a href="${row.view_url}" class="btn btn-primary btn-sm mb-0 px-3 py-1.5" title="Masuk ke Report">
                                    <i class="fas fa-eye me-1"></i> View
                                </a>
                            `;
                        }
                    },
                    {
                        data: 'invitation_date',
                        name: 'applications_invitations.date',
                        className: 'text-sm font-weight-normal align-middle'
                    },
                    {
                        data: 'code_test',
                        name: 'applications_invitations.code_test',
                        className: 'text-sm font-weight-normal align-middle',
                        render: function(data) {
                            return data ?
                                `<span class="badge bg-light text-dark border font-monospace">${data}</span>` :
                                `-`;
                        }
                    },
                    {
                        data: 'posisi',
                        name: 'mst_vacancies.posisi',
                        className: 'text-sm font-weight-bold align-middle'
                    },
                    {
                        data: 'foto',
                        name: 'foto',
                        className: 'text-center align-middle',
                        orderable: false,
                        searchable: false,
                        render: function(data) {
                            let defaultImg = "{{ asset('img/profile.png') }}";
                            let imgUrl = data ? (data.startsWith('http') ? data :
                                "{{ asset('storage/applicants/') }}/" + data) : defaultImg;

                            return `<img src="${imgUrl}" onerror="this.onerror=null; this.src='${defaultImg}';"
                                    class="border-radius-lg shadow-sm" style="height: 38px; width: 38px; object-fit: cover; border-radius: 50%;">`;
                        }
                    },
                    {
                        data: 'nik',
                        name: 'mst_applicants.nik',
                        className: 'text-sm font-weight-normal align-middle'
                    },
                    {
                        data: 'nama',
                        name: 'mst_applicants.nama',
                        className: 'text-sm font-weight-bold text-dark align-middle'
                    },
                    {
                        data: 'test1_finished_at',
                        name: 'test1_finished_at',
                        className: 'text-center align-middle',
                        orderable: false,
                        searchable: false,
                        render: renderTestStatus
                    },
                    {
                        data: 'test2_finished_at',
                        name: 'test2_finished_at',
                        className: 'text-center align-middle',
                        orderable: false,
                        searchable: false,
                        render: renderTestStatus
                    },
                    {
                        data: 'test3_finished_at',
                        name: 'test3_finished_at',
                        className: 'text-center align-middle',
                        orderable: false,
                        searchable: false,
                        render: renderTestStatus
                    },
                    {
                        data: 'test4_finished_at',
                        name: 'test4_finished_at',
                        className: 'text-center align-middle',
                        orderable: false,
                        searchable: false,
                        render: renderTestStatus
                    },
                    {
                        data: 'job_fit_persen',
                        name: 'job_fit_persen',
                        className: 'text-center align-middle',
                        orderable: false,
                        searchable: false,
                        render: function(data) {
                            if (data === null || data === undefined) {
                                return `<span class="badge bg-secondary text-xs">-</span>`;
                            }
                            let badgeClass = 'bg-danger';
                            if (data >= 70) {
                                badgeClass = 'bg-success';
                            } else if (data >= 50) {
                                badgeClass = 'bg-warning text-dark';
                            }
                            return `<span class="badge ${badgeClass} font-weight-bold" style="font-size: 0.82rem;">${data}%</span>`;
                        }
                    }
                ],
                order: [[1, 'desc']],
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Cari nama, NIK, posisi, kode...",
                    paginate: {
                        previous: "<i class='fas fa-chevron-left'></i>",
                        next: "<i class='fas fa-chevron-right'></i>"
                    },
                    lengthMenu: "Tampilkan _MENU_ data",
                    zeroRecords: "Tidak ada data tes yang ditemukan",
                    info: "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data tersedia",
                    infoFiltered: "(disaring dari _MAX_ total data)",
                    processing: '<div class="spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Loading...</span></div> Memuat data...'
                }
            });

            $('#btn-filter').on('click', function(e) {
                e.preventDefault();
                table.ajax.reload();
            });

            $('#filter_start_date, #filter_end_date').on('change', function() {
                table.ajax.reload();
            });

            $('#btn-reset').on('click', function(e) {
                e.preventDefault();
                $('#filter_start_date').val('');
                $('#filter_end_date').val('');
                table.ajax.reload();
            });
        });
    </script>
@endpush