@extends('layouts.admin.frame')

@section('header')
    @component('layouts.admin.header')
    {{ $header->title }}
    @slot('subtitle')
        {{ $header->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(Request::segment(2).'.create') }}?type=1" class="btn btn-success btn-sm"><span class="fa fa-plus-circle pr-1"></span> Új vonallámpa hozzáadása</a>
            <a href="{{ route(Request::segment(2).'.create') }}?type=2" class="btn btn-success btn-sm"><span class="fa fa-plus-circle pr-1"></span> Új körlámpa hozzáadása</a>
            <a href="{{ route(Request::segment(2).'.create') }}?type=3" class="btn btn-success btn-sm"><span class="fa fa-plus-circle pr-1"></span> Új vonallámpa installáció</a>
            <a href="{{ route(Request::segment(2).'.create') }}?type=4" class="btn btn-success btn-sm"><span class="fa fa-plus-circle pr-1"></span> Új körlámpa installáció</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="180"></th>
                    </tr>
                    <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>{{ $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(Request::segment(2).'.pics', $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(Request::segment(2).'.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(Request::segment(2).'.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')
@include('layouts.admin.sortableScript', ['api_url' => '/api/product/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é?',
                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/product/' + $(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