@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto p-6 bg-white rounded shadow">
    <h1 class="text-2xl font-bold mb-6">
        Edit Option – {{ $categoryOption->name }}
    </h1>

    <form action="{{ route('category-options.update', $categoryOption) }}"
          method="POST"
          enctype="multipart/form-data"
          class="space-y-6">
        @csrf
        @method('PUT')

        {{-- Option Name --}}
        <div>
            <label class="block text-gray-700 font-semibold mb-2">
                Option Name
            </label>
            <input type="text"
                   name="name"
                   value="{{ old('name', $categoryOption->name) }}"
                   class="w-full border border-gray-300 rounded px-4 py-2">
            @error('name')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        {{-- Mapped Sign Type --}}
        <div>
            <label class="block text-gray-700 font-semibold mb-2">
                Mapped Sign Type
            </label>
            <select name="mapped_sign_type_id"
                    class="w-full border border-gray-300 rounded px-4 py-2">
                <option value="">Select Sign Type</option>
                @foreach($signTypes as $signType)
                    <option value="{{ $signType->id }}"
                        @selected($categoryOption->mapped_sign_type_id == $signType->id)>
                        {{ $signType->name }}
                    </option>
                @endforeach
            </select>
        </div>


        <div>
            <label class="block text-gray-700 font-semibold mb-2">
                Mockup Sign Type Key
            </label>
            <input type="text"
                   name="mockup_sign_type"
                   value="{{ old('mockup_sign_type', $categoryOption->mockup_sign_type) }}"
                   class="w-full border border-gray-300 rounded px-4 py-2">
            @error('mockup_sign_type')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="block text-gray-700 font-semibold mb-2">
                Mockup Fabricated Finish Key
            </label>
            <input type="text"
                   name="mockup_fabricated_finish"
                   value="{{ old('mockup_fabricated_finish', $categoryOption->mockup_fabricated_finish) }}"
                   class="w-full border border-gray-300 rounded px-4 py-2">
            @error('mockup_fabricated_finish')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        {{-- Is Active --}}
        <div>
            <label class="block text-gray-700 font-semibold mb-2">
                Status
            </label>
            <select name="is_active"
                    class="w-full border border-gray-300 rounded px-4 py-2">
                <option value="1" @selected($categoryOption->is_active)>Active</option>
                <option value="0" @selected(!$categoryOption->is_active)>Inactive</option>
            </select>
        </div>

        {{-- Sort Order --}}
        <div>
            <label class="block text-gray-700 font-semibold mb-2">
                Sort Order
            </label>
            <input type="number"
                   name="sort_order"
                   value="{{ old('sort_order', $categoryOption->sort_order ?? 0) }}"
                   class="w-full border border-gray-300 rounded px-4 py-2">
        </div>

        {{-- Image --}}
        <div>
            <label class="block text-gray-700 font-semibold mb-2">
                Option Image
            </label>

            @if($categoryOption->image)
                <img src="{{ asset($categoryOption->image) }}"
                     class="h-24 mb-3 rounded border">
            @endif

            <input type="file"
                   name="image"
                   accept="image/*"
                   class="w-full border border-gray-300 rounded px-4 py-2">
        </div>

        {{-- Submit --}}
        <div class="flex space-x-3">
            <button type="submit"
                    class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
                Update Option
            </button>

            <a href="{{ route('categories.index') }}"
               class="bg-gray-300 text-gray-800 px-6 py-2 rounded hover:bg-gray-400">
                Cancel
            </a>
        </div>
    </form>
</div>
@endsection