@extends('layouts.admin')

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

@section('content')
    <section class="dashboard-head">
        <div>
            <span class="eyebrow">Catalog</span>
            <h1>Add Product</h1>
        </div>
        <a class="button ghost" href="{{ route('admin.products.index') }}">Back</a>
    </section>

    <section class="panel form-panel">
        <form method="POST" action="{{ route('admin.products.store') }}" class="admin-form" enctype="multipart/form-data">
            @csrf

            <label>
                <span>Category</span>
                <select name="category_id" required>
                    <option value="">Select category</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}" @selected(old('category_id') == $category->id)>{{ $category->name }}</option>
                    @endforeach
                </select>
            </label>

            <label>
                <span>Name</span>
                <input name="name" value="{{ old('name') }}" required>
            </label>

            <label>
                <span>Description</span>
                <textarea name="description" rows="4">{{ old('description') }}</textarea>
            </label>

            <div class="form-grid">
                <label>
                    <span>Price</span>
                    <input name="price" type="number" min="0" step="0.01" value="{{ old('price') }}" required>
                </label>

                <label>
                    <span>Purchase Price</span>
                    <input name="purchase_price" type="number" min="0" step="0.01" value="{{ old('purchase_price', 0) }}">
                </label>

                <label>
                    <span>Discount %</span>
                    <input name="discount_percent" type="number" min="0" max="100" step="0.01" value="{{ old('discount_percent', 0) }}">
                </label>

                <label>
                    <span>Fake Discount %</span>
                    <input name="fake_discount_percent" type="number" min="0" max="100" step="0.01" value="{{ old('fake_discount_percent', 0) }}">
                </label>

                <label>
                    <span>Stock</span>
                    <input name="stock" type="number" min="0" step="1" value="{{ old('stock', 0) }}" required>
                </label>
            </div>

            <label>
                <span>Upload Images</span>
                <input name="images[]" type="file" accept="image/jpeg,image/png,image/webp" multiple>
            </label>

            <label>
                <span>YouTube Link</span>
                <input name="youtube_url" type="url" value="{{ old('youtube_url') }}" placeholder="https://www.youtube.com/watch?v=...">
            </label>

            <section class="settings-card">
                <div class="settings-card-head">
                    <div>
                        <span class="eyebrow">SEO</span>
                        <h2>Search Metadata</h2>
                    </div>
                </div>
                <label>
                    <span>Meta Title</span>
                    <input name="meta_title" value="{{ old('meta_title') }}">
                </label>
                <label>
                    <span>Meta Description</span>
                    <textarea name="meta_description" rows="3">{{ old('meta_description') }}</textarea>
                </label>
                <label>
                    <span>OG Image</span>
                    <input name="og_image" type="file" accept="image/jpeg,image/png,image/webp">
                </label>
            </section>

            <div class="variant-editor">
                <h2>Variants</h2>
                @for ($index = 0; $index < 4; $index++)
                    <div class="form-grid variant-row">
                        <label>
                            <span>Name</span>
                            <input name="variants[{{ $index }}][name]" value="{{ old("variants.{$index}.name") }}" placeholder="Size, Color">
                        </label>
                        <label>
                            <span>Value</span>
                            <input name="variants[{{ $index }}][value]" value="{{ old("variants.{$index}.value") }}" placeholder="Large, Red">
                        </label>
                        <label>
                            <span>Sale Price</span>
                            <input name="variants[{{ $index }}][price]" type="number" min="0" step="0.01" value="{{ old("variants.{$index}.price") }}" placeholder="Use product price">
                        </label>
                        <label>
                            <span>Purchase Price</span>
                            <input name="variants[{{ $index }}][purchase_price]" type="number" min="0" step="0.01" value="{{ old("variants.{$index}.purchase_price") }}" placeholder="Use product purchase price">
                        </label>
                        <label>
                            <span>Stock</span>
                            <input name="variants[{{ $index }}][stock]" type="number" min="0" step="1" value="{{ old("variants.{$index}.stock", 0) }}">
                        </label>
                    </div>
                @endfor
            </div>

            <label class="checkbox-label">
                <input name="is_active" type="checkbox" value="1" checked>
                <span>Active</span>
            </label>

            <label class="checkbox-label">
                <input name="is_featured" type="checkbox" value="1" @checked(old('is_featured'))>
                <span>Featured product</span>
            </label>

            @if ($errors->any())
                <p class="form-error">{{ $errors->first() }}</p>
            @endif

            <button class="button primary" type="submit">Save product</button>
        </form>
    </section>
@endsection