@extends('layouts.app')

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

@section('content')
<div class="container">

    <h3 class="mb-4">Edit Product</h3>

    <form action="{{ route('products.update', $product->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="row mb-3">
            <div class="col-md-4">
                <label>Parent SKU</label>
                <input type="text" class="form-control" name="parent_sku"
                       value="{{ old('parent_sku', $product->parent_sku) }}">
            </div>

            <div class="col-md-4">
                <label>SKU</label>
                <input type="text" class="form-control" name="sku"
                       value="{{ old('sku', $product->sku) }}" required>
            </div>

            <div class="col-md-4">
                <label>Name</label>
                <input type="text" class="form-control" name="name"
                       value="{{ old('name', $product->name) }}" required>
            </div>
        </div>


        <div class="row mb-3">
            <div class="col-md-4">
                <label>Category</label>
                <input type="text" class="form-control" name="category"
                       value="{{ old('category', $product->category) }}">
            </div>

            <div class="col-md-4">
                <label>Size</label>
                <input type="text" class="form-control" name="size"
                       value="{{ old('size', $product->size) }}">
            </div>

            <div class="col-md-4">
                <label>Color</label>
                <input type="text" class="form-control" name="color"
                       value="{{ old('color', $product->color) }}">
            </div>
        </div>


        <div class="row mb-3">
            <div class="col-md-4">
                <label>Unit</label>
                <input type="text" class="form-control" name="unit"
                       value="{{ old('unit', $product->unit) }}">
            </div>

            <div class="col-md-4">
                <label>Cost</label>
                <input type="number" step="0.01" class="form-control" name="std_cost"
                       value="{{ old('std_cost', $product->std_cost) }}">
            </div>

            <div class="col-md-4">
                <label>Wholesale Price</label>
                <input type="number" step="0.01" class="form-control" name="price_web"
                       value="{{ old('price_web', $product->price_web) }}">
            </div>
        </div>


        <div class="row mb-3">
            <div class="col-md-4">
                <label>Outside Price</label>
                <input type="number" step="0.01" class="form-control" name="price_outside"
                       value="{{ old('price_outside', $product->price_outside) }}">
            </div>
        </div>


        {{-- IMAGE SECTION --}}
        <div class="mb-3">
            <label class="form-label"><strong>Primary Image</strong></label>
            <input type="file" name="image_primary" class="form-control">

            <small class="text-muted">JPG, PNG, WEBP; max 2MB</small>

            <div class="mt-3">
                <p>Current:</p>

                @if($product->image_primary)
                    <img src="{{ asset('storage/'.$product->image_primary) }}"
                         alt="Product Image"
                         width="120"
                         class="border rounded">
                @else
                    <p class="text-muted">No Image Available</p>
                @endif
            </div>
        </div>

        <button class="btn btn-success">Update</button>
        <a href="{{ route('products.index') }}" class="btn btn-secondary">Back</a>

    </form>
</div>
@endsection