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

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

@section('Cards')
    <x-card-datav2>
        @slot('id', 'TFinalizados')
        @slot('color', 'green')
        @slot('evento', "filtrarPedidos('finalizados')")
        @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('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', '21px')
                        @slot('dato',
                            ($DataTotal->horasPromedio ? $DataTotal->horasPromedio . ' h' : '') .
                            ($DataTotal->minutosPromedio
                            ? '
                            ' .
                            $DataTotal->minutosPromedio .
                            ' min'
                            : '') !=
                            ''
                            ? ($DataTotal->horasPromedio ? $DataTotal->horasPromedio . ' h' : '') . ($DataTotal->minutosPromedio ? ' ' .
                            $DataTotal->minutosPromedio . ' min' : '')
                            : '--')
                            @slot('marginTop', '16px')
                            @slot('nombre', 'Promedio de entregas')
                            @slot('porcentaje', '')
                            @slot('tipo', 0)
                        </x-card-datav2>

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

                    @section('Contenido')
                        <x-table>

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

                            @slot('actualizar', 1)
                            @slot('pedidos', 1)
                            @slot('idTabla', 'tablaPedidos')

                            @slot('accionBuscar')
                                onkeyup="if(event.keyCode == 13) MakeRequestData('{{ route('pedidos.buscar') }}',
                '#tablaPedidos', 'POST', 1, '','', true, false, false, ['Palabra/' + $(this).val(), 'Filtro/' + $('#OpcionBuscar').val(), 'pediEstado/'+$('#pediEstado').val(), 'sucuId/'+$('#sucuId').val()]) "
                            @endslot

                            @slot('btnAdicionales')

                                <a href="#" class="float" id="botonFlotante" onclick="toggleBottons()">
                                    <i class="fa fa-plus my-float animat"></i>
                                </a>

                                <a href="#" class="float2 d-none animat animat2" id="botonPedido" data-bs-toggle="tooltip"
                                    data-bs-placement="top" title="Nuevo pedido" onclick="window.open('{{ route('create-afiliado') }}')">
                                    <i class="fas fa-shopping-cart my-float2"></i>
                                </a>

                                <a href="#" class="float3 d-none animat animat2" id="botonMandadito" data-bs-toggle="tooltip"
                                    data-bs-placement="top" title="Nuevo mandadito"
                                    onclick="openModal('{{ route('crear-mandadito') }}','POST', 'Crear mandadito', '')">
                                    <i class="fas fa-box my-float3"></i>
                                </a>


                                <div class="col-1">
                                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Actualizar."
                                        class="btn btn-icon btn-success" onclick="recargar()"><i class="fas fa-sync"></i></button>
                                    {{-- <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Actualizar."
                                        class="btn btn-icon btn-danger" onclick="requestPermission()"><i class="fas fa-sync"></i></button> --}}

                                    <input type="hidden" id="pediEstado" value="">

                                </div>

                                {{-- <div class="col-auto">
                <a type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Afiliado."
                    class="btn btn-icon btn-success"  ><i
                        class="fas fa-clipboard-list"></i></a>
            </div> --}}

                                {{-- <div class="col-auto">
                <div class="dropdown" data-bs-toggle="tooltip" data-bs-placement="top" title="Crear orden.">

                    <button style="width: 50px; height: 30px;" class="badge btn-success" data-toggle="dropdown"><i class="fas fa-file-signature"></i></button>

                    @if (in_array(47, Session::get('Permisos')))
                        <div class="dropdown-menu">
                            @php
                                $TituloBotones = array('Mandadito', 'Afiliado');
                            @endphp

                            @for ($i = 0; $i < 2; $i++)
                                <a class="dropdown-item bg-{{$estilos[$i]}} text-white pt-3 pb-3"
                                style="cursor: pointer"
                                onmouseover="$(this).addClass('bg-white'); $(this).removeClass('text-white')"
                                onmouseout="$(this).removeClass('bg-white'); $(this).addClass('text-white')"

                                >{{$TituloBotones[$i]}}</a>
                            @endfor
                        </div>
                    @endif
                </div>
            </div> --}}

                            @endslot


                            @slot('filtros', [[0, 'ID pedido'], [1, 'Repartidor'], [2, 'Comercio'], [3, 'Cliente'], [4, 'Forma de pago']])
                            @slot('sucursales', $sucursales)

                            @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 transcurrido</th>
                                <th class="text-center">Acciones</th>
                            @endslot

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

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

                            // var Tiempo = randomRangeInterval(180000, 300000);

                            setInterval(resfrescador, 60000);

                            function resfrescador() {
                                MakeRequestData('{{ route('pedidos.buscar') }}',
                                    '#tablaPedidos', 'POST', 2, '', '', false, false, false, ['Palabra/' + $('#Buscador').val(), 'Filtro/' + $('#OpcionBuscar').val(), 'pediEstado/' + $('#pediEstado').val(), 'sucuId/' + $('#sucuId').val()
                                    ]);
                            }

                            $('#sucuId').select2();

                            function toggleBottons() {
                                if ($('#botonMandadito').hasClass('animat2') && $('#botonPedido').hasClass('animat2')) {
                                    $('#botonFlotante').html('<i class="fa fa-times my-float animat"></i>');
                                    $('#botonMandadito').removeClass('d-none');
                                    $('#botonPedido').removeClass('d-none');

                                    $('#botonMandadito').removeClass('animat2');
                                    $('#botonPedido').removeClass('animat2');
                                } else {
                                    $('#botonFlotante').html('<i class="fa fa-plus my-float animat"></i>');
                                    $('#botonMandadito').addClass('animat2');
                                    $('#botonPedido').addClass('animat2');
                                }

                            }

                            // $('html').click(function(e) {
                            //     console.log(2);
                            //     if (e.target.id != 'botonFlotante') {
                            //         $('#botonMandadito').addClass('d-none');
                            //         $('#botonPedido').addClass('d-none');
                            //         $('#botonFlotante').html('<i class="fa fa-plus my-float"></i>');
                            //     }
                            // });

                            function filtrarPedidos(estado) {
                                $('#pediEstado').val(estado);
                                MakeRequestData('{{ route('pedidos.buscar') }}', '#tablaPedidos', 'POST', 2, '', '', true, false, false, [
                                    'Palabra/' + $('#Buscador').val(), 'Filtro/' + $('#OpcionBuscar').val(), 'pediEstado/' + estado,
                                    'sucuId/'+$('#sucuId').val()
                                ]);
                            }

                            function requestPermission() {
                                console.log('Requesting permission...');
                                Notification.requestPermission().then((permission) => {
                                    if (permission === 'granted') {
                                        console.log('Notification permission granted.');
                                    }
                                });
                            }
                        </script>
                    @endsection