@csrf
@if(isset($section)) @method('put') @endif

<div class="row g-3 mb-3">
    @if(isset($section))
    <div class="col-12">
        <label class="form-label small text-navy-300">Section Key (fixed — used by entries &amp; Excel import, cannot be changed)</label>
        <input type="text" value="{{ $section->key }}" class="form-control" disabled>
    </div>
    @endif
    <div class="col-md-2">
        <label class="form-label small text-navy-300">Ser</label>
        <input type="text" name="ser" value="{{ old('ser', $section->ser ?? '') }}" class="form-control @error('ser') is-invalid @enderror" required>
        @error('ser')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-7">
        <label class="form-label small text-navy-300">Title</label>
        <input type="text" name="title" value="{{ old('title', $section->title ?? '') }}" class="form-control @error('title') is-invalid @enderror" required>
        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3">
        <label class="form-label small text-navy-300">Type</label>
        <select name="section_type" id="sectionTypeSelect" class="form-select @error('section_type') is-invalid @enderror" required>
            <option value="table" @selected(old('section_type', $section->section_type ?? 'table') === 'table')>Table (repeatable rows)</option>
            <option value="fixed" @selected(old('section_type', $section->section_type ?? 'table') === 'fixed')>Fixed Fields (one form)</option>
        </select>
        @error('section_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-12">
        <label class="form-label small text-navy-300">Note (optional — shown as a hint above the section)</label>
        <input type="text" name="note" value="{{ old('note', $section->note ?? '') }}" class="form-control">
    </div>
</div>

<div class="panel p-3">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="fw-semibold text-heading small" id="columnsLabel">Columns</span>
        <button type="button" id="addColumnBtn" class="btn btn-sm btn-outline-primary"><i class="bi bi-plus-lg"></i> Add Column</button>
    </div>
    <div id="columnsContainer"></div>
</div>

<div class="mt-3">
    <button type="submit" class="btn btn-primary"><i class="bi bi-check2"></i> {{ isset($section) ? 'Update Section' : 'Create Section' }}</button>
    <a href="{{ route('admin.operational-report-sections.index') }}" class="btn btn-outline-secondary">Cancel</a>
</div>

<template id="columnRowTemplate">
    <div class="row g-2 align-items-center column-row border-bottom border-navy py-2">
        <div class="col-md-8">
            <input type="text" class="form-control form-control-sm" placeholder="Column label" data-field="label">
        </div>
        <div class="col-md-3 total-col-field">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" data-field="is_total_column">
                <label class="form-check-label small text-navy-300">Totals column</label>
            </div>
        </div>
        <div class="col-md-1 text-end">
            <button type="button" class="btn btn-sm btn-outline-danger remove-column-btn"><i class="bi bi-x-lg"></i></button>
        </div>
    </div>
</template>

@push('scripts')
<script>
(function () {
    const container = document.getElementById('columnsContainer');
    const rowTemplate = document.getElementById('columnRowTemplate');
    const typeSelect = document.getElementById('sectionTypeSelect');
    const columnsLabel = document.getElementById('columnsLabel');
    let index = 0;

    function updateTotalFieldVisibility() {
        const isFixed = typeSelect.value === 'fixed';
        document.querySelectorAll('.total-col-field').forEach((el) => el.classList.toggle('d-none', isFixed));
        columnsLabel.textContent = isFixed ? 'Fixed Fields' : 'Columns';
        container.querySelectorAll('[data-field="label"]').forEach((el) => {
            el.placeholder = isFixed ? 'Field label (e.g. Mission/Task)' : 'Column label';
        });
    }

    function addRow(data = null) {
        const fragment = rowTemplate.content.cloneNode(true);
        const row = fragment.querySelector('.column-row');
        const i = index++;

        row.querySelectorAll('[data-field]').forEach((el) => {
            const field = el.dataset.field;
            const name = field === 'is_total_column'
                ? `columns[${i}][is_total_column]`
                : `columns[${i}][${field}]`;
            el.setAttribute('name', name);

            if (data) {
                if (field === 'is_total_column') el.checked = !!data.is_total_column;
                else el.value = data[field] ?? '';
            }
        });

        row.querySelector('.remove-column-btn').addEventListener('click', () => row.remove());

        container.appendChild(row);
        updateTotalFieldVisibility();
    }

    document.getElementById('addColumnBtn').addEventListener('click', () => addRow());
    typeSelect.addEventListener('change', updateTotalFieldVisibility);

    const existingColumns = @json($section->columns ?? []);
    if (existingColumns.length) {
        existingColumns.forEach((c) => addRow(c));
    } else {
        addRow();
    }
})();
</script>
@endpush