@extends('layouts.app', ['title' => 'Produtos IFood'])
@section('css')
<style type="text/css">
    .produto-inativo .conteudo-inativo {
        opacity: 0.45;
        filter: grayscale(100%);
    }

    .produto-inativo .conteudo-inativo img {
        filter: grayscale(100%);
    }

    .produto-inativo .btn,
    .produto-inativo .btn * {
        opacity: 1 !important;
        filter: none !important;
    }
</style>
@endsection
@section('content')
<div class="mt-1">
    <div class="row">
        <div class="card">
            <div class="card-body">

                <a class="btn btn-success px-3" href="{{ route('produtos.create', ['ifood=1']) }}">
                    <i class="ri-add-circle-fill"></i>
                    Novo Produto
                </a>
                <div class="table-responsive-sm mt-3">
                    <table class="table table-striped table-centered mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th></th>
                                <th>Nome</th>
                                <th>ID</th>
                                <th>Valor</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($data as $item)
                            <tr class="{{ $item->status != 'AVAILABLE' ? 'produto-inativo' : '' }}">

                                <td>
                                    <div class="conteudo-inativo">
                                        @if($item->imagem)
                                        <img class="img-60" src="{{ $item->imagem }}">
                                        @else
                                        <img class="img-60" src="imgs/no-image.png">
                                        @endif
                                    </div>
                                </td>

                                <td>
                                    <div class="conteudo-inativo">
                                        {{ $item->nome }}
                                    </div>
                                </td>

                                <td>
                                    <div class="conteudo-inativo">
                                        {{ $item->ifood_id }}
                                    </div>
                                </td>

                                <td>
                                    <div class="conteudo-inativo">
                                        {{ __moeda($item->valor) }}
                                    </div>
                                </td>

                                <td>
                                    <form action="{{ route('ifood-produtos.destroy', $item->id) }}" method="post" id="form-{{$item->id}}">
                                        <a class="btn btn-warning btn-sm text-white"href="{{ route('ifood-produtos.edit', [$item->id]) }}">
                                            <i class="ri-pencil-fill"></i>
                                        </a>

                                        @csrf
                                        @method('delete')

                                        <button type="submit"title="Deletar"class="btn btn-danger btn-delete btn-sm">
                                            <i class="ri-delete-bin-2-line"></i>
                                        </button>

                                        @if($item->status == 'AVAILABLE')
                                        <a class="btn btn-secondary btn-sm text-white"href="{{ route('ifood-produtos.desactive', [$item->id]) }}">
                                            <i class="ri-pause-fill"></i>
                                        </a>
                                        @else
                                        <a class="btn btn-success btn-sm text-white"href="{{ route('ifood-produtos.active', [$item->id]) }}">
                                            <i class="ri-play-fill"></i>
                                        </a>
                                        @endif
                                    </form>
                                </td>

                            </tr>

                            @empty
                            <tr>
                                <td colspan="4" class="text-center">Nada encontrado</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>

@endsection
