@extends('layouts.admin') 

@section('content')
<div class="row">
    
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin_find_food_by_name') }}" class="place-form" method="GET">
                    <div class="form-group">
                        <input type="text" name="food" class="form-control" placeholder="Find food to add tags" value="{{ $query }}">
                    </div>
                    <button class="btn btn-primary"><i class="fa fa-search"></i></button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin_add_tags_to_food') }}" method="POST" class="add-tag-form">
                    @csrf
                    <div class="food-container">
                        @if (count($foods))
                            @foreach ($foods as $food)
                                <div class="food-info" style="display: inline;">
                                    <span class="badge badge-warning" style="font-size: 13px; margin: 3px;">
                                        {{ $food['name'] }} ({{ $food['place_name'] ?? '' }}) <span class="fa fa-times remove-food" data-food="{{ $food['name'] }}" data-id="{{ $food['id'] }}"></span>
                                    </span>
                                    <input type="hidden" name="food[]" value="{{ $food['id'] }}">
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <input type="hidden" name="foodname" value="{{ $query }}">
                    <div style="margin-top: 20px">
                        <h4>Add Tag</h4>
                        <div class="added-tags"></div>
                        <div class="form-group">
                            <input type="text" name="tag[]" class="form-control add-tag" placeholder="Enter tag">
                        </div>
                        <div class="form-group" style="display: flex; justify-content: space-between">
                            <button type="button" class="btn btn-primary add-tag-button">Add more</button>
                            <button class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    <script>
        let tagCount = 0;
        const tagTemplate = (tag, index) => `
			<span class="badge badge-warning" data-cat="${tag}" data-index="${index}">
                <input type="hidden" name="tag[]" value="${tag}" />
				${tag} <span class="fa fa-times remove-cat"></span>
			</span>
		`;

        // remove category
        // document.querySelectorAll('.food-container').forEach(cate => {
        //     cate.addEventListener('click', function(e){
        //         if(e.target.matches('.remove-food')){
        //             console.log('remove food: ' + e.target.closest('span').dataset.food)
        //         }
        //     })
        // })

        document.querySelectorAll('.remove-food').forEach(f => {
            f.addEventListener('click', function(e) {
                e.stopPropagation();
                let span = e.target.closest('.food-info');
                if(span) {
                    span.remove();
                }
                // console.log('remove food: ' + span.dataset.food + ' with id: ' + span.dataset.id)
            })
        })

        document.querySelector('.add-tag-button').addEventListener('click', function(e){
            e.preventDefault();
            let tag = document.querySelector('.add-tag').value;
            if (tag) {
                document.querySelector('.added-tags').innerHTML += tagTemplate(tag, ++tagCount);
                document.querySelector('.add-tag-form').reset();
            }
        });
    </script>
@endsection