@extends('layout.app')

@section('content')
<div class="app-content main-content">
    <div class="side-app main-container">
        <!--Page header-->
        <div class="page-header d-xl-flex d-block">
            <div class="page-leftheader">
                <div class="page-title">Products <span class="font-weight-normal text-muted ms-2">Add</span></div>
            </div>
        </div>
        <!--End Page header-->
        <div class="container mt-5">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header border-bottom-0">
                            <h4 class="card-title">Products Form</h4>
                        </div>
                        <div class="card-body">
                            @include('includes.alerts')
                            <form action="{{ route('products.store') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="">
                                    <div class="form-group">
                                        <label for="title" class="form-label">Title</label>
                                        <input type="text" name="title" class="form-control" id="title"
                                            placeholder="Enter Title" required maxlength="255" value="{{ old('title') }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="category_id" class="form-label">Category</label>
                                        <select name="category_id" class="form-control" id="category_id" required>
                                            <option value="">Select Category</option>
                                            @foreach ($categories as $cat)
                                            <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="description" class="form-label">Description</label>
                                        <textarea name="description" class="form-control" id="description" rows="3">{{ old('description') }}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="price" class="form-label">Price</label>
                                        <input type="number" name="price" class="form-control" id="price"
                                            placeholder="Enter Price" required step="0.01" min="0" value="{{ old('price') }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="price_before" class="form-label">Price Before (Optional)</label>
                                        <input type="number" name="price_before" class="form-control" id="price_before"
                                            placeholder="Enter Price Before" step="0.01" min="0" value="{{ old('price_before') }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="images" class="form-label">Images</label>
                                        <input type="file" name="images[]" class="form-control" id="images" multiple accept="image/*" required>
                                        @error('images')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                        @error('images.*')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <button class="btn btn-primary btn-block" type="submit">Add</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Row -->
        </div>
    </div>
</div>
@endsection