@extends('admin.layouts.app')

@section('title', 'Create LGA')

@section('content')
<div class="form-card" style="max-width:600px;">
    <form method="POST" action="{{ route('admin.admin.lga.store') }}" id="lgaForm">
        @csrf

        <div id="lgaRows">
            {{-- First row (always present) --}}
            <div class="mb-3 removable-row" data-row="0">
                <label class="form-label">LGA Name <span class="text-danger">*</span></label>
                <div class="d-flex gap-2 align-items-center">
                    <input type="text" class="form-control @error('lgas.0.name') is-invalid @enderror"
                           name="lgas[0][name]" value="{{ old('lgas.0.name') }}" required placeholder="Enter LGA name">
                </div>
                @error('lgas.0.name')
                    <div style="color:#c62828; font-size:12px; margin-top:4px;">{{ $message }}</div>
                @enderror
            </div>

            {{-- Render old rows if validation failed --}}
            @if(old('lgas'))
                @foreach(old('lgas') as $index => $lgaData)
                    @if($index > 0)
                    <div class="mb-3 removable-row" data-row="{{ $index }}">
                        <div class="d-flex gap-2 align-items-center">
                            <input type="text" class="form-control @error("lgas.{$index}.name") is-invalid @enderror"
                                   name="lgas[{{ $index }}][name]" value="{{ $lgaData['name'] ?? '' }}" required placeholder="Enter LGA name">
                            <button type="button" class="btn-remove-row" onclick="removeRow(this)" style="position:static; transform:none;">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                        @error("lgas.{$index}.name")
                            <div style="color:#c62828; font-size:12px; margin-top:4px;">{{ $message }}</div>
                        @enderror
                    </div>
                    @endif
                @endforeach
            @endif
        </div>

        <div class="mb-4">
            <button type="button" class="btn-add-row" onclick="addLgaRow()">
                <i class="bi bi-plus-circle"></i> + add new LGA
            </button>
        </div>

        <div class="d-flex gap-2">
            <button type="submit" class="btn-submit">Create LGA(s)</button>
            <a href="{{ route('admin.admin.lga.index') }}" class="btn-cancel">Cancel</a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    let rowCount = {{ old('lgas') ? count(old('lgas')) : 1 }};

    function addLgaRow() {
        const container = document.getElementById('lgaRows');
        const row = document.createElement('div');
        row.className = 'mb-3 removable-row';
        row.dataset.row = rowCount;
        row.innerHTML = `
            <div class="d-flex gap-2 align-items-center">
                <input type="text" class="form-control" name="lgas[${rowCount}][name]" required placeholder="Enter LGA name">
                <button type="button" class="btn-remove-row" onclick="removeRow(this)" style="position:static; transform:none;">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        `;
        container.appendChild(row);
        row.querySelector('input').focus();
        rowCount++;
    }

    function removeRow(btn) {
        const row = btn.closest('.removable-row');
        row.remove();
    }
</script>
@endpush