@extends('layouts.backend')

@section('css_after')
<style type="text/css">
   .nav-main-link.active {
      background-color: #1F2937 !important;
      color: #FFFFFF !important;
   }
   .nav-main-link.active .nav-main-link-icon.fa {
      color: #FFFFFF !important;
   }
   .nav-tabs-block .nav-item .nav-link {
      outline: none;
   }
   button {
      outline: none !important;
   }
   
   .form-block .form-check-input {
      position: absolute;
      left: 0;
      z-index: -1;
      opacity: 0
   }
   .form-block .form-check-label {
      width: 100%;
      padding: .75rem;
      border: 2px solid #dde2e9;
      border-radius: .25rem;
      cursor: pointer
   }
   .form-block .form-check-label:hover {
      border-color: #ced5df
   }
   .form-block .form-check-input:checked~.form-check-label {
      border-color: #2356d7
   }
   .form-block .form-check-input:focus~.form-check-label {
      border-color: #2356d7;
      box-shadow: 0 0 0 .25rem rgba(35,86,215,.25)
   }
   .form-block .form-check-input:checked~.form-check-label::before {
      display: block
   }
   .form-block .form-check-input:disabled+.form-check-label,.form-block .form-check-input[readonly]+.form-check-label {
      opacity: .5;
      cursor: not-allowed
   }
   .form-block .form-check-input:disabled:not([checked])+.form-check-label:hover,.form-block .form-check-input[readonly]:not([checked])+.form-check-label:hover {
      border-color: #dde2e9
   }

   .tree {
      min-height:20px;
      margin-bottom:20px;
   }
   .tree li {
      list-style-type:none;
      margin:0;
      padding:10px 5px 0 5px;
      position:relative;
   }
   .tree li::before, .tree li::after {
      content:'';
      left:-20px;
      position:absolute;
      right:auto;
   }
   .tree li::before {
      border-left:1px solid #999;
      bottom:50px;
      height:100%;
      top:0;
      width:1px
   }
   .tree li::after {
      border-top:1px solid #999;
      height:20px;
      top:30px;
      width:25px
   }
   .tree li span {
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border:1px solid #999;
      border-radius:5px;
      display:inline-block;
      padding:3px 8px;
      text-decoration:none;
   }
   .tree li.parent_li>span {
      cursor:pointer;
   }
   .tree>ul>li::before, .tree>ul>li::after {
      border:0
   }
   .tree li:last-child::before {
      height:30px
   }
   .tree li.parent_li>span:hover, .tree li.parent_li>span+ul li:hover span:not(.active) {
      background:#eee;
      border:1px solid #94a0b4;
      color:#000;
   }
   .tree .active {
      color: #FFFFFF;
      background-color: #1F2937 !important;
      border: 0;
   }

   .accordion {
      background-color: #f9f9f9;
      cursor: pointer;
      border: none;
      outline: none;
      transition: background-color 0.2s ease;
      text-align: left;
      width: 100%;
   }
   .panel {
      display: none;
      overflow: hidden;
      padding: 0 18px;
      background-color: white;
   }

   .select2-container .select2-selection--single {
      height: auto;
   }
   .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 36px;
   }
   .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 36px;
   }
   .select2-container--default .select2-selection--single {
      border: 1px solid #e1e1e1;
   }

   .form-check-label-switch {
      display: inline-block;
      position: relative;
      width: 50px;
      height: 25px;
      border-radius: 20px;
      background: #dfd9ea;
      transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      vertical-align: middle;
      cursor: pointer;
   }
   .form-check-label-switch::before {
      content: '';
      position: absolute;
      top: 1px;
      left: 2px;
      width: 22px;
      height: 22px;
      background: #fafafa;
      border-radius: 50%;
      transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .form-check-label-switch:active::before {
      box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);
   }
   input.form-check-input:checked + .form-check-label-switch {
      background: #5c80d1;
   }
   input.form-check-input:checked + .form-check-label-switch::before {
      left: 27px;
      background: #fff;
   }
   input.form-check-input:checked + .form-check-label-switch:active::before {
      box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(0,150,136,0.2);
   }
</style>
@endsection

