@extends('layouts.admin.frame')

@section('header')
    @component('layouts.admin.header')
    Főoldali animáció
    @slot('subtitle')
        
    @endslot
    @endcomponent
@endsection

@section('content')
    <div class="box">
    
        <div class="box-header text-md-right">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <a href="{{ route('slider.create') }}" class="btn btn-success"><span class="fa fa-plus-circle pr-1"></span> Új kép hozzáadása</a>
            <a href="{{ route('slider.create.video') }}" class="btn btn-primary"><span class="fa fa-plus-circle pr-1"></span> Új video hozzáadása</a>
        </div>
        
        <div class="box-body">
            
            @if($items->count()>0)
                <table class="table table-hover sortable-table">
                    <tr>
                        <th width="10">#</th>
                        <th>Megnevezés</th>
                        <th width="135">Létrehozás dátuma</th>
                        <th width="80"></th>
                    </tr>
                    <tbody>
                    @foreach ($items->where('lang','hu') as $item)
                    <tr id="recordsArray_{{ $item->id }}">
                        <td class="handle">{{ $item->id }}</td>
                        <td>{{ $item->name }} {!! $item->is_video ? '<small class="label bg-blue ml-1">Video</small>' : '<small class="label bg-orange ml-1">Kép</small>' !!}</td>
                        <td>{{ $item->created_at }}</td>
                        <td class="text-right" width="120">
                            <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('slider.edit',$item->id) }}"><span class="fa fa-pencil" data-toggle="tooltip" data-placement="top" data-container="body" title="Módosít"></span></a>
                            <form action="{{ route('slider.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 megjeleníthető tartalom!</div>
            @endif 

        </div>

                
            
    
  </div>
  
@endsection

@section('css')
    <style>
        .handle {cursor: move;}
    </style>
@endsection
@section('scripts')
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="{{ asset('adm/plugins/js-toast-master/toast.js') }}"></script>
<script type="text/javascript">
	$(document).ready(function(){ 						   
		$(function() {
			$(".sortable-table tbody").sortable({handle: '.handle', opacity: 0.6, cursor: 'move', update: function() {
                var orderArray = $(this).sortable("serialize");
                console.log(orderArray);			
				var item_order = $(this).sortable("serialize") + '&action=set_service_order';				
                var ajax_url = '/api/slider/setorder';
                $.ajax({
                    headers: {
                        'Authorization': 'Bearer {{ Auth::user()->api_token }}',
                    },
                    type: 'PUT',
                    data: item_order,
                    //dataType: "json",
                    url: ajax_url,
                    success: function(res){
                        if(res == 1){
                            iqwerty.toast.Toast("Sikeres sorrend beállítás!", {settings: {duration: 3000 }});
                        }                                            
                    }
                });
			}								  
			});
		});
	});	
</script>

<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é?',
                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/slider/' + $(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'));
                    }
                }
            });
        });
        
        </script>
    
@endsection