@extends('backend.layout.layouts')

@section('content')
    <div class="container p-6 mx-auto">
        <h2 class="mb-4 text-2xl font-semibold">Create Product Variant</h2>

        @if (session('success'))
            <div class="px-4 py-3 mb-4 text-green-800 bg-green-100 border border-green-300 rounded-md">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ url('admin/store-variant') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <!-- Product ID hidden input -->
            <input type="hidden" name="product_id" value="{{ $productId }}">

            <!-- Variant Name -->
            <div class="mb-6">
                <label for="variant" class="block text-sm font-medium text-gray-700">Variant Name</label>
                <input type="text" id="variant" name="variant" value="{{ old('variant') }}"
                    class="block w-full mt-1 border-gray-300 border-2 rounded-md shadow-sm form-input focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                    >
                @error('variant')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Quantity -->
            <div class="mb-6">
                <label for="quantity" class="block text-sm font-medium text-gray-700">Quantity</label>
                <input type="number" id="quantity" name="quantity" value="{{ old('quantity') }}"
                    class="block w-full mt-1 border-gray-300 rounded-md border-2 shadow-sm form-input focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                    >
                @error('quantity')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Price -->
            <div class="mb-6">
                <label for="price1" class="block text-sm font-medium text-gray-700">Price</label>
                <input type="number" id="price1" name="price1" value="{{ old('price1') }}"
                    class="block w-full mt-1 border-gray-300 rounded-md border-2 shadow-sm form-input focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                    step="0.01" >
                @error('price1')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Picture -->
            <div class="mb-6">
                <label for="picture_channel" class="block text-sm font-medium text-gray-700">Picture</label>
                <input type="file" id="picture_channel" name="picture_channel"
                    class="block w-full mt-1 border-gray-300 rounded-md border-2 shadow-sm form-input focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50">
                @error('picture_channel')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <button type="submit"
                class="px-6 py-3 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                Save
            </button>
        </form>

    </div>
@endsection