@extends('layouts.master')

@section('title', 'Mesas')

@section('content')

    @php
    /*
    * Resumen compatible con el controlador optimizado
    * y con el controlador anterior.
    */
    $resumenActual = $resumen ?? [
        'pendiente'     => (float) $evento->comandasMedio(7),
        'efectivo'      => (float) $evento->comandasMedio(1),
        'tarjeta'       => (float) $evento->comandasMedio(2),
        'free'          => (float) $evento->comandasMedio(4),
        'transferencia' => (float) $evento->comandasMedio(5),
        'qr'            => (float) $evento->comandasMedio(6),

        'total' => (float) (
            $evento->comandasMedio(7)
            + $evento->comandasMedio(1)
            + $evento->comandasMedio(2)
            + $evento->comandasMedio(5)
            + $evento->comandasMedio(6)
        ),
    ];
@endphp

<style>
.mesa-card {
    position: relative;
}

.mesa-header,
.barra-header {
    cursor: pointer;
    user-select: none;
}

.mesa-header .card-tools,
.barra-header .card-tools {
    display: flex;
    align-items: center;
}

.mesa-header .card-tools,
.barra-header .card-tools,
.mesa-header [id^="acciones-mesa-"] {
    display: flex;
    align-items: center;
}

.mesa-header .btn-tool,
.barra-header .btn-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    padding: 0;

    line-height: 1;
}

.mesa-header .btn-tool i,
.barra-header .btn-tool i {
    margin: 0;
    line-height: 1;
}

.mesa-estado {
    font-size: 11px;
    vertical-align: middle;
}

.tabla-mesa {
    min-width: 650px;
    margin-bottom: 0;
}

.resumen-monto {
    white-space: nowrap;
}

.mesa-cargando {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .75);
}

@media (max-width: 767px) {
    .content-header h1 {
        font-size: 22px;
    }

    .mesa-header .card-title {
        font-size: 15px;
    }

    .tabla-mesa {
        font-size: 13px;
    }

    .mesa-header .btn-tool {
        min-width: 36px;
        padding-left: 7px;
        padding-right: 7px;
    }
}
</style>

<div class="content-header">
    <div class="container-fluid">

        <div class="row mb-2">

            <div class="col-12 col-md-8">

                <h1 class="m-0 text-dark">
                    Mesas
                    <small>{{ $evento->nombre }}</small>
                </h1>

            </div>

            <div class="col-12 col-md-2 mt-2 mt-md-0">

                <button
                type="button"
                class="btn btn-outline-primary btn-block"
                id="btnImprimirTodas"
                data-url="{{ route(
                    'mozo.mesas.imprimir',
                    Hashids::encode($evento->id, time())
                    ) }}"
                    >
                    <i class="fas fa-print mr-1"></i>
                    Imprimir todo
                </button>

            </div>

            <div class="col-12 col-md-2 mt-2 mt-md-0">

                <a
                href="{{ route(
                    'mozo.carta',
                    Hashids::encode($evento->id, time())
                    ) }}"
                    class="btn btn-outline-secondary btn-block"
                    >
                    Volver
                </a>

            </div>

        </div>

    </div>
</div>

