@extends('layouts.admin.frame')

@section('header')
    @component('layouts.admin.header')
    Rendelésel
    @slot('subtitle')
        
    @endslot
    @endcomponent
@endsection

@section('content')
    <div class="box">
    
        <div class="box-header text-md-right">
           
        </div>
        
        <div class="box-body">
        <table class="table table-hover">
            <tr>
            <th width="10">#</th>
            <th>Név</th>
            <th>E-mail</th>
            <th>Telefon</th>
            <th>Összeg</th>
            <th>Fizetési mód</th>
            <th>Szállítási mód</th>
            <th></th>
            </tr>
            
            @if($items)
                @foreach ($items as $item)
                    <tr>
                        <td>{{ $item->id }}</td>
                        <td>{{ $item->name }}</td>
                        <td>{{ $item->email }}</td>
                        <td>{{ $item->phone }}</td>
                        <td>{{ $item->total() }} Ft</td>
                        <td>{{ $item->paymentMethod->title_hu }}                         
                            @if($item->payment_status == 'Succeeded')<span class="label label-success px-1">Fizetve</span>
                            @elseif($item->payment_status == 'Canceled')<span class="label label-warning px-1">Megszakítva</span>
                            @elseif($item->payment_status)<span class="label label-danger px-1">{{ $item->payment_status }}</span>@endif
                        </td>
                        <td>{{ $item->shippingMethod->title_hu }}</td>
                        <td class="text-right">
                            <a class="cmd-icon" href="{{ route('orders.edit',$item->id) }}"><span class="fa fa-pencil" data-toggle="tooltip" data-placement="top" data-container="body" title="Megtekint"></span></a>
                            <form action="{{ route('orders.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
            @endif        
        </table>
        </div>
    
  </div>
  {{ $items->links() }}
@endsection


@section('scripts')
<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-setactive').click(function(e){
            e.preventDefault();
            var ajax_url = '/api/administrators/' + $(this).data('id') + '/setactive';            
            var button = $(this);
            var icon = $(this).find('.icon');
            $.ajax({
                headers: {
                    'Authorization': "Bearer {{ Auth::guard('admin')->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