@section('content')
   <div class="content">
      {{-- <div class="bg-white p-3 push">
         <div class="d-lg-none">
            <button type="button" class="btn w-100 btn-alt-secondary d-flex justify-content-between align-items-center" data-toggle="class-toggle" data-target="#horizontal-navigation-hover-justified" data-class="d-none">
            Menu Delivery
            <i class="fa fa-bars"></i>
            </button>
         </div>
         <div id="horizontal-navigation-hover-justified" class="d-none d-lg-block mt-2 mt-lg-0">
            <ul class="nav-main nav-main-horizontal nav-main-hover nav-main-horizontal-justify">
               <li class="nav-main-item">
                  <a class="nav-main-link {{ request()->is('deliverypendingv2') ? 'active' : '' }}" href="/deliverypendingv2">
                     <i class="nav-main-link-icon fa fa-clock"></i>
                     <span class="nav-main-link-name">Pending</span>
                     <span class="nav-main-link-badge badge rounded-pill bg-primary text-white" id="tab_pending_count" style="display: none"></span>
                  </a>
               </li>
               <li class="nav-main-item">
                  <a class="nav-main-link {{ request()->is('deliveryreadytopickv2') ? 'active' : '' }}" href="/deliveryreadytopickv2">
                     <i class="nav-main-link-icon fa fa-clipboard-check"></i>
                     <span class="nav-main-link-name">Ready To Pick</span>
                     <span class="nav-main-link-badge badge rounded-pill bg-primary text-white" id="tab_readytopick_count" style="display: none"></span>
                  </a>
               </li>
               <li class="nav-main-item">
                  <a class="nav-main-link {{ request()->is('deliveryorderanalystv2') ? 'active' : '' }}" href="/deliveryorderanalystv2">
                     <i class="nav-main-link-icon fa fa-box-open"></i>
                     <span class="nav-main-link-name">Order Analyst</span>
                     <span class="nav-main-link-badge badge rounded-pill bg-primary text-white" id="tab_orderanalyst_count" style="display: none"></span>
                  </a>
               </li>
               <li class="nav-main-item">
                  <a class="nav-main-link {{ request()->is('deliverypickconsolv2') ? 'active' : '' }}" href="/deliverypickconsolv2">
                     <i class="nav-main-link-icon fa fa-cubes"></i>
                     <span class="nav-main-link-name">Pick & Consol</span>
                     <span class="nav-main-link-badge badge rounded-pill bg-primary text-white" id="tab_pickconsol_count" style="display: none"></span>
                  </a>
               </li>
               <li class="nav-main-item">
                  <a class="nav-main-link {{ request()->is('deliverypackcheckv2') ? 'active' : '' }}" href="/deliverypackcheckv2">
                     <i class="nav-main-link-icon fa fa-box"></i>
                     <span class="nav-main-link-name">Pack & Check</span>
                     <span class="nav-main-link-badge badge rounded-pill bg-primary text-white" id="tab_packcheck_count" style="display: none"></span>
                  </a>
               </li>
               <li class="nav-main-item">
                  <a class="nav-main-link {{ request()->is('deliveryqcv2') ? 'active' : '' }}" href="/deliveryqcv2">
                     <i class="nav-main-link-icon fa fa-box"></i>
                     <span class="nav-main-link-name">QC Error</span>
                     <span class="nav-main-link-badge badge rounded-pill bg-primary text-white" id="tab_packcheck_count" style="display: none"></span>
                  </a>
               </li>
            </ul>
         </div>
      </div> --}}

      @yield('filter_tab')

      @yield('content_tab')
   </div>

    
   @yield('modal_tab')
@endsection

@section('js_after')
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   
   @yield('modal_fuction')
   <script type="text/javascript">
      $(document).ready(function(){
         // outstandingTabCheck();
         $('.accordion').click(function() {
            var panel = $(this).parent().parent().find('.panel');
            panel.slideToggle();
        });
      });
      // function outstandingTabCheck(){
      //    $.ajax({ 
      //       headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, 
      //       url: 'deliverypendingv2/outstandingtabs', 
      //       type: 'POST', 
      //       cache : false, 
      //       processData: false, 
      //       success: function (response) { 
      //          if (response["pending"] != 0) {
      //             $("#tab_pending_count").show();
      //             $("#tab_pending_count").html(response["pending"]);
      //          }else{
      //             $("#tab_pending_count").hide();
      //          }
               
      //          if (response["readypick"] != 0) {
      //             $("#tab_readytopick_count").show();
      //             $("#tab_readytopick_count").html(response["readypick"]);
      //          }else{
      //             $("#tab_readytopick_count").hide();
      //          }

      //          if (response["orderanalyst"] != 0) {
      //             $("#tab_orderanalyst_count").show();
      //             $("#tab_orderanalyst_count").html(response["orderanalyst"]);
      //          }else{
      //             $("#tab_orderanalyst_count").hide();
      //          }

      //          if (response["pickconsol"] != 0) {
      //             $("#tab_pickconsol_count").show();
      //             $("#tab_pickconsol_count").html(response["pickconsol"]);
      //          }else{
      //             $("#tab_pickconsol_count").hide();
      //          }
      //       }, 
      //       error: function (response) { 
      //          alertModalStd("Opppss! We are sorry there's something wrong. Please refresh the page and try again or contact the administrator !!!",5000);
      //       }, 
      //    });
      
      // }
   </script>
   @include('pages.globalFunction')
@endsection