@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')
@php
    $courier_header = [];
    $courier_detail = [];
@endphp

<div class="content">
<div class="block block-rounded">
    <div class="block-header block-header-default">
        <button class="accordion">Filter</button>
    </div>
    <div class="panel">
        <div class="block-content block-content-full">
            <div class="row">
                <div class="col-lg-12 space-y-2">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group has-success">
                                <label for="form_control_1">Shipping Agent</label>
                                <select class="form-control form-control-inline" id="filter_table1" name="filter_table1" onchange="reloadDatatable()">
                                    <option value="" selected>Show all</option>
                                    @foreach($data["courier"] as $courier)
                                        @php
                                            $courier_header[] = $courier->shipping_agent;
                                        @endphp
                                        <option value="{{ $courier->shipping_agent }}">{{ $courier->shipping_agent }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group has-success">
                                <label for="form_control_1">Shipping Service</label>
                                <select class="form-control form-control-inline" id="filter_table3" name="filter_table3" onchange="reloadDatatable()">
                                    <option value="" selected>Show all</option>
                                    @foreach($data["courier_detail"] as $courier)
                                        @php
                                            $courier_detail[] = $courier->shipping_service;
                                        @endphp
                                        <option value="{{ $courier->shipping_service }}">{{ $courier->shipping_service }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                           <div class="form-group has-success">
                              <label for="form_control_1">Marketplace</label>
                              <select class="form-control form-control-inline" id="filter_table2" name="filter_table2" onchange="changeMarketplace(this.value)">
                                 <option value="" selected>Show all</option>
                                 <option value="1">Tokopedia</option>
                                 <option value="2">Blibli</option>
                                 <option value="3">Shopee</option>
                                 <option value="4">Bukalapak</option>
                                 <option value="5">Lazada</option>
                                 <option value="6">Tiktok</option>
                                 <option value="7">Internal</option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-3">
                           <div class="form-group has-success">
                              <label for="form_control_1">Shop <span id="loadingtext" style="display: none">Loading...</span></label>
                              <select class="form-control form-control-inline select2" id="filter_table5" name="filter_table5" onchange="reloadDatatable()" style="width: 100%">
                                 <option value="" selected>Pilih Marketplace Terlebih Dahulu</option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-3">
                           <div class="form-group has-success">
                              <label for="form_control_1">Due Date</label>
                              <select class="form-control form-control-inline " id="filter_table6" name="filter_table6" onchange="reloadDatatable()">
                                 <option value="" selected>Show All</option>
                                 <option value="0">Overdue</option>
                                 <option value="1">Kurang dari 6 jam</option>
                                 <option value="2">Kurang dari 24 jam</option>
                                 <option value="3">Lebih dari 24 jam</option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-3">
                           <div class="form-group has-success">
                              <label for="form_control_1">Status WMS</label>
                              <select class="form-control form-control-inline " id="filter_table4" name="filter_table4" onchange="reloadDatatable()">
                                 <option value="1">ON PROSES</option>
                                 <option value="2">COMPLETED</option>
                                 <option value="3">CANCEL</option>
                                 <option value="4">ONHOLD</option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-3">
                           <div class="form-group has-success">
                              <div id="input_sku">
                                 <label for="filter_table10">SKU</label> <br>
                                 <select class="form-control form-control-inline" id="filter_table10" name="filter_table10" style="width: 100%" onchange="reloadDatatable()">
                                 </select>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-3">
                           <div class="form-group has-success">
                               <label for="form_control_1">Warehouse</label>
                               <select class="form-control form-control-inline " id="filter_table11" name="filter_table11" onchange="reloadDatatable()">
                                   <option value="" selected>Show all</option>
                                   @foreach($data["warehouse"] as $warehouse)
                                       <option value="{{ $warehouse->code }}">{{ $warehouse->code }} - {{ $warehouse->name }}</option>
                                   @endforeach
                               </select>
                           </div>
                        </div>
                        <div class="col-md-3">
                           <div class="form-group has-success">
                              <label for="form_control_1">Posisi WMS</label>
                              <select class="form-control form-control-inline " id="filter_table12" name="filter_table12" onchange="reloadDatatable()" multiple>
                                 <option value="READY TO PICK">READY TO PICK</option>
                                 <option value="GET AWB">GET AWB</option>
                                 <option value="ORDER ANALYST">ORDER ANALYST</option>
                                 <option value="PICK CONSOL">PICK & CONSOL</option>
                                 <option value="IN PICKING">IN PICKING</option>
                                 <option value="WAIT PICK">WAIT PICK</option>
                                 <option value="START PICK">START PICK</option>
                                 <option value="CHECK PACK">CHECK & PACK</option>
                                 <option value="IN PACKING">IN PACKING</option>
                                 <option value="SCAN PENDING">SCAN PENDING</option>
                                 <option value="SCAN DONE">SCAN DONE</option>
                                 <option value="ROUTING PENDING">ROUTING PENDING</option>
                                 <option value="ROUTING DONE">ROUTING DONE</option>
                                 <option value="LOADING">LOADING</option>
                                 <option value="LOADING DONE">LOADING DONE</option>
                                 <option value="QC ERROR">QC ERROR</option>
                                 <option value="LOADING ERROR">LOADING ERROR</option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-3">
                           <div class="form-group has-success">
                              <label for="form_control_1">Status MP</label>
                              <select class="form-control form-control-inline " id="filter_table13" name="filter_table13" onchange="reloadDatatable()">
                                 <option value="">Show All</option>
                                 <option value="3">Order Accepted</option>
                                 <option value="4">Waiting Pickup</option>
                                 <option value="5">Shipment</option>
                                 <option value="7">Delivery To Customer</option>
                                 <option value="8">Order Completed</option>
                                 <option value="0">Cancel</option>
                              </select>
                           </div>
                        </div>
                        <div class="col-md-3">
                           <div class="form-group has-success ">
                              <div class="input-icon">
                                 <label for="form_control_1">{{__('Payment Time From')}}</label>
                                 <input type="text" class="js-flatpickr form-control bg-white" id="filter_table7" onchange="reloadDatatable()" data-enable-time="true" data-time_24hr="true">
                              </div>
                           </div>
                        </div>
                        <div class="col-md-3">
                           <div class="form-group has-success">
                              <div class="input-icon">
                                 <label for="form_control_1">{{__('Payment Time To')}}</label>
                                 <input type="text" class="js-flatpickr form-control bg-white" id="filter_table8" onchange="reloadDatatable()" data-enable-time="true" data-time_24hr="true">
                              </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="block block-rounded">
   <input type="hidden" value="" id="filter_table9"> {{-- Menyimpan table checked --}}
   <ul class="nav nav-tabs nav-tabs-block" role="tablist">
      <li class="nav-item" role="presentation">
         <button class="btn rounded-0 h-100 btn-warning" onclick="onhold()">ONHOLD</button>
      </li>
      <li class="nav-item" role="presentation">
         <button class="btn rounded-0 h-100 btn-success" onclick="openHold()">SEND BACK</button>
      </li>
      <li class="nav-item" role="presentation">
         <button class="btn rounded-0 h-100 btn-secondary" onclick="toQc()">TO QC</button>
      </li>
      <li class="nav-item" role="presentation">
         <button class="btn rounded-0 h-100 btn-danger" onclick="cancelOrder()">CANCEL</button>
      </li>
      <li class="nav-item ml-auto" role="presentation">
         <button type="button" class="nav-link">
            <span id="count_check_label" class="badge rounded bg-primary text-white mr-1">0</span>
         </button>
      </li>
      <li class="nav-item" role="presentation">
         <div class="d-flex">
            <button type="button" class="nav-link" onclick="exportExcel()">
               <i class="fa fa-file-excel mr-1"></i> Report Order
            </button>
         </div>
      </li>
      <li class="nav-item" role="presentation">
         <div class="d-flex">
            <button type="button" class="nav-link" onclick="modalExportDw()">
               <i class="fa fa-file-excel mr-1"></i> Report Productivity
            </button>
         </div>
      </li>
   </ul>
   <div class="block-content tab-content">
      <div class="tab-pane active show" id="btabs-static-home" role="tabpanel" aria-labelledby="btabs-static-home-tab" tabindex="0">
         <table class="table table-striped nowrap table-sm" id="list_data" style="width: 100%;zoom: 85%;">
            <thead>
               <tr>
                  <th>
                     <div class="custom-control custom-checkbox d-inline-block">
                        <input type="checkbox" class="custom-control-input" id="check-all" onchange="checkCondition()">
                        <label class="custom-control-label" for="check-all"></label>
                     </div>
                  </th>
                  <th>Status Order</th>
                  <th>Payment</th>
                  <th>Created</th>
                  <th>Due Date</th>
                  <th>Invoice</th>
                  <th>No Resi</th>
                  <th>Picklist</th>
                  <th>Shop</th>
                  <th>Marketplace</th>
                  <th>QTY Order</th>
                  <th>QTY SKU</th>
                  <th>Basket Order</th>
                  <th>WMS Status</th>
                  <th>MP Status</th>
                  <th>Shipping Agent</th>
                  <th>Shipping Service</th>
                  <th>COD</th>
                  <th>Wave Time</th>
                  <th>Wave Admin</th>
                  <th>Pick Time</th>
                  <th>Picker</th>
                  <th>Check Time</th>
                  <th>Checker</th>
                  <th>Load Time</th>
                  <th>Loader</th>
                  <th>Handover Time</th>
                  <th>Handover</th>
               </tr>
            </thead>
            <tbody>
            </tbody>
         </table>
      </div>
   </div>
</div>
</div>
@endsection

@section('js_after')
   @include('pages.delivery_v2.outbound_dashboard2.function')
   @include('pages.delivery_v2.outbound_dashboard2.modal')
   @include('pages.globalFunction')
@endsection