@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">
                            <option value="">-- Pilih Nomor 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>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</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>
                        <button type="button" class="btn btn-sm btn-danger" id="btn_qc" onclick="toQc()" disabled>To QC Error</button>
                    </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" 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%">No</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">
                    <div class="nav-link text-dark">
                        Checking Box
                    </div>
                </li>
            </ul>
            <div class="block-content block-content-full">
                <div id="boxSuggest" class="mb-2"></div>
                <div class="form-group" >
                    <input type="text" class="form-control" id="barcode_box" placeholder="Barcode Box (Ketik 001)" onkeydown="if(event.keyCode === 13) { checkQrcodeBox(); return false; }" readonly>
                </div>
            </div>
        </div>

        <video id="video" width="320" height="240" class="d-none" autoplay></video>
        
        <div class="block block-rounded">
            <ul class="nav nav-tabs nav-tabs-block" role="tablist">
                <li class="nav-item ml-auto" role="presentation">
                    <div class="d-flex">
                        <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">
                    <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>Shipping Agent</th>
                                <th>Shipping Service</th>
                                <th>Marketplace</th>
                                <th>Payment Time</th>
                                <th>Order Time</th>
                                <th>Due Date</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

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