@extends('layouts.master')

@section('title', 'Comandas')

@section('content')

<meta name="mobile-web-app-capable" content="yes">

<style>

    /*
    |--------------------------------------------------------------------------
    | Headers
    |--------------------------------------------------------------------------
    */

    .comanda-header {
        display: flex !important;
        align-items: center !important;
        width: 100%;
    }

    .comanda-header .card-title {
        margin: 0 !important;
        float: none !important;
        flex: 1 1 auto;
    }

    .comanda-header-tools {
        margin-left: auto !important;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .comanda-header-tools a {
        color: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        text-decoration: none;
    }

    .comanda-header-tools i {
        display: block;
        line-height: 1;
    }


    /*
    |--------------------------------------------------------------------------
    | Tablas responsive
    |--------------------------------------------------------------------------
    */

    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        width: 100%;
        margin-bottom: 0;
    }


    /*
    |--------------------------------------------------------------------------
    | Mobile
    |--------------------------------------------------------------------------
    */

    @media (max-width: 767px) {

        .card-body {
            padding: 10px;
        }

        .table td,
        .table th {
            white-space: normal;
            padding: 6px;
            font-size: 13px;
        }

        .table .btn {
            white-space: nowrap;
            font-size: 12px;
            padding: 6px 8px;
        }

        .comanda-header {
            padding: 10px 12px;
        }

        .comanda-header .card-title {
            font-size: 16px;
        }

    }

</style>


<div class="content-header"></div>


