@extends('layouts.admin')

@section('extrastyle')
    <style>
      .action-links a {
        display: block;
        white-space: nowrap;
      }

      .add-image-input {
        display: flex; 
        flex-direction: column;
        padding-left: 5px;
      }
    </style>
@endsection

@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>Places</small>
                        </h5>
                      </div>
                      <div class="col-lg-4 col-md-6 col-6 ml-auto mr-auto">
                        <h5>{{ $foodCount }}
                          <br>
                          <small>Food</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" value="{{ $query }}" 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="food_count" {{ $sort == 'food_count' ? 'selected' : '' }}>Food Count</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>Food Count</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>
                                      {{-- @if(isset($place['delivery']) && $place['delivery'])
                                          @foreach($place['delivery'] as $delivery)
                                            {{ $delivery }} 
                                          @endforeach
                                      @endif --}}
                                      {{ $place['food_count'] }}
                                    </td>
                                    <td>{{ isset($place['created']) ? $place['created'] : "" }}</td>
                                    <td class="action-links">
                                        <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>
                                        <a href="{{ route('admin_edit_place_food', ['place' => $place['slug']])}}">Update 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>
                                <tr>
                                    <td colspan="10">
                                        @if(isset($place['food']))
                                            @foreach($place['food'] as $food)
                                                <span class="badge badge-warning">
                                                    {{ $food['name'] ?? '' }} - {{ $food['price'] ?? '' }} 
                                                    <a href="/admin/food/delete/{{ $food['_id'] }}" class="delete-one" data-id="{{ $food['_id'] }}" data-name="{{ $food['name'] ?? '' }}">
                                                        <i class="fa fa-times"></i>
                                                    </a>
                                                </span>
                                            @endforeach
                                        @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 $i => $image)
                                          <div class="place-img">
                                            <img src="{{ $image }}" style="width: 200px; margin-right: 5px;" alt="Place image">
                                            <div style="display: flex; justify-content: center; margin-top: 5px; font-size: 17px;"><a href="{{ route('delete_place_picture', ['slug' => $place['slug'], 'index' => $i]) }}"><i class="fa fa-times"></i></a></div>
                                          </div>
                                        @endforeach
                                        <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>
                                      </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>
        $('.delete-food').on('click', function(e){
            e.preventDefault();
            const $target = $(e.currentTarget);
            const _id = $target.data('id');
            const name = $target.data('name');
            var con = confirm('Are you sure you want to delete ' + name);
            if(con){
                fetch(`/admin/food/delete/${_id}`, {credentials: 'same-origin'})
                .then(response => response.json())
                .then(result => {
                    console.log(result)
                    $target.closest('.badge').fadeOut(300, function(){
                        $(this).remove();
                    })
                    // if(result.status === 'success'){
                        
                    // }
                }).catch(error => console.error(error))
            }else {
                console.log('no')
            }
        });

        // $(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))
        });

        document.querySelectorAll('.place-img a').forEach(plimg => {
          plimg.addEventListener('click', function(e) {
            e.preventDefault();
            let ans = confirm('Are you sure you want to delete this image');
            if (ans) {
              const container = e.target.closest('.place-img');
              deleteItem(e).then(res => {
                console.log(res)
                container.remove();
              })
            }
          })
        })

        $('.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