@extends('admin.layouts.main')

@section('title')
@if(Session::has('editUrl'))
Edit Franchise
@else
Add Franchise
@endif
@endsection

@section('content')

<main>
	<div class="two-col">

		@include("admin.common.sidebar")

		<div class="right-sec">

			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item" aria-current="page"><a href="{{ route('admin.franchise.index')}}">{{ @trans('franchises.franchises') }}</a></li>
					@if(Session::has('editUrl'))
					<li class="breadcrumb-item active" aria-current="page">{{ @trans('franchises.edit_frecnchise') }}</li>
					@else
					<li class="breadcrumb-item active" aria-current="page">{{ @trans('franchises.add_frecnchise') }}</li>
					@endif

				</ol>
			</nav>

			<div class="form-sec">
				<div class="form-step">
					<div class="step"><label>1. {{ @trans('franchises.franchise') }}</label></div>
					<div class="step"><label><i class="material-icons">trending_flat</i>2. {{ @trans('franchises.location_details') }}</label>
					</div>
					<div class="step"><label><i class="material-icons">trending_flat</i>3. {{ @trans('franchises.finance') }}</label></div>
					<div class="step active"><label><i class="material-icons">trending_flat</i>4. {{ @trans('franchises.documentation') }}</label>
					</div>
					<div class="step"><label><i class="material-icons">trending_flat</i>5. {{ @trans('franchises.credentials') }}</label></div>
				</div>

				<div class="container">
					<div class="row">
						<div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
							<form action="{{ route('admin.franchise.storeDocuments') }}" method="POST" name="frmDocuments" id="frmDocuments" enctype="multipart/form-data">
								{{ csrf_field() }}

								<input type="hidden" name="id" value="{{ $id }}">
								<div class="step-box">
									<div class="tab">

										<div class="row">

											<div class="col-md-12">

												<h2 class="form-sec-title">{{ @trans('franchises.franchise_agreement') }}</h2>
												<div class="custom-file float-right browse-btn">
													<input type="file" class="custom-file-input documentUpload" id="franchise_agreement" name="franchise_agreement">
													<label class="custom-file-label" for="franchise_agreement"><img src="/img/admin/file-upload.svg" alt="upload" />{{ @trans('franchises.browse') }}</label>
												</div>
												@if($errors->has('franchise_agreement'))
												<span class="invalid-feedback">{{$errors->first('franchise_agreement')}}</span>
												@endif
												<div class="clearfix"></div>

												@if(isset($agreement))
												<div class="row filename">
													<div class="col-md-12">
														<div class="form-group file-upload">
															<label class="control-label">{{ $agreement->orig_file_name }}</label>
														</div>
													</div>
												</div>
												@else
												<div class="row filename">
													<div class="col-md-12">
														<div class="form-group file-upload">
															<label class="control-label"></label>
														</div>
													</div>
												</div>
												@endif

												<h2 class="form-sec-title">{{ @trans('franchises.tax_details') }}</h2>
												<div class="custom-file float-right browse-btn">
													<input type="file" class="custom-file-input documentUpload" id="franchises_tax_details" name="franchises_tax_details">
													<label class="custom-file-label" for="franchises_tax_details"><img src="/img/admin/file-upload.svg" alt="upload" />{{ @trans('franchises.browse') }}</label>
												</div>
												@if($errors->has('franchises_tax_details'))
												<span class="invalid-feedback">{{$errors->first('franchises_tax_details')}}</span>
												@endif
												<div class="clearfix"></div>

												@if(isset($taxdetails))
												<div class="row filename">
													<div class="col-md-12">
														<div class="form-group file-upload">
															<label class="control-label">{{ $taxdetails->orig_file_name }}</label>
														</div>
													</div>
												</div>
												@else
												<div class="row filename">
													<div class="col-md-12">
														<div class="form-group file-upload">
															<label class="control-label"></label>
														</div>
													</div>
												</div>
												@endif


												<h2 class="form-sec-title">{{ @trans('franchises.other_documents') }}</h2>
												<div class="custom-file float-right browse-btn">
													<input type="file" class="custom-file-input" id="other_document" name="other_document">
													<label class="custom-file-label" for="other_document"><img src="/img/admin/file-upload.svg" alt="upload" />{{ @trans('franchises.browse') }}</label>
												</div>
												@if($errors->has('other_document'))
												<span class="invalid-feedback">{{$errors->first('other_document')}}</span>
												@endif
												<div class="clearfix"></div>
												<div class="row documentListRow">
													@if(isset($documents))
													@foreach($documents as $document)
													<div class="col-md-12 documentList">
														<div class="form-group file-upload">
															<label class="control-label">{{ $document->orig_file_name }}</label>
															<div class="file-act">
																<a href="javascript:void(0)" class="removeDocument" data-id="{{ $document->id }}" title="remove"><i class="material-icons">close</i>
																</a>
															</div>
														</div>
													</div>
													@endforeach
													@endif
													<div class="col-md-12">
														<span class="invalid-feedback doc-error"></span>
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="tab-btn">
										<div style="float: left;">
											@if(Session::has('editUrl'))
											<a href="{{route('admin.franchise.show',['id' => $id])}}" class="btn btn-cncl">{{ @trans('franchises.cancel') }}</a>
											@else
											<a href="{{route('admin.franchise.index')}}" class="btn btn-cncl">{{ @trans('franchises.cancel') }}</a>
											@endif
										</div>
										<div style="float:right;">
											@if(Session::has('editUrl'))
											<input type="submit" value="{{ @trans('franchises.save') }}" class="btn step-btn">
											@else
											<a href="{{route('admin.franchise.showfinancedetail',['id' => $id])}}" class="btn step-btn prev">{{ @trans('franchises.previous') }}</a>
											<input type="submit" value="{{ @trans('franchises.save_next') }}" class="btn step-btn">
											@endif

										</div>
									</div>
								</div>
							</form>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
@endsection

@push('pageJs')

{!! JsValidator::formRequest('App\Http\Requests\Franchise\UploadDocuments', '#frmDocuments') !!}

<script>
	$(document).on('click', '.removeDocument', function() {

		let id = $(this).attr('data-id');
		let url = "{{ route('admin.franchise.delete_document') }}";
		let el = this;

		axios.post(url, {
				id: id
			})
			.then(function(response) {
				$(el).parents('.documentList').remove();
			})
			.catch(function(error) {
				console.log(error);
			});
	});

	$("#other_document").liteUploader({
			url: "{{ route('admin.franchise.upload_document') }}",
			params: {
				id: "{{ $id }}"
			},
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
				'Accept': 'application/json'
			}
		})
		.on("lu:success", function(e, {
			response
		}) {

			var res = JSON.parse(response);
			var html = '';
			html += '<div class="col-md-12 documentList">';
			html += '<div class="form-group file-upload">';
			html += '<label class="control-label">' + res.orig_file_name + '</label>';
			html += '<div class="file-act">';
			html += '<a href="javascript:void(0)" class="removeDocument" data-id="' + res.id + '" title="remove">';
			html += '<i class="material-icons">close</i>';
			html += '</a>';
			html += '</div>';
			html += '</div>';
			html += '</div>';
			$('.documentListRow').append(html);
		})
		.on("lu:fail", function(e, {
			xhr
		}) {
			console.log(xhr);
			var error = JSON.parse(xhr.responseText);
			$('.doc-error').text(error.errors.other_document[0]);
		});



	$("#other_document").change(function() {
		$('.doc-error').text('');
		$(this).data("liteUploader").startUpload();
	});
</script>
@endpush