@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">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Edit DKL - {{ $dkl->no_dkl }}</h5>
                        <a href="{{ $back_url ?? url($url_menu) }}" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-arrow-left me-1"></i> Kembali
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    @include('components.alert')

                    <form role="form" method="POST" action="{{ url('/edit-dkl/update') }}" id="dkl-form">
                        @csrf
                        <input type="hidden" name="dkl_id" value="{{ $dkl->id }}">
                        <input type="hidden" name="return_url" value="{{ $back_url ?? url($url_menu) }}">

                        {{-- ====== HEADER DKL (Read-only) ====== --}}
                        <div class="card mb-4 border">
                            <div class="card-header bg-light">
                                <h6 class="mb-0">Header DKL</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">No DKL</label>
                                        <input type="text" class="form-control" value="{{ $dkl->no_dkl }}" readonly
                                            style="background:#f0f0f0">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">No SPL (Referensi)</label>
                                        <input type="text" class="form-control" value="{{ $dkl->no_spl }}" readonly
                                            style="background:#f0f0f0">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Tanggal DKL</label>
                                        <input type="text" class="form-control"
                                            value="{{ \Carbon\Carbon::parse($dkl->tanggal_dkl)->format('j-M-Y') }}"
                                            readonly style="background:#f0f0f0">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Status</label>
                                        @php
                                        $statusBadge = [
                                        'draft' => 'bg-secondary',
                                        'pending_atasan' => 'bg-warning text-white',
                                        'approved_atasan' => 'bg-success',
                                        'rejected_atasan' => 'bg-danger',
                                        ];
                                        @endphp
                                        <div>
                                            <span class="badge {{ $statusBadge[$dkl->status] ?? 'bg-secondary' }}">
                                                {{ strtoupper(str_replace('_', ' ', $dkl->status)) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">NIK Pemohon</label>
                                        <input type="text" class="form-control" value="{{ $dkl->nik }}" readonly
                                            style="background:#f0f0f0">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Nama Pemohon</label>
                                        <input type="text" class="form-control"
                                            value="{{ $pemohon->nama ?? '-' }}" readonly style="background:#f0f0f0">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Departemen</label>
                                        <input type="text" class="form-control"
                                            value="{{ $departemen->nama ?? '-' }}" readonly
                                            style="background:#f0f0f0">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Ditujukan Kepada</label>
                                        <input type="text" class="form-control"
                                            value="{{ $atasan_name ?? '-' }}" readonly style="background:#f0f0f0">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <label class="form-label">Keterangan</label>
                                        <input type="text" class="form-control"
                                            value="{{ $dkl->keterangan ?: '-' }}" readonly
                                            style="background:#f0f0f0">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ====== DETAIL REALISASI (Editable) ====== --}}
                        <div class="card mb-4 border">
                            <div class="card-header bg-light">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">Detail Realisasi Lembur ({{ $dkl_details->count() }} record)
                                    </h6>
                                    <span class="badge bg-info text-white">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Edit jam realisasi dan status pekerjaan
                                    </span>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="detail-table" style="min-width:1700px;">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th width="40px">No</th>
                                                <th width="100px">NIK Karyawan</th>
                                                <th width="140px">Nama</th>
                                                <th width="250px">Agenda <span class="text-danger">*</span></th>
                                                <th width="170px">Mulai <span class="text-danger">*</span></th>
                                                <th width="170px">Selesai <span class="text-danger">*</span></th>
                                                <th width="80px">Istirahat (Menit)</th>
                                                <th width="70px">Jam</th>
                                                <th width="180px">Status Pekerjaan</th>
                                                <th width="200px">Jenis <span class="text-danger">*</span></th>
                                                <th width="200px">Tipe</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($dkl_details as $idx => $detail)
                                            <tr>
                                                <td class="text-center">{{ $idx + 1 }}</td>
                                                <input type="hidden" name="detail_id[]"
                                                    value="{{ $detail->id }}">
                                                <td>{{ $detail->nik }}</td>
                                                <td>{{ $karyawan_map[$detail->nik] ?? '-' }}</td>
                                                <td>
                                                    <textarea name="detail_agenda[]" class="form-control form-control-sm" rows="2"
                                                        maxlength="500" required>{{ $detail->agenda }}</textarea>
                                                </td>
                                                <td>
                                                    <input type="datetime-local" name="detail_jam_mulai[]"
                                                        class="form-control form-control-sm jam-input"
                                                        min="{{ date('Y-m-d\TH:i', strtotime($periode_list->first()->tanggal_awal)) }}"
                                                        max="{{ date('Y-m-d\TH:i', strtotime($periode_list->first()->tanggal_akhir)) }}"
                                                        value="{{ $detail->jam_mulai ? \Carbon\Carbon::parse($detail->jam_mulai)->format('Y-m-d\TH:i') : '' }}" required
                                                        data-row="{{ $idx }}"
                                                        onchange="updateMinDateTime(this)">
                                                </td>
                                                <td>
                                                    <input type="datetime-local" name="detail_jam_selesai[]"
                                                        class="form-control form-control-sm jam-input"
                                                        min="{{ date('Y-m-d\TH:i', strtotime($periode_list->first()->tanggal_awal)) }}"
                                                        max="{{ date('Y-m-d\TH:i', strtotime($periode_list->first()->tanggal_akhir)) }}"
                                                        value="{{ $detail->jam_selesai ? \Carbon\Carbon::parse($detail->jam_selesai)->format('Y-m-d\TH:i') : '' }}" required
                                                        data-row="{{ $idx }}">
                                                </td>
                                                <td>
                                                    <input type="number" name="detail_break_jam[]"
                                                        class="form-control form-control-sm jam-input"
                                                        value="{{ intval(($detail->break_jam ?? 0) * 60) }}" step="1"
                                                        min="0" required data-row="{{ $idx }}"
                                                        oninput="updateBreakConversion(this, {{ $idx }})">
                                                    <small class="text-muted text-xs d-block mt-1 text-center" id="break_conv_{{ $idx }}">
                                                        = {{ floatval($detail->break_jam ?? 0) }} jam
                                                    </small>
                                                </td>
                                                <td>
                                                    <input type="text"
                                                        class="form-control form-control-sm fw-bold text-center jam-lembur-display"
                                                        value="{{ $detail->jam_lembur }}" readonly
                                                        style="background:#f0f0f0"
                                                        id="jam_lembur_{{ $idx }}">
                                                </td>
                                                <td class="text-center">
                                                    @php
                                                    $statusPekerjaan = $detail->pekerjaan_selesai ?? 'belum';
                                                    @endphp
                                                    <div class="status-pekerjaan-switch">
                                                        <button type="button"
                                                            class="btn btn-sm status-option {{ $statusPekerjaan === 'belum' ? 'active' : '' }}"
                                                            data-value="belum">
                                                            Belum
                                                        </button>
                                                        <button type="button"
                                                            class="btn btn-sm status-option {{ $statusPekerjaan === 'sudah' ? 'active' : '' }}"
                                                            data-value="sudah">
                                                            Selesai
                                                        </button>
                                                        <button type="button"
                                                            class="btn btn-sm status-option {{ $statusPekerjaan === 'tidak' ? 'active' : '' }}"
                                                            data-value="tidak">
                                                            Tidak
                                                        </button>
                                                        <input type="hidden" name="detail_pekerjaan_selesai[]"
                                                            class="detail-status-select"
                                                            value="{{ in_array($statusPekerjaan, ['belum', 'sudah', 'tidak'], true) ? $statusPekerjaan : 'belum' }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    <select name="detail_id_jenis_lembur[]"
                                                        class="form-select form-select-sm" required>
                                                        <option value="">Pilih</option>
                                                        @foreach ($jenis_lembur as $jenis)
                                                        <option value="{{ $jenis->id }}"
                                                            @if ($detail->id_jenis_lembur == $jenis->id) selected @endif>
                                                            {{ $jenis->nama }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="detail_id_tipe_lembur[]"
                                                        class="form-select form-select-sm">
                                                        <option value="">Pilih</option>
                                                        @foreach ($tipe_lembur as $tipe)
                                                        <option value="{{ $tipe->id }}"
                                                            @if ($detail->id_tipe_lembur == $tipe->id) selected @endif>
                                                            {{ $tipe->nama }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="11" class="text-center text-muted">Tidak ada
                                                    detail lembur.</td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                        @if ($dkl_details->count() > 0)
                                        <tfoot>
                                            <tr class="fw-bold" style="background-color: #f0f0f0;">
                                                <td colspan="7" class="text-end">Total Jam Lembur:</td>
                                                <td class="text-center" id="total-jam-lembur">
                                                    {{ $dkl_details->sum('jam_lembur') }}
                                                </td>
                                                <td></td>
                                                <td colspan="2"></td>
                                            </tr>
                                        </tfoot>
                                        @endif
                                    </table>
                                </div>
                                <small class="text-muted d-block mt-2"><span class="text-danger">*</span> Kolom wajib diisi. Jam dihitung otomatis dari Mulai Pengerjaan - Selesai Pengerjaan - Istirahat.</small>
                            </div>
                        </div>

                        {{-- ====== BUTTONS & KETERANGAN ====== --}}
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mt-3">
                            <div class="d-flex flex-column gap-2 text-xs">
                                <!-- Item 1 -->
                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge rounded-pill bg-warning-subtle text-warning border border-warning-subtle px-2 py-1" style="font-size: 10px;">Belum</span>
                                    <span class="text-secondary" style="font-size: 12px;">= Pekerjaan masih berjalan & akan dilanjutkan nanti. </span>
                                </div>

                                <!-- Item 2 -->
                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge rounded-pill bg-success-subtle text-success border border-success-subtle px-2 py-1" style="font-size: 10px;">Selesai</span>
                                    <span class="text-secondary" style="font-size: 12px;">= Pekerjaan telah tuntas dikerjakan seluruhnya.</span>
                                </div>

                                <!-- Item 3 -->
                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge rounded-pill bg-danger-subtle text-danger border border-danger-subtle px-2 py-1" style="font-size: 10px;">Tidak</span>
                                    <span class="text-secondary" style="font-size: 12px;">= Pekerjaan terhenti/gagal karena kendala alat atau teknis.</span>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ $back_url ?? url($url_menu) }}" class="btn btn-outline-secondary mb-0">
                                    <i class="fas fa-times me-1"></i> Batal
                                </a>
                                <button type="button" class="btn btn-success mb-0" onclick="confirmSave()">
                                    <i class="fas fa-save me-2"></i> Simpan Perubahan
                                </button>
                                <!-- @if ($dkl->status == 'draft')
                                        <button type="button" class="btn btn-info mb-0" onclick="confirmPosting()">
                                            <i class="fas fa-paper-plane me-2"></i> Posting DKL
                                        </button>
                                    @endif -->
                            </div>
                        </div>
                    </form>

                    @if ($dkl->status == 'draft')
                    <form id="form-posting-dkl-edit" method="POST" action="{{ url('/edit-dkl/posting') }}" style="display:none;">
                        @csrf
                        <input type="hidden" name="dkl_id" value="{{ $dkl->id }}">
                        <input type="hidden" name="return_url" value="{{ url($url_menu) }}">
                    </form>
                    @endif

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

