@extends('backend.layout.layouts')

@section('content')
    <div class="container p-6 mx-auto">
        <h2 class="mb-4 text-2xl font-semibold">Edit 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="{{ route('products.variant.update', $channelProduct->id) }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            @method('PUT')

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

            <!-- Price -->
            <div class="mb-6">
                <label for="price" class="block text-sm font-medium text-gray-700">Price</label>
                <input type="number" id="price" name="price" value="{{ old('price', $channelProduct->price1) }}"
                    class="block w-full mt-1 border-gray-300 rounded-md shadow-sm form-input focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                    step="0.01" required>
                @error('price')
                    <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>
                @if ($channelProduct->picture_channel)
                    <div class="mb-4">
                        <img src="{{ asset($channelProduct->picture_channel) }}" alt="Current Picture"
                            class="object-cover w-32 h-24 border border-gray-300 rounded-md">
                    </div>
                @endif
                <input type="file" id="picture_channel" name="picture_channel"
                    class="block w-full mt-1 border-gray-300 rounded-md 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">
                Update
            </button>
        </form>
    </div>
@endsection