@extends('layouts.panel')

@section('content')

<!-- OCUPACIÓN POR SECCIÓN -->
<div class="panel-card">
    <div class="panel-card-header">
        <h5>Ocupación por Sección</h5>
    </div>
    <div class="ocupacion-grid">
        @foreach ($secciones as $seccion)
            @php
                $total       = $totalPorSeccion[$seccion] ?? 0;
                $vendidas    = $vendidaPorSeccion[$seccion] ?? 0;
                $disponibles = $total - $vendidas;
                $porcentaje  = $total > 0 ? round(($vendidas / $total) * 100) : 0;
            @endphp
            <div class="ocupacion-card">
                <div class="ocupacion-card-header">
                    <span class="ocupacion-seccion">{{ $seccion }}</span>
                    <span class="ocupacion-porcentaje">{{ $porcentaje }}%</span>
                </div>
                <div class="panel-progress-bar">
                    <div class="panel-progress-fill sold" style="width: {{ $porcentaje }}%;"></div>
                </div>
                <div class="ocupacion-stats">
                    <div class="ocupacion-stat">
                        <span class="ocupacion-stat-value sold-val">{{ $vendidas }}</span>
                        <span class="ocupacion-stat-label">Vendidos</span>
                    </div>
                    <div class="ocupacion-stat">
                        <span class="ocupacion-stat-value disp-val">{{ $disponibles }}</span>
                        <span class="ocupacion-stat-label">Disponibles</span>
                    </div>
                    <div class="ocupacion-stat">
                        <span class="ocupacion-stat-value">{{ $total }}</span>
                        <span class="ocupacion-stat-label">Total</span>
                    </div>
                </div>
                @if ($vendidas > 0)
                    <div class="ocupacion-card-footer">
                        <button type="button" class="btn-panel-primary btn-panel-sm"
                                data-seccion="{{ $seccion }}"
                                data-bs-toggle="modal" data-bs-target="#modalSillasVendidas">Ver</button>
                    </div>
                @endif
            </div>
        @endforeach
    </div>
</div>

<!-- MODAL: Sillas Vendidas por Sección -->
<div class="modal fade" id="modalSillasVendidas" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSillasTitle">Sillas Vendidas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="modalSillasBody"></div>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var sillasVendidas = @json($sillasVendidaDetalle);

    document.getElementById('modalSillasVendidas').addEventListener('show.bs.modal', function (event) {
        var seccion = event.relatedTarget.getAttribute('data-seccion');
        var title   = document.getElementById('modalSillasTitle');
        var body    = document.getElementById('modalSillasBody');

        title.textContent = 'Sillas Vendidas — ' + seccion;

        var sillas = sillasVendidas[seccion] || [];

        if (sillas.length === 0) {
            body.innerHTML = '<p class="text-center text-muted py-3">No hay sillas vendidas en esta sección.</p>';
            return;
        }

        var html = '<table class="panel-table">' +
            '<thead><tr><th>Fila</th><th>Número</th><th>Estado</th><th>Cliente</th></tr></thead>' +
            '<tbody>';

        sillas.forEach(function (s) {
            var badge = s.estado === 'vendida' ? 'badge-paid' : 'badge-pending';
            var label = s.estado.charAt(0).toUpperCase() + s.estado.slice(1);
            html += '<tr>' +
                '<td>' + s.fila + '</td>' +
                '<td>' + s.numero + '</td>' +
                '<td><span class="' + badge + '">' + label + '</span></td>' +
                '<td>' + s.cliente + '</td>' +
                '</tr>';
        });

        html += '</tbody></table>';
        body.innerHTML = html;
    });
})();
</script>
@endpush

@endsection