@php $estilos = ['purple', 'secondary']; @endphp

@extends('Templates.PlantillaFull', ['PaginaTitulo' => 'goEAT-Pedidos', 'PaginaUrl' => 'perfiles-view', 'Padre' => '1'])

@section('Contenido')
    <x-table>
        @slot('titulo')
            <i class="fas fa-history" style="font-size: 20px"></i>&nbsp;&nbsp;&nbsp;<h1 class="d-inline-block p-0"
                style="margin: -2px 0px -1px 5px;">Historial de pedidos</h1>
        @endslot

        @slot('idTabla', 'TablePedidosHistorial')

        @slot('encabezado')
            <div>
                <div class="d-flex mb-3 mt-2" style="justify-content: space-between">
                    <input type="date" class="form-control w-25" style="margin-right: 10px" id="desde"
                        value="{{ session('desde') }}">
                    <input type="date" class="form-control w-25" style="margin-right: 10px" id="hasta"
                        value="{{ session('hasta') }}">
                    <button class="btn btn-primary" onclick="filtrar()">
                        <i class="fas fa-filter"></i>&nbsp; Filtrar</button>


                    <div class="col-xl-2 col-md-3 col-sm-4">
                        <select class="form-control" id="OpcionBuscar">
                            <option value="0">ID pedido</option>
                            <option value="1">Repartidor</option>
                            <option value="2">Comercio</option>
                            <option value="3">Cliente</option>
                            <option value="4">Forma pago</option>
                        </select>
                    </div>

                    <div class="input-icon">
                        <input type="text" id="Buscador" class="form-control" placeholder="Buscar..."
                            onkeyup="if(event.keyCode == 13) MakeRequestData('{{ route('buscar-pedidos-historial') }}',
                            '#TablePedidosHistorial', 'POST', 2,
                            '','', true, false, false, ['Palabra/' + $(this).val(), 'Filtro/' + $('#OpcionBuscar').val(), 'desde/' +
                            $('#desde').val(), 'hasta/' + $('#hasta').val()]) ">
                        <span class="input-icon-addon">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                    {{-- <button class="btn btn-primary"
                        onclick="MakeRequestData('{{ route('buscar-pedidos-historial') }}', '#TablePedidosHistorial', 'POST', 2, '','', true, false, false, ['Palabra/' + $('#Buscador').val(), 'Filtro/' + $('#OpcionBuscar').val(), 'desde/' + $('#desde').val(), 'hasta/' + $('#hasta').val()])">
                        <i class="fas fa-filter"></i>&nbsp; Filtrar</button> --}}
                </div>
                <div class="d-flex justify-content-between align-items-stretch">
                    <x-card-datav2>
                        @slot('id', 'TFinalizados')
                        @slot('color', 'green')
                        @slot('fontWeightLabel', 700)
                        @slot('dato', $DataTotal->Finalizado ?? 0)
                        @slot('nombre', 'Pedidos finalizados')
                        @slot('porcentaje', intval((($DataTotal->Finalizado>0&$DataTotal->Total>0)?($DataTotal->Finalizado/$DataTotal->Total):0)*100))
                        {{-- @slot('porcentaje', floatval($DataTotal->Finalizado/$DataTotal->Total)) --}}
                        @slot('tipo', 1)
                    </x-card-datav2>

                    <x-card-datav2>
                        @slot('id', 'TActivos')
                        @slot('color', 'info')
                        @slot('evento', "filtrarPedidos('activos')")
                        @slot('fontWeightLabel', 700)
                        @slot('dato', $DataTotal->Activo ?? 0)
                        @slot('nombre', 'Pedidos activos')
                        @slot('porcentaje', intval(($DataTotal->Activo>0 & $DataTotal->Total>0 ? ($DataTotal->Activo / $DataTotal->Total) :
                            0) * 100))
                        @slot('tipo', 1)
                        </x-card-datav2>

                    <x-card-datav2>
                        @slot('id', 'TCancel')
                        @slot('color', 'red')
                        @slot('evento', "filtrarPedidos('anulados')")
                        @slot('fontSize', '36px')
                        @slot('marginTop', '0px')
                        @slot('dato', ($DataTotal->Anulado ?? 0) . '/' . ($DataTotal->Rechazado ?? 0))
                        @slot('nombre', 'Pedidos anulados / rechazados')
                        @slot('porcentaje', intval((($DataTotal->Anulado + $DataTotal->Rechazado)>0 & $DataTotal->Total>0 ? (($DataTotal->Anulado
                            + $DataTotal->Rechazado) / $DataTotal->Total) : 0) * 100))
                            @slot('tipo', 1)
                        </x-card-datav2>

                        <x-card-datav2>
                            @slot('id', 'TActive')
                            @slot('color', 'yellow')
                            @slot('evento', "filtrarPedidos('fallidos')")
                            @slot('dato', $DataTotal->Sistema ?? 0)
                            @slot('nombre', 'Pedidos fallidos')
                            @slot('porcentaje', intval(($DataTotal->Sistema>0 & $DataTotal->Total>0 ? ($DataTotal->Sistema / $DataTotal->Total) : 0) * 100))
                            @slot('tipo', 1)
                        </x-card-datav2>

                    <x-card-datav2>
                        @slot('id', 'TPromedio')
                        @slot('color', 'blue')
                        @slot('fontSize', '18px')
                        @slot('dato', (($DataTotal->horasPromedio ? $DataTotal->horasPromedio . ' h' : '') .($DataTotal->minutosPromedio ? ' ' . $DataTotal->minutosPromedio . ' min' : '')!=''?($DataTotal->horasPromedio ? $DataTotal->horasPromedio . ' h' : '') .($DataTotal->minutosPromedio ? ' ' . $DataTotal->minutosPromedio . ' min' : ''):'--'),)
                            @slot('marginTop', '22px')
                            @slot('nombre', 'Promedio de entregas')
                            @slot('porcentaje', '')
                            @slot('tipo', 0)
                        </x-card-datav2>

                        <x-card-datav2>
                            @slot('id', 'TTotal')
                            @slot('color', 'dark')
                            @slot('marginTop', '0px')
                            @slot('dato', $DataTotal->Total)
                            @slot('nombre', 'Total de pedidos')
                            @slot('porcentaje', '')
                            @slot('tipo', 0)
                        </x-card-datav2>
                </div>
            </div>
        @endslot

        @slot('classBuscador', 'd-none')

        {{-- @slot('btnAgregar')

        @endslot --}}


        {{-- @slot('filtros', [[0, 'Estado'], [1, 'Nombre'], [2, 'Apellido'], [3, 'Comercio'], [4, 'Forma pago'], [5, 'Driver']]) --}}

        @slot('header')
            <th>Id Pedido <br> Fecha | Hora</th>
            <th>Comercio <br> Forma de pago</th>
            <th>Cliente <br> Dirección </th>
            <th>Driver</th>
            <th>Tiempo Orden</th>
            <th>Estado</th>
            <th>Acciones</th>
        @endslot

        @slot('body')
            @include('pedidos.pedido-historial.data')
        @endslot
    </x-table>
@endsection

@section('scripts')
    <script>
        function filtrar() {
            $.ajax({
                type: "GET",
                data: {
                    desde: $('#desde').val(),
                    hasta: $('#hasta').val()
                },
                url: "{{ route('pedidosHistorial.filtrar') }}",
                dataType: "json",
                beforeSend: function() {
                    showBlockUI();
                },
                success: function(response) {
                    location.reload();
                },
                error: function(error) {
                    console.log(error);
                },
                complete: function() {
                    $.unblockUI();
                }
            });
        }

        // RefreshOrders('{{ route('nuevos-pedidos-historial') }}', '{{ route('refresh-total-historial') }}');
    </script>
@endsection