@extends('layouts.admin')

@section('content')
<div class="max-w-3xl rounded-xl bg-white border border-outline-variant p-6 md:p-7">
    <h1 class="text-3xl font-headline font-extrabold text-primary mb-5">Create Product</h1>
    <form method="POST" action="{{ route('admin.products.store') }}" class="grid gap-4">
        @csrf
        <select class="rounded-md border border-outline-variant/60 px-4 py-3" name="category_id">
            <option value="">No category</option>
            @foreach($categories as $category)
                <option value="{{ $category->id }}">{{ $category->name }}</option>
            @endforeach
        </select>
        <input class="rounded-md border border-outline-variant/60 px-4 py-3" name="name" placeholder="Name" required>
        <input class="rounded-md border border-outline-variant/60 px-4 py-3" name="sku" placeholder="SKU" required>
        <div class="grid sm:grid-cols-3 gap-4">
            <input class="rounded-md border border-outline-variant/60 px-4 py-3" type="number" step="0.01" min="0" name="price" placeholder="Price" required>
            <input class="rounded-md border border-outline-variant/60 px-4 py-3" type="number" step="0.01" min="0" name="compare_price" placeholder="Compare Price">
            <input class="rounded-md border border-outline-variant/60 px-4 py-3" type="number" min="0" name="stock" placeholder="Stock" required>
        </div>
        <input class="rounded-md border border-outline-variant/60 px-4 py-3" name="image" placeholder="Image URL">
        <textarea class="rounded-md border border-outline-variant/60 px-4 py-3" name="short_description" rows="2" placeholder="Short description"></textarea>
        <textarea class="rounded-md border border-outline-variant/60 px-4 py-3" name="description" rows="5" placeholder="Description"></textarea>
        <label class="inline-flex items-center gap-2 font-semibold"><input type="checkbox" name="is_active" value="1" checked> Active</label>
        <div class="flex gap-2">
            <button class="px-5 py-3 rounded-md bg-primary text-white font-bold" type="submit">Save</button>
            <a href="{{ route('admin.products.index') }}" class="px-5 py-3 rounded-md border border-outline-variant font-semibold">Cancel</a>
        </div>
    </form>
</div>
@endsection