@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">Places</h4>
                <form action="{{ route($link) }}">
                    <div class="input-group no-border">
                      <input type="text" name="place" class="form-control" value="{{ $query }}" 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">
                <div class="table-responsive">
                    <table class="table">
                        <thead class="text-primary">
                            <tr>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Popular</th>
                                <th>Enable</th>
                                <th>Image</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($places)
                                @foreach($places as $place)
                                    <tr>
                                        <td>
                                            <a href="{{ route('places.show', ['place' => $place['slug']]) }}">
                                                {{ isset($place['name']) ? $place['name'] : "" }}
                                            </a>
                                        </td>
                                        <td>{{ isset($place['address']) ? $place['address'] : "" }}</td>
                                        <td><input type="checkbox" data-href="{{ route('make_popular', ['slug' => $place['slug']])}}" class="form-control make-popular" {{ isset($place['popular']) && $place['popular'] ? 'checked' : '' }}></td>
                                        <td><input type="checkbox" data-href="{{ route('enable', ['slug' => $place['slug']])}}" class="form-control enable" {{ isset($place['enabled']) && $place['enabled'] ? 'checked' : '' }}></td>
                                        {{-- <td>{{ isset($place['location']) && isset($place['location']['coordinates']) ? $place['location']['coordinates'][0] : "" }}</td> --}}
                                        {{-- <td>{{ isset($place['location']) && isset($place['location']['coordinates']) ? $place['location']['coordinates'][1] : "" }}</td> --}}
                                        <td>
                                            @if (isset($place['image']) && count($place['image']))
                                                <img style="width: 200px" src="{{  $place['image'][0] }}" alt="Place Image">
                                            @else
                                                <div class="add-image">
                                                    <form action="{{ route('add_place_picture', ['slug' => $place['slug']]) }}" method="POST" enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="form-group add-image-input">
                                                        <label>Add Image</label>
                                                        <input type="file" name="image">
                                                    </div>
                                                    <button class="btn btn-primary">Submit</button>
                                                    </form>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="{{ route('admin_edit_place', ['slug' => $place['slug']])}}" target="_blank">Edit</a> | 
                                            {{-- <a href="{{ route('franchise', ['id' => $place['slug']]) }}" target="_blank">Franchise</a> --}}
                                            {{-- <a data-slug="{{ $place['slug'] }}" href="{{ route('make_popular', ['slug' => $place['slug']])}}" class="popular-one">Popular</a> --}}
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="10" class="text-center">No Places</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="pagination" style="padding-left: 20px;">
                @if($prev)
                    <a href="{{ route($link, ['page' => $page-1])}}" class="btn btn-primary btn-round">Previous</a>
                @endif
                @if($next)
                    <a href="{{ route($link, ['page' => $page+1])}}" class="btn btn-primary btn-round">Next</a>
                @endif
              
            </div>
        </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>

        // document

        const gotohref = (link) => {
            
            return fetch(link, {credentials: 'same-origin'})
                    .then(response => {
                        console.log(response)
                        return response.json()
                    })
                    .catch(error => console.error(error))
        }

        document.querySelectorAll('.make-popular').forEach(makes => {
            makes.addEventListener('change', function(e){
                e.preventDefault()
                e.target.setAttribute('disabled', true)
                const target = e.target
                const link = `${target.dataset.href}/${target.checked ? "yes" : "no"}`;
                
                gotohref(link).then(response => {
                    e.target.setAttribute('disabled', false)
                }).catch(error => console.error(error))
            })
        });

        document.querySelectorAll('.enable').forEach(makes => {
            makes.addEventListener('change', function(e){
                e.preventDefault()
                e.target.setAttribute('disabled', true)
                const target = e.target

                const headers = {
                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('value'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
                fetch(target.dataset.href, {method: 'POST', body: JSON.stringify({checked: target.checked ? "yes" : "no"}), headers})
                .then(response => response.json())
                .then(({status}) => {
                    if(status == 'success'){
                        console.log('done')
                        e.target.removeAttribute('disabled')
                    }else {
                        console.log('not')
                    }
                }).catch(error => console.log(error))
            })
        });
    </script>
@endsection