@php
    if (!isset($permiso)) {
        $permiso = \FCRD::permiso();
    }
@endphp
<header class="header-movil">
    <div class="container-fluid">
        <div class="row align-items-center pt-2 pb-2">
            <div class="col-2">
                <button class="navbar-toggler text-blue" type="button" data-toggle="collapse"
                    data-target="#menu-dashboard-movil" aria-controls="menu-dashboard-movil" aria-expanded="true"
                    aria-label="Toggle navigation">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
            <div class="col-5 pl-0">
                <a href="/" title="ClickRepuestos | Tus Repuestos a un Click" class="mr-md-4 d-block">
                    <img fetchpriority=high
                        src="https://imagenes-web-cr.s3.amazonaws.com/imagenes-varias/logo-clickrepuestos.svg"
                        alt="ClickRepuestos" class="img-fluid">
                </a>
            </div>
            <div class="col-5 text-right">
                <ul class="ul-inline-block mb-0">
                    <li class="ml-3 dropdown">
                        <i class="fa fa-search icon-header-movil align-text-bottom" id="button-search"
                            onclick="abrirBuscador()"></i>
                    </li>
                    @guest
                        <li class="ml-3">
                            <a href="/login" class="all-animate"><i
                                    class="fa fa-user-circle icon-header-movil align-text-bottom"></i></a>
                        </li>
                    @else
                        <li class="ml-3 dropdown">
                            <a href="/dashboard" class="all-animate"><i class="fa fa-user-circle icon-header-movil"></i>
                                @if (!\FCR::is_mobile())
                                    Hola, {{ \FCR::nameUser(Auth::user()->usuario_nombre) }}
                                    <i class="fa fa-chevron-down small"></i>
                                @endif
                            </a>
                            <ul class="dropdown-menu bg-white p-0">
                                <li class="border-top"><a href="/dashboard" class="px-3 py-2">Mi cuenta</a></li>
                                @if (array_intersect($permiso, [1]))
                                    <li class="border-top"><a href="{{ route('list-empresas') }}"
                                            class="px-3 py-2">Empresas</a></li>
                                    <li class="border-top"><a href="{{ route('list-usuarios') }}"
                                            class="px-3 py-2">Usuarios</a></li>
                                @endif
                                @if (array_intersect($permiso, [2]) && !empty(\FCRD::proveedor()))
                                    <li class="border-top"><a href="javascript: cambiarEmpresaID()"
                                            class="px-3 py-2">Cambiar empresa</a></li>
                                @endif
                                @if (!array_intersect($permiso, [1]))
                                    <li class="border-top"><a href="{{ route('mis-cotizaciones') }}" class="px-3 py-2">Mis
                                            cotizaciones</a></li>
                                    <li class="border-top"><a href="{{ route('ventas-exitosas') }}" class="px-3 py-2">Mis
                                            ventas</a></li>
                                @endif
                            </ul>
                        </li>
                    @endguest
                </ul>
            </div>
        </div>
    </div>

    <div class="position-fixed bg-gray h-100 border-right hide collapse" id="menu-dashboard-movil">
        <div class="row align-items-center mx-0 my-3">
            <div class="col-9">
                <!--  <a href="/" class="d-block pl-3">
                    <img fetchpriority=high src="{{ asset('img/logos-cr/logo-color-clickrepuestos-v6.svg') }}" class="img-fluid" title="ClickRepuestos">
                </a>-->
            </div>
            <div class="col-3 text-right pr-2">
                <i class="fa fa-times-circle close-menu" id="close-menu" style="font-size: 1.5rem;"type="button"
                    data-toggle="collapse" data-target="#menu-dashboard-movil" aria-controls="menu-dashboard-movil"
                    aria-expanded="true" aria-label="Toggle navigation"></i>
            </div>
        </div>

        <ul class="p-0 ul-movil-style ul-li-style" id="accordion">
            <li class="li-titulo">
                ¿Que repuestos buscas?
            </li>
            <li>
                <div class="p-0" id="list-1">
                    <a href="/amortiguadores" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1"><img width="25"
                            height="25" fetchpriority=high src="{{ asset('img/iconos/icon-amortiguadores.svg') }}"
                            class="img-fluid img-movil-categorias" alt=""> Amortiguadores <i
                            class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>

                <ul id="collapse-1" class="list-unstyled collapse pl-3 ul-acordion" aria-labelledby="list-1"
                    data-parent="#accordion">
                    <li><a href="/amortiguadores/gabriel" class="d-block font-weight-normal">Amortiguadores Gabriel</a>
                    </li>
                    <li><a href="/amortiguadores/mando" class="d-block font-weight-normal">Amortiguadores Mando</a>
                    </li>
                    <li><a href="/amortiguadores/kyb" class="d-block font-weight-normal">Amortiguadores KyB</a></li>
                    <li><a href="/amortiguadores/monroe" class="d-block font-weight-normal">Amortiguadores Monroe</a>
                    </li>
                    <li><a href="/amortiguadores/corven" class="d-block font-weight-normal">Amortiguadores Corven</a>
                    </li>
                </ul>
            </li>
            <li>
                <div class="p-0" id="list-2">
                    <a href="/neumaticos" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2"><img
                            width="25" height="25" fetchpriority=high
                            src="{{ asset('img/iconos/icon-neumaticos.svg') }}" class="img-fluid img-movil-categorias"
                            alt=""> Neumaticos <i class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>

                <ul id="collapse-2" class="list-unstyled collapse pl-3 ul-acordion" aria-labelledby="list-2"
                    data-parent="#accordion">
                    <li><a href="/neumaticos/bridgestone" class="d-block font-weight-normal">Nuematicos
                            Bridgestone</a>
                    </li>
                    <li><a href="/neumaticos/maxxis" class="d-block font-weight-normal">Nuematicos Maxxis</a>
                    </li>
                    <li><a href="/neumaticos/goodyear" class="d-block font-weight-normal">Nuematicos Goodyear</a>
                    </li>
                    <li><a href="/neumaticos/pirelli" class="d-block font-weight-normal">Nuematicos Pirelli</a>
                    </li>
                    <li><a href="/neumaticos/yokohama" class="d-block font-weight-normal">Nuematicos Yokohama</a>
                    </li>
                    <li><a href="/neumaticos/continental" class="d-block font-weight-normal">Nuematicos
                            Continental</a>
                    </li>
                    <li><a href="/neumaticos/hankook" class="d-block font-weight-normal">Nuematicos Hankook</a>
                    </li>
                    <li><a href="/neumaticos/kumho" class="d-block font-weight-normal">Nuematicos Kumho</a>
                    </li>
                    <li><a href="/neumaticos/michelin" class="d-block font-weight-normal">Nuematicos Michelin</a>
                    </li>
                </ul>
            </li>
            <li>
                <div class="p-0" id="list-3">
                    <a href="/motores" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3"><img
                            width="25" height="25" fetchpriority=high
                            src="{{ asset('img/iconos/icon-motor.svg') }}" class="img-fluid img-movil-categorias"
                            alt=""> Motores <i class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>
                <ul id="collapse-3" class="list-unstyled collapse pl-3 ul-acordion" aria-labelledby="list-3"
                    data-parent="#accordion">
                    <li><a href="/motores/chevrolet" class="d-block font-weight-normal">Motores Chevrolet</a></li>
                    <li><a href="/motores/fiat" class="d-block font-weight-normal">Motores Fiat</a></li>
                    <li><a href="/motores/peugeot" class="d-block font-weight-normal">Motores Peugeot</a></li>
                    <li><a href="/motores/opel" class="d-block font-weight-normal">Motores Opel</a></li>
                    <li><a href="/motores/nissan" class="d-block font-weight-normal">Motores Nissan</a></li>
                    <li><a href="/motores/citroen" class="d-block font-weight-normal">Motores Citroen</a></li>
                    <li><a href="/motores/renault" class="d-block font-weight-normal">Motores Renault</a></li>
                </ul>
            </li>
            <li>
                <div class="p-0" id="list-4">
                    <a href="/cajas-de-cambio" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-4" aria-expanded="false" aria-controls="collapse-4"><img
                            width="25" height="25" fetchpriority=high
                            src="{{ asset('img/iconos/icon-transmision.svg') }}"
                            class="img-fluid img-movil-categorias" alt=""> Cajas de cambios <i
                            class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>
                <ul id="collapse-4" class="list-unstyled collapse pl-3 ul-acordion" aria-labelledby="list-4"
                    data-parent="#accordion">
                    <li><a href="/cajas-de-cambio/peugeot" class="d-block font-weight-normal">Cajas de cambio
                            Peugeot</a></li>
                    <li><a href="/cajas-de-cambio/opel" class="d-block font-weight-normal">Cajas de cambio Opel</a>
                    </li>
                    <li><a href="/cajas-de-cambio/citroen" class="d-block font-weight-normal">Cajas de cambio
                            Citroen</a></li>
                    <li><a href="/cajas-de-cambio/renault" class="d-block font-weight-normal">Cajas de cambio
                            Renault</a></li>
                    <li><a href="/cajas-de-cambio/fiat" class="d-block font-weight-normal">Cajas de cambio Fiat</a>
                    </li>
                    <li><a href="/cajas-de-cambio/seat" class="d-block font-weight-normal">Cajas de cambio Seat</a>
                    </li>
                    <li><a href="/cajas-de-cambio/volkswagen" class="d-block font-weight-normal">Cajas de cambio
                            Volkswagen</a></li>
                    <li><a href="/cajas-de-cambio/nissan" class="d-block font-weight-normal">Cajas de cambio
                            Nissan</a></li>
                </ul>
            </li>
            <li>
                <div class="p-0" id="list-6">
                    <a href="#" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-6" aria-expanded="false" aria-controls="collapse-6"><img
                            width="25" height="25" fetchpriority=high
                            src="{{ asset('img/iconos/icon-filtros.svg') }}" class="img-fluid img-movil-categorias"
                            alt=""> Filtros <i class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>
            </li>
            <li>
                <div class="p-0" id="list-7">
                    <a href="/baterias" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-7" aria-expanded="false" aria-controls="collapse-7"><img
                            width="25" height="25" fetchpriority=high
                            src="{{ asset('img/iconos/icon-sistema-electrico.svg') }}"
                            class="img-fluid img-movil-categorias" alt=""> Baterias <i
                            class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>
            </li>
            <li>
                <div class="p-0" id="list-8">
                    <a href="#" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-8" aria-expanded="false" aria-controls="collapse-8"><img
                            width="25" height="25" fetchpriority=high
                            src="{{ asset('img/iconos/icon-escape.svg') }}" class="img-fluid img-movil-categorias"
                            alt=""> Ópticos <i class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>
            </li>
            <li>
                <div class="p-0" id="list-9">
                    <a href="/retenes" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-9" aria-expanded="false" aria-controls="collapse-9"><img
                            width="25" height="25" fetchpriority=high
                            src="{{ asset('img/iconos/icon-frenos.svg') }}" class="img-fluid img-movil-categorias"
                            alt=""> Retenes <i class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>
            </li>
            <li>
                <div class="p-0" id="list-10">
                    <a href="/frenos" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-10" aria-expanded="false" aria-controls="collapse-10"><img
                            width="25" height="25" fetchpriority=high
                            src="{{ asset('img/iconos/icon-direccion.svg') }}" class="img-fluid img-movil-categorias"
                            alt=""> Frenos <i class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>
            </li>
            <li>
                <div class="p-0" id="list-11">
                    <a href="#" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-11" aria-expanded="false" aria-controls="collapse-11"><img
                            width="25" height="25" fetchpriority=high
                            src="{{ asset('img/iconos/icon-refrigeracion.svg') }}"
                            class="img-fluid img-movil-categorias" alt=""> Embragues <i
                            class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>
            </li>
            <li>
                <div class="p-0" id="list-12">
                    <a href="/crucetas" class="d-block font-weight-600 collapsed" data-toggle="collapse"
                        data-target="#collapse-12" aria-expanded="false" aria-controls="collapse-12"><img
                            width="25" height="25" fetchpriority=high
                            src="{{ asset('img/iconos/icon-suspension.svg') }}"
                            class="img-fluid img-movil-categorias" alt=""> Crucetas <i
                            class="fa fa-chevron-down icon-down-movil"></i></a>
                </div>
                <ul id="collapse-12" class="list-unstyled collapse pl-3 ul-acordion" aria-labelledby="list-12"
                    data-parent="#accordion">
                    <li><a href="/crucetas/ford" class="d-block font-weight-normal">Crucetas Ford</a></li>
                    <li><a href="/crucetas/nissan" class="d-block font-weight-normal">Crucetas Nissan</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="div-buscador"></div>
</header>