@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('box.list') !!}
@endsection
@section('content')
<style>
    .box-trash-page {
        color: #24324b;
    }
    .box-trash-page__section + .box-trash-page__section {
        margin-top: 20px;
    }
    .box-trash-hero {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 22px;
        align-items: center;
        padding: 28px;
        border-radius: 26px;
        overflow: hidden;
        border: 1px solid rgba(210, 224, 243, 0.88);
        background: linear-gradient(135deg, rgba(244, 101, 101, 0.16), rgba(255, 255, 255, 0.98) 72%);
        box-shadow: 0 20px 40px rgba(74, 96, 135, 0.08);
    }
    .box-trash-hero:before {
        content: "";
        position: absolute;
        inset: auto auto -54px -54px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(239, 107, 95, 0.16), transparent 70%);
        pointer-events: none;
    }
    .box-trash-hero__copy,
    .box-trash-hero__actions {
        position: relative;
        z-index: 1;
    }
    .box-trash-hero__eyebrow {
        margin: 0 0 8px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #cf5252;
    }
    .box-trash-hero__title {
        margin: 0;
        font-size: 30px;
        font-weight: 800;
        line-height: 1.08;
        color: #22314d;
    }
    .box-trash-hero__text {
        margin: 10px 0 0;
        font-size: 15px;
        line-height: 1.7;
        color: #60708b;
        max-width: 720px;
    }
    .box-trash-panel {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(210, 224, 243, 0.88);
        border-radius: 26px;
        box-shadow: 0 18px 42px rgba(26, 63, 120, 0.08);
        overflow: hidden;
    }
    .box-trash-panel__body {
        padding: 28px;
    }
    .box-trash-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 18px;
        margin-bottom: 22px;
    }
    .box-trash-panel__title {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .box-trash-panel__title-icon {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fdeeee;
        color: #dc5a5a;
        font-size: 20px;
        flex-shrink: 0;
    }
    .box-trash-panel__title h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: #263550;
    }
    .box-trash-panel__title p {
        margin: 4px 0 0;
        font-size: 14px;
        color: #73809a;
    }
    .box-trash-btn {
        height: 44px;
        padding: 0 20px;
        border-radius: 14px;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
        transition: all .2s ease;
        text-decoration: none !important;
    }
    .box-trash-btn--back {
        background: #fff;
        border-color: #d6e1f2;
        color: #49637f;
    }
    .box-trash-btn--back:hover,
    .box-trash-btn--back:focus {
        background: #f7faff;
        border-color: #bfd1eb;
        color: #2f4664;
    }
    .box-trash-btn--restore {
        background: #20b07f;
        border-color: #20b07f;
        color: #fff;
    }
    .box-trash-btn--restore:hover,
    .box-trash-btn--restore:focus {
        background: #19986d;
        border-color: #19986d;
        color: #fff;
    }
    .box-trash-table-wrap {
        overflow-x: auto;
        border: 1px solid #e4ebf6;
        border-radius: 20px;
        background: #fbfdff;
    }
    .box-trash-table {
        width: 100%;
        margin-bottom: 0;
        border-collapse: separate;
        border-spacing: 0;
        background: transparent;
    }
    .box-trash-table > thead > tr > th {
        border-bottom: 1px solid #e4ebf6;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        background: #f8fbff;
        color: #61708b;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        padding: 16px 18px;
        white-space: nowrap;
    }
    .box-trash-table > tbody > tr > td {
        vertical-align: middle !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #edf2fa !important;
        padding: 18px;
        color: #31415e;
        background: transparent;
    }
    .box-trash-table > tbody > tr:last-child > td {
        border-bottom: 0 !important;
    }
    .box-trash-table > tbody > tr:hover > td {
        background: #fdf8f8;
    }
    .box-trash-table__strong {
        font-size: 15px;
        font-weight: 700;
        color: #273652;
    }
    .box-trash-table__muted {
        color: #8b97ad;
        font-weight: 500;
    }
    .empty-state {
        text-align: center;
        padding: 54px 24px;
        color: #8390a6;
    }
    .empty-state i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 68px;
        height: 68px;
        margin-bottom: 18px;
        border-radius: 24px;
        background: #fdeeee;
        color: #dc5a5a;
        font-size: 30px;
    }
    .empty-state h4 {
        margin: 0 0 6px;
        font-size: 18px;
        font-weight: 800;
        color: #30415e;
    }
    .empty-state p {
        margin: 0;
        font-size: 14px;
        color: #6f7d94;
    }
    .deleted-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 12px;
        border-radius: 999px;
        background: #fdeeee;
        color: #d25555;
        font-size: 12px;
        font-weight: 700;
    }
    .box-trash-pagination {
        text-align: center;
        margin-top: 22px;
    }
    .box-trash-pagination .pagination > li > a,
    .box-trash-pagination .pagination > li > span {
        margin: 0 4px;
        border-radius: 12px !important;
        border: 1px solid #dce6f4;
        color: #4e6583;
        background: #fff;
    }
    .box-trash-pagination .pagination > .active > a,
    .box-trash-pagination .pagination > .active > span,
    .box-trash-pagination .pagination > .active > a:hover,
    .box-trash-pagination .pagination > .active > span:hover,
    .box-trash-pagination .pagination > .active > a:focus,
    .box-trash-pagination .pagination > .active > span:focus {
        background: #d25555;
        border-color: #d25555;
        color: #fff;
    }
    @media (max-width: 991px) {
        .box-trash-hero {
            grid-template-columns: 1fr;
            padding: 22px 20px;
        }
        .box-trash-panel__body {
            padding: 20px;
        }
    }
    @media (max-width: 767px) {
        .box-trash-btn {
            width: 100%;
            justify-content: center;
        }
        .box-trash-panel__header {
            align-items: flex-start;
        }
    }
