Elep

@extends('layouts.admin')

@section('content')
    <div class="row">
      
      <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Places ({{ count($places) }})</h4>
            </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>Phone 2</th>
                                    <th>Opening</th>
                                    <th>Closing</th>
                                    <th>Longitude</th>
                                    <th>Latitude</th>
                                    <th>Lockdown</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $types = [
                                        'restaurant' => 'Restaurant',
                                        'mamaput' => 'Mama Put', 
                                        'bar' => 'Bar',
                                        'streetfood' => 'Street Food',
                                        'fastfood' => 'Fast Food',
                                        'hotel' => 'Hotel',
                                        'fast' => 'Fast Food',
                                        'eatery' => 'Eatery',
                                        'cafe' => 'Cafe',
                                        'online' => 'Delivery Only'
                                    ];

$cats = [
                                        'african' => 'African',
                                        'continental' => 'Continental', 
                                        'chinese' => 'Chinese',
                                        'indian' => 'Indian',
                                        'fastfood' => 'FastFood',
                                        'breakfast' => 'Breakfast',
                                        'finedining' => 'FineDining',
                                        'healthy' => 'Healthy',
                                        'grill' => 'Grill',
                                        'parking' => 'Parking',
                                        'seating' => 'Seating',
                                        'delivery' => 'Delivery'
                                    ]
                                @endphp
                                @if($places)
                                    @foreach($places as $place)
                                        <tr data-action="/admin/places/lockdown/{{ $place['slug'] }}">
                                            <td>
                                                <a href="{{ route('places.show', ['slug' => $place['slug']]) }}">
                                                    {{ isset($place['name']) ? $place['name'] : "" }}
                                                </a>
                                            </td>
                                            <td>
                                                <input type="text" name="address" id="address" class="form-control" value="{{ isset($place['address']) ? $place['address'] : "" }}">
                                                
                                            </td>
                                            <td><input type="text" name="phoneone" class="form-control" value="{{ isset($place['phones'][0]) ? $place['phones'][0] : "" }}"></td>
                                            <td><input type="text" name="phonetwo" class="form-control" value="{{ isset($place['phones'][1]) ? $place['phones'][1] : "" }}"></td>
                                            <td><input type="text" name="opening" class="form-control" value="{{ isset($place['opening']) ? $place['opening'] : "" }}"></td>
                                            <td><input type="text" name="closing" class="form-control" value="{{ isset($place['closing']) ? $place['closing'] : "" }}"></td>
                                            <td><input type="text" name="longitude" class="form-control" id="longitude" value="{{ isset($place['location']) && isset($place['location']['coordinates']) ? $place['location']['coordinates'][0] : "" }}"></td>
                                            <td><input type="text" name="latitude" class="form-control" id="latitude" value="{{ isset($place['location']) && isset($place['location']['coordinates']) ? $place['location']['coordinates'][1] : "" }}"></td>
                                            <td><input type="checkbox" name="lockdown" id="lockdown"></td>
                                            <td>
                                                <a href="{{ route('edit_place', ['id' => $place['slug']])}}" target="_blank">Edit</a> | 
                                                <a href="#" class="lockdown">Save</a> | 
                                                <a data-slug="{{ $place['slug'] }}" href="{{ route('delete_place', ['slug' => $place['slug']])}}" class="delete-one">Delete</a>
                                            </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="#" class=" delete-food" data-id="{{ $food['_id'] }}" data-name="{{ $food['name'] }}">
                                                            <i class="fa fa-times"></i>
                                                        </a>
                                                    </span>
                                                @endforeach
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="10" class="text-center">No Places</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    
                </div>
            </div>
        </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="/js/utility.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/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.log(error))
            }else {
                console.log('no')
            }
        });

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'})
                    .then(response => response.json())
        }

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

$('.delete-picture').on('click', function(e){
            const $target = $(e.currentTarget);
            gotohref(e).then(response => {
                const $row = $target.closest('div')
                $row.fadeOut();
                // $row.next().fadeOut();
            })
        })
        
        function serializeInputs(list) {
            var obj = {}
            list.forEach(input => {
                if (input.getAttribute('type') === 'checkbox') {
                    obj[input.getAttribute('name')] = input.checked
                }else obj[input.getAttribute('name')] = input.value
            });
            return obj
        }

$('.lockdown').on('click', function(e){
            e.preventDefault();
            const container = e.target.closest('tr')
            const inputs = container.querySelectorAll('input')
            const o = serializeInputs(inputs)
            const url = container.dataset.action
            fetch(url, {method: 'POST', body: JSON.stringify(o), headers: {
                        'X-CSRF-Token': $('meta[name="_token"]').attr('content')
                    }
                }
            )
            .then(response => response.json())
            .then(result => {
                console.log(result)
                if (result.status === 'success') {
                    // console.log(container.nextElementSibling)
                    if(container.nextElementSibling) container.nextElementSibling.remove();
                    container.remove(); 
                }else {
                    console.log(result.place)
                }

})
            .catch(error => console.log(error))
        })
    </script>
@endsection