@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Tambah 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 add --}}
                        @if ($authorize->add == '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) }}" enctype="multipart/form-data" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Header {{ $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 selected>-- Pilih Nama Catering --</option>
                                        @foreach ($catering_list as $catering)
                                            <option value="{{ $catering->id_catering }}" {{ old('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="{{ old('tanggal_survey') }}" required>
                                </div>
                            </div>
                        </div>

                        {{-- Card Detail --}}
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert 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 ($kategori as $index => $item)
                                            <tr>
                                                <td>
                                                    <input type="hidden" name="kategori[]" value="{{ $item->name }}"> <!-- Hidden input for kategori -->
                                                    {{ $item->name }}
                                                </td>
                                                <td><input type="number" class="form-control" name="gdg[]" required></td>
                                                <td><input type="number" class="form-control" name="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" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            // Function to calculate and update rata-rata for each row
            function calculateRowAverage(row) {
                const gdg = parseFloat(row.find('input[name="gdg[]"]').val()) || 0;
                const off = parseFloat(row.find('input[name="off[]"]').val()) || 0;
                const rataRata = ((gdg + off) / 2).toFixed(2);
                row.find('input[name="rata_rata[]"]').val(rataRata);
            }

            // Function to calculate and update overall average
            function calculateOverallAverage() {
                let totalRataRata = 0, count = 0;
                $('#detail_table tbody tr').each(function() {
                    const row = $(this);
                    const gdg = parseFloat(row.find('input[name="gdg[]"]').val()) || 0;
                    const off = parseFloat(row.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);
            }

            // Trigger calculation on input change
            $(document).on('input', 'input[name="gdg[]"], input[name="off[]"]', function() {
                calculateOverallAverage(); // Recalculate overall average
            });

            // Initialize calculation on page load
            calculateOverallAverage();
        });
    </script>
@endpush