@extends('layouts.backend')

@section('content')
    <!-- Page Content -->
    <div class="content">
      <div class="row justify-content-md-center">
        <div class="col-md-12">
          <div class="block">
            <div class="block-header">
                <h3 class="block-title">Monthly Cyclecount</h3>
            </div>
            <div class="block-content block-content-full">
                <form id="formData">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="example-text-input">Tim <span class="text-danger">*</span></label>
                                <select name="tim" id="filter_table5" class="form-control" onchange="reloadDatatable()">
                                  <option value="">Pilih Tim</option>
                                  @foreach ($data['tim'] as $tim)
                                    <option value="{{$tim->id}}" > {{$tim->nama_tim}}</option>
                                  @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="form_control_1">Accepted by <span class="text-danger">*</span></label>
                            <select class="js-select2 form-control" id="accept_id" name="accept_id" style="width: 100%;" data-placeholder="Choose one.." data-select2-id="filter_table5" aria-hidden="true">
                                <option value=""></option>
                                @foreach ($data['user'] as $user)
                                    <option value="{{$user->id}}" > {{$user->name}}</option>
                                @endforeach
                            </select>
                          </div>
                        </div>
                    </div>
                    <audio id="routingCheck" src="{{ asset('audio/routing_check.m4a') }}"></audio>
                    <audio id="routingDouble" src="{{ asset('audio/routing_double.m4a') }}"></audio>
                    <div class="row">
                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="form_control_1">Lokasi <span class="text-danger">*</span></label>
                            <select name="lokasi" id="lokasi" class="form-control">
                              <option value="CW">CW</option>
                              <option value="RED ZONE">RED ZONE</option>
                              <option value="BS">BS</option>
                              <option value="MKT">MKT</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="form_control_1">Sistem <span class="text-danger">*</span></label>
                            <select name="sistem" id="sistem" class="form-control">
                              <option value="WMS">WMS</option>
                              <option value="JBL">JBL</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="form_control_1">Nomor Rack <span class="text-danger">*</span></label>
                            <input type="text" name="no_rack" id="no_rack" class="form-control" placeholder="Scan nomor rack" onkeydown="if(event.keyCode === 13) { scanRack(this.value, this); return false; }">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="form_control_1">Total Karton <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="total_karton" id="total_karton" placeholder="Masukan total karton">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="form_control_1">SKU <span class="text-danger">*</span></label> <br>
                            <select name="sku" id="sku" class="form-control form-control-inline select_sku" style="width: 100%"></select>
                            <input type="text" class="form-control mt-2 bar-sku" placeholder="Barcode (tekan enter)" onkeydown="if(event.keyCode === 13) { scanBarcode(this.value, this); return false; }">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="form_control_1">QTY <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="qty" id="qty" placeholder="Masukan qty">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="form_control_1">Expire</label>
                            <input type="date" class="form-control" name="expire" id="expire">
                          </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="note">Note</label>
                            <textarea class="form-control" name="note" id="note"></textarea>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary mt-3" onclick="addProses()">Submit</button>
                </form>
                <br>
                <table class="table table-striped  nowrap table-sm table-special" id="list_data" style="width:100%;">
                    <thead>
                        <tr role="row" class="heading">
                          <th width="8%">TIM</th>
                          <th width="8%">SKU</th>
                          <th width="15%">Product</th>
                          <th width="12%">Rak</th>
                          <th width="12%">Lokasi</th>
                          <th width="12%">Sistem</th>
                          <th width="12%">QTY</th>
                          <th width="12%">Expire</th>
                        </tr>
                    </thead>
                    <tbody id="table_view_detail">
                    </tbody>
                </table>
                <div class="form-group mt-3" style="text-align:right;">
                    <a href="/monthlycyclecount" class="btn btn-secondary">Cancel</a>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END Page Content -->
@endsection

@section('js_after')
    @include('pages.cyclecount.function_create')
    @include('pages.globalFunction')
@endsection