@extends('layouts.app')

@section('title', 'Edit Sign Type')

@section('content')
    <style>
        .selected-item {
            width: max-content;
        }
    </style>
    <div class="mx-auto bg-white p-6 rounded shadow">
        <h1 class="text-xl font-bold mb-4">Edit Sign Type</h1>

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

            {{-- Name Field --}}
            <div class="mb-4">
                <label class="block mb-1 font-semibold">Name</label>
                <input type="text" name="name" value="{{ old('name', $signType->name) }}"
                    class="w-full border p-2 rounded" required>
                @error('name')
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror
            </div>

            {{-- Custom Material Selection --}}
            <h2 class="text-xl font-bold mb-4">Select Materials</h2>

            <div>
                <input type="text" id="material-search" placeholder="Search materials..."
                    class="border px-3 py-2 w-full rounded mb-2" />
                <ul id="material-results" class="border rounded max-h-48 overflow-y-auto hidden "></ul>
            </div>

            <div class="mt-4">
                <h3 class="font-semibold mb-2">Selected Materials:</h3>
                <ul id="selected-materials" class="space-y-2 flex gap-2 flex-wrap">
                    @foreach ($selectedMaterials as $material)
                        <li class="flex justify-between items-center bg-gray-100 p-2 rounded selected-item">
                            <span>{{ $material->name }}</span>
                            <button type="button"
                                class="text-red-500 text-sm remove-material ms-5 cursor-pointer">Remove</button>

                            {{-- <input type="hidden" name="materials[]" value="{{ $material->id }}"> --}}
                            <input type="hidden" name="formula_ids[{{ $material->formula_id }}]"
                                value="{{ $material->formula_id ?? '' }}">
                        </li>
                    @endforeach
                </ul>
            </div>

            {{-- Extra Variables Section --}}
            <div class="mb-4 mt-6">
                <label class="block mb-2 font-semibold">Extra Variables</label>
                <div id="variables-wrapper" class="space-y-2">
                    @foreach ($signType->variables as $variable)
                        <div class="grid grid-cols-12 gap-2 items-center">
                            <input type="hidden" name="variables[{{ $loop->index }}][id]" value="{{ $variable->id }}">
                            <div class="col-span-4">
                                <input type="text" name="variables[{{ $loop->index }}][name]"
                                    value="{{ old("variables.$loop->index.name", $variable->name) }}"
                                    class="w-full border p-2 rounded" placeholder="Name" required>
                            </div>
                            <div class="col-span-3">
                                <input type="number" step="0.0001" name="variables[{{ $loop->index }}][price]"
                                    value="{{ old("variables.$loop->index.price", $variable->price) }}"
                                    class="w-full border p-2 rounded" placeholder="Price">
                            </div>
                            <div class="col-span-3">
                                <input type="text" name="variables[{{ $loop->index }}][uom]"
                                    value="{{ old("variables.$loop->index.uom", $variable->uom) }}"
                                    class="w-full border p-2 rounded" placeholder="UOM">
                            </div>
                            <div class="col-span-2">
                                <button type="button" class="text-red-500 text-sm remove-btn">Remove</button>
                            </div>
                        </div>
                    @endforeach
                </div>
                <button type="button" onclick="addVariable()"
                    class="mt-2 bg-green-500 text-white px-3 py-1 rounded text-sm">+ Add Variable</button>
            </div>

            <hr class="my-6">
            <h3 class="font-semibold text-lg mb-2">Assign Modules</h3>

            <div class="grid grid-cols-2 gap-4 mb-4">
                @foreach ($allModules as $module)
                    <label class="flex items-center space-x-2">
                        <input type="checkbox" name="modules[]" value="{{ $module->id }}"
                            {{ in_array($module->id, $assignedModules) ? 'checked' : '' }}
                            class="form-checkbox h-4 w-4 text-blue-600">
                        <span>{{ $module->name }}</span>
                    </label>
                @endforeach
            </div>

            {{-- Buttons --}}
            <div class="flex gap-2 mt-4">
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Save</button>
                <a href="{{ route('sign-types.index') }}" class="text-gray-600 px-4 py-2">Cancel</a>
            </div>
        </form>
    </div>

    {{-- JavaScript --}}
    <script>
        const materials = @json($allMaterials);
        const resultsList = document.getElementById('material-results');
        const selectedList = document.getElementById('selected-materials');
        const searchBox = document.getElementById('material-search');

        searchBox.addEventListener('input', function() {
            const query = this.value.toLowerCase();
            resultsList.innerHTML = '';
            const filtered = materials.filter(m => m.name.toLowerCase().includes(query));

            if (filtered.length) {
                resultsList.classList.remove('hidden');
                filtered.forEach(m => {
                    const li = document.createElement('li');
                    li.textContent = m.name;
                    li.classList.add('cursor-pointer', 'hover:bg-gray-100', 'px-3', 'py-2');
                    li.onclick = () => {
                        searchBox.focus();
                        selectMaterial(m)
                    };
                    resultsList.appendChild(li);
                });
            } else {
                resultsList.classList.add('hidden');
            }
        });

        function selectMaterial(material) {

            const li = document.createElement('li');
            li.className = 'flex justify-between items-center bg-gray-100 p-2 rounded selected-item ';
            li.innerHTML = `
            <span>${material.name}</span>
            <button type="button" class="text-red-500 text-sm remove-material ms-5">Remove</button>
            <input type="hidden" name="materials[]" value="${material.id}">
        `;
            selectedList.appendChild(li);

            // Rebind remove button for newly added material
            li.querySelector('.remove-material').addEventListener('click', function() {
                this.closest('.selected-item').remove();
            });

            searchBox.value = '';
            resultsList.classList.add('hidden');
        }

        // Bind remove button for pre-loaded materials
        document.querySelectorAll('.remove-material').forEach(button => {
            button.addEventListener('click', function() {
                this.closest('.selected-item').remove();
            });
        });

        let variableIndex = {{ $signType->variables->count() }};

        function addVariable() {
            const wrapper = document.getElementById('variables-wrapper');
            const div = document.createElement('div');
            div.className = 'grid grid-cols-12 gap-2 items-center';

            div.innerHTML = `
            <div class="col-span-4">
                <input type="text" name="variables[${variableIndex}][name]" class="w-full border p-2 rounded" placeholder="Name" required>
            </div>
            <div class="col-span-3">
                <input type="number" step="0.0001" name="variables[${variableIndex}][price]" class="w-full border p-2 rounded" placeholder="Price">
            </div>
            <div class="col-span-3">
                <input type="text" name="variables[${variableIndex}][uom]" class="w-full border p-2 rounded" placeholder="UOM">
            </div>
            <div class="col-span-2">
                <button type="button" class="text-red-500 text-sm remove-btn">Remove</button>
            </div>
        `;

            wrapper.appendChild(div);
            div.querySelector('.remove-btn').addEventListener('click', () => div.remove());
            variableIndex++;
        }

        // Remove buttons for existing variables
        document.querySelectorAll('.remove-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                this.closest('.grid').remove();
            });
        });
    </script>
@endsection