@extends('admin.layout.master')
@push('css')
    <style>
        .emoji-picker {
            top: 82px !important;
            right: 19px!important;
        }
        .pp{
            margin: 5px 24px 10px !important;
        }

    </style>
    <style>
        /* =========== PRODUCTS ============ */
        .prod-box{border:1px solid #E1E1E1; overflow:hidden; margin-bottom:15px; margin-top:15px;}
        .prod-box .img-holder{ height:200px; position:relative; overflow:hidden;text-align:center;  }
        .prod-box .img-holder img{max-width:100%; min-height:100%}
        .prod-box .anons{background-color:#fff; border-top:1px solid #E1E1E1; padding:15px 10px}

        .prod-box .anons .title{margin:0; font-size:15px;  padding-bottom:10px; color:#333}
        .prod-box .price{ font-size:18px; display:block; color:#333 }

        .btn-order{ background-color:#3498DB; color:#fff;}
        .btn-order:hover{ background-color:#2980B9; color:#fff;}

        .prod-box:hover .item-hover{opacity:1; bottom:0; }
        .prod-box .item-hover{position:absolute; text-align:left; opacity:0;  bottom:-50%; left:0; width:100%; height:50%; color:#fff; background-color:rgba(0,0,0,.7);  z-index:99; transition: all 200ms ease-in-out 0s; padding:7px; font-size:13px;}

        .prod-box .item-hover p{margin:0;font-size:13px; }
        .prod-box .item-hover p a{color:aqua; display:inline-block; padding:3px;}
        .prod-box .item-hover p a:hover{ }

        .inventory{
            border: 1px solid #ddd;
            padding-left: 30px;
            padding-right: 28px;
        }
        .place {
            background: green;
            color: white;
            padding: 4px;
            border-radius: 25px;
        }
        #i-have-a-tooltip {
            font-family:Helvetica,Arial,sans-serif;
            font-weight:100;
            font-size:20px;
            text-align:center;
            margin:40px auto;
            background:white;
            position:relative;
            border-radius:5px;
            box-shadow:10px 10px 0px rgba(0,0,0,.05);
        }

        #i-have-a-tooltip:before {
            content:attr(data-description);
            box-sizing:border-box;
            display:block;
            background:rgba(0,0,0,.7);
            color:white;
            padding:20px;
            position:absolute;
            left:50%;
            top:-30px;
            margin-left:-100px;
            width:200px;
            height:65px;
            line-height:25px;
            border-radius:5px;
            opacity:0;
            transition:.25s ease-in-out;
        }

        #i-have-a-tooltip:after {
            content:'';
            display:block;
            position:absolute;
            top:35px;
            left:50%;
            margin-left:-8px;
            height:0;
            width:0;
            border-left:8px solid transparent;
            border-right:8px solid transparent;
            border-top:8px solid rgba(0,0,0,.7);
            transition:.25s ease-in-out;
            opacity:0;
        }

        #i-have-a-tooltip:hover:before {
            opacity:1;
            top:-50px;
        }

        #i-have-a-tooltip:hover:after {
            opacity:1;
            top:15px;
        }

        .titleQ {
            font-size: 15px;
        }

        #change_status_driver:hover {
    cursor: pointer;
}

/*.pagination {*/
/*    display:inline-block !important;*/
/*}*/

    </style>


@endpush
@section('content')
{{-- @dd(implode(',',auth()->user()->getRoles())) --}}
@if( auth()->user()->hasRole('Tager') != 'true' )
    <main id="app-main" class="app-main">

    <div class="wrap">
        <section class="app-content">

            <h3>{{ auth()->user()->hasRole('Drivers') == 'true'  ?  trans('admin.welcome'). auth()->user()->name :trans('admin.dashboard')}}</h3>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">@lang('admin.dashboard')</a></li>
                </ol>
            </nav>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->
    @endif
    @if(implode(',',auth()->user()->getRoles()) == 'Tager')
        <div class="container-fluid" style="padding: 30px">
        <div class="row">
        @foreach($companies as $company)

                <div class="col-md-6 col-sm-4" style="float: right">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">{{$company->name}}</h4>
                        </header><hr class="widget-separator">
                        <div class="widget-body text-center">
                            <div class="big-icon m-b-md watermark">
                                <img style="width: 100px; height: 100px;" src="{{$company->image_path}}">
                            </div>
                            <h4 class="m-b-md">{{$company->name}}</h4>
                            <p class="text-muted m-b-lg">{!!$company->descrption!!}</p>