@extends('layouts.app')

@section('title', 'Atur Kolom - ' . ($ref['nama_instansi'] ?? ''))
@section('body-class', 'page-form')

@section('content')
<div class="main-container">
    <div class="form-container" style="max-width: 800px;">
        <div class="form-header">
            <h1>Atur Kolom</h1>
            <p>{{ $ref['nama_instansi'] }}</p>
        </div>

        @if(session('success'))
            <div class="notification success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="notification error">{{ session('error') }}</div>
        @endif

        <p style="margin-bottom:8px;"><a href="{{ route('data.edit', ['slug' => $slug]) }}">&laquo; Kembali ke input data</a></p>

        <table style="width:100%; border-collapse:collapse; margin-bottom:20px;">
            <thead>
                <tr>
                    <th style="text-align:left; padding:8px; border-bottom:2px solid #ddd;">Urutan</th>
                    <th style="text-align:left; padding:8px; border-bottom:2px solid #ddd;">Label</th>
                    <th style="text-align:left; padding:8px; border-bottom:2px solid #ddd;">Satuan</th>
                    <th style="text-align:left; padding:8px; border-bottom:2px solid #ddd;">Kolom Sheets</th>
                    <th style="padding:8px; border-bottom:2px solid #ddd;"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($fields as $f)
                    <tr>
                        <td style="padding:8px; border-bottom:1px solid #eee;">{{ $f['urutan'] }}</td>
                        <td style="padding:8px; border-bottom:1px solid #eee;">{{ $f['label'] }}
                            <br><small style="color:#888;">{{ $f['field_key'] }}</small>
                        </td>
                        <td style="padding:8px; border-bottom:1px solid #eee;">{{ $f['satuan'] ?? '-' }}</td>
                        <td style="padding:8px; border-bottom:1px solid #eee;">{{ $f['sheet_col'] ?? '-' }}</td>
                        <td style="padding:8px; border-bottom:1px solid #eee; text-align:right;">
                            <form action="{{ route('data.fields.delete', ['slug' => $slug]) }}" method="POST"
                                  onsubmit="return confirm('Hapus kolom {{ $f['label'] }}?');" style="margin:0;">
                                @csrf
                                <input type="hidden" name="id" value="{{ $f['id'] }}">
                                <button type="submit" class="btn-danger" style="padding:4px 10px;">Hapus</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" style="padding:12px; text-align:center; color:#888;">Belum ada kolom.</td></tr>
                @endforelse
            </tbody>
        </table>

        <h3 style="margin-bottom:8px;">Tambah / Ubah Kolom</h3>
        <p style="color:#888; font-size:0.9em; margin-bottom:12px;">
            Untuk mengubah kolom yang sudah ada, isi <em>field_key</em> yang sama.
        </p>
        <form action="{{ route('data.fields.store', ['slug' => $slug]) }}" method="POST">
            @csrf
            <div class="form-group">
                <label>Label kolom (wajib)</label>
                <input type="text" name="label" required placeholder="Contoh: Volume Timbulan (ton)">
            </div>
            <div class="form-group">
                <label>Satuan</label>
                <input type="text" name="satuan" placeholder="Contoh: ton">
            </div>
            <div class="form-group">
                <label>Urutan</label>
                <input type="number" name="urutan" value="{{ count($fields) + 1 }}">
            </div>
            <div class="form-group">
                <label>Kolom di Google Sheets (untuk sync)</label>
                <input type="text" name="sheet_col" placeholder="Contoh: B" maxlength="5">
            </div>
            <div class="form-group">
                <label>field_key (opsional, otomatis dari label bila kosong)</label>
                <input type="text" name="field_key" placeholder="volume_timbulan">
            </div>
            <button type="submit" class="btn-primary">Simpan Kolom</button>
        </form>
    </div>
</div>
@endsection