<style>
    .status-pekerjaan-switch {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 1px;
        border-radius: 8px;
        background: transparent;
    }

    .status-pekerjaan-switch .status-option {
        border: 1px solid transparent;
        border-radius: 7px;
        min-width: 68px;
        font-size: 0.8rem;
        font-weight: 600;
        color: #5b6778;
        background: rgba(255, 255, 255, 0.35);
        padding: 0.33rem 0.65rem;
        line-height: 1.2;
        box-shadow: none !important;
        transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .status-pekerjaan-switch .status-option:hover {
        background: rgba(255, 255, 255, 0.9);
        color: #1f2937;
        border-color: #94a3b8;
    }

    .status-pekerjaan-switch .status-option.active[data-value="belum"] {
        background: #fde68a;
        color: #78350f;
        border-color: #f59e0b;
    }

    .status-pekerjaan-switch .status-option.active[data-value="sudah"] {
        background: #a7f3d0;
        color: #065f46;
        border-color: #10b981;
    }

    .status-pekerjaan-switch .status-option.active[data-value="tidak"] {
        background: #fca5a5;
        color: #7f1d1d;
        border-color: #ef4444;
    }

    .status-pekerjaan-switch .status-option.active::before {
        content: "* ";
        font-weight: 700;
    }
</style>

<script>
    document.querySelectorAll('.status-pekerjaan-switch').forEach(function(switchEl) {
        var hiddenInput = switchEl.querySelector('.detail-status-select');

        switchEl.querySelectorAll('.status-option').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var value = btn.getAttribute('data-value');
                hiddenInput.value = value;

                switchEl.querySelectorAll('.status-option').forEach(function(optBtn) {
                    optBtn.classList.remove('active');
                });
                btn.classList.add('active');
            });
        });
    });

    function updateBreakConversion(el, row) {
        var minutes = parseFloat(el.value) || 0;
        var hours = minutes / 60;
        var formattedHours = parseFloat(hours.toFixed(2));
        var label = document.getElementById('break_conv_' + row);
        if (label) {
            label.textContent = '= ' + formattedHours + ' jam';
        }
    }

    // Auto-calculate jam_lembur when jam_mulai, jam_selesai, or break_jam changes
    document.querySelectorAll('.jam-input').forEach(function(el) {
        el.addEventListener('change', function() {
            var row = this.getAttribute('data-row');
            calculateJamLembur(row);
        });
    });

    function calculateJamLembur(row) {
        var trRows = document.querySelectorAll('#detail-table tbody tr');
        var tr = trRows[row];
        if (!tr) return;

        var jamMulai = tr.querySelector('input[name="detail_jam_mulai[]"]').value;
        var jamSelesai = tr.querySelector('input[name="detail_jam_selesai[]"]').value;
        var breakJamMinutes = parseFloat(tr.querySelector('input[name="detail_break_jam[]"]').value) || 0;

        if (jamMulai && jamSelesai) {
            var start = new Date(jamMulai);
            var end = new Date(jamSelesai);
            if (!isNaN(start.getTime()) && !isNaN(end.getTime())) {
                if (end > start) {
                    var diffMs = end - start;
                    var diffMinutes = diffMs / (1000 * 60);
                    var jamLembur = Math.max(0, (diffMinutes - breakJamMinutes) / 60);
                    document.getElementById('jam_lembur_' + row).value = jamLembur.toFixed(2);
                } else {
                    document.getElementById('jam_lembur_' + row).value = '0.00';
                }
            } else {
                document.getElementById('jam_lembur_' + row).value = '0.00';
            }
        }

        // Recalculate total
        calculateTotal();
    }

    function updateMinDateTime(el) {
        var tr = el.closest('tr');
        var dtFrom = tr.querySelector('input[name="detail_jam_mulai[]"]').value;
        var dtToInput = tr.querySelector('input[name="detail_jam_selesai[]"]');
        if (dtToInput) {
            dtToInput.min = dtFrom;
            if (dtToInput.value && dtToInput.value < dtFrom) {
                dtToInput.value = '';
                var row = el.getAttribute('data-row');
                calculateJamLembur(row);
            }
        }
    }

    function calculateTotal() {
        var total = 0;
        document.querySelectorAll('.jam-lembur-display').forEach(function(el) {
            total += parseFloat(el.value) || 0;
        });
        var totalEl = document.getElementById('total-jam-lembur');
        if (totalEl) {
            totalEl.textContent = total.toFixed(2);
        }
    }

    function confirmSave() {
        Swal.fire({
            title: 'Simpan Perubahan DKL',
            text: 'Apakah Anda yakin ingin menyimpan perubahan jam realisasi DKL {{ $dkl->no_dkl }}?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#2dce89',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Simpan!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('dkl-form').submit();
            }
        });
    }

    function confirmPosting() {
        Swal.fire({
            title: 'Posting DKL',
            text: 'Apakah Anda yakin ingin mem-posting DKL {{ $dkl->no_dkl }} untuk persetujuan Atasan?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#11cdef',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Posting!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-posting-dkl-edit').submit();
            }
        });
    }

    $(document).ready(function() {
        document.querySelectorAll('input[name="detail_jam_mulai[]"]').forEach(function(el) {
            updateMinDateTime(el);
        });
    });
</script>
@endsection