@extends('layouts.app')

@section('content')
<section class="section light">
    <div class="container">
        <div class="post-header" style="margin-bottom: 40px;">
            <h1 style="font-size: 3rem;">Edit Impact Stats</h1>
            <p>Update the statistics displayed in the "Our Impact" section on the home page.</p>
        </div>

        <div class="form-container">
            <form action="{{ route('impact.update') }}" method="POST">
                @csrf
                @method('PUT')

                @foreach($impacts as $impact)
                    <div style="background: #f9f9f9; padding: 25px; border-radius: 12px; margin-bottom: 25px; border: 1px solid #eee;">
                        <input type="hidden" name="impacts[{{ $loop->index }}][id]" value="{{ $impact->id }}">
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                            <div class="form-group" style="margin-bottom: 0;">
                                <label>Stat Label</label>
                                <input type="text" name="impacts[{{ $loop->index }}][label]" value="{{ old('impacts.'.$loop->index.'.label', $impact->label) }}" required>
                            </div>

                            <div class="form-group" style="margin-bottom: 0;">
                                <label>Stat Value</label>
                                <input type="text" name="impacts[{{ $loop->index }}][value]" value="{{ old('impacts.'.$loop->index.'.value', $impact->value) }}" required>
                            </div>
                        </div>
                    </div>
                @endforeach

                <div style="text-align: right; margin-top: 40px;">
                    <a href="{{ route('home') }}" style="margin-right: 20px; color: #666; text-decoration: none; font-weight: 600;">Cancel</a>
                    <button type="submit" class="button button-primary" style="margin: 0; padding: 16px 50px;">Update Stats</button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection