@php
    $totalPendiente = (float) $pendientes->sum('total');
    $cantidadPendiente = (int) $pendientes->sum('cantidad');

    $eventoHash = Hashids::encode(
        $evento->id,
        time()
    );

    $mesaHash = Hashids::encode(
        $mesa->id,
        time()
    );

    $accionHash = Hashids::encode(
        $evento->id,
        $mesa->id,
        time()
    );

    $contenidoUrl = route(
        'mozo.mesa.contenido',
        [
            $eventoHash,
            $mesaHash
        ]
    );

    $tienePendientes = $pendientes->count() > 0;
    $tieneCerradas = $cerradas->count() > 0;
@endphp

<div
    class="card mesa-card"
    id="mesa-card-{{ $mesa->id }}"
>

    <div
        class="card-header bg-dark text-light mesa-header"
        data-target="#mesa-body-{{ $mesa->id }}"
    >

        <h3 class="card-title">

            <i class="fa-regular fa-file-lines mr-1"></i>

            {{ $mesa->nombre }}

            @if($tienePendientes)

                <span class="badge badge-warning mesa-estado ml-2">
                    Pendiente
                </span>

            @else

                <span class="badge badge-success mesa-estado ml-2">
                    Cerrada
                </span>

            @endif

        </h3>

        <div class="card-tools">

            @if($tienePendientes)

                <button
                    type="button"
                    class="btn btn-tool text-light btn-imprimir-mesa"
                    data-mesa-id="{{ $mesa->id }}"
                    data-mesa-nombre="{{ $mesa->nombre }}"
                    data-url="{{ route(
                        'mozo.mesa.imprimir',
                        $accionHash
                    ) }}"
                    title="Imprimir mesa"
                >
                    <i class="fa-solid fa-print fa-lg"></i>
                </button>

                <button
                    type="button"
                    class="btn btn-tool text-light btn-cerrar-mesa"
                    data-mesa-id="{{ $mesa->id }}"
                    data-mesa-nombre="{{ $mesa->nombre }}"
                    data-total="{{ $totalPendiente }}"
                    data-url="{{ route(
                        'mozo.mesa.cerrar',
                        $accionHash
                    ) }}"
                    data-contenido-url="{{ $contenidoUrl }}"
                    title="Cerrar mesa"
                >
                    <i class="fa-solid fa-wallet fa-lg"></i>
                </button>

            @endif

            <button
                type="button"
                class="btn btn-tool text-light"
                tabindex="-1"
            >
                <i class="fas fa-chevron-down"></i>
            </button>

        </div>

    </div>

    <div
        class="card-body"
        id="mesa-body-{{ $mesa->id }}"
        style="{{ $tienePendientes ? '' : 'display:none;' }}"
    >

        {{-- Cierres anteriores --}}
        @foreach($cerradas as $hash => $grupo)

            @php
                $primeraComanda = $grupo->first();
            @endphp

            <div class="table-responsive mb-3">

                <table class="table table-sm table-hover table-striped tabla-mesa">

                    <thead>
                        <tr>
                            <th>Hora</th>
                            <th>Por</th>
                            <th>Producto</th>
                            <th class="text-center">
                                Descuento
                            </th>
                            <th class="text-center">
                                Cantidad
                            </th>
                            <th class="text-right">
                                Subtotal
                            </th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach($grupo as $comanda)

                            <tr>

                                <td>
                                    {{ optional($comanda->created_at)->format('H:i') }}
                                </td>

                                <td>
                                    {{ optional($comanda->user)->name }}
                                </td>

                                <td>
                                    {{ optional($comanda->producto)->nombre }}
                                </td>

                                <td class="text-center">

                                    @if($comanda->descuento)
                                        {{ $comanda->descuento * 100 }}%
                                    @endif

                                </td>

                                <td class="text-center">
                                    {{ $comanda->cantidad }}
                                </td>

                                <td class="text-right">
                                    ${{ number_format(
                                        $comanda->total,
                                        0,
                                        ',',
                                        '.'
                                    ) }}
                                </td>

                            </tr>

                        @endforeach

                        <tr class="font-weight-bold">

                            <th>
                                {{ $primeraComanda
                                    ? optional($primeraComanda->updated_at)->format('H:i')
                                    : '' }}
                            </th>

                            <th class="text-success">

                                {{ $primeraComanda
                                    ? optional($primeraComanda->medio)->nombre
                                    : '' }}

                            </th>

                            <th></th>
                            <th></th>

                            <th class="text-center">
                                {{ $grupo->sum('cantidad') }}
                            </th>

                            <th class="text-right">
                                ${{ number_format(
                                    $grupo->sum('total'),
                                    0,
                                    ',',
                                    '.'
                                ) }}
                            </th>

                        </tr>

                    </tbody>

                </table>

            </div>

            @if(!$loop->last)
                <hr>
            @endif

        @endforeach

        {{-- Separación entre cerradas y pendientes --}}
        @if($tieneCerradas && $tienePendientes)
            <hr>
        @endif

        {{-- Pendientes --}}
        @if($tienePendientes)

            <div class="table-responsive">

                <table class="table table-sm table-hover table-striped tabla-mesa">

                    <thead>
                        <tr>
                            <th>Hora</th>
                            <th>Por</th>
                            <th>Producto</th>
                            <th class="text-center">
                                Cantidad
                            </th>
                            <th class="text-right">
                                Subtotal
                            </th>
                            <th class="text-center">
                                Borrar
                            </th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach($pendientes as $comanda)

                            <tr id="comanda-row-{{ $comanda->id }}">

                                <td>
                                    {{ optional($comanda->created_at)->format('H:i') }}
                                </td>

                                <td>
                                    {{ optional($comanda->user)->name }}
                                </td>

                                <td>
                                    {{ optional($comanda->producto)->nombre }}
                                </td>

                                <td class="text-center">
                                    {{ $comanda->cantidad }}
                                </td>

                                <td class="text-right">
                                    ${{ number_format(
                                        $comanda->total,
                                        0,
                                        ',',
                                        '.'
                                    ) }}
                                </td>

                                <td class="text-center">

                                    <button
                                        type="button"
                                        class="btn btn-link text-danger p-0 btn-eliminar-comanda"
                                        data-mesa-id="{{ $mesa->id }}"
                                        data-producto="{{ optional($comanda->producto)->nombre }}"
                                        data-cantidad="{{ $comanda->cantidad }}"
                                        data-url="{{ route(
                                            'mozo.mesas.comanda.eliminar',
                                            Hashids::encode(
                                                $comanda->id,
                                                time()
                                            )
                                        ) }}"
                                        data-contenido-url="{{ $contenidoUrl }}"
                                        title="Eliminar producto"
                                    >
                                        <i class="fa-solid fa-trash fa-lg"></i>
                                    </button>

                                </td>

                            </tr>

                        @endforeach

                        <tr class="font-weight-bold">

                            <th>Total</th>

                            <th class="text-warning">
                                Pendiente de cierre
                            </th>

                            <th></th>

                            <th class="text-center">
                                {{ $cantidadPendiente }}
                            </th>

                            <th class="text-right">
                                ${{ number_format(
                                    $totalPendiente,
                                    0,
                                    ',',
                                    '.'
                                ) }}
                            </th>

                            <th></th>

                        </tr>

                    </tbody>

                </table>

            </div>

        @elseif(!$tieneCerradas)

            <div class="text-center text-muted py-3">
                Esta mesa no tiene comandas.
            </div>

        @endif

    </div>

</div>