@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <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</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            @if ($errors->any())
                                <div class="alert alert-danger text-white">
                                    {{ $errors->first() }}
                                </div>
                            @endif
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                {{-- Nama Catering --}}
                                <div class="mb-3">
                                    <label for="nama_catering" class="form-label">Nama Catering <span class="text-danger">*</span></label>
                                    <select class="form-select text-muted" id="nama_catering" name="nama_catering" required>
                                        <option value="" disabled selected>-- Pilih Nama Catering --</option>
                                        @foreach ($catering_list as $catering)
                                            <option value="{{ $catering->id_catering }}">
                                                {{ $catering->nama_catering }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Tanggal --}}


                                <div class="mb-3">
                                    <label for="tanggal" class="form-label">Tanggal <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="tanggal" name="tanggal"
                                        value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" required>

                                </div>

                                {{-- Nilai Akhir --}}
                                <div class="mb-3">
                                    <label for="nilaiakhir" class="form-label">Nilai Akhir <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="nilaiakhir" name="nilaiakhir"
                                        value="" readonly required>
                                    <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" name="periode"
                                        value="{{ old('periode') }}" readonly>
                                </div> --}}

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

                                {{-- Keputusan --}}
                                <div class="mb-3">
                                    <label for="keputusan" class="form-label">Keputusan <span class="text-danger">*</span></label>
                                    <select class="form-select text-muted" id="keputusan" name="keputusan" required>
                                        <option value="" disabled selected>-- Pilih Keputusan / Choose Decision --
                                        </option>
                                        <option value="Lolos" {{ old('keputusan') == 'Lolos' ? 'selected' : '' }}>Lolos
                                        </option>
                                        <option value="TidakLolos" {{ old('keputusan') == 'TidakLolos' ? 'selected' : '' }}>
                                            Tidak Lolos</option>
                                    </select>
                                </div>

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

                                {{-- Dokumen --}}
                                <div class="mb-3">
                                    <label for="dokumen" class="form-label">Dokumen Hasil Akhir</label>
                                    <input type="file" class="form-control" id="dokumen" name="dokumen">
                                </div>

                                {{-- Note --}}
                                <div class="mb-3">
                                    <label for="note" class="form-label">Catatan</label>
                                    <textarea class="form-control" id="note" name="note" rows="3"></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" name="no_kontrak"
                                        value="">
                                </div>
                            </div>
                            <hr class="horizontal dark">
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2">

                        </div>
                    </form>
                </div>
            </div>

            <div class="col-md-6" id="nilai" style="display: none">
                <div class="card">
                    <div class="card-body">
                        <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>

    <div class="container-fluid py-4">
        <div class="row">

        </div>

    </div>


    <script>
        let nilaiAkhirRequest = null;

        function setNilaiLoading(isLoading) {
            $('#nilai').show();
            $('#nilaiLoading').toggle(isLoading);
            $('#nilaiAKhir').toggle(!isLoading);
        }

        function getNilaiAkhir() {
            const idCatering = $('#nama_catering').val();
            const tanggal = $('#tanggal').val();

            if (idCatering && tanggal) {
                if (nilaiAkhirRequest) {
                    nilaiAkhirRequest.abort();
                }

                nilaiAkhirRequest = $.ajax({
                    url: '{{ URL::to('/') }}/trhsil/get-nilai-akhir',
                    type: "POST",
                    data: {
                        id_catering: idCatering,
                        tanggal: tanggal,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        setNilaiLoading(true);
                        $('#nilaiakhir').val('');
                        $('#tbodyDetailNilai').empty();
                    },
                    success: function(res) {
                        if (res && typeof res.total_bobot !== 'undefined') {
                            $('#nilaiakhir').val(parseFloat(res.total_bobot).toFixed(2));
                            $('#tbodyDetailNilai').empty();

                            // Destroy DataTable sebelumnya jika sudah pernah dibuat
                            if ($.fn.DataTable.isDataTable('#nilaiAKhir')) {
                                $('#nilaiAKhir').DataTable().clear().destroy();
                            }

                            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>' // centang jika bobot 1
                                        :
                                        (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);
                                });

                                // Baris total bobot
                                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);
                            }


                        } else {
                            $('#nilai').hide();
                            $('#nilaiakhir').val('0.00');
                        }
                    },
                    error: function(xhr, status, error) {
                        if (status === 'abort') {
                            return;
                        }
                        console.error("Gagal mengambil nilai akhir:", error);
                        $('#nilai').hide();
                        $('#nilaiakhir').val('0.00');
                    },
                    complete: function(xhr, status) {
                        if (status === 'success') {
                            setNilaiLoading(false);
                            nilaiAkhirRequest = null;
                        } else if (status !== 'abort') {
                            $('#nilaiLoading').hide();
                            nilaiAkhirRequest = null;
                        }
                    }
                });
            } else {
                $('#nilaiakhir').val('0.00'); // Default to 0.00 if inputs are invalid
                $('#nilai').hide();
            }
        }

        $(document).ready(function() {
            $('#nama_catering, #tanggal').on('change', function() {
                getNilaiAkhir();
            });



            $('#{{ $dmenu }}-form').on('submit', function() {
                const requiredFields = [
                    { selector: '#nama_catering', label: 'Nama Catering' },
                    { selector: '#tanggal', label: 'Tanggal' },
                    { selector: '#nilaiakhir', label: 'Nilai Akhir' },
                    { selector: '#keputusan', label: 'Keputusan' }
                ];
                const emptyField = requiredFields.find(function(field) {
                    return !$(field.selector).val();
                });

                if (emptyField) {
                    alert(emptyField.label + ' wajib diisi.');
                    return false;
                }
            });
        });
    </script>
@endsection