@extends('layouts.app')

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


@section('content')
<div class="erp-page">
    <div class="erp-page-actions">
        <a href="{{ route('proyek.show', $proyek->id_proyek) }}" class="btn btn-secondary">← Detail Proyek</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.store', $proyek->id_proyek) }}" id="spkForm">
        @csrf

        <section class="card erp-card" style="margin-bottom:1rem;">
            <div class="card-header erp-card-header">
                <div>
                    <h2>Data Utama SPK</h2>
                    <p>Hubungkan SPK dengan mitra dan PIC 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', $nomorSpk ?? '') }}">
                </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', date('Y-m-d')) }}">
                </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', $proyek->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">
                        <option value="">-- Pilih PIC Mitra --</option>
                        @foreach ($mitraPicList ?? [] as $pic)
                            <option value="{{ $pic->id_pic }}"
                                {{ (string) old('id_pic_mitra', $proyek->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') }}">
                </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') }}">
                </div>

                <div class="form-group">
                    <label for="status">Status</label>
                    @php
                        $statusValue = old('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') }}</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"
                              placeholder="Contoh: DP 30%, progress 50%, pelunasan 20% setelah BAST">{{ old('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') }}</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>Input pekerjaan mitra. Subtotal dan 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', [
                                ['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 SPK</button>
                <a href="{{ route('proyek.spk.index', $proyek->id_proyek) }}" 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 => {
                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;

            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;
                    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