@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'View Data '])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">View {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            {{-- Nama Catering --}}
                            <div class="mb-3">
                                <label for="nama_catering" class="form-label">Nama Catering</label>
                                <input type="text" class="form-control" id="nama_catering" value="{{ $hasil->nama_catering_label }}" readonly>
                            </div>

                            {{-- Tanggal --}}
                            <div class="mb-3">
                                <label for="tanggal" class="form-label">Tanggal</label>
                                <input type="text" class="form-control" id="tanggal" value="{{ $hasil->tanggal }}" readonly>
                            </div>

                            {{-- Nilai Akhir --}}
                            <div class="mb-3">
                                <label for="nilaiakhir" class="form-label">Nilai Akhir</label>
                                <input type="text" class="form-control" id="nilaiakhir" value="{{ number_format($hasil->nilaiakhir, 2) }}" readonly>
                                <small class="text-muted">Nilai Sidak pada hasil akhir dihitung dari average bobot sidak.</small>
                            </div>

                            {{-- Periode
                            <div class="mb-3">
                                <label for="periode" class="form-label">Periode</label>
                                <input type="text" class="form-control" id="periode" value="{{ $hasil->periode }}" readonly>
                            </div> --}}

                            {{-- Keterangan --}}
                            <div class="mb-3">
                                <label for="keterangan" class="form-label">Keterangan</label>
                                <input type="text" class="form-control" id="keterangan" value="{{ $hasil->keterangan }}" readonly>
                            </div>

                            {{-- Keputusan --}}
                            <div class="mb-3">
                                <label for="keputusan" class="form-label">Keputusan</label>
                                <input type="text" class="form-control" id="keputusan" value="{{ $hasil->keputusan }}" readonly>
                            </div>

                            {{-- Alasan --}}
                            <div class="mb-3">
                                <label for="alasan" class="form-label">Alasan</label>
                                <input type="text" class="form-control" id="alasan" value="{{ $hasil->alasan }}" readonly>
                            </div>

                            {{-- Dokumen --}}
                            <div class="mb-3">
                                <label for="dokumen" class="form-label">Dokumen Hasil Akhir</label>
                                @if ($hasil->dokumen)
                                    <a target="_blank" class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                                        href="{{ asset('storage/' . $hasil->dokumen) }}">
                                        <i aria-hidden="true" class="fas fa-file-lines text-lg"></i>
                                        Lihat Dokumen
                                    </a>
                                @else
                                    <span class="text-muted">Tidak Ada Dokumen</span>
                                @endif
                            </div>

                            {{-- Note --}}
                            <div class="mb-3">
                                <label for="note" class="form-label">Catatan</label>
                                <textarea class="form-control" id="note" rows="3" readonly>{{ $hasil->note }}</textarea>
                            </div>

                            {{-- No Kontrak --}}
                            <div class="mb-3">
                                <label for="no_kontrak" class="form-label">No Kontrak</label>
                                <input type="text" class="form-control" id="no_kontrak" value="{{ $hasil->no_kontrak }}" readonly>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                    </div>
                </div>
            </div>
            <div class="col-md-6" id="nilai">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Preview Nilai</p>
                        <hr class="horizontal dark mt-0">
                        <div id="nilaiLoading" class="text-center py-4" style="display: none;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <div class="text-sm text-muted mt-2">Sedang memuat data...</div>
                        </div>

                        <table class="table table-bordered table-hover" id="nilaiAKhir">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Kategori</th>
                                    <th>Nilai</th>
                                    <th>Kategori Penilaian</th>
                                    <th>Bobot</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyDetailNilai">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function setNilaiLoading(isLoading) {
            $('#nilaiLoading').toggle(isLoading);
            $('#nilaiAKhir').toggle(!isLoading);
        }

        function appendPreviewRows(res) {
            $('#tbodyDetailNilai').empty();

            if (Array.isArray(res.detail_nilai)) {
                res.detail_nilai.forEach(function(item) {
                    const rowClass = item.is_summary ? 'table-info' : '';
                    const nilaiContent = (item.bobot == 1) ?
                        '<i class="fas fa-check text-success"></i>' :
                        (item.nilai ?? '-');

                    const row = `
                        <tr class="${rowClass}">
                            <td>${item.tanggal ?? '-'}</td>
                            <td>${item.kategori ?? '-'}</td>
                            <td class="text-center">${nilaiContent}</td>
                            <td>${item.kategori_penilaian ?? '-'}</td>
                            <td>${item.bobot ?? '-'}</td>
                        </tr>
                    `;
                    $('#tbodyDetailNilai').append(row);
                });

                const totalRow = `
                    <tr class="table-primary">
                        <td colspan="4"><strong>Total Bobot</strong></td>
                        <td><strong>${res.total_bobot ?? '0.00'}</strong></td>
                    </tr>
                `;
                $('#tbodyDetailNilai').append(totalRow);
            }
        }

        $(document).ready(function() {
            setNilaiLoading(true);

            $.ajax({
                url: '{{ URL::to('/') }}/trhsil/get-nilai-akhir',
                type: 'POST',
                data: {
                    id_catering: '{{ $hasil->nama_catering }}',
                    tanggal: '{{ $hasil->tanggal }}',
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(res) {
                    appendPreviewRows(res);
                },
                error: function() {
                    $('#tbodyDetailNilai').html(`
                        <tr>
                            <td colspan="5" class="text-center text-muted">Preview nilai tidak tersedia.</td>
                        </tr>
                    `);
                },
                complete: function() {
                    setNilaiLoading(false);
                }
            });
        });
    </script>
@endsection