@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('drawer.list') !!}
@endsection
@section('content')
<style>
    .trashed-card {
        background: #fff;
        border-radius: 8px;
        padding: 22px;
        border: 1px solid #e2e6ea;
    }
    .trashed-card .header-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 18px;
    }
    .trashed-card .header-bar h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #3a3f51;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .trashed-card .header-bar h3 i {
        color: #e74c3c;
    }
    .btn-back {
        background: #6c757d;
        border: 1px solid #5a6268;
        color: #fff;
        border-radius: 6px;
        padding: 8px 18px;
        font-weight: 600;
        font-size: 14px;
        transition: background 0.15s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-back:hover {
        background: #5a6268;
        color: #fff;
        text-decoration: none;
    }
    .btn-restore {
        background: #27ae60;
        border: 1px solid #219a52;
        color: #fff;
        border-radius: 6px;
        padding: 6px 14px;
        font-weight: 600;
        font-size: 13px;
        transition: background 0.15s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-restore:hover {
        background: #219a52;
        color: #fff;
        text-decoration: none;
    }
    .empty-state {
        text-align: center;
        padding: 45px 20px;
        color: #9ba4b0;
    }
    .empty-state i {
        font-size: 48px;
        margin-bottom: 14px;
        color: #ced4da;
    }
    .empty-state h4 {
        font-size: 16px;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 4px;
    }
    .empty-state p {
        font-size: 14px;
    }
    .deleted-badge {
        background: #e74c3c;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
    }
</style>

    <div class="trashed-card">
        <div class="header-bar">
            <h3><i class="fa fa-trash"></i> Gavetas Excluídas</h3>
            <a href="{!! route('drawer.index') !!}" class="btn-back">
                <i class="fa fa-arrow-left"></i> Voltar para Gavetas
            </a>
        </div>

        @include('flash::message')

        @if ($trashedDrawers->isEmpty())
            <div class="empty-state">
                <i class="fa fa-recycle"></i>
                <h4>Nenhuma gaveta excluída</h4>
                <p>Não há gavetas na lixeira para restaurar.</p>
            </div>
        @else
            <table class="table table-bordered table-striped table-hover table-responsive">
                <thead>
                    <tr>
                        <th>Descrição</th>
                        <th>Data de Exclusão</th>
                        <th width="150px">Ação</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($trashedDrawers as $drawer)
                        <tr>
                            <td>{!! $drawer->description !!}</td>
                            <td>
                                <span class="deleted-badge">{{ $drawer->deleted_at->format('d/m/Y H:i') }}</span>
                            </td>
                            <td>
                                @shield('drawer.edit')
                                    <form action="{{ route('drawer.restore', $drawer->id) }}" method="POST" style="display: inline;">
                                        @csrf
                                        <button type="submit" class="btn-restore" onclick="return confirm('Tem certeza que deseja restaurar esta gaveta?')">
                                            <i class="fa fa-undo"></i> Restaurar
                                        </button>
                                    </form>
                                @endshield
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="text-center">
                {{ $trashedDrawers->links() }}
            </div>
        @endif
    </div>
@endsection