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

                                {{-- Tanggal Survey --}}
                                <div class="mb-3 col-md-6">
                                    <label for="tanggal_survey" class="form-label">Tanggal Survey</label>
                                    <input type="date" class="form-control" id="tanggal_survey" name="tanggal_survey"
                                        value="{{ $hasil->tanggal }}" required>
                                </div>
                            </div>
                        </div>

                        {{-- Card Detail --}}
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Edit Detail</p>
                            <hr class="horizontal dark mt-0">
                            <div class="table-responsive">
                                 <table class="table align-items-center mb-0" id="detail_table">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-uppercase text-black text-sm font-weight-bolder opacity-1000">Kategori</th>
                                            <th class="text-uppercase text-black text-sm font-weight-bolder opacity-1000">Gdg (Gedung)</th>
                                            <th class="text-uppercase text-black text-sm font-weight-bolder opacity-1000">Off (Office)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($details as $index => $detail)
                                            <tr>
                                                <td>
                                                    <input type="hidden" name="kategori[]" value="{{ $detail->kategori }}"> <!-- Hidden input for kategori -->
                                                    {{ $detail->kategori }}
                                                </td>
                                                <td><input type="number" class="form-control" name="gdg[]" value="{{ $detail->gdg }}" required></td>
                                                <td><input type="number" class="form-control" name="off[]" value="{{ $detail->off }}" required></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            {{-- Display overall average --}}
                            <div class="mt-3">
                                <div class="row align-items-center">
                                    <div class="col-md-5">
                                        <label for="overall_average" class="form-label text-end">Rata-rata Keseluruhan</label>
                                    </div>
                                    <div class="col-md-7">
                                        <input type="text" class="form-control" id="overall_average" name="overall_average" value="{{ $hasil->ratarata }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- Hidden field for header ID --}}
                        <input type="hidden" id="header_id" name="header_id" value="{{ $hasil->id_kepuasan_catering_header }}">
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            // Function to calculate and update overall average
            function calculateOverallAverage() {
                let totalRataRata = 0, count = 0;
                $('#detail_table tbody tr').each(function() {
                    const gdg = parseFloat($(this).find('input[name="gdg[]"]').val()) || 0;
                    const off = parseFloat($(this).find('input[name="off[]"]').val()) || 0;
                    const rataRata = (gdg + off) / 2; // Calculate average for each row
                    totalRataRata += rataRata;
                    count++;
                });
                const overallAverage = count > 0 ? (totalRataRata / count).toFixed(2) : 0;
                $('#overall_average').val(overallAverage);
            }

            // Recalculate overall average on page load
            calculateOverallAverage();

            // Recalculate overall average when gdg or off values change
            $(document).on('input', 'input[name="gdg[]"], input[name="off[]"]', function() {
                calculateOverallAverage();
            });
        });
    </script>
@endpush