@extends('layouts.admin') 

@section('content')
    <div class="row">
        @if(isset($user))
            <div class="col-md-4">
              <div class="card card-user">
                <!-- <div class="image">
                  <img src="/admin-assets/img/damir-bosnjak.jpg" alt="...">
                </div> -->
                <div class="card-body">
                  <div class="author" style="margin-top:0;">
                    <a href="#">
                      <!-- <img class="avatar border-gray" src="../assets/img/mike.jpg" alt="..."> -->
                      <h5 class="title">{{ $user['email'] }}</h5>
                    </a>
                  </div>
                </div>
                <div class="card-footer">
                  <hr>
                  <div class="button-container">
                    <div class="row">
                      <div class="col-lg-3 col-md-6 col-6 ml-auto">
                        <h5>{{ $count }}
                          <br>
                          <small>{{ $title ?? 'Places' }}</small>
                        </h5>
                      </div>
                      <!-- <div class="col-lg-3 mr-auto">
                        <h5>24,6$
                          <br>
                          <small>Spent</small>
                        </h5>
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
        @endif
    </div>
    <div class="row">
      
      <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title" style="display: flex; justify-content: space-between;"><span>{{ $title ?? 'Places' }}</span> <small><a target="_blank" href="{{ route('admin_add_place') }}">Add</a></small></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>
                <div class="form-group d-flex">
                  <select name="sort" class="form-control" style="width: 200px; margin-right: 10px">
                    <option value="">Sort By</option>
                    <option value="place_name" {{ $sort == 'place_name' ? 'selected' : '' }}>Name</option>
                    <option value="image_count" {{ $sort == 'image_count' ? 'selected' : '' }}>Image</option>
                  </select>
                  <select name="order" class="form-control" style="width: 200px; margin-right: 10px">
                    <option value="1" {{ $order == 1 ? 'selected' : '' }}>ASC</option>
                    <option value="-1" {{ $order == -1 ? 'selected' : '' }}>DESC</option>
                  </select>
                  <button class="btn btn-primary" style="margin: 0">Sort</button>
                </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>Phone 1</th>
                                <th>Opening</th>
                                <th>Closing</th>
                                <th>Type</th>
                                <th>Longitude</th>
                                <th>Latitude</th>
                                <th>Created</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>{{ isset($place['phone']) ? $place['phone'] : "" }}</td>
                                    <td>{{ isset($place['opening']) ? $place['opening'] : "" }}</td>
                                    <td>{{ isset($place['closing']) ? $place['closing'] : "" }}</td>
                                    <td>{{ isset($place['type']) ? $place['type'] : "" }}</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>{{ isset($place['created']) ? $place['created'] : "" }}</td>
                                    <td>
                                        <a href="{{ route('admin_edit_place', ['slug' => $place['slug']])}}" target="_blank">Edit</a> | 
                                        <a href="{{ route('add_place_categories', ['slug' => $place['slug']])}}" target="_blank">Categories</a> | 
                                        <a href="{{ route('admin_add_place_food', ['place_slug' => $place['slug']])}}" target="_blank">Add Food</a> 
                                        @if (Auth::user() && Auth::user()->super)
                                        | 
                                        <a data-slug="{{ $place['slug'] }}" href="{{ route('delete_place', ['slug' => $place['slug']])}}" class="delete-one">Delete</a>
                                        @endif
                                    </td>
                                </tr>
                                @if(isset($place['tags']))
                                <tr>
                                  <td colspan="10">
                                    @foreach($place['tags'] as $tag)
                                      <span class="badge-primary" style="padding: 3px;">{{ $tag }}</span>
                                    @endforeach
                                  </td>
                                </tr>
                                @endif
                                @if(isset($place['image'])) 
                                <tr>
                                  <td colspan="10">
                                    <div class="place-imgs" style="display: flex;">
                                      @foreach ($place['image'] as $image)
                                        <div class="place-img">
                                          <img src="{{ $image }}" style="width: 200px; margin-right: 5px;" alt="Place image">
                                        </div>
                                      @endforeach
                                    </div>
                                  </td>
                                </tr>
                                @endif
                                @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="{{ $prev }}" class="btn btn-primary btn-round">Previous</a>
				      @endif
				@if($next)
					<a href="{{ $next }}" class="btn btn-primary btn-round">Next</a>
				@endif
              
            </div>
        </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>

        // $(document).ready( function () {
        //     $('.table').DataTable();
        // } );

        const deleteItem = (e) => {
            e.preventDefault()
            const $target = $(e.currentTarget);
            const headers = {
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('value')
            }
            // const id = $target.data('id');
            const link = $target.attr('href');
            return fetch(link, {credentials: 'same-origin', method: 'DELETE', headers})
                    .then(response => {
                        console.log(response)
                        return response.json()
                    })
                    .catch(error => console.error(error))
        }

        $('.delete-one').on('click', function(e){
            const $target = $(e.currentTarget);
            deleteItem(e).then(response => {
                const $row = $target.closest('tr')
                $row.fadeOut();
                $row.next().fadeOut();
            }).catch(error => console.error(error))
        })

        $('.delete-picture').on('click', function(e){
            const $target = $(e.currentTarget);
            deleteItem(e).then(response => {
                const $row = $target.closest('div')
                $row.fadeOut();
                // $row.next().fadeOut();
            })
        })
    </script>
@endsection