@extends('layouts.admin') 

@section('content')
<div class="row">
</div>
<div class="row">
  
  <div class="col-md-12">
    <div class="card">
        {{-- <div class="card-header">
            <h4 class="card-title">Place - {{ $place->name }}</h4>
            <form action="{{ route($link) }}">
                <div class="input-group no-border">
                  <input type="text" name="place" class="form-control" placeholder="Search...">
                  <div class="input-group-append">
                    <div class="input-group-text">
                      <button style="border: none; background: transparent; padding: 0; margin: 0; cursor: pointer;"><i class="nc-icon nc-zoom-split"></i></button>
                    </div>
                  </div>
                </div>
            </form>
        </div> --}}

        <div class="card-body">
            <h3>Add Categories for {{ $place['name'] }}</h3>
            <div class="old-category">
                @if (isset($place['category']))
                    @foreach ($place['category'] as $category)
                        <span class="badge badge-warning" data-cat={{ $category }}>
                            {{ $category }} <span class="fa fa-times remove-cat" data-index=""></span>
                        </span>
                    @endforeach
                @endif
            </div>
            <form action="{{ route('add_category', ['slug' => $place['slug']]) }}" class="place-form" method="POST">
                <div class="form-group">
                    <input type="text" name="category" class="form-control category-input">
                </div>
                <button class="btn btn-primary">Add</button>
                <a href="{{ route('place_food_category', ['slug' => $place['slug']]) }}" class="btn btn-success">Food Categories</a>
            </form>
        </div>
    </div>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        const categoryTemplate = (category, index) => `
			<span class="badge badge-warning" data-cat=${category}>
				${category} <span class="fa fa-times remove-cat" data-index="${index}"></span>
			</span>
		`;

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

        document.querySelector('.place-form').addEventListener('submit', function(e){
            e.preventDefault();
            if (document.querySelector('.category-input').value) {
                
                postForm(e)
                .then(response => {
                    console.log(response)
                    document.querySelector('.old-category').innerHTML = response.payload.category.map(categoryTemplate).join("")
                    e.target.reset()
                })
            }else {
                alert('enter category')
            }
        });
    </script>
@endsection