@extends('layouts.app')

@section('title', 'Upload Product')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div class="rounded-3xl bg-white p-8 shadow-sm">
        <h1 class="text-3xl font-semibold">Upload a New Product</h1>
        <p class="mt-2 text-slate-600">Add a product to the Fashion Mitra catalog.</p>
    </div>

    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" class="rounded-3xl bg-white p-8 shadow-sm space-y-6">
        @csrf

        <div class="grid gap-6 md:grid-cols-2">
            <div>
                <label class="block text-sm font-medium text-slate-700">Name</label>
                <input type="text" name="name" value="{{ old('name') }}" required class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Category</label>
                <select name="category_id" required class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
                    <option value="">Select category</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" @selected(old('category_id') == $category->id)>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700">Description</label>
            <textarea name="description" rows="4" class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">{{ old('description') }}</textarea>
        </div>

        <div class="grid gap-6 md:grid-cols-3">
            <div>
                <label class="block text-sm font-medium text-slate-700">Price</label>
                <input type="number" step="0.01" name="price" value="{{ old('price') }}" required class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Sale Price</label>
                <input type="number" step="0.01" name="sale_price" value="{{ old('sale_price') }}" class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Discount %</label>
                <input type="number" name="discount_percent" value="{{ old('discount_percent', 0) }}" class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
            </div>
        </div>

        <div class="grid gap-6 md:grid-cols-3">
            <div>
                <label class="block text-sm font-medium text-slate-700">Rating</label>
                <input type="number" step="0.1" min="0" max="5" name="rating" value="{{ old('rating', 4.5) }}" class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Image</label>
                <input type="file" name="image" accept="image/*" class="mt-2 w-full text-slate-700">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Image URL</label>
                <input type="text" name="image_url" value="{{ old('image_url') }}" class="mt-2 w-full rounded-3xl border border-slate-200 bg-slate-50 px-4 py-3 focus:border-slate-900 focus:outline-none">
                <p class="mt-2 text-xs text-slate-500">Use either image upload or an external image URL.</p>
            </div>
        </div>

        <div class="grid gap-4 md:grid-cols-3">
            <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="is_special_pick" value="1" @checked(old('is_special_pick')) class="rounded border-slate-300 text-slate-900 focus:ring-slate-900">
                Special Pick
            </label>
            <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="is_flash_deal" value="1" @checked(old('is_flash_deal')) class="rounded border-slate-300 text-slate-900 focus:ring-slate-900">
                Flash Deal
            </label>
            <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="is_best_seller" value="1" @checked(old('is_best_seller')) class="rounded border-slate-300 text-slate-900 focus:ring-slate-900">
                Best Seller
            </label>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('admin.products.index') }}" class="rounded-full border border-slate-300 px-6 py-3 text-slate-700 hover:bg-slate-50">Cancel</a>
            <button type="submit" class="rounded-full bg-slate-900 px-6 py-3 text-white hover:bg-slate-800">Save Product</button>
        </div>
    </form>
</div>
@endsection
