Elep

@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>Images</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>
                                            @if (isset($place['image']) && count($place['image']))
                                                <div class="place-images" style="display: flex; gap: 10px;">
                                                    @foreach ($place['image'] as $id => $image)
                                                        <div class="place-image" style="display: flex; flex-direction: column; gap: 5px; align-items: center;">
                                                            <img style="width: 200px" src="{{ $image }}" alt="Place Image">
                                                            <input type="checkbox" data-image="{{ $image }}" data-placename="{{ $place['name'] }}" {{ in_array($image, $images) ? 'checked' : '' }} data-href="{{ route('make_explore', ['slug' => $place['slug']])}}" class="make-explore">
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </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-explore').forEach(makes => {
            makes.addEventListener('change', function(e){
                e.preventDefault()
                e.target.setAttribute('disabled', true)
                const target = e.target
                const link = target.dataset.href;
                let checked = target.checked ? "yes" : "no";
                let img = target.dataset.image;
                let placename = target.dataset.placename;

doFetch(link, {
                    headers: {'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('value')},
                    body: JSON.stringify({checked, image: img, placename}),
                    method: 'POST',
                    credentials: 'same-origin'
                }).then(data => {
                    console.log(data)
                    target.removeAttribute('disabled')
                })
            })
        });

document.querySelectorAll('.popularity').forEach(makes => {
            makes.addEventListener('blur', function(e){
                // e.target.setAttribute('disabled', true)
                const target = e.target
                const link = `${target.dataset.href}`;
                
                fetch(link, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('value'),
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({
                        popularity: target.value
                    })
                }).then(response => {
                    console.log({response})
                    // e.target.setAttribute('disabled', false)
                }).catch(error => console.error(error))
            })
        });

document.querySelectorAll('.enable').forEach(makes => {
            makes.addEventListener('change', handleCheckboxChange)
        });

document.querySelectorAll('.lrf').forEach(makes => {
            makes.addEventListener('change', handleCheckboxChange)
        });

function handleCheckboxChange(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