@extends('admin.layouts.app')
@section('title', 'Products')

@section('content')
<div class="form-container">
    <form action="{{ route('admin.product.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="name">Product Name</label>
                    <input type="text" id="name" name="name" placeholder="Product Name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" >
                    @error('name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="price">Price</label>
                    <input type="number" id="price" name="price" placeholder="Product Price" step="0.01" class="form-control @error('price') is-invalid @enderror" value="{{ old('price') }}" >
                    @error('price')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="stock">Stock</label>
                    <input type="number" id="stock" name="stock" placeholder="Product Stock" class="form-control @error('stock') is-invalid @enderror" value="{{ old('stock') }}" >
                    @error('stock')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="category">Category</label>
                    <select id="category" name="category" class="form-control @error('category') is-invalid @enderror" >
                        <option value="">Select a category</option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ old('category') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                        @endforeach
                    </select>
                    @error('category')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="description">Product Description</label>
            <textarea id="description" name="description" rows="5" placeholder="Product Description" class="form-control @error('description') is-invalid @enderror" >{{ old('description') }}</textarea>
            @error('description')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
        
        <div class="form-group">
            <label for="image_url">Product Image</label>
            <input type="file" id="image_url" name="image_url" class="dropify form-control @error('image_url') is-invalid @enderror" data-max-file-size="10M" data-allowed-file-extensions="jpeg png jpg gif">
            @error('image_url')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <button type="submit" class="btn ms-auto btn-success" style="border: 1px solid #ccc"><i class="fas fa-plus-circle"></i> Submit</button>
    </form>
</div>
@endsection