@extends('layouts.simple')


@section('styles')
<style type="text/css">

	.col-form-label{
		font-size: 1rem;
	}	

	.card-main{
		width: 70%;
	}

	@media only screen and (max-width: 600px) {
		.card-main{
			width: 100%;
		}
	} 

</style>
@endsection

@section('content')

	<div class="card card-main my-md-4 my-2">
		<div class="card-header">

				<div class="d-flex justify-content-between mb-1">
					<div>
						<a href="/" class="">
							<i class="icon-home mr-2"></i> @lang('master.home')
						</a>
					</div>
					<div>
						@if(app()->getLocale() != 'en')
						<div class="text-right"><a href="/mailbox?lang=en"><h6 class="m-0">Change to English</h6></a></div>
						@endif
						@if(app()->getLocale() != 'es')
						<div class="text-right"><a href="/mailbox?lang=es"><h6 class="m-0">Cambiar a Español</h6></a></div>
						@endif
						@if(app()->getLocale() != 'pl')
						<div class="text-right"><a href="/mailbox?lang=pl"><h6 class="m-0">Zmień na polski</h6></a></div>
						@endif
					</div>
				</div>
				
				
				<div class="row mb-3">
		    		<div class="col-md-4 col-sm-8 col-10 mx-auto text-center">
						<a href="/">
							<img src="{{asset('img/logo_bg_white.png')}}" alt="" class="img-fluid" style="max-height: 60px">
						</a>
		    		</div>
				</div>
			    <div class="text-center mb-3">
			    	<div class="row">
			    	</div>
					<h2 class="card-title"><i style="font-size: 1.8rem;" class="icon-mailbox mr-2"></i>@lang('mailbox.mailbox_name')</h2>

                    <span class="d-block text-muted">@lang('mailbox.help_us_improve')</span>
                </div>
                <div class="text-center">
                	<h5><i style="font-size: 1.5rem;" class="icon-phone mr-2"></i>@lang('mailbox.call_us') <span id="phone_number"> </span></h5>
                </div>
		</div>


		<div class="card-body">
			<form id="mailbox_form">
				<input type="hidden" name="lang" value="{{$lang}}">
				<div class="form-group row">
					<div class="col-lg-4 offset-lg-2 px-4">
						<label class="col-form-label">@lang('mailbox.plant')<span class='text-danger'>*</span></label>
	                    <select required name="plant_id" class="form-control select" data-fouc>
								<option value="">@lang('master.select_one')</option>
	                    	@foreach($plants as $plant)
	                    		<option value="{{$plant->id}}">{{$plant->name}}</option>
	                    	@endforeach
	                    </select>
					</div>
					<div class="col-lg-4 px-4">
						<label class="col-form-label">@lang('mailbox.facility')<span class='text-danger'>*</span></label>
	                    <select required name="sub_plant_id" class="form-control select" data-fouc>
	                        <option value="">@lang('mailbox.select_one')</option>
	                    </select>
					</div>
				</div>

				<div class="form-group row">
					<div class="col-lg-4 offset-lg-2 px-4">
						<label class="col-form-label" >@lang('mailbox.name')<span class='text-danger' style="display: none">*</span></label>
						<input name="name" maxlength="100" type="text" class="form-control" placeholder="@lang('mailbox.my_name_is')">
					</div>
            		<div class="col-lg-4 px-4">
						<label class="col-form-label" >@lang('mailbox.telephone')</label>
						<input type="text" maxlength="50" value="" class="form-control" name="telephone" placeholder="@lang('mailbox.my_telephone_is')">
            		</div>
				</div>
				<div class="form-group row">
					<div class="col-lg-4 offset-lg-2 px-4">
						<label class="col-form-label">@lang('mailbox.email')</label>
						<input name="email" maxlength="50" type="email" class="form-control" placeholder="@lang('mailbox.my_email_is')">
					</div>
					<div class="col-lg-4 px-4">
						<div class="form-check form-check-inline mt-md-4 mt-2">
							<label class="form-check-label">
								<input type="checkbox" name="follow_up" class="form-check-input-styled-primary mr-2" data-fouc>
								@lang('mailbox.follow_up_message')
							</label>								
						</div>
					</div>					
				</div>			
				<div class="form-group row">
					<div class="col-lg-4 offset-lg-2 px-4">
						<div>
							<label class="col-form-label" for="reason">@lang('mailbox.message_reason')<span class='text-danger'>*</span></label>
							{{-- Bug whith with validation popup, therefore absolute position is required --}}
		                    <select required id="reason" name="reason" class="form-control select" data-fouc style="position: absolute!important;"> 
		                    	<option value="">@lang('mailbox.select_one')</option>
		                    	<option value="1">@lang('mailbox.suggestion')</option>
		                    	<option value="2">@lang('mailbox.congratulation')</option>
		                    	<option value="3">@lang('mailbox.question')</option>
		                    	<option value="4">@lang('mailbox.complaint')</option>
		                    	<option value="5">@lang('mailbox.health_security')</option>
		                    </select>
						</div>
	            		<div id="complaint_type_div" class="mt-3"  style="display: none">
							<label class="col-form-label" for="complaint_id">@lang('mailbox.complaint_type')<span class='text-danger'>*</span></label>
		                    <select id="complaint_id" name="complaint_id" class="form-control select" data-fouc style="position: absolute!important;">
		                    	<option value="">@lang('mailbox.select_one')</option>
		                    </select>
						</div>
					</div>
					<div class="col-lg-4 px-4">
						<div>
							<label class="col-form-label" for="user_type">@lang('mailbox.user_type')<span class='text-danger'>*</span></label>
							{{-- Bug whith with validation popup, therefore absolute position is required --}}
		                    <select required id="user_type" name="user_type" class="form-control select" data-fouc style="position: absolute!important;"> 
		                    	<option value="">@lang('master.select_a') @lang('mailbox.plant')</option>
		                    </select>
		                </div>
						<div id="other_user_type_div" class="pt-3" style="display: none">
							<label for="other_user_type" class="col-form-label">@lang('mailbox.please_specify')<span class='text-danger'>*</span></label>
							<input name="other_user_type" maxlength="50" type="text" class="form-control" placeholder="@lang('mailbox.i_am_a')">
						</div>
						<div id="supplier_contact_div" class="pt-3" style="display: none">
							<label for="supplier_contact" class="col-form-label">@lang('mailbox.please_specify_contact')<span class='text-danger'>*</span></label>
							<input name="supplier_contact" maxlength="100" type="text" class="form-control" placeholder="@lang('mailbox.i_am_a')">
						</div>
					</div>
				</div>					
                <div class="form-group row">

                </div>
                <div class="form-group row">
					<div  class="col-lg-7 col-md-8 col-12 px-4 mx-auto">
						<label class="col-form-label">@lang('mailbox.message')<span class='text-danger'>*</span></label>
						<textarea name="message" rows="5" maxlength="10000" class="form-control" required></textarea>
					</div>
                </div>
                <div class="form-group row">
					<div class="col-lg-7 col-md-8 col-12 px-4 mx-auto">
						<label class="col-form-label">@lang('mailbox.attach_evidence')</label>
						<div class="evidence-container">
							<div class="input-group my-2">
								<div class="custom-file">
									<input type="file" class="custom-file-input" name="evidences[]" data-count="1" id="evidence_1" aria-describedby="evidence_1" accept="image/jpeg,image/gif,image/png,application/pdf">
									<label class="custom-file-label text-muted" for="evidence_1">@lang('mailbox.choose_file')</label>
								</div>
			                    <div class="input-group-append" style="display: none">
			                    	<button class="btn btn-danger remove-file px-3" data-toggle="tooltip" title="Borrar" type="button" id="file_button" ><i class="icon-cross2" aria-hidden="true"></i></button>
			                    </div>									
							</div>
						</div>
						<span class="text-muted">@lang('mailbox.file_size_legend')</span>
					</div>
                </div>

                <div class="text-center my-2">
                	<button type="submit" class="btn btn-primary btn-lg btn-ladda btn-ladda-spinner px-4" data-style="zoom-in"><span class="ladda-label">@lang('mailbox.submit')<i class="icon-paperplane ml-1"></i></span></button>
                </div>
			</form>

			<div class="ml-3 my-4 text-center">
				<p><a href="" target="_blank" id="privacy_policy">@lang('mailbox.click_here')</a>&nbsp @lang('mailbox.privacy_legend')</p>
			</div>
		</div>
	</div>