<section class="content">
    <div class="container-fluid">

        <div id="alertasMesas"></div>

        <div class="row">
            <div class="col-12">

                <div id="contenedorMesas">

                    @forelse($mesas as $mesa)

                        @php
                        /*
                        * Si el controlador trae las comandas precargadas,
                        * se utilizan esas colecciones.
                        *
                        * Si no existen, se usan los métodos anteriores
                        * del modelo Mesa.
                        */
                        if (isset($comandasPendientes)) {
                            $pendientes = collect(
                                $comandasPendientes->get(
                                    $mesa->id,
                                    collect()
                                    )
                                );
                            } else {
                                $pendientes = collect(
                                    $mesa->comandas($evento->id)
                                );
                            }

                            if (isset($comandasCerradas)) {
                                $cerradas = collect(
                                    $comandasCerradas->get(
                                        $mesa->id,
                                        collect()
                                        )
                                    );
                                } else {
                                    $cerradas = collect(
                                        $mesa->comandasCerradasGrupos(
                                            $evento->id
                                            )
                                        );
                                    }

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

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

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

                                    <div
                                    class="card mesa-card"
                                    id="mesa-card-{{ $mesa->id }}"
                                    data-mesa-id="{{ $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 }}

                                        <span
                                        id="mesa-estado-{{ $mesa->id }}"
                                        class="badge ml-2 mesa-estado
                                        {{ $tienePendientes
                                            ? 'badge-warning'
                                            : 'badge-success'
                                        }}"
                                        >
                                        {{ $tienePendientes
                                            ? 'Pendiente'
                                            : 'Cerrada'
                                        }}
                                    </span>

                                </h3>

                                <div class="card-tools">

                                    <div
                                    id="acciones-mesa-{{ $mesa->id }}"
                                    style="{{ $tienePendientes
                                        ? 'display:flex;'
                                        : 'display:none;'
                                    }}"
                                    >

                                    {{-- Imprimir --}}
                                    <button
                                    type="button"
                                    class="btn btn-tool text-light btn-imprimir-mesa"
                                    data-toggle="modal"
                                    data-target="#modalImprimirMesa"
                                    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>

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

                                </div>
                            </div>

                        </div>

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

                        {{-- Cierres anteriores --}}
                        <div id="cierres-mesa-{{ $mesa->id }}">

                            @foreach($cerradas as $hashCierre => $grupoOriginal)

                                @php
                                $grupo = collect($grupoOriginal);
                                $ultimaComanda = $grupo->last();
                                @endphp

                                <div class="cierre-anterior mb-3">

                                    <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">
                                                        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>
                                                                        {{ $ultimaComanda
                                                                            ? optional(
                                                                                $ultimaComanda->updated_at
                                                                                )->format('H:i')
                                                                                : ''
                                                                            }}
                                                                        </th>

                                                                        <th class="text-success">
                                                                            {{ $ultimaComanda
                                                                                ? optional(
                                                                                    $ultimaComanda->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>

                                                            </div>

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

                                                        @endforeach

                                                    </div>

                                                    @if($tieneCerradas && $tienePendientes)
                                                        <hr>
                                                    @endif

                                                    {{-- Comandas pendientes --}}
                                                    <div id="pendientes-contenedor-{{ $mesa->id }}">

                                                        @if($tienePendientes)

                                                            <div class="table-responsive">

                                                                <table
                                                                class="table table-sm table-hover table-striped tabla-mesa"
                                                                id="pendientes-table-{{ $mesa->id }}"
                                                                >

                                                                <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 columna-borrar">
                                                                            Borrar
                                                                        </th>
                                                                    </tr>
                                                                </thead>

                                                                <tbody id="pendientes-body-{{ $mesa->id }}">

                                                                    @foreach($pendientes as $comanda)

                                                                        <tr
                                                                        class="comanda-pendiente"
                                                                        id="comanda-row-{{ $comanda->id }}"
                                                                        data-total="{{ (float) $comanda->total }}"
                                                                        data-cantidad="{{ (int) $comanda->cantidad }}"
                                                                        >

                                                                        <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 subtotal-comanda">
                                                                                        ${{ number_format(
                                                                                            $comanda->total,
                                                                                            0,
                                                                                            ',',
                                                                                            '.'
                                                                                            ) }}
                                                                                        </td>

                                                                                        <td class="text-center columna-borrar">

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

                                                                                                </td>

                                                                                            </tr>

                                                                                        @endforeach

                                                                                        <tr
                                                                                        class="font-weight-bold"
                                                                                        id="pendientes-total-row-{{ $mesa->id }}"
                                                                                        >

                                                                                        <th>Total</th>

                                                                                        <th
                                                                                        class="text-warning"
                                                                                        id="mesa-estado-pago-{{ $mesa->id }}"
                                                                                        >
                                                                                        Pendiente de cierre
                                                                                    </th>

                                                                                    <th></th>

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

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

                                                                                <th class="columna-borrar"></th>

                                                                            </tr>

                                                                        </tbody>

                                                                    </table>

                                                                </div>

                                                            @elseif(!$tieneCerradas)

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

                                                            @endif

                                                        </div>

                                                    </div>

                                                </div>

                                            @empty

                                                <div class="card">
                                                    <div class="card-body text-center text-muted">
                                                        No existen mesas activas con comandas.
                                                    </div>
                                                </div>

                                            @endforelse

                                        </div>

                                        {{-- Barra --}}
                                        @if($comandasBarra->count())

                                            <div class="card">

                                                <div
                                                class="card-header bg-dark text-light barra-header"
                                                data-target="contenidoBarra"
                                                >

                                                <h3 class="card-title">
                                                    <i class="fa-regular fa-file-lines mr-1"></i>
                                                    Barra
                                                </h3>

                                                <div class="card-tools">

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

                                            </div>

                                        </div>

                                        <div
                                        class="card-body"
                                        id="contenidoBarra"
                                        style="display:none;"
                                        >

                                        <div class="table-responsive">

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

                                                <thead>
                                                    <tr>
                                                        <th>Hora</th>
                                                        <th>Por</th>
                                                        <th>Nombre</th>
                                                        <th>Producto</th>

                                                        <th class="text-center">
                                                            Descuento
                                                        </th>

                                                        <th class="text-center">
                                                            Cantidad
                                                        </th>

                                                        <th class="text-center">
                                                            Pago
                                                        </th>

                                                        <th class="text-right">
                                                            Subtotal
                                                        </th>
                                                    </tr>
                                                </thead>

                                                <tbody>

                                                    @foreach($comandasBarra as $comanda)

                                                        <tr>

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

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

                                                                    <td>
                                                                        {{ $comanda->nombre }}
                                                                    </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-center">
                                                                            {{ optional(
                                                                                $comanda->medio
                                                                                )->nombre }}
                                                                            </td>

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

                                                                            </tr>

                                                                        @endforeach

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

                                                                            <th>Total</th>

                                                                            <th class="text-success">
                                                                                Cerrado
                                                                            </th>

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

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

                                                                            <th></th>

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

                                                                            </tr>

                                                                        </tbody>

                                                                    </table>

                                                                </div>

                                                            </div>

                                                        </div>

                                                    @endif

                                                    {{-- Resumen --}}
                                                    <div class="card">

                                                        <div class="card-header bg-dark text-light">

                                                            <h3 class="card-title">
                                                                <i class="fa-regular fa-file-lines mr-1"></i>
                                                                Resumen
                                                            </h3>

                                                        </div>

                                                        <div class="card-body">

                                                            <div class="table-responsive">

                                                                @if(Auth::user()->hasRole('administrador'))

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

                                                                        <thead>
                                                                            <tr>
                                                                                <th></th>
                                                                                <th class="text-center">Pendiente</th>
                                                                                <th class="text-center">Efectivo</th>
                                                                                <th class="text-center">Débito / Crédito</th>
                                                                                <th class="text-center">QR</th>
                                                                                <th class="text-center">Transferencia</th>
                                                                                <th class="text-center">Free</th>
                                                                                <th class="text-right">Total</th>
                                                                            </tr>
                                                                        </thead>

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

                                                                                <th>Monto</th>

                                                                                <td
                                                                                class="text-center resumen-monto"
                                                                                id="resumenPendiente"
                                                                                data-value="{{ $resumenActual['pendiente'] }}"
                                                                                >
                                                                                ${{ number_format(
                                                                                    $resumenActual['pendiente'],
                                                                                    0,
                                                                                    ',',
                                                                                    '.'
                                                                                    ) }}
                                                                                </td>

                                                                                <td
                                                                                class="text-center resumen-monto"
                                                                                id="resumenEfectivo"
                                                                                data-value="{{ $resumenActual['efectivo'] }}"
                                                                                >
                                                                                ${{ number_format(
                                                                                    $resumenActual['efectivo'],
                                                                                    0,
                                                                                    ',',
                                                                                    '.'
                                                                                    ) }}
                                                                                </td>

                                                                                <td
                                                                                class="text-center resumen-monto"
                                                                                id="resumenTarjeta"
                                                                                data-value="{{ $resumenActual['tarjeta'] }}"
                                                                                >
                                                                                ${{ number_format(
                                                                                    $resumenActual['tarjeta'],
                                                                                    0,
                                                                                    ',',
                                                                                    '.'
                                                                                    ) }}
                                                                                </td>

                                                                                <td
                                                                                class="text-center resumen-monto"
                                                                                id="resumenQr"
                                                                                data-value="{{ $resumenActual['qr'] }}"
                                                                                >
                                                                                ${{ number_format(
                                                                                    $resumenActual['qr'],
                                                                                    0,
                                                                                    ',',
                                                                                    '.'
                                                                                    ) }}
                                                                                </td>

                                                                                <td
                                                                                class="text-center resumen-monto"
                                                                                id="resumenTransferencia"
                                                                                data-value="{{ $resumenActual['transferencia'] }}"
                                                                                >
                                                                                ${{ number_format(
                                                                                    $resumenActual['transferencia'],
                                                                                    0,
                                                                                    ',',
                                                                                    '.'
                                                                                    ) }}
                                                                                </td>

                                                                                <td
                                                                                class="text-center resumen-monto"
                                                                                id="resumenFree"
                                                                                data-value="{{ $resumenActual['free'] }}"
                                                                                >
                                                                                ${{ number_format(
                                                                                    $resumenActual['free'],
                                                                                    0,
                                                                                    ',',
                                                                                    '.'
                                                                                    ) }}
                                                                                </td>

                                                                                <td
                                                                                class="text-right resumen-monto"
                                                                                id="resumenTotal"
                                                                                data-value="{{ $resumenActual['total'] }}"
                                                                                >
                                                                                ${{ number_format(
                                                                                    $resumenActual['total'],
                                                                                    0,
                                                                                    ',',
                                                                                    '.'
                                                                                    ) }}
                                                                                </td>

                                                                            </tr>
                                                                        </tbody>

                                                                    </table>

                                                                @else

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

                                                                        <thead>
                                                                            <tr>
                                                                                <th></th>
                                                                                <th class="text-center">Pendiente</th>
                                                                                <th class="text-center">Efectivo</th>
                                                                            </tr>
                                                                        </thead>

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

                                                                                <th>Monto</th>

                                                                                <td
                                                                                class="text-center resumen-monto"
                                                                                id="resumenPendiente"
                                                                                data-value="{{ $resumenActual['pendiente'] }}"
                                                                                >
                                                                                ${{ number_format(
                                                                                    $resumenActual['pendiente'],
                                                                                    0,
                                                                                    ',',
                                                                                    '.'
                                                                                    ) }}
                                                                                </td>

                                                                                <td
                                                                                class="text-center resumen-monto"
                                                                                id="resumenEfectivo"
                                                                                data-value="{{ $resumenActual['efectivo'] }}"
                                                                                >
                                                                                ${{ number_format(
                                                                                    $resumenActual['efectivo'],
                                                                                    0,
                                                                                    ',',
                                                                                    '.'
                                                                                    ) }}
                                                                                </td>

                                                                            </tr>
                                                                        </tbody>

                                                                    </table>

                                                                @endif

                                                            </div>

                                                        </div>

                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                    </section>

                                    {{-- Modal imprimir --}}
                                    <div
                                    class="modal fade"
                                    id="modalImprimirMesa"
                                    tabindex="-1"
                                    role="dialog"
                                    aria-hidden="true"
                                    >
                                    <div class="modal-dialog" role="document">

                                        <form
                                        id="formImprimirMesa"
                                        method="POST"
                                        action=""
                                        >

                                        @csrf

                                        <div class="modal-content">

                                            <div class="modal-header">

                                                <h5 class="modal-title">
                                                    Imprimir
                                                    <strong id="imprimirMesaNombre"></strong>
                                                </h5>

                                                <button
                                                type="button"
                                                class="close"
                                                data-dismiss="modal"
                                                aria-label="Cerrar"
                                                >
                                                <span>&times;</span>
                                            </button>

                                        </div>

                                        <div class="modal-body">

                                            <div class="form-group mb-0">

                                                <label class="font-weight-bold">
                                                    Descuento
                                                </label>

                                                <div class="input-group">

                                                    <input
                                                    type="number"
                                                    name="descuento"
                                                    id="imprimirDescuento"
                                                    value="0"
                                                    min="0"
                                                    max="100"
                                                    step="1"
                                                    class="form-control"
                                                    required
                                                    >

                                                    <div class="input-group-append">
                                                        <span class="input-group-text">%</span>
                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                        <div class="modal-footer p-0">

                                            <button
                                            type="submit"
                                            class="btn btn-success btn-block btn-lg m-0 rounded-0"
                                            id="btnConfirmarImpresion"
                                            >
                                            <i class="fas fa-print mr-2"></i>
                                            Imprimir mesa
                                        </button>

                                    </div>

                                </div>

                            </form>

                        </div>
                    </div>

                    {{-- Modal cerrar --}}
                    <div
                    class="modal fade"
                    id="modalCerrarMesa"
                    tabindex="-1"
                    role="dialog"
                    aria-hidden="true"
                    >
                    <div class="modal-dialog" role="document">

                        <form
                        id="formCerrarMesa"
                        method="POST"
                        action=""
                        >

                        @csrf

                        <div class="modal-content">

                            <div class="modal-header">

                                <h5 class="modal-title">
                                    Cerrar
                                    <strong id="cerrarMesaNombre"></strong>
                                </h5>

                                <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-label="Cerrar"
                                >
                                <span>&times;</span>
                            </button>

                        </div>

                        <div class="modal-body">

                            <div class="border rounded bg-light text-center p-3 mb-3">

                                <div class="text-muted">
                                    Total pendiente
                                </div>

                                <strong
                                id="cerrarMesaTotal"
                                style="font-size:28px;"
                                >
                                $0
                            </strong>

                        </div>

                        <div class="form-group">

                            <label class="font-weight-bold">
                                Descuento
                            </label>

                            <div class="input-group">

                                <input
                                type="number"
                                name="descuento"
                                id="cerrarDescuento"
                                value="0"
                                min="0"
                                max="100"
                                step="1"
                                class="form-control"
                                required
                                >

                                <div class="input-group-append">
                                    <span class="input-group-text">%</span>
                                </div>

                            </div>

                        </div>

                        <div class="form-group mb-0">

                            <label class="font-weight-bold">
                                Medio de pago *
                            </label>

                            {{ Form::select(
                                'medio_id',
                                $ddMedios,
                                2,
                                [
                                    'required' => true,
                                    'class' => 'form-control',
                                    'id' => 'cerrarMedioId'
                                ]
                                ) }}

                            </div>

                        </div>

                        <div class="modal-footer p-0">

                            <button
                            type="submit"
                            class="btn btn-success btn-block btn-lg m-0 rounded-0"
                            id="btnConfirmarCierre"
                            >
                            <i class="fas fa-wallet mr-2"></i>
                            Cerrar mesa
                        </button>

                    </div>

                </div>

            </form>

        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {

        function formatoDinero(valor) {
            return '$' + Number(valor || 0).toLocaleString(
                'es-AR',
                {
                    maximumFractionDigits: 0
                }
            );
        }

        function mostrarMensaje(tipo, mensaje) {
            /*
            * Usa Toastr si está disponible.
            */
            if (window.toastr) {
                if (tipo === 'success') {
                    window.toastr.success(mensaje);
                } else {
                    window.toastr.error(mensaje);
                }

                return;
            }

            const contenedor = document.getElementById(
                'alertasMesas'
            );

            if (!contenedor) {
                window.alert(mensaje);
                return;
            }

            const clase = tipo === 'success'
            ? 'alert-success'
            : 'alert-danger';

            contenedor.innerHTML = '';

            const alerta = document.createElement('div');

            alerta.className =
            'alert '
            + clase
            + ' alert-dismissible fade show';

            const texto = document.createElement('span');

            texto.textContent = mensaje;

            const cerrar = document.createElement('button');

            cerrar.type = 'button';
            cerrar.className = 'close';
            cerrar.innerHTML = '<span>&times;</span>';

            cerrar.addEventListener('click', function () {
                alerta.remove();
            });

            alerta.appendChild(texto);
            alerta.appendChild(cerrar);

            contenedor.appendChild(alerta);

            window.setTimeout(function () {
                alerta.remove();
            }, 4000);
        }

        function cerrarModal(id) {
            /*
            * Al momento de presionar Guardar, jQuery y Bootstrap
            * ya fueron cargados por el layout.
            */
            if (
                window.jQuery
                && window.jQuery.fn
                && typeof window.jQuery.fn.modal === 'function'
            ) {
                window.jQuery('#' + id).modal('hide');
                return;
            }

            const modal = document.getElementById(id);

            if (modal) {
                modal.style.display = 'none';
                modal.classList.remove('show');
            }

            document.body.classList.remove('modal-open');

            document
            .querySelectorAll('.modal-backdrop')
            .forEach(function (backdrop) {
                backdrop.remove();
            });
        }

        async function ejecutarPeticion(url, opciones) {
            if (!url) {
                throw new Error(
                    'No se encontró la ruta de la operación.'
                );
            }

            const configuracion = opciones || {};

            configuracion.headers = Object.assign(
                {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                configuracion.headers || {}
            );

            const respuesta = await fetch(
                url,
                configuracion
            );

            const texto = await respuesta.text();

            let datos = {};

            if (texto) {
                try {
                    datos = JSON.parse(texto);
                } catch (error) {
                    /*
                    * Compatibilidad con funciones que todavía
                    * devuelven redirect()->back().
                    */
                    datos = {
                        success: respuesta.ok
                    };
                }
            }

            if (!respuesta.ok || datos.success === false) {
                let mensaje =
                datos.message
                || 'No se pudo realizar la operación.';

                if (datos.errors) {
                    const errores = Object.values(
                        datos.errors
                    ).flat();

                    if (errores.length) {
                        mensaje = errores[0];
                    }
                }

                throw new Error(mensaje);
            }

            return datos;
        }

        function bloquearMesa(mesaId) {
            const card = document.getElementById(
                'mesa-card-' + mesaId
            );

            if (!card || card.querySelector('.mesa-cargando')) {
                return;
            }

            const capa = document.createElement('div');

            capa.className = 'mesa-cargando';

            capa.innerHTML =
            '<i class="fas fa-spinner fa-spin fa-2x"></i>';

            card.appendChild(capa);
        }

        function desbloquearMesa(mesaId) {
            const card = document.getElementById(
                'mesa-card-' + mesaId
            );

            if (!card) {
                return;
            }

            const capa = card.querySelector(
                '.mesa-cargando'
            );

            if (capa) {
                capa.remove();
            }
        }

        function obtenerResumenValor(id) {
            const elemento = document.getElementById(id);

            if (!elemento) {
                return 0;
            }

            return Number(
                elemento.getAttribute('data-value') || 0
            );
        }

        function establecerResumenValor(id, valor) {
            const elemento = document.getElementById(id);

            if (!elemento) {
                return;
            }

            const numero = Math.max(
                0,
                Number(valor || 0)
            );

            elemento.setAttribute(
                'data-value',
                numero
            );

            elemento.textContent =
            formatoDinero(numero);
        }

        function actualizarResumenRespuesta(resumen) {
            if (!resumen) {
                return false;
            }

            const campos = {
                pendiente: 'resumenPendiente',
                efectivo: 'resumenEfectivo',
                tarjeta: 'resumenTarjeta',
                qr: 'resumenQr',
                transferencia: 'resumenTransferencia',
                free: 'resumenFree',
                total: 'resumenTotal'
            };

            Object.keys(campos).forEach(function (clave) {
                if (resumen[clave] !== undefined) {
                    establecerResumenValor(
                        campos[clave],
                        resumen[clave]
                    );
                }
            });

            return true;
        }

        function ajustarResumenEliminacion(totalEliminado) {
            establecerResumenValor(
                'resumenPendiente',
                obtenerResumenValor('resumenPendiente')
                - totalEliminado
            );

            establecerResumenValor(
                'resumenTotal',
                obtenerResumenValor('resumenTotal')
                - totalEliminado
            );
        }

        function ajustarResumenCierre(
            totalAnterior,
            totalFinal,
            medioId
        ) {
            establecerResumenValor(
                'resumenPendiente',
                obtenerResumenValor('resumenPendiente')
                - totalAnterior
            );

            const medios = {
                1: 'resumenEfectivo',
                2: 'resumenTarjeta',
                4: 'resumenFree',
                5: 'resumenTransferencia',
                6: 'resumenQr'
            };

            const campoMedio = medios[medioId];

            if (campoMedio) {
                establecerResumenValor(
                    campoMedio,
                    obtenerResumenValor(campoMedio)
                    + totalFinal
                );
            }

            /*
            * Mantiene el cálculo original:
            * Free no se suma al total general.
            */
            establecerResumenValor(
                'resumenTotal',
                obtenerResumenValor('resumenTotal')
                - totalAnterior
                + (medioId === 4 ? 0 : totalFinal)
            );
        }

        function recalcularMesa(mesaId) {
            const filas = document.querySelectorAll(
                '#pendientes-body-'
                + mesaId
                + ' .comanda-pendiente'
            );

            let total = 0;
            let cantidad = 0;

            filas.forEach(function (fila) {
                total += Number(
                    fila.getAttribute('data-total') || 0
                );

                cantidad += Number(
                    fila.getAttribute('data-cantidad') || 0
                );
            });

            const cantidadElemento = document.getElementById(
                'mesa-cantidad-' + mesaId
            );

            const totalElemento = document.getElementById(
                'mesa-total-' + mesaId
            );

            if (cantidadElemento) {
                cantidadElemento.textContent = cantidad;
            }

            if (totalElemento) {
                totalElemento.setAttribute(
                    'data-value',
                    total
                );

                totalElemento.textContent =
                formatoDinero(total);
            }

            const botonCerrar = document.querySelector(
                '#mesa-card-'
                + mesaId
                + ' .btn-cerrar-mesa'
            );

            if (botonCerrar) {
                botonCerrar.setAttribute(
                    'data-total',
                    total
                );
            }

            if (filas.length === 0) {
                const cardMesa = document.getElementById(
                    'mesa-card-' + mesaId
                );

                if (cardMesa) {
                    /*
                    * Pequeña animación antes de eliminar la mesa.
                    */
                    cardMesa.style.transition =
                    'opacity .25s ease, transform .25s ease';

                    cardMesa.style.opacity = '0';
                    cardMesa.style.transform = 'translateY(-10px)';

                    window.setTimeout(function () {
                        cardMesa.remove();

                        /*
                        * Si ya no quedan mesas, mostrar un aviso.
                        */
                        const contenedorMesas = document.getElementById(
                            'contenedorMesas'
                        );

                        if (
                            contenedorMesas
                            && !contenedorMesas.querySelector('.mesa-card')
                        ) {
                            contenedorMesas.innerHTML = `
                            <div class="card">
                            <div class="card-body text-center text-muted">
                            No existen mesas activas con comandas.
                            </div>
                            </div>
                            `;
                        }
                    }, 250);
                }

                return;
            }
        }

        /*
        * Desplegar y contraer mesas.
        */
        document.addEventListener(
            'click',
            function (event) {
                const encabezado = event.target.closest(
                    '.mesa-header, .barra-header'
                );

                if (!encabezado) {
                    return;
                }

                if (
                    event.target.closest(
                        'button, a, input, select'
                    )
                ) {
                    return;
                }

                const targetId = encabezado.getAttribute(
                    'data-target'
                );

                const contenido = document.getElementById(
                    targetId
                );

                if (!contenido) {
                    return;
                }

                contenido.style.display =
                contenido.style.display === 'none'
                ? 'block'
                : 'none';
            }
        );

        /*
        * Preparar modal imprimir.
        */
        document.addEventListener(
            'click',
            function (event) {
                const boton = event.target.closest(
                    '.btn-imprimir-mesa'
                );

                if (!boton) {
                    return;
                }

                const form = document.getElementById(
                    'formImprimirMesa'
                );

                form.setAttribute(
                    'action',
                    boton.getAttribute('data-url')
                );

                form.setAttribute(
                    'data-mesa-id',
                    boton.getAttribute('data-mesa-id')
                );

                document.getElementById(
                    'imprimirMesaNombre'
                ).textContent = boton.getAttribute(
                    'data-mesa-nombre'
                );

                document.getElementById(
                    'imprimirDescuento'
                ).value = 0;
            }
        );

        /*
        * Preparar modal cerrar.
        */
        document.addEventListener(
            'click',
            function (event) {
                const boton = event.target.closest(
                    '.btn-cerrar-mesa'
                );

                if (!boton) {
                    return;
                }

                const total = Number(
                    boton.getAttribute('data-total') || 0
                );

                const form = document.getElementById(
                    'formCerrarMesa'
                );

                form.setAttribute(
                    'action',
                    boton.getAttribute('data-url')
                );

                form.setAttribute(
                    'data-mesa-id',
                    boton.getAttribute('data-mesa-id')
                );

                form.setAttribute(
                    'data-total',
                    total
                );

                document.getElementById(
                    'cerrarMesaNombre'
                ).textContent = boton.getAttribute(
                    'data-mesa-nombre'
                );

                document.getElementById(
                    'cerrarMesaTotal'
                ).textContent = formatoDinero(total);

                document.getElementById(
                    'cerrarDescuento'
                ).value = 0;
            }
        );

        /*
        * Eliminar comanda.
        */
        document.addEventListener(
            'click',
            async function (event) {
                const boton = event.target.closest(
                    '.btn-eliminar-comanda'
                );

                if (!boton) {
                    return;
                }

                event.preventDefault();

                const producto = boton.getAttribute(
                    'data-producto'
                );

                const cantidad = boton.getAttribute(
                    'data-cantidad'
                );

                if (
                    !window.confirm(
                        '¿Estás seguro que querés eliminar '
                        + producto
                        + ' por '
                        + cantidad
                        + ' unidades?'
                    )
                ) {
                    return;
                }

                if (boton.disabled) {
                    return;
                }

                const mesaId = boton.getAttribute(
                    'data-mesa-id'
                );

                const comandaId = boton.getAttribute(
                    'data-comanda-id'
                );

                const totalEliminado = Number(
                    boton.getAttribute('data-total') || 0
                );

                boton.disabled = true;

                const icono = boton.querySelector('i');

                if (icono) {
                    icono.className =
                    'fas fa-spinner fa-spin fa-lg';
                }

                bloquearMesa(mesaId);

                try {
                    const respuesta = await ejecutarPeticion(
                        boton.getAttribute('data-url'),
                        {
                            method: 'GET'
                        }
                    );

                    const fila = document.getElementById(
                        'comanda-row-' + comandaId
                    );

                    if (fila) {
                        fila.remove();
                    }

                    if (
                        !actualizarResumenRespuesta(
                            respuesta.resumen
                        )
                    ) {
                        ajustarResumenEliminacion(
                            totalEliminado
                        );
                    }

                    recalcularMesa(mesaId);

                    mostrarMensaje(
                        'success',
                        respuesta.message
                        || 'Comanda eliminada exitosamente.'
                    );
                } catch (error) {
                    boton.disabled = false;

                    if (icono) {
                        icono.className =
                        'fa-solid fa-trash fa-lg';
                    }

                    mostrarMensaje(
                        'error',
                        error.message
                        || 'No se pudo eliminar la comanda.'
                    );
                } finally {
                    desbloquearMesa(mesaId);
                }
            }
        );

        /*
        * Imprimir mesa.
        */
        document.getElementById(
            'formImprimirMesa'
        ).addEventListener(
            'submit',
            async function (event) {
                event.preventDefault();

                const form = event.currentTarget;

                const boton = document.getElementById(
                    'btnConfirmarImpresion'
                );

                const url = form.getAttribute('action');

                if (!url) {
                    mostrarMensaje(
                        'error',
                        'No se encontró la ruta para imprimir.'
                    );

                    return;
                }

                if (boton.disabled) {
                    return;
                }

                boton.disabled = true;

                const contenidoOriginal =
                boton.innerHTML;

                boton.innerHTML =
                '<i class="fas fa-spinner fa-spin mr-1"></i>'
                + 'Imprimiendo...';

                try {
                    const respuesta = await ejecutarPeticion(
                        url,
                        {
                            method: 'POST',
                            body: new FormData(form)
                        }
                    );

                    cerrarModal('modalImprimirMesa');

                    mostrarMensaje(
                        'success',
                        respuesta.message
                        || 'Mesa impresa exitosamente.'
                    );
                } catch (error) {
                    mostrarMensaje(
                        'error',
                        error.message
                        || 'No se pudo imprimir la mesa.'
                    );
                } finally {
                    boton.disabled = false;
                    boton.innerHTML = contenidoOriginal;
                }
            }
        );

        /*
        * Cerrar mesa.
        */
        document.getElementById(
            'formCerrarMesa'
        ).addEventListener(
            'submit',
            async function (event) {
                event.preventDefault();

                const form = event.currentTarget;

                const boton = document.getElementById(
                    'btnConfirmarCierre'
                );

                const url = form.getAttribute('action');

                if (!url) {
                    mostrarMensaje(
                        'error',
                        'No se encontró la ruta para cerrar la mesa.'
                    );

                    return;
                }

                if (boton.disabled) {
                    return;
                }

                const mesaId = form.getAttribute(
                    'data-mesa-id'
                );

                const totalAnterior = Number(
                    form.getAttribute('data-total') || 0
                );

                const descuento = Number(
                    document.getElementById(
                        'cerrarDescuento'
                    ).value || 0
                );

                const medioSelect = document.getElementById(
                    'cerrarMedioId'
                );

                const medioId = Number(
                    medioSelect.value
                );

                const medioNombre =
                medioSelect.options[
                    medioSelect.selectedIndex
                ].text;

                boton.disabled = true;

                const contenidoOriginal =
                boton.innerHTML;

                boton.innerHTML =
                '<i class="fas fa-spinner fa-spin mr-1"></i>'
                + 'Cerrando...';

                bloquearMesa(mesaId);

                try {
                    const respuesta = await ejecutarPeticion(
                        url,
                        {
                            method: 'POST',
                            body: new FormData(form)
                        }
                    );

                    const factor =
                    1 - (descuento / 100);

                    const filas = document.querySelectorAll(
                        '#pendientes-body-'
                        + mesaId
                        + ' .comanda-pendiente'
                    );

                    filas.forEach(function (fila) {
                        const totalOriginal = Number(
                            fila.getAttribute(
                                'data-total'
                            ) || 0
                        );

                        const totalConDescuento =
                        totalOriginal * factor;

                        fila.setAttribute(
                            'data-total',
                            totalConDescuento
                        );

                        fila.classList.remove(
                            'comanda-pendiente'
                        );

                        fila.classList.add(
                            'table-success'
                        );

                        const subtotal = fila.querySelector(
                            '.subtotal-comanda'
                        );

                        if (subtotal) {
                            subtotal.textContent =
                            formatoDinero(
                                totalConDescuento
                            );
                        }
                    });

                    document
                    .querySelectorAll(
                        '#mesa-card-'
                        + mesaId
                        + ' .columna-borrar'
                    )
                    .forEach(function (columna) {
                        columna.remove();
                    });

                    const acciones = document.getElementById(
                        'acciones-mesa-' + mesaId
                    );

                    if (acciones) {
                        acciones.style.display = 'none';
                    }

                    const estado = document.getElementById(
                        'mesa-estado-' + mesaId
                    );

                    if (estado) {
                        estado.classList.remove('badge-warning');
                        estado.classList.add('badge-success');
                        estado.textContent = 'Cerrada';
                    }

                    /*
                    * Colapsar la mesa después de cerrarla.
                    */
                    const cuerpoMesa = document.getElementById(
                        'mesa-body-' + mesaId
                    );

                    if (cuerpoMesa) {
                        cuerpoMesa.style.display = 'none';
                    }

                    const estadoPago = document.getElementById(
                        'mesa-estado-pago-' + mesaId
                    );

                    if (estadoPago) {
                        estadoPago.classList.remove(
                            'text-warning'
                        );

                        estadoPago.classList.add(
                            'text-success'
                        );

                        estadoPago.textContent =
                        medioNombre;
                    }

                    const totalFinal =
                    totalAnterior * factor;

                    const totalElemento =
                    document.getElementById(
                        'mesa-total-' + mesaId
                    );

                    if (totalElemento) {
                        totalElemento.setAttribute(
                            'data-value',
                            totalFinal
                        );

                        totalElemento.textContent =
                        formatoDinero(totalFinal);
                    }

                    if (
                        !actualizarResumenRespuesta(
                            respuesta.resumen
                        )
                    ) {
                        ajustarResumenCierre(
                            totalAnterior,
                            totalFinal,
                            medioId
                        );
                    }

                    cerrarModal('modalCerrarMesa');

                    mostrarMensaje(
                        'success',
                        respuesta.message
                        || 'Mesa cerrada exitosamente.'
                    );
                } catch (error) {
                    mostrarMensaje(
                        'error',
                        error.message
                        || 'No se pudo cerrar la mesa.'
                    );
                } finally {
                    boton.disabled = false;
                    boton.innerHTML = contenidoOriginal;

                    desbloquearMesa(mesaId);
                }
            }
        );

        /*
        * Imprimir todas.
        */
        document.getElementById(
            'btnImprimirTodas'
        ).addEventListener(
            'click',
            async function () {
                const boton = this;

                if (boton.disabled) {
                    return;
                }

                if (
                    !window.confirm(
                        '¿Estás seguro que querés imprimir todas las mesas?'
                    )
                ) {
                    return;
                }

                boton.disabled = true;

                const contenidoOriginal =
                boton.innerHTML;

                boton.innerHTML =
                '<i class="fas fa-spinner fa-spin mr-1"></i>'
                + 'Imprimiendo...';

                try {
                    const respuesta = await ejecutarPeticion(
                        boton.getAttribute('data-url'),
                        {
                            method: 'GET'
                        }
                    );

                    mostrarMensaje(
                        'success',
                        respuesta.message
                        || 'Mesas impresas exitosamente.'
                    );
                } catch (error) {
                    mostrarMensaje(
                        'error',
                        error.message
                        || 'No se pudieron imprimir las mesas.'
                    );
                } finally {
                    boton.disabled = false;
                    boton.innerHTML = contenidoOriginal;
                }
            }
        );

    });
</script>

@endsection