@extends('layouts.baseprodashboard')

@section('content')

<style>
     .widget-chart .widget-numbers-custom {
        font-size: 1.3rem;
        display: block;
        line-height: 1;
        margin: 1rem auto;
    }
</style>

<div class="tabs-animation">

    <div class="col-lg-12 col-xl-12">
    <div class="main-card mb-3 card">
        <div class="grid-menu grid-menu-4col">
            <div class="no-gutters row">
                <!------------------>
                <div class="col-sm-3">
                    <div class="widget-custom widget-chart widget-chart-hover" data-link="{{'/selectReparacionesCliente/1/cliente/'.$cliente->id}}">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-primary"></div>
                            <i class="fa fa-search text-primary"></i>
                        </div>
                        <div class="widget-numbers">{{ $reparacionesCantidadesEstadosClientes[1] }}</div>
                        <div class="widget-subheading  text-uppercase"><b>DIAGNÓSTICO</b></div>
                        <div class="widget-description text-primary"></div>
                    </div>
                </div>

                <div class="col-sm-3 myline">
                    <div class="widget-custom widget-chart widget-chart-hover" data-link="{{'/selectReparacionesCliente/10/cliente/'.$cliente->id}}">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-primary"></div>
                            <i class="fa fa-wrench text-primary"></i>
                        </div>
                        <div class="widget-numbers">{{ $reparacionesCantidadesEstadosClientes[10] }}</div>
                        <div class="widget-subheading  text-uppercase"><b>EN REPARACIÓN</b></div>
                        <div class="widget-description text-primary "></div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="widget-custom widget-chart widget-chart-hover" data-link="{{'/selectReparacionesCliente/21/cliente/'.$cliente->id}}">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-primary"></div>
                            <i class="fa fa-truck text-primary"></i>
                        </div>
                        <div class="widget-numbers">{{ $reparacionesCantidadesEstadosClientes[21] }}</div>
                        <div class="widget-subheading  text-uppercase"><b>ESPERANDO REPUESTOS</b></div>
                        <div class="widget-description text-primary"></div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="widget-custom widget-chart widget-chart-hover" data-link="{{'/selectReparacionesCliente/31/cliente/'.$cliente->id}}">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-primary"></div>
                            <i class="fa fa-thumbs-up text-primary"></i>
                        </div>
                        <div class="widget-numbers">{{ $reparacionesCantidadesEstadosClientes[31] }}</div>
                        <div class="widget-subheading  text-uppercase"><b>ESPERANDO APROBACIÓN DE PRESUPUESTO</b></div>
                        <div class="widget-description text-primary"></div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="widget-custom widget-chart widget-chart-hover" data-link="{{'/selectReparacionesCliente/22/cliente/'.$cliente->id}}">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-primary"></div>
                            <i class="fa fa-retweet text-primary"></i>
                        </div>
                        <div class="widget-numbers">{{ $reparacionesCantidadesEstadosClientes[22] }}</div>
                        <div class="widget-subheading  text-uppercase"><b>CANJE COMERCIAL</b></div>
                        <div class="widget-description text-primary"></div>
                    </div>
                </div>

                <div class="col-sm-3 myline">
                    <div class="widget-custom widget-chart widget-chart-hover" data-link="{{'/selectReparacionesCliente/50/cliente/'.$cliente->id}}">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-primary"></div>
                            <i class="fa fa-check-square-o text-primary"></i>
                        </div>
                        <div class="widget-numbers">{{ $reparacionesCantidadesEstadosClientes[50] }}</div>
                        <div class="widget-subheading  text-uppercase"><b>LISTO PARA RETIRO</b></div>
                        <div class="widget-description text-primary"></div>
                    </div>
                </div>

                <div class="col-sm-3 mylinewithbottom">
                    <div class="widget-custom widget-chart widget-chart-hover" data-link="{{'/selectReparacionesCliente/52/cliente/'.$cliente->id}}">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-primary"></div>
                            <i class="fa fa-folder-open text-primary"></i>
                        </div>
                        <div class="widget-numbers">{{ $reparacionesCantidadesEstadosClientes[52] }}</div>
                        <div class="widget-subheading  text-uppercase"><b>ENTREGADOS</b></div>
                        <div class="widget-description text-primary"></div>
                    </div>
                </div>

                <div class="col-sm-3 mylinewithbottom">
                    <div class="widget-custom-blank widget-chart widget-chart-hover" data-link="https://dattachat.com/chat/externalchat/?wid=516ece7a02b92901015385">
                        <div class="icon-wrapper rounded-circle">
                            <div class="icon-wrapper-bg bg-warning"></div>
                            <i class="fa fa-commenting-o "></i>
                        </div>
                        <div class="widget-numbers-custom">HABLAR <br> CON UN ASESOR</div>
                        <div class="widget-subheading  text-uppercase ">&nbsp</div>
                        <div class="widget-description text-primary"></div>
                    </div>
                </div>

                

                <!------------------>
            </div>
        </div>
    </div>
    </div>
    

</div>

@endsection

@section('scripts')	
	<script src="/assets/js/dashboardcliente.js"></script>
    <style>
    .myline {
        border-right: #dee2e6 solid 1px !important;
    }
    .mylinewithbottom {
        border-bottom: #dee2e6 solid 1px !important;
    }
   
</style>
@endsection