@extends('admin.layout')
@section('content')
<div class="page-header">
    <div>
        <a href="{{ route('admin.collections') }}" class="back-link">← Back to Collections</a>
        <div class="page-title" style="margin-top:8px">Edit Collection — {{ $collection->name }}</div>
    </div>
</div>

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

<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
    {{-- Edit form --}}
    <div class="card">
        <h3 style="margin:0 0 20px;font-size:14px;text-transform:uppercase;letter-spacing:1px">Collection Details</h3>
        <form method="POST" action="{{ route('admin.collections.update', $collection->id) }}">
            @csrf @method('PUT')
            <div class="form-group">
                <label>Name</label>
                <input type="text" name="name" value="{{ $collection->name }}" required>
            </div>
            <div class="form-group">
                <label>Description</label>
                <textarea name="description" rows="3">{{ $collection->description }}</textarea>
            </div>
            <div class="form-group">
                <label>Cover Image URL</label>
                <input type="url" name="image_url" value="{{ $collection->image_url }}">
            </div>
            <div class="form-group">
                <label>Sort Order</label>
                <input type="number" name="sort_order" value="{{ $collection->sort_order }}">
            </div>
            <div class="form-group">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
                    <input type="checkbox" name="is_published" value="1" {{ $collection->is_published ? 'checked' : '' }}>
                    Published
                </label>
            </div>
            <button class="btn btn-black" style="width:100%;padding:12px">Save Changes</button>
        </form>
    </div>

    {{-- Listings in collection --}}
    <div class="card">
        <h3 style="margin:0 0 20px;font-size:14px;text-transform:uppercase;letter-spacing:1px">Listings ({{ $collection->listings->count() }})</h3>

        {{-- Add listing --}}
        <form method="POST" action="{{ route('admin.collections.add-listing', $collection->id) }}" style="margin-bottom:16px;display:flex;gap:8px">
            @csrf
            <select name="listing_id" style="flex:1;padding:8px;border:1px solid #e5e7eb;border-radius:4px;font-size:13px">
                <option value="">Select a listing...</option>
                @foreach($listings as $listing)
                    @if(!$collection->listings->contains($listing->id))
                        <option value="{{ $listing->id }}">{{ $listing->title }} ({{ $listing->size }})</option>
                    @endif
                @endforeach
            </select>
            <button type="submit" class="btn btn-black" style="padding:8px 16px;white-space:nowrap">Add</button>
        </form>

        {{-- Current listings --}}
        @forelse($collection->listings as $listing)
        <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f3f4f6">
            @if($listing->images->first())
                <img src="{{ $listing->images->first()->url }}" style="width:40px;height:50px;object-fit:cover;border-radius:4px">
            @else
                <div style="width:40px;height:50px;background:#f3f4f6;border-radius:4px"></div>
            @endif
            <div style="flex:1">
                <div style="font-size:13px;font-weight:600">{{ $listing->title }}</div>
                <div style="font-size:12px;color:#888">{{ $listing->size }} · {{ $listing->category }}</div>
            </div>
            <form method="POST" action="{{ route('admin.collections.remove-listing', [$collection->id, $listing->id]) }}">
                @csrf @method('DELETE')
                <button type="submit" style="background:none;border:none;color:#ef4444;cursor:pointer;font-size:12px">Remove</button>
            </form>
        </div>
        @empty
            <p style="color:#888;font-size:13px">No listings in this collection yet.</p>
        @endforelse
    </div>
</div>
@endsection