@extends('layouts.app')

@section('title', $title)
@section('full_width', '1')

@push('styles')
    <style>
        .content-stage {
            width: min(1500px, 100%);
            margin: 0 auto;
            padding: 0 0.75rem;
        }

        .section-card {
            border: 1px solid #e4ebf2;
            border-radius: 16px;
            background: #ffffff;
            padding: 1rem 1.1rem;
            box-shadow: 0 8px 18px -18px rgba(0, 0, 0, 0.35);
            min-width: 0;
        }

        .section-title {
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #7E8080;
            margin-bottom: 0.8rem;
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 0.65rem;
            margin-bottom: 1rem;
        }

        .summary-item {
            border: 1px solid #e8eef4;
            border-radius: 12px;
            background: #f8fbfd;
            padding: 0.7rem 0.85rem;
            min-width: 0;
        }

        .summary-item .label {
            font-size: 0.76rem;
            color: #7E8080;
            margin-bottom: 0.2rem;
        }

        .summary-item .value {
            color: #446078;
            font-weight: 600;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .barcode-panel {
            border: 1px dashed #c7d5e4;
            border-radius: 14px;
            background: linear-gradient(180deg, #f9fbfd 0%, #f3f7fb 100%);
            padding: 0.95rem 1rem;
            margin-bottom: 1rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .barcode-label {
            font-size: 0.76rem;
            color: #7E8080;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.35rem;
        }

        .barcode-value {
            color: #2c455c;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            margin-top: 0.5rem;
        }

        .barcode-render {
            display: block;
            max-width: min(100%, 420px);
            width: 100%;
            margin: 0 auto;
            background: #fff;
            border-radius: 10px;
            padding: 0.55rem;
            border: 1px solid #d9e4ef;
        }

        .barcode-render svg {
            display: block;
            width: 100%;
            height: auto;
        }

        .table-wrap {
            border: 1px solid #e8eef4;
            border-radius: 14px;
            overflow: hidden;
            background: #fff;
            min-width: 0;
        }

        .table-wrap table {
            margin-bottom: 0;
            min-width: 980px;
        }

        .table-wrap thead th {
            background: #f7fafc;
            border-bottom-color: #e8eef4;
            font-size: 0.82rem;
            color: #446078;
        }

        @media (min-width: 768px) {
            .summary-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }
    </style>
@endpush

@section('content')
    <div class="content-stage">
        <div class="card card-soft border-0">
            <div class="card-body p-4 p-md-5">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                    <h1 class="h4 mb-0">{{ $title }}</h1>
                    <div class="d-flex gap-2">
                        <a href="{{ $exportUrl }}" class="btn btn-success">Exportar Excel (.xlsx)</a>
                        <a href="{{ $backUrl }}" class="btn btn-outline-secondary">Volver</a>
                    </div>
                </div>

                <section class="section-card mb-3">
                    <div class="section-title">Resumen</div>
                    <div class="barcode-panel">
                        @if (! empty($barcodeSvg))
                            <div class="barcode-render" role="img" aria-label="Codigo de barras {{ $barcodeValue }}">
                                {!! $barcodeSvg !!}
                            </div>
                            <div class="barcode-value">{{ $barcodeValue }}</div>
                        @else
                            <div class="text-muted-brand">No se pudo generar el codigo de barras para este comprobante.</div>
                        @endif
                    </div>
                    <div class="summary-grid">
                        @foreach ($meta as $label => $value)
                            <div class="summary-item">
                                <div class="label">{{ $label }}</div>
                                <div class="value">{{ $value !== '' ? $value : '-' }}</div>
                            </div>
                        @endforeach
                    </div>
                </section>

                @foreach ($sections as $section)
                    <section class="section-card{{ $loop->last ? '' : ' mb-3' }}">
                        <div class="section-title">{{ $section['title'] }}</div>
                        <div class="table-wrap">
                            <div class="table-responsive">
                                <table class="table table-sm align-middle mb-0">
                                    <thead>
                                        <tr>
                                            @foreach ($section['columns'] as $label)
                                                <th>{{ $label }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($section['rows'] as $row)
                                            <tr>
                                                @foreach (array_keys($section['columns']) as $key)
                                                    <td>{{ $row[$key] ?? '' }}</td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </section>
                @endforeach
            </div>
        </div>
    </div>
@endsection