@extends('layouts.backend')

@section('css_after')
    <link href="{{ asset('plugins/jquery-file-upload/css/jquery.fileupload.css')}}" rel="stylesheet"/>
    <link href="{{ asset('plugins/jquery-file-upload/css/jquery.fileupload.css')}}" rel="stylesheet"/>
    <link href="{{ asset('plugins/jquery-file-upload/css/jquery.fileupload-ui.css')}}" rel="stylesheet"/>
@endsection

@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">Crosscheck Orderan Masuk</h3>
            </div>
            <div class="alert alert-warning">Harap di perhatikan. Maximal upload 100 Order</div>
            <div class="block-content block-content-full">
                <form id="myForm" enctype="multipart/form-data">
                  {{ csrf_field() }}
                  <div class="view-no-set-image">
                    <input type="file" id="fileupload" name="fileuploadset" data-url="/file/uploaddata" style="display: none;" accept="a.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/> 
                    <div class="row">
                      <div class="col-md-3">
                        <label for="fileupload" id="labelfilename" class="test-custom-file-upload">
                          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3hS_HE0vOKsFMFF5hU1beFsT4c7AkZpnjzw&usqp=CAU" alt="Picture 1" height="200" width="300">
                        </label>
                        <br />
                        <p id="loading"></p>
                      </div>
                    </div>
                    <input type="hidden" name="filename" id="filename">
                  </div>
                </form>
                
                <a href="{{ asset('format_excel/import_croscheck_orderan.xlsx') }}" class="btn btn-outline-success">
                  Download Contoh Fomat Import
                </a>

                <hr>
                <h5>Hasil</h5>
                <p class="mb-1">Jumlah data import : <b id="jumlah_import"></b></p>
                <p class="mb-1">Jumlah data masuk  : <b id="jumlah_masuk"></b></p>
                <label for="">Order belum masuk    : <b id="total_belum_masuk"></b></label>
                <textarea id="belum_masuk" class="form-control" style="width: 250px; height: 250px" readonly></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END Page Content -->
@endsection

@section('js_after')
    <script src="{{ asset('plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js')}}"  type="text/javascript"></script>
    <script src="{{ asset('plugins/jquery-file-upload/js/jquery.iframe-transport.js')}}"  type="text/javascript"></script>
    <script src="{{ asset('plugins/jquery-file-upload/js/jquery.fileupload.js')}}"  type="text/javascript"></script>
    @include('pages.crosscheck_order.function_create')
    @include('pages.globalFunction')
@endsection