@extends('layouts.app')

@section('content')
<div class="bg-white p-6 rounded shadow mx-auto max-w-3xl">
    <h1 class="text-xl font-bold mb-4">Edit Sign Type Options</h1>

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

    <form method="POST" action="{{ route('sign-types-options.update', $signTypes->id) }}">
        @csrf
        @method('PUT')

        <input type="hidden" name="sign_type_id" value="{{ $signTypes->id }}">

        <label class="block mb-2 font-medium">Sign Type: {{ $signTypes->name }}</label>

        <div id="groups-container">
            @foreach($signTypes->optionGroups as $groupIndex => $group)
                <div class="mb-6 border p-4 rounded bg-gray-50 group-block" id="group-{{ $groupIndex }}">
                    <label class="block mb-1 font-semibold">Group Name:</label>
                    <input type="text" name="groups[{{ $groupIndex }}][name]" class="border p-2 w-full mb-3" value="{{ $group->name }}" required>

                    <div class="mb-2 font-semibold">Values:</div>
                    <div class="space-y-2" id="group-{{ $groupIndex }}-values">
                        @foreach($group->optionValues as $value)
                            <div class="flex items-center gap-2">
                                <input type="text" name="groups[{{ $groupIndex }}][values][]" class="border p-2 w-full" value="{{ $value->value }}" required>
                                <button type="button" onclick="removeValue(this)" class="text-red-500 text-sm">✕</button>
                            </div>
                        @endforeach
                    </div>

                    <button type="button" onclick="addValue({{ $groupIndex }})" class="text-sm text-blue-600 mt-2">+ Add Value</button>
                    <button type="button" onclick="removeGroup(this)" class="text-sm text-red-500 mt-2 ml-4">🗑 Remove Group</button>
                </div>
            @endforeach
        </div>

        <button type="button" onclick="addGroup()" class="bg-blue-500 text-white px-3 py-1 rounded mb-4">+ Add Group</button>
        <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded">Save Options</button>
    </form>
</div>

<script>
let groupIndex = {{ count($signTypes->optionGroups) }};

function addGroup() {
    const container = document.getElementById('groups-container');
    const html = `
        <div class="mb-6 border p-4 rounded bg-gray-50 group-block" id="group-${groupIndex}">
            <label class="block mb-1 font-semibold">Group Name:</label>
            <input type="text" name="groups[${groupIndex}][name]" class="border p-2 w-full mb-3" required>

            <div class="mb-2 font-semibold">Values:</div>
            <div class="space-y-2" id="group-${groupIndex}-values">
                <div class="flex items-center gap-2">
                    <input type="text" name="groups[${groupIndex}][values][]" class="border p-2 w-full" required>
                    <button type="button" onclick="removeValue(this)" class="text-red-500 text-sm">✕</button>
                </div>
            </div>
            <button type="button" onclick="addValue(${groupIndex})" class="text-sm text-blue-600 mt-2">+ Add Value</button>
            <button type="button" onclick="removeGroup(this)" class="text-sm text-red-500 mt-2 ml-4">🗑 Remove Group</button>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
    groupIndex++;
}

function addValue(index) {
    const valuesDiv = document.getElementById(`group-${index}-values`);
    valuesDiv.insertAdjacentHTML('beforeend', `
        <div class="flex items-center gap-2 mt-1">
            <input type="text" name="groups[${index}][values][]" class="border p-2 w-full" required>
            <button type="button" onclick="removeValue(this)" class="text-red-500 text-sm">✕</button>
        </div>
    `);
}

function removeValue(button) {
    const parent = button.closest('.flex');
    if (parent) parent.remove();
}

function removeGroup(button) {
    const groupBlock = button.closest('.group-block');
    if (groupBlock) groupBlock.remove();
}
</script>
@endsection