@extends('front.layout')

@section('header')
<link href="{{ asset('vendor/backpack/select2/select2.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('vendor/backpack/select2/select2-bootstrap-dick.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
  #sortable { list-style-type: none; margin: 0; padding: 0; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em;}
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
<section class="content-header">
    <h1>
        Upload Route
    </h1>
    <ol class="breadcrumb">
        <li>Contact</li>
        <li class="active">Upload Contacts</li>
    </ol>
</section>
@endsection

@section('content')

@include('front.wizard_step4-5')

<div class="row">

    <!-- 	<div class="col-md-8 col-md-offset-2"> -->
    <!-- 		<div class="custom-wizard col-md-12 mb-5"> -->
    <!-- 			<div class="custom-wizard-item done-wizard text-success col-md-3"> -->
    <!-- 				<h4>1. Upload file <span class="fa fa-check-circle"></span></h4> -->
    <!-- 			</div> -->
    <!-- 			<div class="custom-wizard-item done-wizard text-primary col-md-3"> -->
    <!-- 				<h4>2. Mapping <span class="fa fa-check-circle"></span></h4> -->
    <!-- 			</div> -->
    <!-- 			<div class="custom-wizard-item done-wizard text-muted col-md-3"> -->
    <!-- 				<h4>3. Upload session <span class="fa fa-check-circle"></span></h4> -->
    <!-- 			</div> -->
    <!-- 			<div class="custom-wizard-item happening-wizard text-muted col-md-3"> -->
    <!-- 				<h4>4. Finish Upload <span class="fa fa-check-circle"></span></h4> -->
    <!-- 			</div> -->
    <!-- 		</div> -->
    <!-- 	</div> -->
