@extends('pages.delivery_v2.index')

@section('content_tab')
<div class="row">
    <div class="col-md-3">
        <div class="block block-rounded">
            <ul class="nav nav-tabs nav-tabs-block" role="tablist">
                <li class="nav-item" role="presentation">
                    <div class="nav-link text-dark">
                        Product
                    </div>
                </li>
            </ul>
            <div class="block-content block-content-full">
                <div id="product_image">
                    <img src="{{ asset('img_placeholder.jpg') }}" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="block block-rounded">
            <ul class="nav nav-tabs nav-tabs-block" role="tablist">
                <li class="nav-item w-100" role="presentation">
                    <div class="nav-link text-dark">
                        <span>Nomor Resi / Invoice & Nomor Meja</span>
                    </div>
                </li>
            </ul>
            <div class="block-content block-content-full">
                <div class="row">
                    <div class="col-md-9">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search.." id="barcode_header" onchange="checkDetail()" onkeydown="if(event.keyCode === 13) { checkDetail(); return false; }">
                            <div class="input-group-append">
                                <span class="input-group-text">
                                    <i class="fa fa-fw fa-search"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select name="no_meja" id="no_meja" class="form-control" disabled>
                            <option value="">-- No Meja --</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="alert alert-danger d-none" id="order_cancel">Orderan CANCEL</div>
        <div class="alert alert-danger d-none" id="order_onhold">Orderan ONHOLD</div>

        <div class="block block-rounded">
            <ul class="nav nav-tabs nav-tabs-block" role="tablist">
                <li class="nav-item w-100" role="presentation">
                    <div class="d-flex justify-content-between">
                        <div class="nav-link text-dark">
                            Checking Product
                        </div>
                        <div class="d-flex">
                            <button type="button" class="btn btn-sm btn-secondary rounded-0" id="btn_analyst" onclick="toRack()" disabled>To Order Analyst</button>
                            <span class="mx-1"></span>
                            <button type="button" class="btn btn-sm btn-danger rounded-0" id="btn_checker" onclick="toChecker()" disabled>To Checker</button>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="block-content block-content-full">
                <div class="form-group" >
                    <input type="text" class="form-control" id="barcode_product" placeholder="Barcode Product" onchange="checkQrcodeProduct()" onkeydown="if(event.keyCode === 13) { checkQrcodeProduct(); return false; }" readonly>
                </div>
                <table class="table table-striped nowrap table-sm mt-4" id="modalTableList">
                    <thead>
                        <tr role="row" class="heading">
                            <th width="5%">Number</th>
                            <th width="10%">Barcode</th>
                            <th width="10%">SKU</th>
                            <th width="30%">Product</th>
                            <th width="10%">Qty Need</th>
                            <th width="10%">Qty Input</th>
                        </tr>
                    </thead>
                    <tbody id="check_input">
                    </tbody>
                </table>
            </div>
        </div>

        <div class="block block-rounded">
            <ul class="nav nav-tabs nav-tabs-block" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active">List Handover</button>
                </li>
                <li class="nav-item ml-auto" role="presentation">
                    <div class="d-flex">
                        @if (in_array('6-2-1a', Session::get('access')))
                        <button type="button" class="nav-link" onclick="acceptOrderSpecify()" id="btn_accept_specify">
                            <span id="count_check_label" class="badge rounded bg-primary text-white mr-1">0</span>
                            Handover
                            <i class="fa fa-fw fa-rocket ml-2"></i>
                        </button>
                        @endif
                        <button type="button" class="nav-link" onclick="exportExcel()">
                            <i class="fa fa-file-excel"></i>
                        </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_handover" style="width: 100%;zoom: 85%;">
                        <thead>
                            <tr>
                                <th style="width: 5%">
                                    <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>Invoice Number</th>
                                <th>AWB Number</th>
                                <th>Admin Qc Error</th>
                                <th>Tanggal</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="block block-rounded">
            <ul class="nav nav-tabs nav-tabs-block" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active">Pending Check</button>
                </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">
                    <div class="form-group has-success">
                        <label for="form_control_1">Warehouse</label>
                        <select class="form-control form-control-inline " id="filter_table1" name="filter_table1" 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>
                    
                    <table class="table table-striped nowrap table-sm" id="list_data" style="width: 100%;zoom: 85%;">
                        <thead>
                            <tr>
                                <th>Invoice Number</th>
                                <th>Payment Time</th>
                                <th>Order Time</th>
                                <th>Shipping Agent</th>
                                <th>Shipping Service</th>
                                <th>Marketplace</th>
                                <th>Due Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modal_tab')
    @include('pages.delivery_v2.tab_qc.modal')
@endsection

@section('modal_fuction')
    @include('pages.delivery_v2.tab_qc.function')
@endsection