@extends('admin.layout')

@section('content')
<div class="page-title">Style Edits</div>

@if(session('success'))
<div class="alert alert-success" style="background:#f0fdf4;border:1px solid #86efac;padding:12px 16px;border-radius:4px;margin-bottom:16px;color:#166534">
    {{ session('success') }}
</div>
@endif

<form method="POST" action="{{ route('admin.style-edits.update') }}">
    @csrf
    <div id="edits-container">
        @foreach($edits as $i => $edit)
        <div class="card" style="margin-bottom:16px">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
                <h3 style="font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#888">Edit {{ $i + 1 }}</h3>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
                <div>
                    <label style="font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#888;display:block;margin-bottom:6px">Title</label>
                    <input type="text" name="edits[{{ $i }}][title]" value="{{ $edit['title'] }}" class="form-input" required>
                </div>
                <div>
                    <label style="font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#888;display:block;margin-bottom:6px">Subtitle</label>
                    <input type="text" name="edits[{{ $i }}][subtitle]" value="{{ $edit['subtitle'] }}" class="form-input" required>
                </div>
                <div>
                    <label style="font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#888;display:block;margin-bottom:6px">Image URL</label>
                    <input type="text" name="edits[{{ $i }}][image]" value="{{ $edit['image'] }}" class="form-input" required>
                </div>
                <div>
                    <label style="font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#888;display:block;margin-bottom:6px">Collection Slug</label>
                    <input type="text" name="edits[{{ $i }}][collection]" value="{{ $edit['collection'] }}" class="form-input" required>
                </div>
            </div>
            @if($edit['image'])
            <div style="margin-top:12px">
                <img src="{{ $edit['image'] }}" style="height:80px;border-radius:4px;object-fit:cover">
            </div>
            @endif
        </div>
        @endforeach
    </div>
    <button type="submit" class="btn btn-black">Save Style Edits</button>
</form>
@endsection