@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow-sm">
                    <div class="card-header border-bottom">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0 font-weight-bold text-dark">Form Edit Master Perhitungan Overtime</h5>
                            <a href="{{ url($url_menu) }}" class="btn btn-sm btn-outline-secondary mb-0">
                                <i class="fas fa-arrow-left me-1"></i> Kembali
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="p-3 mb-3 bg-danger text-white rounded position-relative">
                                <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-2" aria-label="Close" onclick="this.parentElement.style.display='none';"></button>
                                <ul class="mb-0 pe-3">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form role="form" method="POST" action="{{ url($url_menu . '/update/' . encrypt($header->id)) }}" id="msperh-form">
                            @csrf
                            <input type="hidden" name="isactive" value="{{ old('isactive', $header->isactive) }}">

                            {{-- Informasi Petunjuk Pengisian --}}
                            <div class="card mb-4 border shadow-none" style="background-color: #f8fafd;">
                                <div class="card-body py-3">
                                    <h6 class="text-primary mb-2">
                                        <i class="fas fa-info-circle me-1"></i> Informasi Petunjuk Pengisian
                                    </h6>
                                    <ul class="mb-0 text-sm text-dark ps-3">
                                        <li>Nominal perhitungan lembur dihitung menggunakan rumus: 
                                            <span class="text-danger">Nominal = ( Konversi / Penyebut ) &times; Upah Dasar</span>.
                                        </li>
                                        <li>Pengisian konversi dilakukan berdasarkan rentang 1 jam kerja </li>
                                    </ul>
                                </div>
                            </div>

                            <div id="duplicate-warning-container"></div>

                            {{-- ====== CARD HEADER ====== --}}
                            <div class="card mb-4 border shadow-none">
                                <div class="card-header bg-light py-2">
                                    <h6 class="mb-0 font-weight-bold text-primary"><i class="fas fa-file-alt me-1"></i> Header Perhitungan {{ $header->id }}</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        {{-- Jabatan --}}
                                        <div class="col-md-3 mb-3">
                                            <label for="jabatan" class="form-label font-weight-bold">Jabatan <span class="text-danger">*</span></label>
                                            <select name="jabatan" id="jabatan" class="form-select @error('jabatan') is-invalid @enderror" required>
                                                <option value="">-- Pilih Jabatan --</option>
                                                @foreach ($jabatan_options as $j)
                                                    <option value="{{ $j->nama }}" {{ old('jabatan', $header->jabatan) == $j->nama ? 'selected' : '' }}>
                                                        {{ $j->nama }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('jabatan')
                                                <span class="text-danger text-xs d-block mt-1">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        {{-- Nama / Jenis Lembur --}}
                                        <div class="col-md-3 mb-3">
                                            <label for="nama" class="form-label font-weight-bold">Nama / Jenis Lembur <span class="text-danger">*</span></label>
                                            <select name="nama" id="nama" class="form-select @error('nama') is-invalid @enderror" required>
                                                <option value="">-- Pilih Jenis Lembur --</option>
                                                @foreach ($nama_options as $opt)
                                                    <option value="{{ $opt }}" {{ old('nama', $header->jenis_lembur) == $opt ? 'selected' : '' }}>
                                                        {{ $opt }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('nama')
                                                <span class="text-danger text-xs d-block mt-1">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        {{-- Upah Dasar --}}
                                        <div class="col-md-3 mb-3">
                                            <label for="upah_dasar" class="form-label font-weight-bold">Upah Dasar <span class="text-danger">*</span></label>
                                            <select name="upah_dasar" id="upah_dasar" class="form-select @error('upah_dasar') is-invalid @enderror" required>
                                                <option value="">-- Pilih Upah Dasar --</option>
                                                @foreach ($upah_dasar_options as $ud)
                                                    <option value="{{ $ud->value }}" {{ old('upah_dasar', $header->upah_dasar) == $ud->value ? 'selected' : '' }}>
                                                        {{ $ud->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('upah_dasar')
                                                <span class="text-danger text-xs d-block mt-1">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        {{-- Penyebut --}}
                                        <div class="col-md-3 mb-3">
                                            <label for="penyebut" class="form-label font-weight-bold">Penyebut <span class="text-danger">*</span></label>
                                            <input type="number" step="0.01" name="penyebut" id="penyebut" class="form-control @error('penyebut') is-invalid @enderror" value="{{ old('penyebut', $header->penyebut) }}" required>
                                            @error('penyebut')
                                                <span class="text-danger text-xs d-block mt-1">{{ $message }}</span>
                                            @enderror
                                        </div>


                                    </div>

                                    <div class="row">
                                        {{-- Keterangan --}}
                                        <div class="col-md-12">
                                            <label for="keterangan" class="form-label font-weight-bold">Keterangan</label>
                                            <textarea name="keterangan" id="keterangan" class="form-control" rows="2" placeholder="Catatan tambahan (opsional)">{{ old('keterangan', $header->keterangan) }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ====== CARD DETAIL TABEL ====== --}}
                            <div class="card mb-4 border shadow-none">
                                <div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0 font-weight-bold text-primary"><i class="fas fa-list-ol me-1"></i> Detail Tarif Konversi per Jam</h6>
                                    <button type="button" id="btn-tambah-baris" class="btn btn-sm btn-success mb-0" onclick="addDetailRow()">
                                        <i class="fas fa-plus me-1"></i> Tambah Baris
                                    </button>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered align-items-center mb-0 excel-table" id="detail-table">
                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th width="60px" class="text-center">No</th>
                                                    <th width="200px">Total Jam Kerja</th>
                                                    <th>Konversi <span class="text-danger">*</span></th>
                                                    <th>Selisih Konversi (Otomatis)</th>
                                                    <th>Estimasi Nominal</th>
                                                    <th width="100px" class="text-center">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody id="detail-body">
                                                {{-- Rows will be dynamically rendered --}}
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="mt-2 text-xs text-muted">
                                        <span class="text-danger">*</span> <strong>Kolom Konversi</strong> diisi secara manual. Jika diisi lebih dari 1 baris, perhitungan nominal baris berikutnya dihitung dari nilai <strong>Selisih Konversi</strong>.<br>
                                       <span class="text-danger">*</span> <strong>Selisih Konversi</strong> dihitung otomatis oleh sistem. Wajib mengisi minimal 2 baris data.

                            {{-- Submit Buttons --}}
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">Batal</a>
                                <button type="submit" class="btn btn-primary mb-0" id="btn-save">
                                    <i class="fas fa-save me-1"></i> Simpan Data
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('assets/js/excelTable.js') }}"></script>
    <script>
        const initialDetails = @json($details->pluck('konversi'));
        const oldKonversi = @json(old('konversi', []));

        const umkValue = {{ DB::table('sys_enum')->where('idenum', 'umk')->where('isactive', '1')->value('value') ?? '5191000' }};

        function parseIndoFloat(val) {
            if (val === null || val === undefined) return 0;
            const str = String(val).trim();
            if (str === '') return 0;
            const normalized = str.replace(',', '.');
            return parseFloat(normalized) || 0;
        }

        function formatIndoFloat(num, decimals = 2) {
            if (num === null || num === undefined || isNaN(num)) return '0,00';
            return num.toFixed(decimals).replace('.', ',');
        }

        function formatKonversiValue(val) {
            if (val === null || val === undefined || val === '') return '';
            let num = parseIndoFloat(val);
            return formatIndoFloat(num, 2);
        }

        function calculateEstimasi() {
            const penyebutInput = document.getElementById('penyebut');
            const upahDasarSelect = document.getElementById('upah_dasar');
            
            const penyebut = parseFloat(penyebutInput.value) || 173;
            const hasUpahDasar = upahDasarSelect.value !== '';
            const upahDasarVal = hasUpahDasar ? umkValue : 0;

            const rows = document.querySelectorAll('#detail-body tr');
            rows.forEach(row => {
                const konversiInput = row.querySelector('.input-konversi');
                const estimasiInput = row.querySelector('.input-estimasi');
                if (konversiInput && estimasiInput) {
                    const konversi = parseIndoFloat(konversiInput.value);
                    if (hasUpahDasar && penyebut > 0) {
                        const estimasi = (konversi / penyebut) * upahDasarVal;
                        estimasiInput.value = 'Rp ' + Math.round(estimasi).toLocaleString('id-ID');
                    } else {
                        estimasiInput.value = 'Rp 0';
                    }
                }
            });
        }

        function calculateSelisih() {
            const rows = document.querySelectorAll('#detail-body tr');
            let prevKonversi = 0;

            rows.forEach((row, idx) => {
                const konversiInput = row.querySelector('.input-konversi');
                const selisihInput = row.querySelector('.input-selisih');

                const currentVal = parseIndoFloat(konversiInput.value);

                if (idx === 0) {
                    selisihInput.value = '0,00';
                } else {
                    const selisih = currentVal - prevKonversi;
                    selisihInput.value = formatIndoFloat(selisih, 2);
                }

                prevKonversi = currentVal;
            });
        }

        function reindexRows() {
            const rows = document.querySelectorAll('#detail-body tr');
            rows.forEach((row, idx) => {
                const noCell = row.querySelector('.row-no');
                const jamCell = row.querySelector('.row-jam-kerja');
                
                if (noCell) noCell.textContent = idx + 1;
                if (jamCell) jamCell.value = idx + 1;
            });

            calculateSelisih();
            calculateEstimasi();
        }

        function addDetailRow(konversiVal = '') {
            const tbody = document.getElementById('detail-body');
            const rowCount = tbody.querySelectorAll('tr').length;
            const nextJam = (rowCount + 1);

            let formattedVal = '';
            if (konversiVal !== '') {
                formattedVal = formatKonversiValue(konversiVal);
            }

            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td class="text-center align-middle font-weight-bold row-no">${rowCount + 1}</td>
                <td class="align-middle">
                    <input type="text" class="form-control form-control-sm bg-light text-center font-weight-bold row-jam-kerja" value="${nextJam}" readonly>
                </td>
                <td class="align-middle">
                    <input type="text" name="konversi[]" class="form-control form-control-sm input-konversi" value="${formattedVal}" placeholder="Contoh: 1,50" required>
                </td>
                <td class="align-middle">
                    <input type="text" class="form-control form-control-sm bg-light font-weight-bold input-selisih" value="0,00" readonly disabled>
                </td>
                <td class="align-middle">
                    <input type="text" class="form-control form-control-sm bg-light font-weight-bold input-estimasi text-end" value="Rp 0" readonly disabled>
                </td>
                <td class="text-center align-middle">
                    <button type="button" class="btn btn-danger btn-xs mb-0 btn-remove-row" onclick="removeRow(this)" title="Hapus Baris">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            `;

            tbody.appendChild(tr);

            const inputKonversi = tr.querySelector('.input-konversi');
            inputKonversi.addEventListener('input', function() {
                calculateSelisih();
                calculateEstimasi();
            });
            inputKonversi.addEventListener('blur', function() {
                this.value = formatKonversiValue(this.value);
            });
            reindexRows();

            if (typeof initExcelTableNavigation === 'function') {
                initExcelTableNavigation();
            }
        }

        window.addDetailRow = addDetailRow;

        function removeRow(btn) {
            const tbody = document.getElementById('detail-body');
            if (tbody.querySelectorAll('tr').length <= 2) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Detail perhitungan wajib berisi minimal 2 baris data.',
                        confirmButtonColor: '#028284'
                    });
                } else {
                    alert('Detail perhitungan wajib berisi minimal 2 baris data.');
                }
                return;
            }

            const tr = btn.closest('tr');
            tr.remove();
            reindexRows();
        }

        function checkDuplicateCombination() {
            const jabatan = document.getElementById('jabatan').value;
            const nama = document.getElementById('nama').value;
            const saveBtn = document.getElementById('btn-save');
            const warningContainer = document.getElementById('duplicate-warning-container');

            if (!jabatan || !nama) {
                warningContainer.innerHTML = '';
                saveBtn.disabled = false;
                return;
            }

            const excludeId = "{{ isset($header) ? encrypt($header->id) : '' }}";

            fetch(`{{ url('/msperh/check-duplicate') }}?jabatan=${encodeURIComponent(jabatan)}&nama=${encodeURIComponent(nama)}&exclude_id=${encodeURIComponent(excludeId)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.exists) {
                        warningContainer.innerHTML = `
                            <div id="duplicate-warning" class="alert alert-danger text-white mb-4">
                                <i class="fas fa-exclamation-triangle me-1"></i> Aturan perhitungan lembur untuk Jabatan dan Jenis Lembur ini sudah terdaftar!
                            </div>
                        `;
                        saveBtn.disabled = true;
                    } else {
                        warningContainer.innerHTML = '';
                        saveBtn.disabled = false;
                    }
                })
                .catch(error => {
                    console.error('Error checking duplicate:', error);
                });
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('penyebut').addEventListener('input', calculateEstimasi);
            document.getElementById('upah_dasar').addEventListener('change', calculateEstimasi);
            document.getElementById('jabatan').addEventListener('change', checkDuplicateCombination);
            document.getElementById('nama').addEventListener('change', checkDuplicateCombination);

            const dataToRender = (oldKonversi && oldKonversi.length > 0) ? oldKonversi : initialDetails;

            if (dataToRender && dataToRender.length > 0) {
                dataToRender.forEach(val => addDetailRow(val));
            } else {
                addDetailRow('1,50');
                addDetailRow('3,50');
            }

            if (typeof initExcelTableNavigation === 'function') {
                initExcelTableNavigation();
            }

            document.getElementById('msperh-form').addEventListener('submit', function(e) {
                const rows = document.querySelectorAll('#detail-body tr');
                if (rows.length < 2) {
                    e.preventDefault();
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Validasi Gagal',
                            text: 'Detail perhitungan wajib berisi minimal 2 baris data.',
                            confirmButtonColor: '#f5365c'
                        });
                    } else {
                        alert('Detail perhitungan wajib berisi minimal 2 baris data.');
                    }
                    return false;
                }
            });
        });
    </script>
@endsection