</style>

    <div class="box-trash-page">
        <div class="box-trash-page__section">
            <div class="box-trash-hero">
                <div class="box-trash-hero__copy">
                    <p class="box-trash-hero__eyebrow">Lixeira de caixas</p>
                    <h1 class="box-trash-hero__title">Caixas excluídas</h1>
                    <p class="box-trash-hero__text">Revise e restaure registros removidos mantendo o mesmo fluxo funcional da tela atual.</p>
                </div>
                <div class="box-trash-hero__actions">
                    <a href="{!! route('box.index') !!}" class="box-trash-btn box-trash-btn--back">
                        <i class="fa fa-arrow-left"></i> Voltar para Caixas
                    </a>
                </div>
            </div>
        </div>

        <div class="box-trash-page__section">
            <div class="box-trash-panel">
                <div class="box-trash-panel__body">
                    <div class="box-trash-panel__header">
                        <div class="box-trash-panel__title">
                            <span class="box-trash-panel__title-icon">
                                <i class="fa fa-trash"></i>
                            </span>
                            <div>
                                <h3>Caixas excluídas</h3>
                                <p>Listagem preservada com foco nas restaurações disponíveis.</p>
                            </div>
                        </div>
                    </div>

                    @include('flash::message')

                    @if ($trashedBoxes->isEmpty())
                        <div class="empty-state">
                            <i class="fa fa-recycle"></i>
                            <h4>Nenhuma caixa excluída</h4>
                            <p>Não há caixas na lixeira para restaurar.</p>
                        </div>
                    @else
                        <div class="box-trash-table-wrap">
                            <table class="table box-trash-table">
                                <thead>
                                    <tr>
                                        <th>Descrição</th>
                                        <th>Conteúdo</th>
                                        <th>Data de Exclusão</th>
                                        <th width="170px">Ação</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($trashedBoxes as $box)
                        <tr>
                            <td><span class="box-trash-table__strong">{!! $box->description !!}</span></td>
                            <td>
                                @if($box->content != null)
                                    {!! \Illuminate\Support\Str::limit($box->content, 90) !!}
                                @else
                                    <span class="box-trash-table__muted">Indisponível</span>
                                @endif
                            </td>
                            <td>
                                <span class="deleted-badge">{{ $box->deleted_at->format('d/m/Y H:i') }}</span>
                            </td>
                            <td>
                                @shield('box.edit')
                                    <form action="{{ route('box.restore', $box->id) }}" method="POST" style="display: inline;">
                                        @csrf
                                        <button type="submit" class="box-trash-btn box-trash-btn--restore" onclick="return confirm('Tem certeza que deseja restaurar esta caixa?')">
                                            <i class="fa fa-undo"></i> Restaurar
                                        </button>
                                    </form>
                                @endshield
                            </td>
                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="box-trash-pagination">
                            {{ $trashedBoxes->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection