@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"><label><i class="material-icons">trending_flat</i>4.
							{{ @trans('franchises.documentation') }}</label></div>
					<div class="step active"><label><i class="material-icons">trending_flat</i>5.
							{{ @trans('franchises.franchise_access') }}</label>
					</div>
				</div>

				<div class="container">
					<div class="row">
						<div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
							<div class="step-box">
								<div class="tab">
									<form id="frmcredentials" method="POST"
										action="{{ route('admin.franchise.storecredentialsdetails')}}"
										name="frmcredentials">
										{{csrf_field()}}

										<input type="hidden" name="id" value="{{$id}}">
										<input type="hidden" name="emailHidden" class="emailHidden"
											value="@if(old('email')){{ old('email') }}@elseif(isset($franchise->contactusers->email)){{ $franchise->contactusers->email }}@endif"
											class="form-control" placeholder="Enter Email" />
										@if(Session::has('editUrl'))
										<input type="hidden" name="user_id"
											value="@if(isset($franchise->contactusers->id)){{ $franchise->contactusers->id }}@endif">
										@endif

										<h2 class="form-sec-title">{{ @trans('franchises.franchise_admin_access') }}
										</h2>

										<div class="row">
											<div class="col-md-6">
												<div class="form-group">
													<label class="control-label"
														for="first_name">{{ @trans('franchises.first_name') }} <span
															class="required">*</span></label>
													<input type="text" id="first_name" name="first_name"
														class="form-control" placeholder="Contact Person Name"
														value="@if(old('first_name')){{ old('first_name') }}@elseif(isset($franchise->contactusers->first_name)){{ $franchise->contactusers->first_name }}@endif" />
													@if($errors->has('first_name'))
													<span
														class="invalid-feedback">{{$errors->first('first_name')}}</span>
													@endif
												</div>
											</div>

											<div class="col-md-6">
												<div class="form-group">
													<label class="control-label">{{ @trans('franchises.last_name') }}
														<span class="required">*</span></label>
													<input type="text" name="last_name"
														value="@if(old('last_name')){{ old('last_name') }} @elseif(isset($franchise->contactusers->last_name)){{ $franchise->contactusers->last_name }}@endif"
														class="form-control" placeholder="Contact Person Name" />
													@if($errors->has('last_name'))
													<span
														class="invalid-feedback">{{$errors->first('last_name')}}</span>
													@endif
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<label class="control-label">{{ @trans('franchises.phone_number') }}
														<span class="required">*</span></label>
													<input type="text" name="mobile"
														value="@if(old('mobile')){{old('mobile')}}@elseif(isset($franchise->contactusers->mobile)){{ $franchise->contactusers->mobile }}@endif"
														class="form-control" placeholder="Phone Number" />
													@if($errors->has('mobile'))
													<span class="invalid-feedback">{{$errors->first('mobile')}}</span>
													@endif
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<label
														class="control-label">{{ @trans('franchises.alternate_phone_number') }}</label>
													<input type="text" name="secondary_mobile"
														value="@if(old('secondary_mobile')){{old('secondary_mobile')}} @elseif(isset($franchise->contactusers->secondary_mobile)){{$franchise->contactusers->secondary_mobile }}@endif"
														class="form-control" placeholder="Alternate Phone Number" />
													@if($errors->has('secondary_mobile'))
													<span
														class="invalid-feedback">{{$errors->first('secondary_mobile')}}</span>
													@endif
												</div>
											</div>


											<div class="col-md-6">
												<div class="form-group">
													<label class="control-label">{{ @trans('franchises.email') }} <span
															class="required">*</span></label>
													<input type="email" name="email"
														value="@if(old('email')){{ old('email') }}@elseif(isset($franchise->contactusers->email)){{ $franchise->contactusers->email }}@endif"
														class="form-control email" placeholder="Enter Email" />
													@if($errors->has('email'))
													<span class="invalid-feedback">{{$errors->first('email')}}</span>
													@endif
												</div>
											</div>

											<div class="col-md-6">
												<div class="form-group">
													<label class="control-label">{{ @trans('franchises.password') }}
														<span class="required">*</span>
													</label>
													<input type="password" id="password" name="password" value=""
														class="form-control password" value=" {{ old('password') }}"
														placeholder="@if(!Session::has('editUrl')){{ 'Enter Password' }}@endif" />
														@if(Session::has('editUrl'))<span
														class="star">••••••••</span>@endif
													@if($errors->has('password'))
													<span class="invalid-feedback">{{$errors->first('password')}}</span>
													@endif
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<label
														class="control-label">{{ @trans('franchises.confirm_pasword') }}
														<span class="required">*</span>
													</label>
													<input type="password" id="confirm_password" name="password_confirmation" value=""
														class="form-control confirm-password"
														value=" {{ old('password') }}"
														placeholder="@if(!Session::has('editUrl')){{ 'Enter Password Again' }}@endif" />
														@if(Session::has('editUrl'))<span
														class="star">••••••••</span>@endif
													@if($errors->has('password'))
													<span class="invalid-feedback">{{$errors->first('password')}}</span>
													@endif
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-md-12 ip_div">
												<a href="javascript:void(0)" class="btn add-row add_ip_row"
													title="{{ trans('franchises.add_ip') }}">
													<i class="material-icons">add</i>
												</a>
												<h2 class="form-sec-title">{{ @trans('franchises.ip_settings') }}</h2>
											</div>

											@if(count($franchise->ips))
											@foreach($franchise->ips as $ip)
											<div
												class="col-md-6 appended_ip_row @if($loop->iteration == 1)defaultIp @endif">
												<div class="form-group remove-wrapper">
													<input type="text" class="form-control"
														placeholder="Enter IP Address" id="ipaddresses[]"
														name="ipaddresses[]" value="{{ $ip->ip }}">
													@if($loop->iteration != 1)
													<a href="javascript:void(0)" class="btn remove-row remove_ip_row"
														title="Remove IP Address"><i
															class="material-icons">close</i></a>
													@endif
												</div>
											</div>
											@endforeach
											@else
											<div class="col-md-6 defaultIp">
												<div class="form-group remove-wrapper">
													<input type="text" class="form-control"
														placeholder="Enter IP Address" id="ipaddresses[]"
														name="ipaddresses[]">
												</div>
											</div>
											@endif

										</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" class="btn step-btn"
													value="{{ @trans('franchises.save') }}">
												@else
												<a href="{{route('admin.franchise.showdocumentsdetail',['id' => $franchise->id])}}"
													class="btn step-btn prev">{{ @trans('franchises.previous') }}</a>
												<input type="submit" class="btn step-btn"
													value="{{ @trans('franchises.finish') }}">
												@endif
											</div>
										</div>
									</form>
								</div>

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

