@extends('layouts.app')

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

@section('content')
    @php
        $allMaterials = \App\Models\SignMaterial::all();
    @endphp

    <style>
        .itemmmmm {
            width: max-content;

        }
    </style>

    <div class="mx-auto bg-white p-6 rounded shadow">
        <h1 class="text-xl font-bold mb-4">Add Sign Type</h1>

        <form action="{{ route('sign-types.store') }}" method="POST">
            @csrf

            {{-- Name --}}
            <div class="mb-4">
                <label class="block mb-1 font-semibold">Name</label>
                <input type="text" name="name" class="w-full border p-2 rounded" required>
            </div>

            {{-- Material Search --}}
            <h2 class="text-xl font-bold mb-4">Select Materials</h2>
            <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>

            {{-- Selected --}}
            <div class="mt-4">
                <h3 class="font-semibold mb-2">Selected Materials:</h3>
                <ul id="selected-materials" class="space-y-2 flex items-center gap-2  flex-wrap"></ul>
            </div>

            {{-- Variables --}}
            <div class="mb-4 mt-6">
                <label class="block mb-2 font-semibold">Extra Variables</label>
                <div id="variables-wrapper" class="space-y-2"></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>

            <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>

    {{-- <script>
        new TomSelect('#material-select', {
            plugins: ['remove_button'],
            placeholder: 'Search and select materials...',
            create: false,
            maxOptions: 500,
        });
    </script> --}}

    <script>
        const allMaterials = @json($allMaterials);
        const searchInput = document.getElementById('material-search');
        const resultsBox = document.getElementById('material-results');
        const selectedList = document.getElementById('selected-materials');

        searchInput.addEventListener('input', function() {
            const term = this.value.toLowerCase();
            resultsBox.innerHTML = '';

            if (term === '') {
                resultsBox.classList.add('hidden');
                return;
            }

            const filtered = allMaterials.filter(m => m.name.toLowerCase().includes(term));
            filtered.forEach(material => {
                const li = document.createElement('li');
                li.className = "p-2 cursor-pointer hover:bg-gray-100";
                li.textContent = material.name;
                li.dataset.id = material.id;
                li.addEventListener('click', () => addMaterial(material));
                resultsBox.appendChild(li);
            });

            resultsBox.classList.remove('hidden');
        });

        function addMaterial(material) {
            const li = document.createElement('li');
            li.className = 'flex justify-between items-center bg-gray-100 px-3 py-2 rounded itemmmmm';

            li.innerHTML = `
            <span>${material.name}</span>
            <div class="flex items-center gap-2">
                <input type="hidden" name="materials[]" value="${material.id}" />
                <button type="button" class="text-red-500 hover:text-red-700 text-sm ms-5" onclick="this.closest('li').remove()">Remove</button>
            </div>
        `;

            selectedList.appendChild(li);
            searchInput.value = '';
            searchInput.focus()
            resultsBox.classList.add('hidden');
        }

        function addVariable() {
            const wrapper = document.getElementById('variables-wrapper');
            const div = document.createElement('div');
            div.className = 'flex gap-2';

            div.innerHTML = `
            <input type="text" name="variables[][name]" placeholder="Variable Name" class="border p-1 rounded w-1/3" />
            <input type="number" name="variables[][price]" placeholder="Price" class="border p-1 rounded w-1/3" />
            <input type="text" name="variables[][uom]" placeholder="UOM" class="border p-1 rounded w-1/3" />
            <button type="button" onclick="this.parentElement.remove()" class="text-red-600 text-sm">x</button>
        `;

            wrapper.appendChild(div);
        }
    </script>

    <script>
        let variableIndex = document.querySelectorAll('#variables-wrapper .grid').length;

        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++;
        }
    </script>
@endsection