<section class="content">

    <div class="container-fluid">

        <div class="row">

            <div class="col-12">


                <div id="comandas-contenedor">


                    {{-- ===================================================== --}}
                    {{-- PENDIENTES --}}
                    {{-- ===================================================== --}}

                    <div class="card">

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

                            <h3 class="card-title">

                                <i class="fa-solid fa-clock mr-1"></i>

                                Comandas Pendientes

                            </h3>


                            <div class="comanda-header-tools">

                                <a
                                    href="{{ route(
                                        'barra.all.comandas.limpiar',
                                        [Hashids::encode(2,time())]
                                    ) }}"
                                    onclick="return confirm('Limpiar comandas Pendientes?');"
                                    title="Limpiar pendientes"
                                >

                                    <i class="fa-solid fa-broom fa-lg"></i>

                                </a>

                            </div>

                        </div>


                        <div class="card-body">

                            @if(count($pendientes))

                                <div class="table-responsive">

                                    <table class="table table-hover table-striped" style="width:100%">

                                        <thead>

                                            <tr>

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

                                                <th>
                                                    Cliente
                                                </th>

                                                <th>
                                                    Producto
                                                </th>

                                                <th
                                                    colspan="2"
                                                    class="text-center"
                                                >
                                                    Acción
                                                </th>

                                            </tr>

                                        </thead>


                                        <tbody>

                                            @foreach ($pendientes as $pendiente)

                                                <tr>

                                                    <td
                                                        class="text-center"
                                                        style="vertical-align: middle;"
                                                    >

                                                        {!! $pendiente->tipo->icon !!}

                                                    </td>


                                                    <td style="vertical-align: middle;">

                                                        {{ $pendiente->nombre }}

                                                        <br>

                                                        <small>
                                                            {{ @$pendiente->entradaDescripcion() }}
                                                        </small>

                                                    </td>


                                                    <td style="vertical-align: middle;">

                                                        {{ $pendiente->cantidad }}
                                                        x
                                                        {{ $pendiente->producto->nombre }}

                                                        <br>

                                                        <small>
                                                            {{ @$pendiente->producto->categoria->nombre }}
                                                        </small>

                                                    </td>


                                                    <td
                                                        style="vertical-align: middle;"
                                                        class="text-center"
                                                    >

                                                        <a
                                                            href="{{ route(
                                                                'barra.all.comanda.actualizar',
                                                                Hashids::encode(
                                                                    $pendiente->id,
                                                                    2,
                                                                    time()
                                                                )
                                                            ) }}"
                                                            class="btn btn-outline-warning btn-block btn-actualizar-comanda"
                                                        >

                                                            Preparando

                                                        </a>

                                                    </td>


                                                    <td
                                                        style="vertical-align: middle;"
                                                        class="text-center"
                                                    >

                                                        <a
                                                            href="{{ route(
                                                                'barra.all.comanda.actualizar',
                                                                Hashids::encode(
                                                                    $pendiente->id,
                                                                    4,
                                                                    time()
                                                                )
                                                            ) }}"
                                                            class="btn btn-outline-success btn-block btn-actualizar-comanda"
                                                        >

                                                            Entregado

                                                        </a>

                                                    </td>

                                                </tr>

                                            @endforeach

                                        </tbody>

                                    </table>

                                </div>

                            @else

                                <div>

                                    <br>

                                    <p class="text-center">
                                        No Existen Registros
                                    </p>

                                    <br>

                                </div>

                            @endif

                        </div>

                    </div>



                    {{-- ===================================================== --}}
                    {{-- EN PREPARACION --}}
                    {{-- ===================================================== --}}

                    <div class="card">

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

                            <h3 class="card-title">

                                <i class="fa-solid fa-fire-burner mr-1"></i>

                                En Preparación

                            </h3>


                            <div class="comanda-header-tools">

                                <a
                                    href="{{ route(
                                        'barra.all.comandas.limpiar',
                                        [Hashids::encode(3,time())]
                                    ) }}"
                                    onclick="return confirm('Limpiar comandas En Preparacion?');"
                                    title="Limpiar preparación"
                                >

                                    <i class="fa-solid fa-broom fa-lg"></i>

                                </a>

                            </div>

                        </div>


                        <div class="card-body">

                            @if(count($preparaciones))

                                <div class="table-responsive">

                                    <table class="table table-hover table-striped" style="width:100%">

                                        <thead>

                                            <tr>

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

                                                <th>
                                                    Cliente
                                                </th>

                                                <th>
                                                    Producto
                                                </th>

                                                <th
                                                    colspan="2"
                                                    class="text-center"
                                                >
                                                    Acción
                                                </th>

                                            </tr>

                                        </thead>


                                        <tbody>

                                            @foreach ($preparaciones as $preparacion)

                                                <tr>

                                                    <td
                                                        class="text-center"
                                                        style="vertical-align: middle;"
                                                    >

                                                        {!! $preparacion->tipo->icon !!}

                                                    </td>


                                                    <td style="vertical-align: middle;">

                                                        {{ $preparacion->nombre }}

                                                        <br>

                                                        <small>
                                                            {{ @$preparacion->entradaDescripcion() }}
                                                        </small>

                                                    </td>


                                                    <td style="vertical-align: middle;">

                                                        {{ $preparacion->cantidad }}
                                                        x
                                                        {{ $preparacion->producto->nombre }}

                                                        <br>

                                                        <small>
                                                            {{ @$preparacion->producto->categoria->nombre }}
                                                        </small>

                                                    </td>


                                                    <td
                                                        style="vertical-align: middle;"
                                                        class="text-center"
                                                    >

                                                        <a
                                                            href="{{ route(
                                                                'barra.all.comanda.actualizar',
                                                                Hashids::encode(
                                                                    $preparacion->id,
                                                                    3,
                                                                    time()
                                                                )
                                                            ) }}"
                                                            class="btn btn-outline-info btn-block btn-actualizar-comanda"
                                                        >

                                                            Terminado

                                                        </a>

                                                    </td>


                                                    <td
                                                        style="vertical-align: middle;"
                                                        class="text-center"
                                                    >

                                                        <a
                                                            href="{{ route(
                                                                'barra.all.comanda.actualizar',
                                                                Hashids::encode(
                                                                    $preparacion->id,
                                                                    4,
                                                                    time()
                                                                )
                                                            ) }}"
                                                            class="btn btn-outline-success btn-block btn-actualizar-comanda"
                                                        >

                                                            Entregado

                                                        </a>

                                                    </td>

                                                </tr>

                                            @endforeach

                                        </tbody>

                                    </table>

                                </div>

                            @else

                                <div>

                                    <br>

                                    <p class="text-center">
                                        No Existen Registros
                                    </p>

                                    <br>

                                </div>

                            @endif

                        </div>

                    </div>



                    {{-- ===================================================== --}}
                    {{-- TERMINADAS --}}
                    {{-- ===================================================== --}}

                    <div class="card">

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

                            <h3 class="card-title">

                                <i class="fa-solid fa-circle-check mr-1"></i>

                                Terminadas

                            </h3>


                            <div class="comanda-header-tools">

                                <a
                                    href="{{ route(
                                        'barra.all.comandas.limpiar',
                                        [Hashids::encode(4,time())]
                                    ) }}"
                                    onclick="return confirm('Limpiar comandas Terminadas?');"
                                    title="Limpiar terminadas"
                                >

                                    <i class="fa-solid fa-broom fa-lg"></i>

                                </a>

                            </div>

                        </div>


                        <div class="card-body">

                            @if(count($terminadas))

                                <div class="table-responsive">

                                    <table class="table table-hover table-striped" style="width:100%">

                                        <thead>

                                            <tr>

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

                                                <th>
                                                    Cliente
                                                </th>

                                                <th>
                                                    Producto
                                                </th>

                                                <th class="text-center">
                                                    Acción
                                                </th>

                                            </tr>

                                        </thead>


                                        <tbody>

                                            @foreach ($terminadas as $terminada)

                                                <tr>

                                                    <td
                                                        class="text-center"
                                                        style="vertical-align: middle;"
                                                    >

                                                        {!! $terminada->tipo->icon !!}

                                                    </td>


                                                    <td style="vertical-align: middle;">

                                                        {{ $terminada->nombre }}

                                                        <br>

                                                        <small>
                                                            {{ @$terminada->entradaDescripcion() }}
                                                        </small>

                                                    </td>


                                                    <td style="vertical-align: middle;">

                                                        {{ $terminada->cantidad }}
                                                        x
                                                        {{ $terminada->producto->nombre }}

                                                        <br>

                                                        <small>
                                                            {{ @$terminada->producto->categoria->nombre }}
                                                        </small>

                                                    </td>


                                                    <td
                                                        style="vertical-align: middle;"
                                                        class="text-center"
                                                    >

                                                        <a
                                                            href="{{ route(
                                                                'barra.all.comanda.actualizar',
                                                                Hashids::encode(
                                                                    $terminada->id,
                                                                    4,
                                                                    time()
                                                                )
                                                            ) }}"
                                                            class="btn btn-outline-success btn-block btn-actualizar-comanda"
                                                        >

                                                            Entregado

                                                        </a>

                                                    </td>

                                                </tr>

                                            @endforeach

                                        </tbody>

                                    </table>

                                </div>

                            @else

                                <div>

                                    <br>

                                    <p class="text-center">
                                        No Existen Registros
                                    </p>

                                    <br>

                                </div>

                            @endif

                        </div>

                    </div>


                </div>
                {{-- FIN #comandas-contenedor --}}


            </div>

        </div>

    </div>

</section>


<script type="text/javascript">

    /*
    |--------------------------------------------------------------------------
    | Refresco automático de comandas
    |--------------------------------------------------------------------------
    */

    var actualizandoComandas = false;


    function actualizarComandas()
    {
        if (actualizandoComandas) {
            return;
        }

        actualizandoComandas = true;


        /*
         * Usamos solamente la URL base y agregamos un timestamp.
         * Esto evita cualquier caché del navegador/proxy.
         */
        var urlComandas = window.location.href.split('?')[0];

        urlComandas += '?_t=' + new Date().getTime();


        $.ajax({

            url: urlComandas,

            type: 'GET',

            cache: false,

            dataType: 'html',

            success: function(response)
            {

                /*
                 * Creamos un DOM temporal con la página recibida.
                 */
                var paginaNueva = $('<div></div>').html(response);


                /*
                 * Buscamos únicamente el contenido de las comandas.
                 */
                var nuevoContenido = paginaNueva
                    .find('#comandas-contenedor')
                    .html();


                if (
                    typeof nuevoContenido !== 'undefined' &&
                    nuevoContenido !== null
                ) {

                    $('#comandas-contenedor').html(nuevoContenido);

                } else {

                    console.log(
                        'No se encontró #comandas-contenedor en la respuesta'
                    );

                }

            },

            error: function(xhr, status, error)
            {

                console.log(
                    'Error actualizando comandas:',
                    xhr.status,
                    status,
                    error
                );

            },

            complete: function()
            {

                actualizandoComandas = false;

            }

        });

    }



    /*
    |--------------------------------------------------------------------------
    | Ejecutar automáticamente cada 3 segundos
    |--------------------------------------------------------------------------
    */

    setInterval(function()
    {

        actualizarComandas();

    }, 3000);



    /*
    |--------------------------------------------------------------------------
    | Cambiar estado SIN recargar la página
    |--------------------------------------------------------------------------
    */

    $(document).on(
        'click',
        '.btn-actualizar-comanda',
        function(e)
        {

            e.preventDefault();


            var boton = $(this);

            var url = boton.attr('href');


            if (boton.data('procesando')) {
                return;
            }


            boton.data('procesando', true);

            boton.addClass('disabled');


            $.ajax({

                url: url,

                type: 'GET',

                cache: false,


                success: function()
                {

                    /*
                     * Al cambiar de estado,
                     * actualizamos inmediatamente.
                     */
                    actualizandoComandas = false;

                    actualizarComandas();

                },


                error: function(xhr)
                {

                    console.log(
                        'Error actualizando comanda:',
                        xhr.status
                    );


                    boton.removeClass('disabled');

                    boton.data('procesando', false);

                }

            });

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Primera comprobación
    |--------------------------------------------------------------------------
    |
    | Además del intervalo, hacemos una consulta a los 500 ms.
    | Sirve también para comprobar que el AJAX está funcionando.
    |
    */

    setTimeout(function()
    {

        actualizarComandas();

    }, 500);

</script>

@endsection