@extends('admin.layouts.app')
<style>
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>
@section('title')
    <div class="mr-auto">
        <h3 class="m-subheader__title m-subheader">Products</h3>
        <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
        </ul>
    </div>
    <div>
        <a href="{{ url('admin-area/products/create') }}" class="btn m-btn--pill btn-brand">
            <i class="flaticon-plus"></i> Cadastrar Products
        </a>
    </div>
@endsection
@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="m-portlet__body">
                <div class="m_datatable m-datatable m-datatable--default m-datatable--scroll m-datatable--loaded" id="m_datatable_latest_orders" style="">
                    <table class="m-datatable__table" id="example" style="display: block;">
                        <thead class="m-datatable__head">
                        <tr class="m-datatable__row">
                            <th  style="width: 10%; text-align: center" class="m-datatable__cell">ID</th>
                            <th  style="width: 15%; text-align: center" class="m-datatable__cell">Nome</th>
                            <th  style="width: 15%; text-align: center" class="m-datatable__cell">Imagem</th>
                            <th  style="width: 35%; text-align: center" class="m-datatable__cell">Descrição</th>
                            <th  style="width: 15%; text-align: center" class="m-datatable__cell">Link</th>
                            <th  style="width: 15%; text-align: center" class="m-datatable__cell">Tipo</th>
                            <th  style="width: 15%; text-align: center" class="m-datatable__cell">Tag</th>
                            <th  style="width: 10%; text-align: center" class="m-datatable__cell">Ações</th>
                        </tr>
                        </thead>
                        <tbody class="m-datatable__body mCustomScrollbar _mCS_9 mCS-autoHide">
                        @foreach($products as $product)
                            <tr data-row="0" class="m-datatable__row m-datatable__row--even">
                                <td style="width: 10%; text-align: center" class="m-datatable__cell">{{ $product->id }}</td>
                                <td style="width: 15%; text-align: center" class="m-datatable__cell">{{ $product->name }}</td>
                                <td style="width: 15%; text-align: center" class="m-datatable__cell"><img src="{{ url('images/products/' . $product->path) }}" alt=""></td>
                                <td style="width: 35%; text-align: center" class="m-datatable__cell">{!! $product->description !!}</td>
                                <td style="width: 15%; text-align: center" class="m-datatable__cell">{{ $product->link }}</td>
                                <td style="width: 15%; text-align: center" class="m-datatable__cell">{{ $product->type }}</td>
                                <td style="width: 15%; text-align: center" class="m-datatable__cell">{{ $product->tag }}</td>
                                <td style="width: 10%; text-align: center" class="m-datatable__cell">
                                    <a href="{{ url('admin-area/products/' . $product->id . '/edit') }}" class="m-portlet__nav-link btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Informações"><i class="m-menu__link-icon flaticon-edit"></i></a>
                                    <button onclick="deleteBtn(this)" id="{{ $product->id }}" type="button" data-url="{{ url('/admin-area/products/' . $product->id) }}" data-token="{{ csrf_token() }}" class="delete-sweet m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Deletar"><i class="m-menu__link-icon flaticon-delete-1"></i></button>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
{{--    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>--}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript">
        function deleteBtn(clickedButton) {
            var token = $(clickedButton).data('token');
            var url = $(clickedButton).data('url');
            Swal.fire({
                title: "You wish to delete it?",
                text: "You cannot undo this",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: "Cancel",
                reverseButtons: true
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: url,
                        type: 'post',
                        data: {_method: 'delete', _token: token},
                        success: function() {
                            Swal.fire({
                                icon: "success",
                                title: "Removed!",
                                text: "This item was removed!"
                            }).then(function(){
                                location.reload();
                            });
                            // timeoutlocation.reload();
                        },
                        error: function(){
                            Swal.fire({
                                icon: "error",
                                title: "Oops!",
                                text: "This item can't be removed.",
                            });
                        },
                    });
                }
            });
        };
    </script>
@endsection