@extends('layouts.app')

@section('content')

@if($sucursales->count() == 1)
    <div class="titleOrder" style="text-align: center;background-color: #ff5f33;font-size: 150%;color: white;margin-bottom: 10px;">Cocina de {{ $sucursal->name }}</div>
    <input value="{{ $sucursal->id }}" id="idsucursal" name="idsucursal" class="form-control" type="hidden" disabled>
@endif
@if($sucursales->count() > 1)
    <div class="titleOrder" style="text-align: center;background-color: #ff5f33;font-size: 150%;color: white;margin-bottom: 10px;padding-top: 10px;">
        <div class="form-group row" style="margin-bottom: .3rem;">
            <label for="idsucursal" class="col-md-2 col-form-label">Cocina de Sucursal</label>
            <div class="col-md-4">
                <select id="idsucursal" name="idsucursal" class="form-control" onchange="window.location.href = '{{  route('order.list') }}' + '?sucursal=' + $('#idsucursal').val()">
                    @foreach ($sucursales as $item => $value)
                        <option value="{{ $value->id }}" {{ ($value->id == $sucursal->id) ? 'selected' : '' }}>{{ $value->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
@endif
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="row orderslist">
                @foreach ($orders as $key => $order)
                    <div id="order_{{ $order->id }}" data-id="{{ $order->id }}" class="card col orders">
                        <div class="card-header">
                            <div class="titleOrder">Orden #{{ $order->order_number }}</div>
                            <span class="time {{ ($order->start != null) ? 'start' : '' }}" data-id="{{ $order->id }}" data-maxtime="{{ $order->maxtime }}" id="time_{{ $order->id }}">{{ $order->time }}</span>
                        </div>
                        <div class="card-body" style="padding: 15px 7px;">
                            <h6 class="card-subtitle mb-2">Tiempo máximo: {{ $order->maxtime }}</h6>
                            <h6 class="card-subtitle mb-2">Tipo: <strong>{{ $order->categoryname }}</strong></h6>
                            <h6 class="card-subtitle mb-2">Cliente: <strong>{{ $order->cliente }}</strong></h6>
                            <table class="table" style="font-size: 10px">
                                <thead>
                                    <tr>
                                      <th scope="col" width="85%">Producto</th>
                                      <th scope="col" width="15%">Cantidad</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($order->details as $i => $detail)
                                        <tr>
                                            <td style="padding: 0.25rem 0rem;">
                                                <strong>{{ $detail->name }} </strong>
                                                <div>
                                                    @foreach ($detail->extras as $j => $extra)
                                                        <span class="badge badge-pill badge-warning">{{ $extra->quantity }} - {{ $extra->name }} </span>
                                                    @endforeach
                                                </div>
                                                <div>
                                                    @foreach ($detail->ingredients as $j => $ingredient)
                                                        {{-- @if ($ingredient->selected)
                                                            <span class="badge badge-pill badge-light" style="margin: 2px; font-size: 90%; border: 1.5px solid;">{{ $ingredient->name }}</span>
                                                        @else
                                                            <span class="badge badge-pill badge-dark" style="margin: 2px; font-size: 90%; border: 1.5px solid; background: #fff; color: #ff2a2a;">{{ $ingredient->name }}</span>
                                                        @endif --}}
                                                        <div class="form-check" style="font-size: 80%;" >
                                                            <input class="form-check-input ingredient{{ $ingredient->id }}"  type="checkbox" value="" {{ ($ingredient->selected) ? 'checked' : ''}} id="ingredient_{{ $i . '_' . $ingredient->id }}" readonly="true">
                                                            <label class="form-check-label" for="ingredient_{{ $i . '_' . $ingredient->id }}">
                                                                {{ $ingredient->name }}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </td>
                                            <td class="text-center" style="padding: 0.25rem 0rem;"><strong>{{ $detail->quantity }}</strong></td>
                                        </tr>
                                        @if ($detail->comment != null && $detail->comment != '')
                                            <tr>
                                                <td style="border-top: none;padding: 0.25rem 0rem;word-break: break-all;white-space: pre-wrap;font-size: 85%;font-style: italic;" colspan="2">{{ $detail->comment }}</td>
                                            </tr>
                                        @endif
                                    @endforeach
                                </tbody>
                            </table>
                            <button type="button" class="btn-state btn btn-danger"
                                data-id="{{ $order->id }}"
                                title="Finalizar" onclick="endOrder(this)">Finalizar
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection
@section('footer')
<script type="text/javascript" >
    var intervals = [];
    function startOrder($this) {
        $this = $($this);
        $.ajax({
            method: 'POST',
            url: '{{  route('order.start') }}',
            data: {id : $this.data('id') },
            headers: {
                'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
            }
        }).done(function(response) {
            if (response.id != null && typeof response.id != 'undefined') {
                let order = $('#order_' + response.id + ' .time');
                if (!order.hasClass('start') && typeof response.start != 'undefined' && response.start) {
                    order.text(response.time);
                    order.addClass('start');
                    realTime('#order_' + response.id + ' .time.start');
                }
            }
        });
    }

    function endOrder($this) {
        $this = $($this);
        if (typeof intervals[$this.data('id')] != 'undefined') {
            $.ajax({
                method: 'POST',
                url: '{{  route('order.end') }}',
                data: {id : $this.data('id') },
                headers: {
                    'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                }
            }).done(function(response) {
                if (response.id != null && typeof response.id != 'undefined' &&
                    response.end != null && typeof response.end != 'undefined' &&
                    typeof intervals[response.id] != 'undefined') {
                    clearInterval(intervals[response.id]);
                    let order = $('#order_' + response.id);
                    order.fadeOut(1000, function() {
                        order.remove();
                    });
                }
            });
        }
    }

    window.onload = function() {
        $('.time.start').each(function(i, value) {
            realTime(value);
        });
        var updateList = setInterval(() => {
            updateListOrders();
        }, 10000);
    }

    function realTime($this) {
        $this = $($this);
        let maxtimea = $this.data('maxtime').split(':');
        let maxtime = new Date();
        maxtime.setHours(maxtimea[0], maxtimea[1], maxtimea[2]);

        if (typeof intervals[$this.data('id')] == 'undefined') {
            intervals[$this.data('id')] = setInterval(() => {
                let text = $this.text().split(':');
                if (text.length > 0) {
                    let currentTime = new Date();
                    currentTime.setHours(text[0], text[1], text[2]);
                    let time = new Date(currentTime.getTime() + 1000);
                    $this.text((time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()));
                    if (time.getTime() > maxtime.getTime()) {
                        $this.addClass('animate__animated animate__pulse animate__infinite infinite maxtime_exceed');
                    }
                }
            }, 1000);
        }
    }

    function updateListOrders() {
        $.ajax({
                method: 'GET',
                url: '{{  route('order.refresh') }}?sucursal=' + $('#idsucursal').val(),
                data: {},
                headers: {
                    'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                }
            }).done(function(response) {
                console.log(response);
                let current_orders = {};
                $('.card.orders').each((i, value) => {
                    let id = $(value).data('id');
                    current_orders[id] = {
                        'id' : id,
                        'active' : false
                    };
                });

                if (response.length > 0) {
                    let orderslist = $('.row.orderslist');
                    response.forEach(element => {
                        if (!(element.id in current_orders)) {
                            let card = '';
                            card += '<div id="order_' + element.id + '" data-id="' + element.id + '" class="card col orders animate__animated animate__heartBeat  animate__slower">';
                            card += '<div class="card-header"> <div class="titleOrder">Orden #' + element.order_number + '</div>';
                            card += '<span class="time ' + ((element.start != null) ? 'start' : '') + '" data-id="' + element.id + '" data-maxtime="' + element.maxtime + '" id="time_' + element.id + '">' + element.time + '</span>';
                            card += '</div>';
                            card += '<div class="card-body" style="padding: 15px 7px;">';
                            card += '<h6 class="card-subtitle mb-2">Tiempo máximo: ' + element.maxtime + '</h6>';
                            card += '<h6 class="card-subtitle mb-2">Tipo: <strong>' + element.categoryname + '</strong></h6>';
                            card += '<h6 class="card-subtitle mb-2">Cliente: <strong>' + element.cliente + '</strong></h6>';
                            card += '<table class="table" style="font-size: 10px">';
                            card += '<thead><tr><th scope="col" width="85%">Producto</th><th scope="col" width="15%">Cantidad</th></tr></thead>';
                            card += '<tbody>';
                            element.details.forEach(tdetail => {
                                card += '<tr>';
                                card += '<td style="padding: 0.25rem 0rem;">';
                                card += '<strong>' + tdetail.name + '</strong>';
                                card += '<div>';
                                tdetail.extras = Object.values(tdetail.extras);
                                tdetail.extras.forEach(textra => {
                                        card += '<span class="badge badge-pill badge-warning">' + textra.quantity + ' - ' + textra.name + '</span>';
                                    });
                                card += '</div>';
                                card += '<div>';
                                tdetail.ingredients = Object.values(tdetail.ingredients);
                                tdetail.ingredients.forEach(tingredient => {
                                    card += '<div class="form-check" style="font-size: 80%;" >';
                                    card += '<input class="form-check-input ingredient' + tingredient.id + '"  type="checkbox" value="" ' + (tingredient.selected ? 'checked' : '') + ' id="ingredient_' + tdetail.id + '_' + tingredient.id + '" readonly="true">';
                                    card += '<label class="form-check-label" for="ingredient_' + tdetail.id + '_' + tingredient.id + '">';
                                    card += tingredient.name;
                                    card += '</label>';
                                    card += '</div>';
                                });
                                card += '</div>';
                                card += '</td>';
                                card += '<td class="text-center" style="padding: 0.25rem 0rem;">';
                                card += '<strong>' + tdetail.quantity + '</strong>';
                                card += '</td>';
                                card += '</tr>';
                                if (tdetail.comment != null && tdetail.comment != '') {
                                    card += '<tr>';
                                    card += '<td style="border-top: none;padding: 0.25rem 0rem;word-break: break-all;white-space: pre-wrap;font-size: 85%;font-style: italic;" colspan="2">' + tdetail.comment + '</td>';
                                    card += '</tr>';
                                }
                            });
                            card += '</tbody>';
                            card += '</table>';
                            card += '<button type="button" class="btn-state btn btn-danger" data-id="' + element.id + '" title="Finalizar" onclick="endOrder(this)">Finalizar</button>';
                            card += '</div>';
                            card += '</div>';
                            orderslist.append(card);
                            realTime('#order_' + element.id + ' .time.start');
                        } else {
                            current_orders[element.id].active = true;
                        }
                    });
                    for (let current in current_orders) {
                        if (!current_orders[current].active) {
                            let order_rm = $('#order_' + current_orders[current].id);
                            order_rm.fadeOut(500, function() {
                                order_rm.remove();
                            });
                        }
                    }
                }
            });
    }
</script>
@endsection