@extends('adminlte::page')

@section('title', 'Scan Return Order')

@section('content_header')
    <h1>Add Item Return Problem</h1>
@stop

@section('content')
<div class="container-fluid">
        <div class="row">
          <!-- left column -->
         <div class="col-md-6 col-sm-12">
          <div class="card">
            <div class="card-body">
              <form id="invoice-form">
                      @csrf
                      <label>Scan QR code to get list item from invoice</label>
                    <div class="input-group input-group-sm">
                  <input type="text" class="form-control" name="inv_no" autofocus value="{{$inv}}">
                  <span class="input-group-append">
                  <button type="submit" class="btn btn-info btn-flat btn-inv"><i class="fa fa-search"></i></button>
                  </span>
                  </div>

                    </form>
            </div>
          </div>
          <form id="problem-form">
          <div class="card">
              
              <!-- /.card-header -->

              <div class="card-body form-group">
                <h4 id="invoice-no-label"></h4>
                  
                      @csrf
                      <div class="form-group">
                        <label>Invoice No</label>
                        <input type="text" name="invoice_no" class="form-control" readonly="">
                      </div>
                      <div class="form-group">
                        <label>Problem Title</label>
                        <input type="text" name="problem_title" class="form-control">
                      </div>
                      <div class="form-group">
                        <label>Problem Description</label>
                        <textarea id="summernote" name="problem_description">
                          
                        </textarea>
                      </div>
                      <div class="form-group">
                        <label>Mentioned Department</label>
                        <div class="select2-purple">
                        <select class="select2" name="mentioned_department[]" multiple="multiple" data-placeholder="Select Department" data-dropdown-css-class="select2-purple" style="width: 100%;">
                          <option value="POS Indonesia">POS Indonesia</option>
                          <option value="Call Center">Call Center</option>
                        </select>
                      </div>
                      </div>
                      <div class="form-group row">
                  <label class="col-sm-12 col-form-label">Due Date</label>
                    <div class="col-sm-12 input-group date" id="expdate" data-target-input="nearest">
                        <input type="text" name="due_date" class="form-control datetimepicker-input" data-target="#expdate" readonly="true" />
                        <div class="input-group-append" data-target="#expdate" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>

                   
            </div>
            <div class="card-footer">
              <button class="btn btn-primary" style="float: right;">Save</button>
            </div>
          </div>
            </form>

          </div>
          <!--/.col (left) -->

          <!-- right column -->
          <div class="col-md-6 col-sm-12">
            <!-- Horizontal Form -->
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Order item</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
              <table id="stocks-table" class="table table-bordered table-striped">
                  <thead>
                  <tr>
                    <th>No.</th>
                    <th>Stock Code</th>
                    <th>Action</th>
                  </tr>
                  </thead>
                  <tbody>
                    
                  </tbody>
                </table>
            </div>
          </div>
            <!-- /.card -->

             <!-- Horizontal Form -->
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Problem item</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
              <table id="return-table" class="table table-bordered table-striped">
                  <thead>
                  <tr>
                    <th>No.</th>
                    <th>Stock Code</th>
                    <th>Reason</th>
                    <th>Action</th>
                  </tr>
                  </thead>
                  <tbody>
                    
                  </tbody>
                </table>
            </div>
          </div>
            <!-- /.card -->

          </div>
          <!--/.col (right) -->
        </div>
        <!-- /.row -->

        
      </div><!-- /.container-fluid -->
       <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title"></h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="add-item-form">
              <div class="form-group">
                <input type="hidden" name="r_invoice_no">
                <input type="hidden" name="r_item_stock_code">
                <label class="form-label">Problem Reason Category</label>
                <select name="return_cat" class="form-control">
                  <option value="0">Missing</option>
                  <option value="1">Broken</option>
                  <option value="2">Different</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">Note</label>
                <textarea class="form-control" name="return_reason"></textarea>
              </div>
            </form>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary btn-add-item">Add item</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
@stop

@section('css')
    <!-- <link rel="stylesheet" href="/css/admin_custom.css"> -->
    <!-- DataTables -->
    <link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
    <!-- summernote -->
    <link rel="stylesheet" href="{{asset('plugins/summernote/summernote-bs4.min.css')}}">
    <!-- Select2 -->
  <link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
  <link rel="stylesheet" href="{{asset('plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css')}}">

    <style type="text/css">
      .info-box .info-box-content{
        padding-right: 0px !important;
      }
@media print {
  @page {size: landscape}
 
  body * {
    visibility: hidden;
  }
  #qr-stock-table, #qr-stock-table * {
    visibility: visible;
  }
  #qr-stock-table {
    width: auto;
    height: auto; 
    position: absolute;
    left: 0;
    top: 0;
    page-break-after: auto;
  }

}
    </style>
@stop

@section('js')
    <script src="{{asset('plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/jszip/jszip.min.js')}}"></script>
<script src="{{asset('plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{asset('plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script src="{{asset('plugins/qrcode/qrcode.min.js')}}"></script>
<!-- Summernote -->
<script src="{{asset('plugins/summernote/summernote-bs4.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Select2 -->
<script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
<script src="{{asset('plugins/moment/moment.min.js')}}"></script>

<script src="{{asset('plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js')}}"></script>

<script src="{{asset('plugins/daterangepicker/daterangepicker.js')}}"></script>

   <script type="text/javascript">
     $(document).ready(function(){

       $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

       // $('#invoice-form').submit();
       $('#expdate').datetimepicker({
        format: 'YYYY-MM-DD'
    });

      $('#summernote').summernote({
         height: 150,
          toolbar: [
            // [groupName, [list of button]]
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link','picture']]
          ]
        });
      $('.select2').select2();
      var spinner = $('#loader');
      var mod = 'stock';
      var id = $("input[name=id]").val();
      var invoice_no = $("input[name=invoice_no]").val();
     
      if(invoice_no!=''){
       $('input[name=stock_code]').removeAttr('readonly');
      }

   



     var dataStock = $("#stocks-table").DataTable({
        dom: '<"top"if>rt<"bottom"lp><"clear">',
        processing: true,
        serverSide: true,
        ajax: {
            url: "