@extends('layouts.admin')

@section('style')
    @parent
    <style>
        .form-check .form-check-label {
            padding-right: 5px;
        }

        .table {
            table-layout: fixed;
        }
    </style>
@endsection

@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">Places</h4>
                <form action="">
                    <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">
                {{-- <form action="{{ route('save_place_food_category', ['slug' => $place['slug']]) }}" method="POST"> --}}
                    {{-- @csrf --}}
                    <h4>Food categories for {{ $place['name'] }}</h4>
                    <a class="btn btn-warning" href="{{ route('add_place_categories', ['slug' => $place['slug']]) }}"> <i class="fa fa-arrow-left"></i> Add Categories</a>
                    <div class="table-responsive">
                        <table class="table">
                            <thead class="text-primary">
                                <tr>
                                    <th>Name</th>
                                    <th>Price</th>
                                    <th>Description</th>
                                    <th>Categories</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($place['food'] as $food)
                                    <tr>
                                        <td>
                                            {{ $food['name'] }}
                                        </td>
                                        <td>{{ $food['price'] }}</td>
                                        <td>{{ $food['description'] }}</td>
                                        <td>
                                            @foreach ($place['category'] as $category)
                                                @php
                                                    $id = $food['_id'] . '-' . $loop->index;
                                                @endphp 
                                                <div class="form-check form-check-inline">
                                                    <label for="{{ $id }}" class="form-check-label">{{ $category }}</label>
                                                    <input type="radio" id="{{ $id }}" name="{{ $food['_id'] }}" value="{{ $category }}" class="form-check-input food-category" {{ isset($food['category']) && $food['category'] == $category ? 'checked' : '' }}>
                                                </div>
                                            @endforeach
                                            <div class="form-check form-check-inline">
                                                <label for="none" class="form-check-label">None</label>
                                                <input type="radio" id="none" name="{{ $food['_id'] }}" value="" class="form-check-input food-category" {{ !isset($food['category']) || !$food['category'] ? 'checked' : '' }}>
                                            </div>
                                        </td>
                                        
                                        <td>
                                            <a href="#" class="delete-food" data-id="{{ $food['_id'] }}" data-name="{{ $food['name'] ?? '' }}">
                                                Delete
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{-- <button class="btn btn-primary">SUBMIT</button> --}}
                {{-- </form> --}}
            </div>
        </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const headers = {
            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('value'),
            'X-Requested-With': 'XMLHttpRequest'
        }
        $('.delete-food').on('click', function(e){
            e.preventDefault();
            const $target = $(e.currentTarget);
            const _id = $target.data('id');
            const name = $target.data('name');
            
            fetch(`/admin/food/delete/${_id}`, {credentials: 'same-origin', method: 'DELETE', headers})
                .then(response => response.json())
                .then(result => {
                    console.log(result)
                    $target.closest('tr').fadeOut(300, function(){
                        $(this).remove();
                    })
                    // if(result.status === 'success'){
                        
                    // }
                }).catch(error => console.error(error))
        });

        document.querySelectorAll('.food-category').forEach(radio => {
            radio.addEventListener('change', function(e){
                fetch('/admin/food/category', {
                    method: 'PATCH', 
                    body: JSON.stringify({category: e.target.value, id: e.target.getAttribute('name')}),
                    headers
                }).then(response => response.json())
                .then(({status}) => console.log(status))
            })
        });


    </script>
@endsection