@extends('layouts.dashboard')

@section('title', 'Import')

@section('myJS')
  <script src="{{url('/')}}/js/admin/admin.js"></script>
@endsection

@section('content')

<div class="padding-top40"></div>

<div class="bs-example">

    <!-- main part-->
  	<div class="container-fluid">
  		<div class="row">
            <div id="exTab1" class="panel panel-default">
                <ul class="nav nav-pills nav-catalog nav-justified">
               		<li class="active">
                  		<a  href="#1a" data-toggle="tab">Import Wizard</a>
               		</li>
               		<li>
               			<a href="#2a" data-toggle="tab">Import History</a>
              	 	</li>
            	</ul>
              	<div class="tab-content removeScroll clearfix">
                 	<div class="tab-pane removeScroll active" id="1a">
                    	<div id="exTab2">
                      		<ul  class="nav nav-pills nav-catalog nav-justified">
                         		<li class="active">
                            		<a href="#selectFile" data-toggle="tab">Select File</a>
                         		</li>
                         		<li class="disabled">
                           			<a href="#initialChecks">Initial Checks</a>
                         		</li>
                         		<li class="disabled">
                           			<a href="#mapFields">Map Fields</a>
                         		</li>
                         		<li class="disabled">
                           			<a href="#confirmSetup">Confirm Setup</a>
                         		</li>
                     			<li class="disabled">
                           			<a href="#results">Result</a>
                         		</li>
                      		</ul>

                    		<div class="tab-content removeScroll clearfix" style="padding-top: 15px;width: 70%;margin: 0 auto;">
                       			<div class="tab-pane removeScroll active" id="selectFile">
                          			<center><h3><strong>Import from your existing data file</strong></h3><center>
                          			<center>
                            			<div class="row">
			                              	<p>Using this wizard you will be able to import your existing data to populate your product and catalog
			                                structure, including mapping fields to display category text and product attributes (including images).
			                                Files need to contain unique column headings and a unique row identifier (usually the product code or
			                                product instance ID)
			                              </p>
                            			</div>
			                            <form id="import_form" action="Import/importSubmit" method="post" enctype="multipart/form-data">
			                            @csrf
			                              <div class="row">
			                                <label for="">Select File (xlsx, xls or csv)</label>
			                                <input type="file" name="import_file">
			                              </div>

			                              <div class="row resultMessage">
			                                <span id="uploadMsg" class="text-success"></span>
			                              </div>
			                                <div class="row resultMessage">
			                                  <span id="err" class="text-danger"></span>
			                                </div>

			                                <div class="row">
		                                      <label for="">Select sheet (if Excel file)</label>
		                                      <div class="form-group">
		                                        <label for="sel1">Select list:</label>
		                                        <select class="form-control" name="select_sheet" style="width: 12%;">
		                                          <option value="" selected>Choose your sheet</option>
		                                          <!-- <option value="all">All</option> -->
		                                        </select>
		                                        <input type="hidden" name="file_insert_id" value="">
		                                      </div>
		                                    </div>

			                              <div class="row">
			                                <label for="">Select Named Range (if Excel file)</label>
			                                <div class="form-group">
			                                  <label for="sel1">Select list:</label>
			                                  <select class="form-control" name="name_range" style="width: 12%;">
			                                    <option value="" selected>Choose your named range</option>
			                                    <option value="all">All</option>
			                                  </select>
			                                  <input type="hidden" name="file_insert_id" value="">
			                                </div>
			                              </div>
			                            </form>
                          			</center>
                       			</div>
		                       <div class="tab-pane removeScroll" id="initialChecks">
		                           <center>
		                             <h3><strong>Check 1 - Unique Columns</strong></h3>

		                             <div class="" id="columnCount">

		                             </div>
		                             <br>
		                             <div class="row">
		                               <h3><strong>Check 2 - Unique Product Records</strong></h3>
		                               <div class="form-group">
		                                 <select class="form-control" name="unique_product_records" style="width: 40%; display: inline-block;">
		                                   <option value="">Select unique product identifier</option>
		                                 </select>
                                     <button class="btn btn-primary" id="confirmProductCodeSyncField" style="display: inline-block;" onclick="return false;">Confirm</button>
		                               </div>
		                               <div id="productRecord">

		                               </div>
		                             </div>
		                           </center>
		                       </div>
		                       <div class="tab-pane removeScroll" id="mapFields">

                             <center>
                               <form method="post" enctype="multipart/form-data">
                               	@csrf
                                 <div class="row">
                                   <label for="">Use Past Import Structure</label>
                                   <div class="form-group">
                                     <select class="form-control" name="pastImport" style="width: 35%;">
                                       <option value=""> Select Name </option>
                                                                             </select>
                                   </div>
                                 </div>
                                 <!-- <div class="row">
                                   <label for="">Choose import type</label>
                                   <div class="form-group">
                                   <label class="radio-inline">
                                     <input type="radio" name="importType" value="prod" checked>Products
                                   </label>
                                   <label class="radio-inline">
                                     <input type="radio" name="importType" value="prodNcat">Products & Catalogue Structure
                                   </label>
                                 </div>
                               </div> -->
                                 <div class="row">
                                   <label for="">Matching fields</label>
                                   <div class="form-group">
                                     <label class="radio-inline">
                                       <input type="radio" name="matchingFields" class="matchingFields" checked value="Ignore">Ignore
                                     </label>
                                     <label class="radio-inline">
                                       <input type="radio" name="matchingFields" class="matchingFields" value="Overwrite">Overwrite
                                     </label>
                                   </div>
                                 </div>
                               </form>
                             </center>
                             <!-- <form name="prod_table_form" id="prod_table_form" class="mapFieldsForm">
                             <div class="table-responsive mapFieldsDiv" id="prod_div">
                               <table class="table table-bordered table-hover" id="prod_table">
                                 <thead>
                                   <tr>
                                     <th>Source Field</th>
                                     <th colspan="2">Destination Field</th>
                                     <th>New</th>
                                     <th>Import</th>
                                   </tr>
                                 </thead>
                                 <tbody>
                                   <tr>
                                     <td colspan="5" class="text-center">No file imported yet</td>
                                     <!-- <td>CatNo</td>
                                     <td>
                                       <label class="radio-inline">
                                         <input type="radio" name="importType" checked>Products
                                       </label>
                                       <label class="radio-inline">
                                         <input type="radio" name="importType" checked>Category
                                       </label>
                                     </td>
                                     <td>
                                       <select class="form-control" name="">
                                         <option value="">Product Code</option>
                                       </select>
                                     </td>
                                     <td><label class="checkbox-inline"><input type="checkbox" value="">Option 1</label></td>
                                     <td><label class="checkbox-inline"><input type="checkbox" value="">Option 1</label></td>
                                     --
                                   </tr>
                                 </tbody>
                               </table>
                              </div>
                              <!-- <div class="row col-sm-12 text-center" style="margin-bottom:2%;">
                                <input type="button" name="prod_table_submit" value="Submit" class="btn btn-primary btn-lg disabled">
                              </div> --
                            </form> -->
                            <form name="prodNcat_table_form" id="prodNcat_table_form" class="mapFieldsForm">
                            	@csrf
                              <input type="hidden" name="uniqueProductName" value="">
                            <div class="table-responsive mapFieldsDiv" id="prodNcat_div">
                              <table class="table table-bordered" id="prodNcat_table">
                                <thead>
                                  <tr>
                                    <th>Source Field</th>
                                    <th colspan="2">Destination Field</th>
                                    <!-- <th>New</th>
                                    <th>Import</th> -->
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr class="noFile">
                                    <td colspan="5" class="text-center">No file imported yet</td>
                                  </tr>
                                </tbody>
                              </table>
                             </div>
                             <!-- <div class="row col-sm-12 text-center" style="margin-bottom:2%;">
                               <input type="button" name="prodNcat_table_submit" value="Submit" class="btn btn-primary btn-lg disabled">
                             </div> -->
                           </form>
                           </div>
		                       <div class="tab-pane removeScroll" id="confirmSetup">
		                          <div class="showData"></div>
		                           <form id="finalImport" class="text-center">
		                           	@csrf
		                              <input type="hidden" name="file_insert_id" />
		                              <input type="hidden" name="productData" />
		                              <p>Please check the above</p>
		                              <input type="button" value="Import" name="prod_table_submit" class="btn btn-primary btn-lg" onclick="return false" />
		                              <br/><br/><br/>
		                           </form>
		                           <div id="err" class="text-danger">
		                              <ul>
		                                 <!-- add li for every error encountered -->
		                              </ul>
		                           </div>
		                       </div>
		                       <div class="tab-pane removeScroll" id="results">
		                           <div id="final_results">
		                             <center></center>
		                           </div>
		                       </div>
                     		</div>
                   		</div>
                 	</div>
                 <div class="tab-pane removeScroll" id="2a">
                   <div class="row" style="margin: 0px;">
                         <div id="div_table" class="row table-catalog" style="margin: 0px;">
                            <table id="importHistory" data-page-length='50' class="table table-striped table-bordered" cellspacing="0" width="100%">
                               <thead>
                                 <tr>
                                   <th scope="col" class="col3">No.</th>
                                   <th scope="col" class="col3">File Name</th>
                                   <th scope="col" class="col4">Imported By</th>
                                   <th scope="col" class="col5">Imported on Date/Time</th>
                                   <th scope="col" class="col5">Status</th>
                                 </tr>
                               </thead>
                              <tbody>
                                 <tr><td colspan="4" class="text-center"> No files found.</td></tr>                             </tbody>
                            </table>
                         </div>
                    </div>
                 </div>
              </div>
            </div>
        </div>
  	</div>
</div>

<div id="overlay">
    <span>Please wait&hellip;</span>
</div>

<script type="text/javascript">
	$(document).ready(function(){
		$("#exTab1").show();
	});
</script>
@endsection