@endsection

@section('plugin-scripts')
	<script src="https://www.google.com/recaptcha/api.js?render=6LdEp5wUAAAAAIOmEuCS5PPioQyWaKmcsyW4yi-P"></script>
@endsection

@section('app-scripts')
<script type="text/javascript">
	const MAILBOX = {{\App\Master\Module::MAILBOX}};
	const PLANTS = {!! $plants->toJson() !!};
	const POLAND = {{\App\Master\Plant::POLAND}}; //Used for customization
	const COMPLAINTS = {!! $complaints->toJson() !!};
	const LANG = {
						'master'	: {!!json_encode(app('translator')->get('master'))!!},
						'mailbox'	: {!!json_encode(app('translator')->get('mailbox'))!!},
					};

	const USER_TYPES = [
		{
			'id' 	: {{\App\Mailbox\Message::EMPLOYEE}},
			'name'	: '@lang('mailbox.employee')',
		},
		{
			'id' 	: {{\App\Mailbox\Message::CLIENT}},
			'name'	: '@lang('mailbox.client')',
		},
		{
			'id' 	: {{\App\Mailbox\Message::SUPPLIER}},
			'name'	: '@lang('mailbox.supplier')',
		},
		{
			'id' 	: {{\App\Mailbox\Message::NEIGHBOR}},
			'name'	: '@lang('mailbox.neighbor')',
		},
		{
			'id' 	: {{\App\Mailbox\Message::OTHER}},
			'name'	: '@lang('mailbox.other')',
		},
	];


</script>
<script src="{{mix('js/mailbox/index.js')}}"></script>
@endsection