@extends('front.layout')

@section('header')
<section class="content-header">
    <h1>
        Upload Contacts
    </h1>
    <ol class="breadcrumb">
        <li>Contact</li>
        <li class="active">Upload Contacts</li>
    </ol>
</section>
@endsection

@section('content')

@include('front.wizard_step2')

@include('front.contact.discard')

<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <!-- Default box -->
		<div id="contactAlert" class="alert alert-warning" role="alert">
					Don't worry, you'll get a chance to change this mapping later on, but <strong>bear in mind</strong> that if you make changes in mapping, all fixes that you would do will be <strong>discarded</strong>. So make sure that you do correct mapping.
		
		</div>
        {!! Form::open(array('url' => url('sessioncontact/step2'), 'method' => 'post','files'=>true,'id'=> 'contact')) !!}
        <div class="box">

            <div class="box-header with-border">
                <h3 class="box-title">Mapping the fields</h3>
            </div>
            <div class="col-sm-12">
					<div class="row">

				<table id="crudTable" class="table table-bordered table-striped display dataTable form-group col-md-12" role="grid" aria-describedby="crudTable_info">
			  		<tr>
						<th class="form-group col-md-6">Database Fields</th>
						<th class="form-group col-md-6">Select Excel Sheet Fields</th>
				  	</tr>
										@foreach($database_field as $key=>$field)
				  	<tr>
						<td class="form-group col-md-6">
							{{$field}}
						</td>
						<td class="form-group col-md-6">
							<select name="excel_fields[{{$database_field_value[$key]}}]">
								<option value="">Select Field</option>
								 @foreach($excel_fields as $fields)
									<option value="{{$fields}}" ></option>
								@endforeach
						   </select>
						</td>
					</tr>
					@endforeach
				</table>
				</div>
            </div><!-- /.box-body -->
            <div class="box-footer">

			@if (count($mapping_data) > 0 && $contactsSessionCount > 0)
								<div class="col-md-2 pull-right">
					<a class="pull-right btn btn-success ladda-button" href="{{url('sessioncontact/step3')}}">Skip Mapping <i class="fa fa-angle-right"></i> <i class="fa fa-angle-right"></i></a>
				</div>
				<div class="col-md-2 pull-left">
					<button id="submit-btn" type="submit" class="pull-left btn btn-info ladda-button" data-style="zoom-in" onclick="return validate()"><span class="ladda-label">{{ trans('Next') }} <i class="fa fa-angle-right"></i></span></button>
				</div>
			@else
								<div class="col-md-2 pull-right">
					<button id="submit-btn" type="submit" class="pull-right btn btn-success ladda-button" data-style="zoom-in" onclick="return validate()"><span class="ladda-label">{{ trans('Next') }} <i class="fa fa-angle-right"></i></span></button>
				</div>
			@endif
		 	<div class="col-md-{{$column}} pull-left">
				<div id="progressbar-container" class="progress progress-striped active hidden">
						<div id="progress-bar" class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="1"></div>
					</div>
					<div id="delay-message-container" class="text-center hidden">
						<p>Don't panic, It is taking long but It's worth it!</p>
					</div>
				</div>
            </div><!-- /.box-footer-->

        </div><!-- /.box -->
        {!! Form::close() !!}
    </div>
</div>
@endsection
@section('after_scripts')
<script>
	function validate(){
		var select_count = 0;
		var total_count = '10'
		$("#contact option:selected").each(function () {
		   var val = $(this).val();
		   if (val != '') {
				select_count++;
		   }
		});

		if(select_count != total_count)
		{
			alert('Please select all field for mapping.');
			return false;
		}
		return true;
	}
</script>
@endsection

@section('custom_scripts')
<script src="{{ asset('js') }}/bootstrap-progressbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var isUploadInProgress = new Boolean(false);;
	$("#contact").on('submit',(function(e){
        e.preventDefault();
        var form = document.forms.namedItem("contact"); // high importance!, here you need change "yourformname" with the name of your form
        var formdata = new FormData(form); // high importance!
		var timerCall;
		$('#progressbar-container').removeClass('hidden');
		$('#progress-bar').progressbar({display_text: 'fill'});
		isUploadInProgress = true;
        $.ajax({
            async: true,
            type: "POST",
            dataType: "json", // or html if you want...
            contentType: false, // high importance!
            url: $('#contact').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="