@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <form id="my-form" method="POST" action="{{ url($url_menu . '/' . $list->id) }}">
        @csrf
        @method('PUT')
        <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 type="button" class="btn btn-secondary mb-0"
                                onclick="window.location='{{ URL::to($url_menu) }}'">
                                <i class="fas fa-chevron-left me-1"></i>Kembali
                            </button>
                            <button type="submit" class="btn btn-primary mb-0">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid py-2">
            <div class="row">
                <div class="col-md-12">
                    <div class="row mx-1">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">Header Filter</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label class="form-label">ID</label>
                                        <input type="text" class="form-control" style="height: 40px" name="id_header"
                                            value="{{ $list->id }}" readonly>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Bulan</label>
                                        <input type="text" class="form-control" style="height: 40px" name="bulan"
                                            value="{{ $list->bulan }}" readonly>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Tahun</label>
                                        <input type="text" class="form-control" style="height: 40px" name="tahun"
                                            value="{{ $list->tahun }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="hasil-mahasiswa" class="mt-3 card">
                            <div class="card-header">
                                <h5 class="mb-0">Detail Mahasiswa</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover" id="tabel-mahasiswa">
                                        <thead style="background-color:  #00b7bd4f;">
                                            <tr>
                                                <th scope="col">No</th>
                                                <th scope="col">ID</th>
                                                <th scope="col">Nama</th>
                                                <th scope="col">Departemen</th>
                                                <th scope="col">Posisi</th>
                                                <th scope="col">Absen WFO</th>
                                                <th scope="col">Absen Finger</th>
                                                <th scope="col">Nominal</th>
                                                <th scope="col">Total Nominal</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($detail as $i => $r)
                                                <tr data-index="{{ $i }}">
                                                <tr>
                                                    <td class="text-center">{{ $loop->iteration }}</td>
                                                    {{-- Hidden ID --}}
                                                    <td class="text-center"> {{ $r->id }}
                                                        <input type="hidden" name="id_detail[]"
                                                            value="{{ $r->id }}">
                                                        <input type="hidden" name="id_mhs[]"
                                                            value="{{ $r->profile_peserta }}">
                                                    </td>

                                                    {{-- Nama Mahasiswa --}}
                                                    <td>
                                                        {{ $r->nama }}
                                                        <input type="hidden" name="nama_mhs[]"
                                                            value="{{ $r->nama }}">
                                                    </td>

                                                    <td>
                                                        {{ $r->nama_departemen }}
                                                        <input type="hidden" name="nama_departemen[]"
                                                            value="{{ $r->nama_departemen }}">
                                                    </td>

                                                    <td>
                                                        {{ $r->posisi }}
                                                        <input type="hidden" name="posisi[]" value="{{ $r->posisi }}">
                                                    </td>

                                                    {{-- Jumlah Absen --}}
                                                    <td class="text-center">
                                                        {{ $r->jumlah_absen }}
                                                        <input type="hidden" name="jumlah_absen[]"
                                                            value="{{ $r->jumlah_absen }}">
                                                    </td>

                                                    {{-- Jumlah Finger (editable) --}}
                                                    <td class="text-center">
                                                        <!-- Ubah input finger -->
                                                        <input type="text" inputmode="decimal" lang="id"
                                                            class="form-control form-control-sm text-center input-finger"
                                                            name="jumlah_finger[]" value="{{ $r->absen_finger }}"
                                                            data-index="{{ $loop->index }}"
                                                            data-nominal="{{ $r->nominal }}"
                                                            data-original="{{ $r->absen_finger }}">
                                                    </td>

                                                    {{-- Nominal --}}
                                                    <td class="text-end">
                                                        Rp {{ number_format($r->nominal, 0, ',', '.') }}
                                                        <input type="hidden" name="nominal[]"
                                                            value="{{ $r->nominal }}">
                                                    </td>

                                                    {{-- Total Nominal --}}
                                                    <td class="text-end">
                                                        <span class="cell-total">Rp 0</span>
                                                        <input type="hidden" name="total_nominal[]"
                                                            value="{{ old('total_nominal.' . $i, ($r->jumlah_finger ?? 0) * ($r->nominal ?? 0)) }}">
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th colspan="6" class="text-end">Total</th>
                                                <th>
                                                    <input type="text" id="tfoot-finger"
                                                        class="form-control text-center" style="width:150px;"
                                                        value="0" readonly>
                                                </th>
                                                <th>
                                                    <input type="text" id="tfoot-nominal-sum"
                                                        class="form-control text-end" style="width:150px;"
                                                        value="Rp {{ number_format($detail->first()->nominal ?? 0, 0, ',', '.') }}" readonly>
                                                </th>
                                                <th>
                                                    <input type="text" id="tfoot-grand" class="form-control text-end"
                                                        style="width:180px;" value="Rp 0" readonly>
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                            <div class="row px-4 py-2">
                                <div class="col-lg">
                                    <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                                style="color: #ffc2cd;" class="fas fa-circle"></i> Data Telah Dilakukan
                                            Edit</code>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const fmtIDR = new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 0
            });
            const fmtDec = new Intl.NumberFormat('id-ID', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 3
            });

            const $tbody = document.querySelector('tbody');
            const $tfootFinger = document.getElementById('tfoot-finger');
            const $tfootNominal = document.getElementById('tfoot-nominal-sum');
            const $tfootGrand = document.getElementById('tfoot-grand');

            // GANTI fungsi parseDec lama jadi ini
            const parseDec = (val) => {
                if (val == null) return 0;
                let s = String(val).trim();
                if (!s) return 0;

                // sisakan hanya digit, minus, koma, titik
                s = s.replace(/[^\d.,-]/g, '');

                const hasDot = s.includes('.');
                const hasComma = s.includes(',');

                if (hasDot && hasComma) {
                    // pakai pemisah yang paling terakhir sebagai desimal
                    const lastDot = s.lastIndexOf('.');
                    const lastComma = s.lastIndexOf(',');
                    const dec = lastDot > lastComma ? '.' : ',';

                    // tandai hanya kemunculan TERAKHIR sebagai desimal
                    s = s.replace(new RegExp('\\' + dec + '(?=[^\\' + dec + ']*$)'), 'D');
                    // hapus semua separator lain
                    s = s.replace(/[.,]/g, '');
                    // kembalikan desimal jadi titik
                    s = s.replace('D', '.');
                } else if (hasComma) {
                    // hanya koma → koma = desimal
                    s = s.replace(/\./g, ''); // buang titik ribuan
                    s = s.replace(',', '.');
                } else {
                    // hanya titik atau tanpa separator
                    // kalau ada banyak titik, sisakan yang terakhir sebagai desimal
                    s = s.replace(/,(?=.*)/g, ''); // buang koma nyasar
                    if (s.indexOf('.') !== s.lastIndexOf('.')) {
                        s = s.replace(/\.(?=.*\.)/g, '');
                    }
                }

                const n = Number(s);
                return isNaN(n) ? 0 : n;
            };

            const formatIDR = (n) => fmtIDR.format(Math.round(n || 0));

            function recalcRow(tr) {
                const inp = tr.querySelector('.input-finger');
                if (!inp) return {
                    finger: 0,
                    nominal: 0,
                    total: 0
                };

                const finger = parseDec(inp.value);
                const nominal = Number(inp.dataset.nominal) || 0; // angka mentah
                const total = finger * nominal;

                const cellTotal = tr.querySelector('.cell-total');
                if (cellTotal) cellTotal.textContent = formatIDR(total);

                const hiddenTotal = tr.querySelector('input[name="total_nominal[]"]');
                if (hiddenTotal) hiddenTotal.value = Math.round(total); // IDR tanpa desimal

                return {
                    finger,
                    nominal,
                    total
                };
            }

            function recalcFooter() {
                let sumFinger = 0;
                let sumNominal = 0;
                let sumGrand = 0;

                document.querySelectorAll('tbody tr').forEach(tr => {
                    const inp = tr.querySelector('.input-finger');
                    const nominalHidden = tr.querySelector('input[name="nominal[]"]');
                    const {
                        finger,
                        total
                    } = inp ? recalcRow(tr) : {
                        finger: 0,
                        total: 0
                    };

                    sumFinger += finger;
                    if (nominalHidden) sumNominal += Number(nominalHidden.value) || 0;
                    sumGrand += total;
                });

                if ($tfootFinger) $tfootFinger.value = fmtDec.format(sumFinger); // contoh: 12,5
                // if ($tfootNominal) $tfootNominal.value = formatIDR(sumNominal); // jumlah kolom nominal
                if ($tfootGrand) $tfootGrand.value = formatIDR(sumGrand); // total keseluruhan
            }

            // Hitung ulang saat load
            recalcFooter();

            // Delegasi event input/blur untuk semua .input-finger
            $tbody.addEventListener('input', (e) => {
                if (!e.target.classList.contains('input-finger')) return;
                const tr = e.target.closest('tr');
                recalcRow(tr);
                recalcFooter();
            });
            $tbody.addEventListener('blur', (e) => {
                if (!e.target.classList.contains('input-finger')) return;
                recalcFooter();
            }, true);
        });
    </script>


    <script>
        const rupiahFmt = new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0,
            maximumFractionDigits: 2
        });

        // helper aman untuk parsing angka dari atribut/data (hapus ribuan & koma->titik)
        function toNum(v) {
            if (v === null || v === undefined) return NaN;
            return parseFloat(String(v).replace(/\./g, '').replace(',', '.'));
        }

        $('.input-finger').on('input', function() {
            const $el = $(this);
            const index = $el.data('index');

            // nominal dari data-* (idealnya sudah angka mentah)
            const nominal = Number($el.data('nominal')) || toNum($el.data('nominal')) || 0;

            // finger dari nilai input (lang="en" => titik diterima)
            const finger = parseFloat($el.val()) || 0;

            // total
            const total = nominal * finger;

            // bandingkan dengan original (warna merah jika berubah)
            const original = toNum($el.data('original'));
            const changed = !isNaN(original) && Math.abs(finger - original) > 1e-9;

            $el.toggleClass('text-danger is-invalid', changed);

            // tampilkan total + hidden input untuk submit
            $(`#total-nominal-${index}`).html(`
    ${rupiahFmt.format(total)}
    <input type="hidden" name="total_nominal[]" value="${total}">
  `);
        });

        // opsional: rapikan nilai saat blur (hapus trailing zero 1.20 -> 1.2, biar yang disimpan “1.2”)
        $('.input-finger').on('blur', function() {
            const n = parseFloat($(this).val());
            if (!isNaN(n)) $(this).val(String(n));
        });
    </script>

    <script>
        $("#my-form").submit(function(e) {
            e.preventDefault();
            // var formData = $(this).serialize();
            var formData = new FormData(this);

            var isValid = true;
            var errorMessage = '';

            var isFormValid = true;
            $('.required').each(function() {
                if ($(this).val() === '' || !$(this)[0].checkValidity()) {
                    isFormValid = false;
                    errorMessage +=
                        '<br>Lengkapi semua kolom yang wajib diisi dengan nilai yang valid.';
                    return false;
                }
            });

            if (!isValid || !isFormValid) {
                Swal.fire({
                    title: 'Gagal',
                    html: errorMessage,
                    icon: 'error',
                    showConfirmButton: true
                });
                return;
            }

            // Disable tombol submit
            const $btnSubmit = $(this).find('button[type="submit"]');
            $btnSubmit.prop('disabled', true);
            $btnSubmit.html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

            var formData = new FormData(this);
            formData.append('_method', 'PUT');
            $.ajax({
                url: "{{ URL::to($url_menu . '/' . $idencrypt) }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Sukses',
                        text: 'Data Perhitungan Absen berhasil disimpan',
                        showConfirmButton: true,
                    }).then((result) => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    var errorResponse = jqXHR.responseJSON;
                    var errorMessage = 'Terjadi kesalahan saat menyimpan data.';
                    if (errorResponse && errorResponse.message) {
                        errorMessage += '<br>' + errorResponse.message;
                    }
                    Swal.fire({
                        title: 'Gagal',
                        html: errorMessage,
                        icon: 'error',
                        showConfirmButton: true
                    });
                    console.error(textStatus, errorThrown);

                    // Enable lagi tombol submit kalau gagal
                    $btnSubmit.prop('disabled', false);
                    $btnSubmit.html(
                        '<i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>'
                    );
                }
            });
        });
    </script>
    <style>
        #tabel-mahasiswa td,
        #tabel-mahasiswa th {
            border: 1px solid #dee2e6 !important;
        }

        .input-finger.text-danger {
            background-color: #ffecec;
            border-color: red;
        }
    </style>
@endsection