@extends('admin.layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="mx-auto" style="max-width: 1180px;">
        <h1 class="fw-bold mb-4" style="font-size: 54px; line-height: 1.05; color: #0f172a;">Add Product</h1>

        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4">
                <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Product Name</label>
                            <input type="text" name="name" class="form-control form-control-lg rounded-3">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Product Code</label>
                            <input type="text" name="code" class="form-control form-control-lg rounded-3">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Category</label>
                            <select name="category_id" class="form-select form-select-lg rounded-3">
                                <option selected>-- Select --</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Brand</label>
                            <select name="brand_id" class="form-select form-select-lg rounded-3">
                                <option selected>-- Select --</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Size</label>
                            <select name="size_id" class="form-select form-select-lg rounded-3">
                                <option selected>-- Select --</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Color</label>
                            <select name="color_id" class="form-select form-select-lg rounded-3">
                                <option selected>-- Select --</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Unit</label>
                            <select name="unit_id" class="form-select form-select-lg rounded-3">
                                <option selected>-- Select --</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Barcode (optional)</label>
                            <input type="text" name="barcode" class="form-control form-control-lg rounded-3">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Opening Stock</label>
                            <input type="number" min="0" step="1" name="opening_stock" class="form-control form-control-lg rounded-3" value="0">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Purchase Price</label>
                            <input type="number" min="0" step="0.01" name="purchase_price" class="form-control form-control-lg rounded-3" value="0">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Selling Price</label>
                            <input type="number" min="0" step="0.01" name="selling_price" class="form-control form-control-lg rounded-3" value="0">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Supplier</label>
                            <select name="supplier_id" class="form-select form-select-lg rounded-3">
                                <option selected>-- Select --</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Description (optional)</label>
                            <input type="text" name="description" class="form-control form-control-lg rounded-3">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Image (optional)</label>
                            <input type="file" name="image" class="form-control form-control-lg rounded-3">
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-2 mt-4">
                        <button type="submit" class="btn btn-dark rounded-3 px-4 fw-semibold">Save Product</button>
                        <a href="{{ route('admin.products.index') }}" class="btn btn-light border rounded-3 px-4 fw-semibold">Products List</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
