@extends('layouts.admin.frame')

@section('header')
    @component('layouts.admin.header')
    Galéria
    @slot('subtitle')
    A már létrehozott galériák listája
    @endslot
    @endcomponent
@endsection

@section('content')

    <div class="box">
        <div class="box-header text-md-right">
            <a href="{{ route('galleries.create') }}" class="btn btn-success"><span class="fa fa-camera"></span> Új galéria létrehozása</a>
        </div>
        
        <div class="box-body">
        @if (!$items->isEmpty())
            <table class="table table-hover sortable-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Megnevzés</th>
                        <th class="text-center">Képek száma</th>                        
                        <th></th>
                    </tr>
                </thead>
                <tbody>
        
                @foreach ($items as $item)
                        <tr id="recordsArray_{{ $item->id }}">
                            <td class="handle">{{ $item->id }}</td>
                            <td>{{ $item->title_hu }} / {{ $item->title_en }}</td>
                            <td class="text-center">{{ $item->pics()->count() }}</td>                            
                            <td class="text-right">
                                <span class="cmd-icon"><span class="ajax-button-main fa {{ $item->is_main ? 'fa-star text-yellow' : 'fa-star-o text-gray' }}" data-id="{{ $item->id }}" data-class-on="fa-star text-yellow" data-class-off="fa-star-o text-gray" data-toggle="tooltip" data-placement="top" title="Főoldali kiemelés KI/BE"></span></span>
                                <span class="cmd-icon"><span class="ajax-button-visibility fa {{ $item->is_visible ? 'fa-toggle-on text-green' : 'fa-toggle-off text-red' }}" data-id="{{ $item->id }}" data-class-on="fa-toggle-on text-green" data-class-off="fa-toggle-off text-red" data-toggle="tooltip" data-placement="top" title="Enedélyez / Letilt"></span></span>
                                <a class="cmd-icon" href="{{ route('pictures.index', $item->id) }}" class="btn btn-sm btn-info d-inline-block"><span class="fa fa-picture-o text-info" data-toggle="tooltip" data-placement="top" data-container="body" title="Fotók kezelése"></span></a>
                                
                                <a class="cmd-icon" href="{{ route('galleries.edit',$item->id) }}"><span class="fa fa-pencil" data-toggle="tooltip" data-placement="top" data-container="body" title="Átnevez"></span></a>
                                <form action="{{ route('galleries.destroy', $item->id) }}" method="POST" class="d-inline delete-from">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn-fake swal-confirm-delete cmd-icon"><span class="fa fa-trash text-red" data-toggle="tooltip" data-placement="top" title="Töröl"></span></button>
                                </form>
                            </td>
                        </tr>
                @endforeach
        
                </tbody>
            </table>            
        @else
        <div class="alert alert-warning text-center">Nincs megejeleníthető tartalom!</div>
        @endif
        </div>
    </div>
@endsection

@section('scripts')
@include('layouts.admin.sortableScript', ['api_url' => '/api/gallery/setorder'])
<script>
        $('.swal-confirm-delete').on('click',function(e){
            var form = $(this).parents('form.delete-from');
            e.preventDefault();
            Swal.fire({
                title: 'Biztosan törölni szeretnéd?',
                icon: 'question',        
                showCloseButton: false,
                showCancelButton: true,
                focusConfirm: false,
                confirmButtonText:
                'Igen',
                confirmButtonAriaLabel: 'Thumbs up, great!',
                cancelButtonText:
                'Mégsem',
                cancelButtonAriaLabel: 'Thumbs down'
            }).then((result) => {
                if (result.value) {
                    form.submit();
                }
            });
        });


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.ajax-button-visibility').click(function(e){
            e.preventDefault();
            var ajax_url = '/api/galleries/' + $(this).data('id') + '/setvisibility';            
            var button = $(this);
            var icon = $(this).find('.icon');
            $.ajax({
                headers: {
                    'Authorization': 'Bearer {{ Auth::user()->api_token }}',
                },
                type: 'PUT',
                contentType: 'application/json',
                url: ajax_url,
                success: function(res){
                    // aktív
                    if(res == 0){
                        button.removeClass(button.data('class-on')).addClass(button.data('class-off'));
                        icon.removeClass(icon.data('class-on')).addClass(icon.data('class-off'));
                    }
                    // inaktív
                    else{
                        button.removeClass(button.data('class-off')).addClass(button.data('class-on'));
                        icon.removeClass(icon.data('class-off')).addClass(icon.data('class-on'));
                    }
                }
            });
        });

        $('.ajax-button-main').click(function(e){
            e.preventDefault();
            var ajax_url = '/api/galleries/' + $(this).data('id') + '/setmain';            
            var button = $(this);
            var icon = $(this).find('.icon');
            $.ajax({
                headers: {
                    'Authorization': 'Bearer {{ Auth::user()->api_token }}',
                },
                type: 'PUT',
                contentType: 'application/json',
                url: ajax_url,
                success: function(res){
                    // aktív
                    if(res == 0){
                        button.removeClass(button.data('class-on')).addClass(button.data('class-off'));
                        icon.removeClass(icon.data('class-on')).addClass(icon.data('class-off'));
                    }
                    // inaktív
                    else{
                        button.removeClass(button.data('class-off')).addClass(button.data('class-on'));
                        icon.removeClass(icon.data('class-off')).addClass(icon.data('class-on'));
                    }
                }
            });
        });

        </script>
    
@endsection