@extends('layouts.app')

@section('title', 'Input Progress Mitra')
@section('page_title', 'Input Progress Mitra')


@section('content')
<div class="erp-page">
    <div class="erp-page-actions">
        <a href="{{ route('proyek.spk.progress.index', [$proyek->id_proyek, $spk->id_spk]) }}" class="btn btn-secondary">← Daftar Progress</a>
        <a href="{{ route('proyek.spk.show', [$proyek->id_proyek, $spk->id_spk]) }}" class="btn btn-light">Detail 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.progress.store', [$proyek->id_proyek, $spk->id_spk]) }}" enctype="multipart/form-data">
        @csrf

        <section class="card erp-card" style="margin-bottom:1rem;">
            <div class="card-header erp-card-header">
                <div>
                    <h2>Data Progress</h2>
                    <p>Input laporan progress pekerjaan mitra.</p>
                </div>
            </div>

            <div class="form-grid">
                <div class="form-group">
                    <label for="tanggal_progress">Tanggal Progress <span class="text-danger">*</span></label>
                    <input type="date" id="tanggal_progress" name="tanggal_progress" class="form-control erp-input" required
                           value="{{ old('tanggal_progress', date('Y-m-d')) }}">
                </div>

                <div class="form-group">
                    <label for="progress_persen">Progress Header (%)</label>
                    <input type="number" id="progress_persen" name="progress_persen" class="form-control erp-input" min="0" max="100" step="0.01"
                           value="{{ old('progress_persen', 0) }}">
                    <small class="form-help">Bisa diisi manual atau otomatis dari rata-rata item.</small>
                </div>

                <div class="form-group">
                    <label for="status">Status</label>
                    @php
                        $statusValue = old('status', 'Draft');
                        $statusList = ['Draft', 'Diajukan', 'Disetujui', 'Ditolak'];
                    @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="uraian_pekerjaan">Uraian Pekerjaan</label>
                    <textarea id="uraian_pekerjaan" name="uraian_pekerjaan" class="form-control erp-input" rows="3">{{ old('uraian_pekerjaan') }}</textarea>
                </div>

                <div class="form-group form-group-full">
                    <label for="kendala">Kendala</label>
                    <textarea id="kendala" name="kendala" class="form-control erp-input" rows="3">{{ old('kendala') }}</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" style="margin-bottom:1rem;">
            <div class="card-header erp-card-header">
                <div>
                    <h2>Progress Item SPK</h2>
                    <p>Isi volume/progress pekerjaan per item SPK.</p>
                </div>
            </div>

            <div class="table-responsive erp-table-wrap">
                <table class="data-table erp-table">
                    <thead>
                        <tr>
                            <th style="width:56px;">No</th>
                            <th>Pekerjaan</th>
                            <th>Volume SPK</th>
                            <th>Satuan</th>
                            <th>Progress Volume</th>
                            <th>Progress (%)</th>
                            <th>Catatan</th>
                        </tr>
                    </thead>
                    <tbody id="progressItemBody">
                        @forelse ($spkItems as $index => $item)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>
                                    <strong>{{ $item->nama_pekerjaan ?? '-' }}</strong>
                                    <input type="hidden" name="items[{{ $index }}][id_spk_item]" value="{{ $item->id_item }}">
                                </td>
                                <td>{{ number_format((float) ($item->volume ?? 0), 2, ',', '.') }}</td>
                                <td>{{ $item->satuan ?? '-' }}</td>
                                <td>
                                    <input type="text" name="items[{{ $index }}][progress_volume]" class="form-control erp-input"
                                           value="{{ old('items.' . $index . '.progress_volume', 0) }}">
                                </td>
                                <td>
                                    <input type="number" name="items[{{ $index }}][progress_persen]" class="form-control item-progress-persen"
                                           min="0" max="100" step="0.01"
                                           value="{{ old('items.' . $index . '.progress_persen', 0) }}">
                                </td>
                                <td>
                                    <input type="text" name="items[{{ $index }}][catatan]" class="form-control erp-input"
                                           value="{{ old('items.' . $index . '.catatan') }}">
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" style="text-align:center;">Belum ada item SPK.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>

        <section class="card erp-card">
            <div class="card-header erp-card-header">
                <div>
                    <h2>Evidence</h2>
                    <p>Upload foto atau dokumen pendukung progress.</p>
                </div>
            </div>

            <div class="form-grid">
                <div class="form-group">
                    <label>File Evidence</label>
                    <input type="file" name="evidence[]" class="form-control erp-input" multiple>
                    <small class="form-help">Bisa pilih lebih dari satu file. Maksimal 10MB/file.</small>
                </div>
                <div class="form-group">
                    <label>Keterangan Evidence</label>
                    <input type="text" name="evidence_keterangan[]" class="form-control erp-input" placeholder="Keterangan umum evidence">
                </div>
            </div>

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

<script>
document.addEventListener('DOMContentLoaded', function () {
    const itemBody = document.getElementById('progressItemBody');
    const totalInput = document.getElementById('progress_persen');

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

    function clamp(value, min, max) {
        return Math.min(max, Math.max(min, value));
    }

    function calculateHeaderProgress() {
        const inputs = itemBody ? itemBody.querySelectorAll('.item-progress-persen') : [];
        let total = 0;
        let count = 0;

        inputs.forEach(input => {
            total += clamp(parseNumber(input.value), 0, 100);
            count++;
        });

        if (count > 0 && totalInput) {
            totalInput.value = (total / count).toFixed(2);
        }
    }

    if (itemBody) {
        itemBody.querySelectorAll('.item-progress-persen').forEach(input => {
            input.addEventListener('input', calculateHeaderProgress);
        });
    }
});
</script>
@endsection