@extends('layouts.admin')

@section('title', $heading)
@section('heading', $heading)

@push('styles')
    <style>
        .form-card { padding: 24px; }
        .field-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }
        .field { display: grid; gap: 8px; }
        .field.full { grid-column: 1 / -1; }
        input, textarea {
            width: 100%;
            padding: 14px 16px;
            border-radius: 18px;
            border: 1px solid rgba(123, 91, 47, 0.22);
            background: rgba(255, 255, 255, 0.72);
            font: inherit;
            color: var(--admin-text);
        }
        textarea { min-height: 120px; resize: vertical; }
        @media (max-width: 760px) {
            .field-grid { grid-template-columns: 1fr; }
        }
    </style>
@endpush

@section('content')
    <form class="card form-card" action="{{ $action }}" method="POST">
        @csrf
        @if ($method !== 'POST')
            @method($method)
        @endif

        <div class="field-grid">
            <div class="field">
                <label for="name">Name</label>
                <input id="name" name="name" type="text" value="{{ old('name', $product->name) }}" required>
            </div>
            <div class="field">
                <label for="slug">Slug</label>
                <input id="slug" name="slug" type="text" value="{{ old('slug', $product->slug) }}" required>
            </div>
            <div class="field">
                <label for="category">Category</label>
                <input id="category" name="category" type="text" value="{{ old('category', $product->category) }}" required>
            </div>
            <div class="field">
                <label for="subtitle">Subtitle</label>
                <input id="subtitle" name="subtitle" type="text" value="{{ old('subtitle', $product->subtitle) }}">
            </div>
            <div class="field">
                <label for="price">Price</label>
                <input id="price" name="price" type="number" step="0.01" min="0" value="{{ old('price', $product->price) }}" required>
            </div>
            <div class="field">
                <label for="hero_badge">Hero Badge</label>
                <input id="hero_badge" name="hero_badge" type="text" value="{{ old('hero_badge', $product->hero_badge) }}">
            </div>
            <div class="field">
                <label for="accent">Accent Color</label>
                <input id="accent" name="accent" type="text" value="{{ old('accent', $product->accent ?: '#8C6A3D') }}" required>
            </div>
            <div class="field">
                <label for="sort_order">Sort Order</label>
                <input id="sort_order" name="sort_order" type="number" min="0" value="{{ old('sort_order', $product->sort_order ?? 0) }}" required>
            </div>
            <div class="field full">
                <label for="description">Description</label>
                <textarea id="description" name="description">{{ old('description', $product->description) }}</textarea>
            </div>
            <div class="field full">
                <label style="display:flex; align-items:center; gap:10px;">
                    <input name="is_featured" type="checkbox" value="1" {{ old('is_featured', $product->is_featured) ? 'checked' : '' }} style="width:auto;">
                    Featured product
                </label>
            </div>
        </div>

        <div style="margin-top: 20px; display:flex; gap:12px;">
            <button type="submit">Save Product</button>
            <a class="button ghost-button" href="{{ route('admin.products.index') }}">Cancel</a>
        </div>
    </form>
@endsection