</div>
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <!-- Default box -->

        <div class="box">

            <div class="box-header with-border">
                <h3 class="box-title">Upload Session</h3>
            </div>
            <div class="box-body row">
                <div class="col-md-12">
                    <div class="col-md-12 text-center">
                        <span class="fa fa-map-o fa-5x text-success"></span>
                    </div>
                    <div class="col-md-12 text-center">
                        <h3>Just one last step!</h3>
                        <p>Your route has been uploaded. Please generate the route.</p>
                    </div>

                    <div class='row col-md-12'>
                        <ul class="nav nav-tabs">
                            @if ($recordsCount <= 150)
                                <li class="active"><a data-toggle="tab" href="#basic">Basic</a></li>
                            @endif
                            <li class=""><a data-toggle="tab" href="#advanced">Advanced</a></li>
                        </ul>
                        <div class="tab-content">
                            @if ($recordsCount <= 150)
                            <div id="basic" class="tab-pane fade in active">
                                <div class="col-md-12 text-center">
                                    <p>Basic mode is recommended when you are visiting less than 150 companies,  in your case.</p>
                                </div>
                                <div class="row">
                                    {!! Form::open(array('url' => url('sessionroute/basic'), 'id'=>'ajaxBasicForm','class'=>'ajaxForm' , 'name'=>'ajaxBasicForm', 'method' => 'post','files'=>true)) !!}
                                    <div class="col-md-12">
                                        <!--h3 class="text-center mb-20">Set Start Point and End Point for Route.</h3-->
                                        <div class="col-md-6">
                                            <h4>Start Point</h4>
                                            <input type="hidden" id="startPoint" name="startPoint" value="" @include('crud::inc.field_attributes', ['default_class' =>  'form-control select2AjaxStartPoint']) >
                                        </div>
                                        <div class="col-md-6">
                                            <h4>End Point</h4>
                                            <input type="hidden" id="endPoint" name="endPoint" value="" @include('crud::inc.field_attributes', ['default_class' =>  'form-control select2AjaxEndPoint']) >
                                                   <input type="hidden" id="startPointCity" name="startPointCity" value="" />
                                            <input type="hidden" id="endPointCity" name="endPointCity" value="" />
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-20">
                                        <div id="map" style="width:100%;height:400px;"></div>
                                    </div>
                                    <div class="col-md-12 text-right mt-20">
                                        <button id="basic-submit-btn" type="submit" class="btn btn-success ladda-button submit-btn" data-style="zoom-in"><span class="ladda-label">{{ trans('Generate Route') }} <i class="fa fa-angle-right"></i></span></button>
                                    </div>
                                    {!! Form::close() !!}
                                </div>

                            </div>
                            @endif
                            <div id="advanced" class="tab-pane fade in ">
                                <div class="row">
                                    {!! Form::open(array('url' => url('sessionroute/advanced'), 'id'=>'ajaxAdvancedForm', 'class'=>'ajaxForm' , 'name'=>'ajaxAdvancedForm', 'method' => 'post','files'=>true)) !!}
                                    <div class="col-md-12 text-center">
                                        <h3>ADVANCED</h3>
                                        <p>Please re-order cities according to your plan to visit. Route will be generated according to that order.</p>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="row col-md-3">
                                            <ol class="list-group" id="sortable">
                                              @foreach($cities as $key => $city)
                                              <li id="city_order_{{$city['id']}}" data-key="{{$key}}" data-city_id="{{$city['id']}}" class="list-group-item md-col-4 active"><i class="fa fa-bars"></i>&nbsp;&nbsp;  {{$city['title']}}</li>

                                              @endforeach
                                            </ol>
                                        </div>
                                        <div class="col-md-9">
                                            <div id="map1" style="width:100%;height:600px;"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 text-right mt-20">
                                        <input id="cities_visit_order" type="hidden" name="cities_visit_order"/>
                                        <button id="advanced-submit-btn" type="submit" class="btn btn-success ladda-button submit-btn" data-style="zoom-in"><span class="ladda-label">{{ trans('Generate Route') }} <i class="fa fa-angle-right"></i></span></button>
                                    </div>


                                    {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <div class="col-md-12">
                    <div id="progressbar-container" class="progress progress-striped active hidden">
                        <div id="progress-bar" class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="0"></div>
                    </div>

                    <div id="delay-message-container" class="text-center hidden">
                        Calculating Route...
                    </div>
                </div>
            </div><!-- /.box-footer-->

        </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>


@endsection

@section('custom_scripts')
<script src="{{ asset('js') }}/jquery-ui_custom.min.js"></script>

<script src="{{ asset('js/') }}/jquery.ui.sortable-animation.js"></script>
<script src="{{ asset('js') }}/bootstrap-progressbar.min.js"></script>

@if ($recordsCount <= 150)
<script src="{{ asset('vendor/backpack/select2/select2.js') }}"></script>
@endif
<script type="text/javascript">
var totalRecordsCount = {{$recordsCount}};

$(document).ready(function(){
  // var heightStyle = "top: 0px !important";
  // $(ui.item).attr('style', heightStyle + $(ui.item).attr('style').replace(/^top: [-,!,0-9,a-z, A-Z, ]*;/,''));
  $( "#sortable" ).sortable({

    // axis: 'y',
    // containment: 'parent',
    animation: 800,
    sort: function(event, ui) {
       var $target = $(event.target);
       if (!/html|body/i.test($target.offsetParent()[0].tagName)) {
           var top = event.pageY - $target.offsetParent().offset().top - (ui.helper.outerHeight(true) / 2);
           ui.helper.css({'top' : top + 'px'});
       }
   },
      update: function( event, ui ) {
        //console.log(ui.item.data('key'));
          cityOrderChanged();
      }
  });
  $( "#sortable" ).disableSelection();
	$("#sortable li").click(function(){
		selecteAdvancedCityKey = $(this).data('key');
		$("#sortable li").removeClass('active');
		 $(this).addClass('active');
		cityOrderChanged();
	});
  @if ($recordsCount > 150)
	  initialize();
@endif

var isUploadInProgress = new Boolean(false); ;
$(".ajaxForm").on('submit', (function(e){
e.preventDefault();
console.log('form name : '+$(this).attr('name'));
var form = document.forms.namedItem($(this).attr('name')); // high importance!, here you need change "yourformname" with the name of your form
var formdata = new FormData(form); // high importance!
console.log(formdata);
var timerCall;
$('#progressbar-container').removeClass('hidden');
$('#progress-bar').progressbar({display_text: 'fill'});
isUploadInProgress = true;
$('#delay-message-container').removeClass('hidden');
$.ajax({
async: true,
        type: "POST",
        dataType: "json", // or html if you want...
        contentType: false, // high importance!
        url: $(form).attr('action'), // you need change it.
        data: formdata, // high importance!
        processData: false, // high importance!
        success: function (data) {
        clearInterval(timerCall);
        $('#progress-bar').attr('data-transitiongoal', 100);
        $('#progress-bar').progressbar({display_text: 'fill'});
        $('#progressbar-container').removeClass('active');
        isUploadInProgress = false;
        setTimeout(function () {
        //do something once
        window.location.href = data.redirect_url;
        }, 1000);
        //alert('success');
        },
        error: function (data) {
        isUploadInProgress = false;
        alert('Oops! Something went wrong, Please try again later');
        window.location.href = "