@extends('backend.layouts.app')

@section( 'content' )
<style type="text/css">

/*.ui-autocomplete {
    z-index: 5000;
}*/
/*tr, td{
    border: 1px solid black;
}*/
.emp-profile{
  /*  padding: 3%;
    margin-top: 3%;
    margin-bottom: 3%;*/
    border-radius: 0.5rem;
    background: #fff;
}
.profile-img{
    text-align: center;
}
.profile-img img{
    width: 70%;
    height: 100%;
}
.profile-img .file {
    position: relative;
    overflow: hidden;
    margin-top: -20%;
    width: 70%;
    border: none;
    border-radius: 0;
    font-size: 15px;
    background: #212529b8;
}
.profile-img .file input {
    position: absolute;
    opacity: 0;
    right: 0;
    top: 0;
}
.profile-head h5{
    color: #333;
}
.profile-head h6{
    color: #0062cc;
}
.profile-edit-btn{
    border: none;
    border-radius: 1.5rem;  
    width: 70%;
    padding: 2%;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
}
.proile-rating{
    font-size: 12px;
    color: #818182;
    margin-top: 5%;
}
.proile-rating span{
    color: #495057;
    font-size: 15px;
    font-weight: 600;
}
.profile-head .nav-tabs{
    margin-bottom:5%;
}
.profile-head .nav-tabs .nav-link{
    font-weight:600;
    border: none;
}
.profile-head .nav-tabs .nav-link.active{
    border: none;
    border-bottom:2px solid #0062cc;
}
.profile-work{
    padding: 14%;
    margin-top: -15%;
}
.profile-work p{
    font-size: 12px;
    color: #818182;
    font-weight: 600;
    margin-top: 10%;
}
.profile-work a{
    text-decoration: none;
    color: #495057;
    font-weight: 600;
    font-size: 14px;
}
.profile-work ul{
    list-style: none;
}
.profile-tab label{
    font-weight: 600;
}
.profile-tab p{
    font-weight: 600;
    color: #0062cc;
}

.card-text p{
    font-size: 0.8rem;
}

.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20rem; }
  .toggle.ios .toggle-handle { border-radius: 20rem; }
.toggle-on.btn {
    padding-right: 1.3rem;
}

.toggle-off.btn {
    padding-left: 15px;
    padding-right: 9px;
}
#home-tab, #profile-tab, #schedule-tab, #upsell-tab {
    color: #525f7f;
}
.modal {
  overflow-y:auto;
}

.wrapper {
    position:relative;
    margin:0 auto;
    max-width:3000px;
    overflow-x:auto;
    padding:40px;
    height:50px;
}

.list {
    position:absolute;
    left:0px;
    top:0px;
    min-width:3000px;
    margin-left:12px;
    margin-top:0px;
}

.list li{
    display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
}

.scroller {
  text-align:center;
  cursor:pointer;
  display:none;
  padding:7px;
  padding-top:11px;
  white-space:no-wrap;
  vertical-align:middle;
  background-color:#fff;
}

.scroller-right{
  float:right;
}

.scroller-left {
  float:left;
}

</style>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
        <div class="form-group row d-none">
            <label class="col-sm-1" style="text-align: right;">Brand</label>
            <div class="col-sm-3">
                <select class="form-control form-control-sm brand_id" name="brand_id">
                    <option value="">--Select--</option>
                    @foreach($brands as $brand)
                        @if($user_brand)
                            <option value="{{$brand->id}}" @if($user_brand->brand_id == $brand->id) selected="" @endif>{{$brand->name}}</option>
                        @else
                            <option value="{{$brand->id}}">{{$brand->name}}</option>
                        @endif
                    @endforeach
                </select>
            </div>
            <div class="col-sm-1">
                <button type="button" class="btn btn-success btn-sm btn-submit-brand">Submit</button>
            </div>
        </div>
    <div class="card shadow mt-4">
        <div class="card-body main-section-data" >
            <div class="wrapper">
              <ul class="nav nav-pills mb-3 list" id="pills-tab" role="tablist">
                                        @foreach($menu_categories as $cat)
                    <li class="nav-item">
                         <a class="nav-link {{$num == 1 ? 'active' : ''}}" id="pills-{{$cat->id}}-tab" data-toggle="pill" href="#pills-{{$cat->id}}" role="tab" aria-controls="pills-{{$cat->name}}" aria-selected="true">{{$cat->name}}</a>
                    </li>
                                       @endforeach 
              </ul>

            </div>
            <div class="tab-content" id="pills-tabContent">
                @include('backend.menu.building.index-ajax')
            </div>
           
        </div>
    </div>
@include('backend.menu.building.create')
@include('backend.menu.building.upsell.create')
@endsection
  
@section('after-scripts')
    <script src="{{ asset( 'js/menu/menu-building.js' ) }}" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
    <script type="text/javascript">
        var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function(){
  var itemsWidth = 0;
  $('.list li').each(function(){
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
  });
  return itemsWidth;
};

var widthOfHidden = function(){
  return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
};

var getLeftPosi = function(){
  return $('.list').position().left;
};

var reAdjust = function(){
  if (($('.wrapper').outerWidth()) < widthOfList()) {
    $('.scroller-right').show();
  }
  else {
    $('.scroller-right').hide();
  }
  
  if (getLeftPosi()<0) {
    $('.scroller-left').show();
  }
  else {
    $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
    $('.scroller-left').hide();
  }
}

reAdjust();

$(window).on('resize',function(e){  
    reAdjust();
});

$('.scroller-right').click(function() {
  
  $('.scroller-left').fadeIn('slow');
  $('.scroller-right').fadeOut('slow');
  
  $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){

  });
});

$('.scroller-left').click(function() {
  
    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');
  
    $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
    
    });
});  
    </script>
@endsection