@extends('layouts.panel.admin')
@section('main')
    <div>
        <div class="mb-2">Categoria</div>
        <div class="flex justify-between">
            <x-table-search />
            <x-primary-button id="create" class="h-full" data-modal-target="default-modal"
                data-modal-toggle="default-modal">Criar</x-primary-button>
        </div>
        <x-table-panel>
            <x-table-thread>
                <th scope="col" class="px-3 py-3">Image</th>
                <th scope="col" class="px-3 py-3">Nome</th>
                <th>Código</th>
                <th>Tipo</th>
                <th colspan="2" class="text-center">Acção</th>
            </x-table-thread>
            <x-table-body>
                @foreach ($categories as $category)
                    <tr class="" id="item-{{ $loop->index }}" data-url="{{ route('categories.update', $category->uuid) }}">
                        <td class="item-icon p-5">
                            @php $url = asset("storage/{$category->icon}"); @endphp
                            @if (filter_var($url, FILTER_VALIDATE_URL))
                                <img src="{{ $url }}" class="rounded-full w-10 h-10" />
                            @else
                                <span class="bg-red-800 text-white rounded-full p-1">Indefinido</span>
                            @endif
                        </td>
                        <td class="item-name">{{ $category->name }}</td>
                        <td class="item-code">{{ $category->code ?? '-' }}</td>
                        <td class="item-type">{{ $category->type ?? '-' }}</td>
                        <td class="text-yellow-500 item-edit cursor-pointer" data-index="{{ $loop->index }}"
                            data-modal-target="default-modal" data-modal-toggle="default-modal">editar</td>
                        <td class="text-red-500">eliminar</td>
                    </tr>
                @endforeach
            </x-table-body>
        </x-table-panel>

        <div class="mt-3">
            {{ $categories->links() }}
        </div>

        <div id="default-modal" tabindex="-1" aria-hidden="true"
            class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
            <form id="form-crud" class="relative p-4 w-full max-w-4xl max-h-full" action="{{ route('categories.store') }}"
                method="POST" enctype="multipart/form-data">
                @csrf
                @method('POST')
                <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
                    <div
                        class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                            Formulário
                        </h3>
                        <button type="button"
                            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                            data-modal-hide="default-modal">
                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                viewBox="0 0 14 14">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                            </svg>
                            <span class="sr-only">Close modal</span>
                        </button>
                    </div>
                    <div class="p-4 md:p-5 space-y-4">
                        <div class="grid gap-6 mb-6 md:grid-cols-2">
                            <div>
                                <label for="name"
                                    class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nome</label>
                                <input type="text" id="name" name="name"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                    placeholder="" required />
                            </div>
                            <div>
                                <label for="code"
                                    class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Código</label>
                                <input type="text" id="code" name="code"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                    placeholder="" required />
                            </div>
                            <div>
                                <label for="type"
                                    class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Seleciona o
                                    tipo</label>
                                <select id="type" name="type"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                    <option selected>Escolha o tipo</option>
                                    <option value="product">Produto</option>
                                    <option value="service">Serviço</option>
                                </select>
                            </div>
                            <div>
                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                                    for="file_input">Imagem</label>
                                <input
                                    class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                                    id="file_input" type="file" name="file" />
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                        <button data-modal-hide="default-modal" type="submit"
                            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                            Confirma
                        </button>
                        <button data-modal-hide="default-modal" type="button"
                            class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
                            Cancelar
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        const btnCreate = document.querySelector("#create");
        const formCrud = document.querySelector('#form-crud');
        const method = document.querySelector('[name="_method"]');
        const itemEdits = document.querySelectorAll('.item-edit');

        function fillFormFields(name = "", code = "", type = "") {
            document.querySelector('#name').value = name;
            document.querySelector('#code').value = code;
            document.querySelector('#type').value = type;
        }

        btnCreate.addEventListener('click', () => {
            fillFormFields();
            formCrud.action = "{{ route('categories.store') }}";
            method.value = "POST";
        });

        itemEdits.forEach(item => {
            item.addEventListener('click', () => {
                const tr = document.querySelector(`tr#item-${item.dataset.index}`);
                fillFormFields(
                    tr.querySelector('.item-name').innerHTML.trim(),
                    tr.querySelector('.item-code').innerHTML.trim(),
                    tr.querySelector('.item-type').innerHTML.trim(),
                );
                formCrud.action = tr.dataset.url;
                method.value = "PUT";
            });
        })
    </script>
@endsection