{{-- admin/pages/settings/process.blade.php --}}
@extends('admin.layouts.app')
@section('title','Process Steps')
@section('page-title','How We Work — Process Steps')
@section('content')
<form method="POST" action="{{ route('admin.process.save') }}">
    @csrf
    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card-admin p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="fw-700" style="font-size:.88rem">Process Steps</div>
                    <button type="button" class="btn btn-sm" style="background:#eff6ff;color:#1d4ed8;border:none" onclick="addStep()"><i class="bi bi-plus me-1"></i>Add Step</button>
                </div>
                <div id="steps-container">
                    @foreach($steps as $i => $step)
                    <div class="step-row p-3 mb-2 rounded" style="background:#f8fafc;border:1px solid #e2e8f0">
                        <input type="hidden" name="steps[{{ $i }}][id]" value="{{ $step->id }}">
                        <div class="row g-2 align-items-center">
                            <div class="col-auto"><label class="form-label mb-0">Step</label><input type="number" name="steps[{{ $i }}][step_number]" class="form-control form-control-sm" style="width:70px" value="{{ $step->step_number }}"></div>
                            <div class="col"><label class="form-label mb-0">Title</label><input type="text" name="steps[{{ $i }}][title]" class="form-control form-control-sm" value="{{ $step->title }}"></div>
                            <div class="col-lg-5"><label class="form-label mb-0">Description</label><input type="text" name="steps[{{ $i }}][description]" class="form-control form-control-sm" value="{{ $step->description }}"></div>
                            <div class="col-auto pt-3"><button type="button" class="btn btn-sm" style="background:#fee2e2;color:#991b1b;border:none" onclick="this.closest('.step-row').remove()"><i class="bi bi-x"></i></button></div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card-admin p-4">
                <button type="submit" class="btn btn-admin w-100">Save Steps</button>
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
let stepCount = {{ $steps->count() }};
function addStep() {
    const i = stepCount++;
    const div = document.createElement('div');
    div.className = 'step-row p-3 mb-2 rounded';
    div.style = 'background:#f8fafc;border:1px solid #e2e8f0';
    div.innerHTML = `<div class="row g-2 align-items-center">
        <div class="col-auto"><label class="form-label mb-0">Step</label><input type="number" name="steps[${i}][step_number]" class="form-control form-control-sm" style="width:70px" value="${i+1}"></div>
        <div class="col"><label class="form-label mb-0">Title</label><input type="text" name="steps[${i}][title]" class="form-control form-control-sm" placeholder="Step title"></div>
        <div class="col-lg-5"><label class="form-label mb-0">Description</label><input type="text" name="steps[${i}][description]" class="form-control form-control-sm" placeholder="Short description"></div>
        <div class="col-auto pt-3"><button type="button" class="btn btn-sm" style="background:#fee2e2;color:#991b1b;border:none" onclick="this.closest('.step-row').remove()"><i class="bi bi-x"></i></button></div>
    </div>`;
    document.getElementById('steps-container').appendChild(div);
}
</script>
@endpush
@endsection