@extends('layouts.digitar')
@section('Breadcrumbs')
    {{-- {!! Breadcrumbs::render('documents.list') !!} --}}
@endsection
@section('content')
    <style>
        .labels-page-section {
            margin-top: 15px;
        }

        .filter-card {
            background: #fff;
            border-radius: 8px;
            padding: 18px 22px;
            border: 1px solid #e2e6ea;
        }

        .filter-card .filter-title {
            font-size: 14px;
            font-weight: 600;
            color: #3a3f51;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-card .filter-title i {
            color: #37bc9b;
        }

        .filter-card .form-control {
            border-radius: 6px;
            border: 1px solid #d5d9df;
            padding: 8px 12px;
            font-size: 14px;
            transition: border-color 0.2s;
        }

        .filter-card .form-control:focus {
            border-color: #37bc9b;
            box-shadow: 0 0 0 2px rgba(55, 188, 155, 0.12);
        }

        .btn-search {
            background: #37bc9b;
            border: 1px solid #2ea88a;
            color: #fff;
            border-radius: 6px;
            padding: 8px 18px;
            font-weight: 600;
            font-size: 14px;
            transition: background 0.15s;
        }

        .btn-search:hover,
        .btn-search:focus {
            background: #2ea88a;
            color: #fff;
        }

        .btn-reset {
            background: #fff;
            border: 1px solid #d5d9df;
            color: #6c757d;
            border-radius: 6px;
            padding: 8px 18px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.15s;
        }

        .btn-reset:hover,
        .btn-reset:focus {
            background: #f8f9fa;
            color: #495057;
        }

        .list-card {
            background: #fff;
            border-radius: 8px;
            padding: 22px;
            border: 1px solid #e2e6ea;
        }

        .list-card .header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 18px;
        }

        .list-card .header-bar h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #3a3f51;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .list-card .header-bar h3 i {
            color: #37bc9b;
        }

        .labels-table {
            margin-bottom: 0;
        }

        .labels-table > thead > tr > th {
            vertical-align: middle;
            white-space: nowrap;
        }

        .labels-table > tbody > tr > td {
            vertical-align: middle;
        }

        .labels-chip {
            display: inline-block;
            background: #eef8f5;
            color: #25856d;
            border: 1px solid #cfeadf;
            border-radius: 999px;
            padding: 3px 10px;
            margin: 2px 4px 2px 0;
            font-size: 12px;
            font-weight: 600;
        }

        .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;
            margin: 0;
        }
    </style>

    <div class="labels-page-section filter-card">
        <div class="filter-title">
            <i class="fa fa-filter"></i> Filtros de Pesquisa
        </div>

        <form id="search-form" method="GET">
            <input type="hidden" name="has-filter" value="true">

            <div class="row">
                <div class="form-group col-md-4">
                    {!! Form::label('document_type_id', 'Tipo:', ['style' => 'font-weight:600; color:#3a3f51; margin-bottom:6px;']) !!}
                    {!! Form::select(
                        'document_type_id',
                        App\Models\DocumentType::pluck('name', 'id')->prepend('Selecione...', ''),
                        $form->input('document_type_id'),
                        ['class' => 'form-control'],
                    ) !!}
                </div>

                <div class="form-group col-md-2">
                    {!! Form::label('number', 'Número:', ['style' => 'font-weight:600; color:#3a3f51; margin-bottom:6px;']) !!}
                    {!! Form::input('number', 'number', $form->input('number'), ['class' => 'form-control', 'min' => 0]) !!}
                </div>

                <div class="form-group col-md-2">
                    {!! Form::label('start_date', 'De:', ['style' => 'font-weight:600; color:#3a3f51; margin-bottom:6px;']) !!}
                    {!! Form::date('start_date', $form->input('start_date') ?: null, ['class' => 'form-control']) !!}
                </div>

                <div class="form-group col-md-2">
                    {!! Form::label('end_date', 'Até:', ['style' => 'font-weight:600; color:#3a3f51; margin-bottom:6px;']) !!}
                    {!! Form::date('end_date', $form->input('end_date') ?: null, ['class' => 'form-control']) !!}
                </div>

                <div class="form-group col-md-2">
                    {!! Form::label('numberBox', 'Número da Caixa:', ['style' => 'font-weight:600; color:#3a3f51; margin-bottom:6px;']) !!}
                    {!! Form::input('text', 'numberBox', $form->input('numberBox'), ['class' => 'form-control']) !!}
                </div>
            </div>

            <div class="row" style="margin-top: 8px;">
                <div class="form-group col-md-2">
                    <button class="btn btn-search btn-block">
                        <i class="fa fa-search"></i> Pesquisar
                    </button>
                </div>
                <div class="form-group col-md-2">
                    <button id="limpar-btn" type="reset" class="btn btn-reset btn-block">
                        <i class="fa fa-eraser"></i> Limpar
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div class="labels-page-section list-card">
        <div class="header-bar">
            <h3><i class="fa fa-tags"></i> Etiquetas por Caixa</h3>
        </div>

        @include('flash::message')

        @if ($boxes->isEmpty())
            <div class="empty-state">
                <i class="fa fa-inbox"></i>
                <h4>Nenhuma caixa encontrada</h4>
                <p>Ajuste os filtros para localizar as caixas e gerar as etiquetas.</p>
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover labels-table">
                    <thead>
                        <tr>
                            <th>Número da Caixa</th>
                            <th>Conteúdo</th>
                            <th>Local</th>
                            <th>Gaveta</th>
                            <th>Prateleira</th>
                            <th class="text-center">Documentos</th>
                            <th>Período</th>
                            <th>Tipos encontrados</th>
                            <th width="180px">Ação</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($boxes as $box)
                            <tr>
                                <td>{{ $box->description ?: 'Sem identificação' }}</td>
                                <td>
                                    @if ($box->content)
                                        {{ \Illuminate\Support\Str::limit(trim(preg_replace('/\s+/', ' ', strip_tags(html_entity_decode($box->content, ENT_QUOTES | ENT_HTML5, 'UTF-8')))), 60) }}
                                    @else
                                        <span class="text-muted">Indisponível</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($box->documentStorage && $box->documentStorage->localStorage)
                                        {{ $box->documentStorage->localStorage->description }}
                                    @else
                                        <span class="text-muted">Não vinculado</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($box->documentStorage && $box->documentStorage->drawerStorage)
                                        {{ $box->documentStorage->drawerStorage->description }}
                                    @else
                                        <span class="text-muted">Não vinculada</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($box->shelf)
                                        {{ $box->shelf->description }}
                                    @else
                                        <span class="text-muted">Não vinculada</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <span class="badge badge-info">{{ $box->label_document_count ?? 0 }}</span>
                                </td>
                                <td>
                                    @if (!empty($box->label_date_start) && !empty($box->label_date_end))
                                        {{ $box->label_date_start }} até {{ $box->label_date_end }}
                                    @elseif (!empty($box->label_date_start))
                                        {{ $box->label_date_start }}
                                    @else
                                        <span class="text-muted">Não informado</span>
                                    @endif
                                </td>
                                <td>
                                    @if (!empty($box->label_document_types) && $box->label_document_types->isNotEmpty())
                                        @foreach ($box->label_document_types as $type)
                                            <span class="labels-chip">{{ trim(preg_replace('/\s+/', ' ', strip_tags(html_entity_decode($type, ENT_QUOTES | ENT_HTML5, 'UTF-8')))) }}</span>
                                        @endforeach
                                    @else
                                        <span class="text-muted">Sem tipo informado</span>
                                    @endif
                                </td>
                                <td>
                                    @if (!empty($box->label_trigger_document_id))
                                        <a href="{{ url('documents/generate/pdf/labels/' . $box->label_trigger_document_id . '/' . $box->id) }}"
                                            target="_blank" class="btn btn-info btn-sm">
                                            <i class="fa fa-print"></i> Imprimir Etiqueta
                                        </a>
                                    @else
                                        <button type="button" class="btn btn-default btn-sm" disabled>
                                            Sem documento
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="text-center" style="margin-top: 18px;">
                {!! $boxes->links('pagination::bootstrap-4') !!}
            </div>
        @endif
    </div>

    <script>
        document.getElementById('limpar-btn').addEventListener('click', function(event) {
            event.preventDefault();

            const form = document.getElementById('search-form');
            const inputs = form.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], input[type="hidden"]');
            inputs.forEach(function(input) {
                input.value = '';
            });

            const selects = form.querySelectorAll('select');
            selects.forEach(function(select) {
                select.selectedIndex = 0;
            });

            window.location.href = window.location.href.split('?')[0];
        });
    </script>
@endsection