@extends('layouts.app')

@section('title', 'Edit SPK Mitra')
@section('page_title', 'Edit SPK Mitra')


@section('content')
<div class="erp-page">
    <div class="erp-page-actions">
        <a href="{{ route('proyek.spk.show', [$proyek->id_proyek, $spk->id_spk]) }}" class="btn btn-secondary">Detail SPK</a>
        <a href="{{ route('proyek.spk.index', $proyek->id_proyek) }}" class="btn btn-light">← Daftar SPK</a>
    </div>
@if ($errors->any())
        <div class="alert alert-danger">
            <strong>Terjadi kesalahan.</strong>
            <ul style="margin:.5rem 0 0 1rem;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('proyek.spk.update', [$proyek->id_proyek, $spk->id_spk]) }}" id="spkForm">
        @csrf
        @method('PUT')

        <section class="card erp-card" style="margin-bottom:1rem;">
            <div class="card-header erp-card-header">
                <div>
                    <h2>Data Utama SPK</h2>
                    <p>Perbarui data SPK dan mitra pelaksana.</p>
                </div>
            </div>

            <div class="form-grid">
                <div class="form-group">
                    <label for="nomor_spk">Nomor SPK <span class="text-danger">*</span></label>
                    <input type="text" id="nomor_spk" name="nomor_spk" class="form-control erp-input" required
                           value="{{ old('nomor_spk', $spk->nomor_spk ?? '') }}">
                </div>

                <div class="form-group">
                    <label for="tanggal_spk">Tanggal SPK</label>
                    <input type="date" id="tanggal_spk" name="tanggal_spk" class="form-control erp-input"
                           value="{{ old('tanggal_spk', $spk->tanggal_spk ?? '') }}">
                </div>

                <div class="form-group">
                    <label for="id_mitra">Mitra <span class="text-danger">*</span></label>
                    <select id="id_mitra" name="id_mitra" class="form-control erp-input" required>
                        <option value="">-- Pilih Mitra --</option>
                        @foreach ($mitraList ?? [] as $mitra)
                            <option value="{{ $mitra->id_mitra }}"
                                {{ (string) old('id_mitra', $spk->id_mitra ?? '') === (string) $mitra->id_mitra ? 'selected' : '' }}>
                                {{ $mitra->nama_mitra }}
                                @if(!empty($mitra->kode_mitra))
                                    - {{ $mitra->kode_mitra }}
                                @endif
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label for="id_pic_mitra">PIC Mitra</label>
                    <select id="id_pic_mitra" name="id_pic_mitra" class="form-control erp-input" data-selected="{{ old('id_pic_mitra', $spk->id_pic_mitra ?? '') }}">
                        <option value="">-- Pilih PIC Mitra --</option>
                        @foreach ($mitraPicList ?? [] as $pic)
                            <option value="{{ $pic->id_pic }}"
                                {{ (string) old('id_pic_mitra', $spk->id_pic_mitra ?? '') === (string) $pic->id_pic ? 'selected' : '' }}>
                                {{ $pic->nama_pic }}
                                @if(!empty($pic->jabatan))
                                    - {{ $pic->jabatan }}
                                @endif
                                @if((int)($pic->is_primary ?? 0) === 1)
                                    (Utama)
                                @endif
                            </option>
                        @endforeach
                    </select>
                    <small class="form-help">PIC otomatis berubah sesuai mitra.</small>
                </div>

                <div class="form-group">
                    <label for="tanggal_mulai">Tanggal Mulai</label>
                    <input type="date" id="tanggal_mulai" name="tanggal_mulai" class="form-control erp-input"
                           value="{{ old('tanggal_mulai', $spk->tanggal_mulai ?? '') }}">
                </div>

                <div class="form-group">
                    <label for="tanggal_selesai">Tanggal Selesai</label>
                    <input type="date" id="tanggal_selesai" name="tanggal_selesai" class="form-control erp-input"
                           value="{{ old('tanggal_selesai', $spk->tanggal_selesai ?? '') }}">
                </div>

                <div class="form-group">
                    <label for="status">Status</label>
                    @php
                        $statusValue = old('status', $spk->status ?? 'Draft');
                        $statusList = ['Draft', 'Diajukan', 'Disetujui', 'Berjalan', 'Selesai', 'Batal'];
                    @endphp
                    <select id="status" name="status" class="form-control erp-input">
                        @foreach ($statusList as $status)
                            <option value="{{ $status }}" {{ $statusValue === $status ? 'selected' : '' }}>
                                {{ $status }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group form-group-full">
                    <label for="ruang_lingkup">Ruang Lingkup Pekerjaan</label>
                    <textarea id="ruang_lingkup" name="ruang_lingkup" class="form-control erp-input" rows="3">{{ old('ruang_lingkup', $spk->ruang_lingkup ?? '') }}</textarea>
                </div>

                <div class="form-group form-group-full">
                    <label for="termin_pembayaran">Termin Pembayaran</label>
                    <textarea id="termin_pembayaran" name="termin_pembayaran" class="form-control erp-input" rows="3">{{ old('termin_pembayaran', $spk->termin_pembayaran ?? '') }}</textarea>
                </div>

                <div class="form-group form-group-full">
                    <label for="catatan">Catatan</label>
                    <textarea id="catatan" name="catatan" class="form-control erp-input" rows="3">{{ old('catatan', $spk->catatan ?? '') }}</textarea>
                </div>
            </div>
        </section>

        <section class="card erp-card">
            <div class="card-header erp-card-header" style="display:flex; justify-content:space-between; gap:1rem; align-items:center;">
                <div>
                    <h2>Item Pekerjaan</h2>
                    <p>Perbarui rincian pekerjaan mitra. Total dihitung otomatis.</p>
                </div>
                <button type="button" class="btn btn-secondary" id="addItemBtn">+ Tambah Item</button>
            </div>

            <div class="table-responsive erp-table-wrap">
                <table class="data-table erp-table" id="itemTable">
                    <thead>
                        <tr>
                            <th style="width:50px;">No</th>
                            <th>Nama Pekerjaan</th>
                            <th>Deskripsi</th>
                            <th style="width:110px;">Volume</th>
                            <th style="width:90px;">Satuan</th>
                            <th style="width:150px;">Harga Satuan</th>
                            <th style="width:150px;">Subtotal</th>
                            <th style="width:80px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="itemBody">
                        @php
                            $oldItems = old('items');
                            if ($oldItems === null) {
                                $oldItems = collect($items ?? [])->map(function ($item) {
                                    return [
                                        'nama_pekerjaan' => $item->nama_pekerjaan ?? '',
                                        'deskripsi' => $item->deskripsi ?? '',
                                        'volume' => $item->volume ?? 0,
                                        'satuan' => $item->satuan ?? '',
                                        'harga_satuan' => $item->harga_satuan ?? 0,
                                    ];
                                })->toArray();
                            }

                            if (empty($oldItems)) {
                                $oldItems = [
                                    ['nama_pekerjaan' => '', 'deskripsi' => '', 'volume' => 1, 'satuan' => '', 'harga_satuan' => 0],
                                ];
                            }
                        @endphp

                        @foreach ($oldItems as $i => $row)
                            <tr class="item-row">
                                <td class="row-number">{{ $i + 1 }}</td>
                                <td>
                                    <input type="text" name="items[{{ $i }}][nama_pekerjaan]" class="form-control nama-pekerjaan"
                                           value="{{ $row['nama_pekerjaan'] ?? '' }}" required>
                                </td>
                                <td>
                                    <input type="text" name="items[{{ $i }}][deskripsi]" class="form-control erp-input"
                                           value="{{ $row['deskripsi'] ?? '' }}">
                                </td>
                                <td>
                                    <input type="text" name="items[{{ $i }}][volume]" class="form-control item-volume text-right"
                                           value="{{ $row['volume'] ?? 1 }}">
                                </td>
                                <td>
                                    <input type="text" name="items[{{ $i }}][satuan]" class="form-control erp-input"
                                           value="{{ $row['satuan'] ?? '' }}">
                                </td>
                                <td>
                                    <input type="text" name="items[{{ $i }}][harga_satuan]" class="form-control item-harga text-right"
                                           value="{{ $row['harga_satuan'] ?? 0 }}">
                                </td>
                                <td>
                                    <input type="text" class="form-control item-subtotal text-right" value="0" readonly>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-danger remove-item">Hapus</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="6" style="text-align:right;">Total SPK</th>
                            <th>
                                <input type="text" id="totalSpkDisplay" class="form-control text-right" value="0" readonly>
                            </th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <div style="display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem;">
                <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                <a href="{{ route('proyek.spk.show', [$proyek->id_proyek, $spk->id_spk]) }}" class="btn btn-secondary">Batal</a>
            </div>
        </section>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const mitraSelect = document.getElementById('id_mitra');
    const picSelect = document.getElementById('id_pic_mitra');
    const itemBody = document.getElementById('itemBody');
    const addItemBtn = document.getElementById('addItemBtn');
    const totalDisplay = document.getElementById('totalSpkDisplay');

    function parseNumber(value) {
        value = String(value || '0').trim();
        value = value.replace(/\./g, '').replace(',', '.');
        const number = parseFloat(value);
        return isNaN(number) ? 0 : number;
    }

    function formatNumber(value) {
        return new Intl.NumberFormat('id-ID', { maximumFractionDigits: 2 }).format(value || 0);
    }

    function refreshRows() {
        const rows = itemBody.querySelectorAll('.item-row');
        rows.forEach((row, index) => {
            row.querySelector('.row-number').textContent = index + 1;
            row.querySelectorAll('input').forEach(input => {
                if (input.name) {
                    input.name = input.name.replace(/items\[\d+\]/, 'items[' + index + ']');
                }
            });
        });
    }

    function calculateTotals() {
        let total = 0;
        itemBody.querySelectorAll('.item-row').forEach(row => {
            const volume = parseNumber(row.querySelector('.item-volume')?.value);
            const harga = parseNumber(row.querySelector('.item-harga')?.value);
            const subtotal = volume * harga;
            const subtotalInput = row.querySelector('.item-subtotal');

            if (subtotalInput) {
                subtotalInput.value = formatNumber(subtotal);
            }

            total += subtotal;
        });

        totalDisplay.value = formatNumber(total);
    }

    function bindRow(row) {
        row.querySelectorAll('.item-volume, .item-harga').forEach(input => {
            input.addEventListener('input', calculateTotals);
        });

        row.querySelector('.remove-item')?.addEventListener('click', function () {
            const rows = itemBody.querySelectorAll('.item-row');
            if (rows.length <= 1) {
                alert('Minimal harus ada 1 item pekerjaan.');
                return;
            }

            row.remove();
            refreshRows();
            calculateTotals();
        });
    }

    function addRow() {
        const index = itemBody.querySelectorAll('.item-row').length;
        const tr = document.createElement('tr');
        tr.className = 'item-row';

        tr.innerHTML = `
            <td class="row-number">${index + 1}</td>
            <td><input type="text" name="items[${index}][nama_pekerjaan]" class="form-control nama-pekerjaan" required></td>
            <td><input type="text" name="items[${index}][deskripsi]" class="form-control erp-input"></td>
            <td><input type="text" name="items[${index}][volume]" class="form-control item-volume text-right" value="1"></td>
            <td><input type="text" name="items[${index}][satuan]" class="form-control erp-input"></td>
            <td><input type="text" name="items[${index}][harga_satuan]" class="form-control item-harga text-right" value="0"></td>
            <td><input type="text" class="form-control item-subtotal text-right" value="0" readonly></td>
            <td><button type="button" class="btn btn-sm btn-danger remove-item">Hapus</button></td>
        `;

        itemBody.appendChild(tr);
        bindRow(tr);
        refreshRows();
        calculateTotals();
    }

    if (mitraSelect && picSelect) {
        mitraSelect.addEventListener('change', function () {
            const mitraId = this.value;
            const selectedPic = picSelect.dataset.selected || '';

            picSelect.innerHTML = '<option value="">Memuat PIC Mitra...</option>';

            if (!mitraId) {
                picSelect.innerHTML = '<option value="">-- Pilih PIC Mitra --</option>';
                return;
            }

            const url = "{{ route('proyek.mitra-pic-options', ':id') }}".replace(':id', mitraId);

            fetch(url, { headers: { 'Accept': 'application/json' } })
                .then(response => response.json())
                .then(items => {
                    picSelect.innerHTML = '<option value="">-- Pilih PIC Mitra --</option>';

                    if (!items || items.length === 0) {
                        picSelect.innerHTML = '<option value="">PIC Mitra belum tersedia</option>';
                        return;
                    }

                    items.forEach(item => {
                        const option = document.createElement('option');
                        option.value = item.id;

                        let label = item.nama || '-';

                        if (item.jabatan) label += ' - ' + item.jabatan;
                        if (item.is_primary === 1 || item.is_utama === 1) label += ' (Utama)';

                        option.textContent = label;

                        if (String(item.id) === String(selectedPic)) {
                            option.selected = true;
                        }

                        picSelect.appendChild(option);
                    });
                })
                .catch(() => {
                    picSelect.innerHTML = '<option value="">Gagal memuat PIC Mitra</option>';
                });
        });
    }

    itemBody.querySelectorAll('.item-row').forEach(bindRow);
    addItemBtn?.addEventListener('click', addRow);
    calculateTotals();
});
</script>
@endsection