@extends('admin.template')

@section('content')
<h1 class="text-2xl text-center my-4">Opciones de {{ \Request::get('opcion') }}</h1>
<form class="" method="POST" action="{{ route('user-options.store', $user_option_id) }}">
<div>
    <button type="button" class="button-add" id="AddRow">Agregar</button>
    <button type="submit" class="button-save">Guardar</button>
</div>
    @csrf
    @method('POST')
    <table class="table-auto mt-4 stock-table">
        <thead class="table-primary text-white px-2 py-2">
            <td class="px-2 py-2">Opción ID</td>
            <td class="px-2 py-2">Eliminar</td>
        </thead>

        <tr class="row bg-white">
            <td>
                <div class="form-field">
                    <select class="w-full" name="opcion[]" id="" required>
                        <option value="">Seleccionar Valor</option>
                        @foreach($options as $option)
                        <option value="{{ $option->id }}">{{ $option->nombre }}</option>
                        @endforeach
                    </select>
                </div>
            </td>
            <td><button class="relative delete-icon" type="submit">
                 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                    <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" />
                 </svg>
                </button>
            </td>
        </tr>
        @foreach($user_options as $user_option)
        <tr class="bg-white">
            <td class="px-2 py-2 {{ $user_option['parent_id'] != null ? 'px-6' : '' }}"><a class="text-sky-600 font-bold" href="{{ route('user-options.edit', [$user_option_id, $user_option['id']]) }}">{{ $user_option['menu_id'] .' '. $user_option["opcion"] }}</a></td>
            <td class="px-2 py-2">
                <button class="relative delete-icon" type="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                        <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" />
                    </svg>
                </button>
            </td>
        </tr>
        @endforeach
    </table>
</form>
@endsection

@section('js-scripts')
<script>
    (function() {
        let stock = document.querySelector('.stock-table')
        let rows = document.querySelectorAll('.row');
        let lastRow = rows[rows.length - 1];
        let addRow = document.querySelector('#AddRow')
        let deleteIcons = document.querySelectorAll('.delete-icon')


        stock.addEventListener('click', function(e){
            deleteIcons.forEach(function(deleteIcon) {
                if(e.target.classList.contains('delete-icon')){
                    alert('click')
                    let parentRow = deleteIcon.parentElement.parentElement;
                    console.log(parentRow)
                    // parentRow.remove()
                    console.log(deleteIcon)
                }
      
            })
        })

        function insertAfter(e,i){ 
            if(e.nextSibling){ 
                e.parentNode.insertBefore(i,e.nextSibling); 
            } else { 
                e.parentNode.appendChild(i); 
            }
        }


        addRow.addEventListener('click', function(e) {
            e.preventDefault();

            let newRow = lastRow.cloneNode(true)

            insertAfter(lastRow, newRow)
            // stock.appendChild(newRow)
        })

        
    })()
</script>
@endsection