@extends('layouts.admin') 

@section('style')
    @parent
    <link rel="stylesheet" href="/css/autocomplete.css">

    <style type="text/css">
        .badge.badge-warning.added {
            background: red;
            color: #fff;
        }

        .badge {
            margin-right: 5px;
        }

         

        .place-added {
            background-color: #eee;
        }

        button, .badge-primary {
            cursor: pointer;
        }
    </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['name'] }}</h5>
                    </a>
                    <p class="description">
                      {{ $user['email'] }}
                    </p>
                  </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">Places</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">
                <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>Longitude</th>
                                {{-- <th>Latitude</th> --}}
                                <th>Delivery</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($places)
                                @foreach($places as $place)
                                    <tr class="{{ isset($place['added']) && $place['added'] ? 'place-added' : '' }}">
                                        <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['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
                                        </td>
                                        <td>{{ isset($place['created']) ? $place['created'] : "" }}</td>
                                        {{-- <td>
                                            
                                        </td> --}}
                                        <td>
                                            <a href="{{ route('edit_place', ['slug' => $place['slug']])}}" target="_blank">Edit</a> | 
                                            <a href="{{ route('admin_new_places_add', ['slug' => $place['slug']]) }}">Add</a> | 
                                            <a href="{{ route('admin_add_place_food', ['place_slug' => $place['slug']])}}" target="_blank">Add Food</a> | 
                                            <a data-slug="{{ $place['slug'] }}" href="{{ route('delete_place', ['slug' => $place['slug']])}}" class="delete-one">Delete</a>
                                        </td>
                                    </tr>
                                    <tr class="{{ isset($place['added']) && $place['added'] ? 'place-added' : '' }}" data-place="{{ $place['slug'] }}">
                                        <td colspan="9">
                                            <div class="food-details">
                                                @isset($place['food'])
                                                    @foreach($place['food'] as $food)
                                                        <span class="badge badge-warning {{ isset($food['added']) && $food['added'] ? 'added' : ''}}" data-id="{{ $food['_id'] }}">
                                                            {{ $food['name'] ?? '' }} - {{ $food['price'] ?? '' }} 
                                                            <span class="action-buttons">
                                                                <a href="#" class="delete-food" data-id="{{ $food['_id'] }}" data-name="{{ $food['name'] ?? '' }}">
                                                                    <i class="fa fa-times"></i>
                                                                </a>
                                                            </span>
                                                        </span>
                                                    @endforeach
                                                @endisset
                                            </div>
                                            <div class="place-details">
                                                <button class="btn btn-success find-place">Search</button>
                                            </div>
                                        </td>
                                        <td colspan="9">hello</td>
                                    </tr>
                                    <tr class="{{ isset($place['added']) && $place['added'] ? 'place-added' : '' }}" data-place="{{ $place['slug'] }}">
                                        @if(isset($place['image']))
                                          @foreach($place['image'] as $image)
                                            <td>
                                                <a href="{{ $image }}" target="_blank">
                                                    <img src="{{ $image }}" alt="{{ $place['name'] }}" />
                                                </a>
                                                <a class="delete-picture" href="{{ route('delete_new_place_picture', ['slug' => $place['slug'], 'index' => $loop->index])}}">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                                {{-- <a class="fix-image" href="{{ route('fix_images', ['slug' => $place['slug']])}}">Fix</a> --}}
                                                <a class="add-image" data-img="{{ $image }}" href="#">Add</a>
                                            </td>
                                          @endforeach
                                        @endif
                                    </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 src="/js/js-autocomplete.js"></script>
    <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/new/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')
            }
        });

        const headers = {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('value')
        }

        const gotohref = (e) => {
            e.preventDefault()
            const $target = $(e.currentTarget);
            
            // 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);
            gotohref(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);
            gotohref(e).then(response => {
                const $row = $target.closest('div')
                $row.fadeOut();
                // $row.next().fadeOut();
            })
        });

        $('.fix-image').on('click', function(e){
            e.preventDefault();
            const url = $(e.currentTarget).attr('href');
            console.log(url)
            fetch(url, {credentials: 'same-origin', headers: {'X-Requested-With': 'XMLHttpRequest'}})
            .then(response =>response.json())
            .then(result => console.log(result))
        });

        // var images = [];

        $('.add-image').on('click', function(e){
            e.preventDefault();
            const {img} = e.currentTarget.dataset;
            const {oldplace} = e.target.closest('tr').dataset
            // images.push(img)
            fetch(`/api/place/pictures/add/${oldplace}`, {credentials: 'same-origin', method: 'PATCH', body: JSON.stringify({link: img}), headers: Object.assign({'X-Requested-With': 'XMLHttpRequest'}, headers)})
            .then(response =>response.json())
            .then(result => console.log({result}))
            .catch(error => {
                console.error({error})
            })
        });

        function removePrevFoodButtons(container){
            container.closest('td').querySelectorAll('.fa.fa-plus, .badge-primary').forEach(addFoodButton => {
                addFoodButton.style.display = 'none'
            })
        }

        const getOldFoodBadge = fd => {
            const oldFood = document.createElement('span')
            oldFood.classList.add('badge', 'badge-primary')
            oldFood.textContent = `${fd.name} - ${fd.price}`
            oldFood.dataset.id = fd.key
            oldFood.addEventListener('click', function(e){
                
                fetch(`/admin/food/delete/${fd.key}`, {credentials: 'same-origin', method: 'DELETE', headers})
                .then(response => response.json())
                .then(status => {
                    oldFood.style.display = 'none';
                })
            })
            return oldFood
        }

        // var inputs = [];
        
        document.querySelectorAll('.find-place').forEach(findPlaceButton => {
            findPlaceButton.addEventListener('click', function(e){
                e.preventDefault()

                // clear previous input
                const oldInput = findPlaceButton.closest('.place-details').querySelectorAll('.old-place-details')
                console.log(oldInput)
                if(oldInput.length) oldInput.forEach(olds => olds.style.display = 'none')
                // inputs.forEach(inp => inp.style.display = 'none')
                const place_details = findPlaceButton.closest('.place-details');
                const container = document.createElement('div')
                container.classList.add('old-place-details')
                const input = document.createElement('input')
                const removeInput = document.createElement('button')
                removeInput.setAttribute('type', 'button')
                removeInput.classList.add('btn')
                removeInput.classList.add('btn-danger')
                removeInput.innerHTML = '<i class="fa fa-times"></i></a>';
                input.classList.add('form-control')
                input.classList.add('place-name')
                input.setAttribute('placeholder', 'Find place')
                place_details.appendChild(container)
                container.appendChild(input)
                container.appendChild(removeInput)
                removeInput.addEventListener('click', function(e){
                    removePrevFoodButtons(container)
                    container.style.display = 'none';
                })
                
                autoComplete({
                    input: input,
                    fetch: async function(text, update) {
                        text = text.toLowerCase();
                        var suggestions = await $.get(`/api/place/search/${text}`)
                        update(suggestions)
                    },
                    onSelect: async function({name, slug}) {
                        input.value = name;
                        const detailsRow = place_details.closest('tr')
                        detailsRow.dataset.oldplace = slug
                        detailsRow.nextElementSibling.dataset.oldplace = slug

                        removePrevFoodButtons(container)

                        // get pirctures of matching place
                        fetch(`/api/place/pictures/${slug}`, {credentials: 'same-origin'})
                        .then(response => response.json())
                        .then(res => {
                            console.log(res)
                            if(res.status == 'success' && res.pictures.length) {
                                const imagesWrapper = document.createElement('div')
                                images = res.pictures || []
                                res.pictures.forEach((pic, index) => {
                                    const img = document.createElement('img')
                                    const deleteButton = document.createElement('i')
                                    img.src = pic;
                                    img.style.width = '200px';
                                    imagesWrapper.appendChild(img)
                                    deleteButton.classList.add('fa', 'fa-times')
                                    imagesWrapper.appendChild(deleteButton)
                                    deleteButton.addEventListener('click', function(e){
                                        e.preventDefault();
                                        fetch(`/place/image/delete/${slug}/${index}`, {credentials: 'same-origin', method: 'DELETE', headers})
                                        .then(response => response.json())
                                        .then(res => {
                                            if(res.status && res.status == 'success'){
                                                img.style.display = 'none'
                                                deleteButton.style.display = 'none'
                                            }
                                        })
                                    })
                                })

                                container.appendChild(imagesWrapper)
                            }
                        })

                        // get food list for matching place
                        fetch(`/api/place/food/get/${slug}`, {credentials: 'same-origin'})
                        .then(response => response.json())
                        .then(foods => {
                            if(foods.length){
                                const oldFoodWraper = document.createElement('div')
                                oldFoodWraper.classList.add('old-food-list')

                                // match each food item to a badge UI and 
                                // add an event listener to delete on click
                                oldFoodBadges = foods.map(getOldFoodBadge)
                                oldFoodBadges.forEach(oldFoodBadge => {
                                    oldFoodWraper.appendChild(oldFoodBadge)
                                })
                                container.insertBefore(oldFoodWraper, input)
                            }
                        })
                        container.closest('td').querySelectorAll('.badge').forEach(badge => {
                            // add a + icon to each food item and a click event listener to add that food item to matched place
                            const a = document.createElement('a')
                            a.innerHTML = '<i class="fa fa-plus"></i>';
                            badge.appendChild(a);
                            a.addEventListener('click', function(e){
                                e.preventDefault();
                                fetch(`/admin/food/add/${slug}/${badge.dataset.id}`, {credentials: 'same-origin'})
                                .then(response => response.json())
                                .then(result => {
                                    console.log(result)
                                    if(result.status == 'success') {
                                        // input.style.display = 'none';
                                        badge.style.display = 'none';
                                        container.querySelector('.old-food-list').appendChild(getOldFoodBadge(result.food))
                                    }
                                }).catch(error => console.error(error))
                            })
                        })
                        
                    }
                });
            })
        })

        
        
		
    </script>
@endsection