@extends('admin.layout.master')
@push('css')
    <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;
        }
        #txtbox {

            width : 100%;
        }
        .pp{
            margin: 5px 24px 10px !important;
        }




    </style>

@endpush
@section('content')
    <main id="app-main" class="app-main">

    <div class="wrap">
        <section class="app-content">
            <h3>@lang('admin.products')</h3>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->

    <div class="col-md-8" style="float: {{app()->getLocale() == 'ar' ? 'right':'left'}}">
        <div class="widget">
            <header class="widget-header">
                <h4 class="widget-title">@lang('admin.products')</h4>
            </header><!-- .widget-header -->
            <hr class="widget-separator">
            <div class="widget-body">
                    <div id="default-datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                        <form action="{{route('get-free-search')}}" method="get" id="searchInventory">
                            @method('get')
                            @csrf
                            <div class="row">
                                <div class="col-xs-6 col-md-4 "  style="float: right">
                                    <div class="form-group">
                                        <input type="text" class="form-control promo-search-field" id="search" placeholder="ابحث هنا .............">
                                    </div>
                                </div>