@push('pageJs')
<script>
$("#frmcredentials").each(function() {
    $(this).validate({
        rules: {
            'first_name': 'required',
            'last_name':  'required',
            'email':{
                'required' : true,
                'maxlength': 255
            },
            'mobile':{
                'required' : true,
                'digits'   : true,
                'minlength': 10,
                'maxlength': 10
            },
			'ipaddresses' : 'required'
        },
        messages: {
            'first_name': 'First name is required',
            'last_name':  'Last name is required',
            'email':{
                'required' : 'Email is required',
                'maxlength': 'Email may not be greater than 255 characters.'
            },
            'mobile':{
                'required' : 'Mobile is required',
                'digits'   : 'The mobile must be 10 digits.',
                'minlength': 'The mobile must be 10 digits.',
                'maxlength': 'The mobile must be 10 digits.'
            },
			'ipaddresses' : 'Ip address is required'
        },
        highlight: function(element) {
            $(element).closest('.form-control').removeClass('is-valid').addClass('is-invalid');
        },
        unhighlight: function(element) {
            $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
        },
        success: function(element) {
            $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
        },
        errorClass: 'invalid-feedback',
    });
});

$.validator.addMethod('passRegex', function (value) { 
    return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@()$%^&*=_{}[\]:;\"'|\\<>,.\/~`±§+-]).{8,30}$/.test(value); 
}, 'The password must be 8–30 characters, and include a number, a symbol, a lower and a upper case letter');

@if(Session::has('editUrl'))
	let email = '{{ ($franchise->contactusers) ? $franchise->contactusers->email : "" }}'
    $(".email").keyup(function() {
        if ($(".email").val() != email) {
            $(".password").next('span').remove();
            $(".confirm-password").next('span').remove();

            $('#password').rules("add", {
                required : true,
                passRegex : true,
                messages: { required: "Password is required" }
            });

            $('#confirm_password').rules("add", {
                required : true,
                equalTo : '#password',
                messages: { required: "Confirm Password is required",
                            equalTo : "The password confirmation does not match." }
            });
        } else {
            if(!$(".password").next('span').length) {
                $(".password").after('<span class="star">••••••••</span>');
                $(".confirm-password").after('<span class="star">••••••••</span>');
            }
            $('#password-error').remove();
            $('#confirm_password-error').remove();
            $('#password').rules("remove");
            $('#confirm_password').rules("remove");
        }
    });
    $( ".password" ).keyup(function() {
        $(".star").remove();
    });
@else
     $('#password').rules("add", {
        required : true,
        passRegex : true,
        messages: { required: "Password is required" }
    });

    $('#confirm_password').rules("add", {
        required : true,
        equalTo : '#password',
        messages: { required: "Confirm Password is required",
                    equalTo : "The password confirmation does not match." }
    });
@endif
</script>

<script>
	$(document).ready(function() {


		// add dynamic ip rows
		$('.add_ip_row').click(function() {
			var template = '<div class="col-md-6 appended_ip_row">';
			template +=	'<div class="form-group remove-wrapper">';
			template += '<input type="text" class="form-control" placeholder="Enter IP Address" id="ipaddresses[]" name="ipaddresses[]">';
			template += '<a href="javascript:void(0)" class="btn remove-row remove_ip_row" title="Remove IP Address"><i class="material-icons">close</i></a>';
			template += '</div></div>';
			$(template).insertAfter($('.defaultIp'));
		});
		$(document).on('click','.remove_ip_row', function() {
			$(this).parents('.appended_ip_row').remove();
		});
    });
</script>
@endpush