@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css"> 
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('visitor_master.visitor_meeting_request')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">{{trans('visitor_master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/visitor/meeting/request">{{trans('visitor_master.visitor_meeting_request')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
					@if(isset($visitorMeetingRequest) && ($visitorMeetingRequest->id))
                        {{trans('visitor_master.edit_meeting_request')}}
                    @else
                        {{trans('visitor_master.add_new_meeting_request')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<!-- Basic multiple Column Form section start -->
{!! Form::model($visitorMeetingRequest, ['method' => isset($visitorMeetingRequest) && $visitorMeetingRequest->id ? 'put' : 'post', 'files' => 'true']) !!}    
	<section class="vertical-wizard">
        <div class="bs-stepper vertical vertical-wizard-example">
            <div class="bs-stepper-header">
                <div class="step" data-target="#personal-info-vertical" role="tab" id="personal-info-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('visitor_master.meeting_request')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('visitor_master.add_meeting_request')}}</span>
                        </span>
                    </button>
                </div>
				<div class="step" data-target="#meeting-request-info" role="tab" id="meeting-request-info-trigger">
					<button type="button" class="step-trigger">
						<span class="bs-stepper-box">2</span>
						<span class="bs-stepper-label">
							<span class="bs-stepper-title">{{trans('visitor_master.meeting_request_detail')}}</span>
							<span class="bs-stepper-subtitle">{{trans('visitor_master.add_meeting_request_detail')}}</span>
						</span>
					</button>
				</div>
			</div>

            <div class="bs-stepper-content">
                <div id="personal-info-vertical" class="content position-relative" role="tabpanel" aria-labelledby="personal-info-vertical-trigger" style="min-height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('visitor_master.meeting_request')}}</h5>
                        <small class="text-muted">{{trans('visitor_master.enter_meeting_request')}}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('visitor_id') ? 'has-error' : '' }}}">
                                <label class="form-label" for="select_visitor_id">{{trans('visitor_master.select_visitor')}} <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2" name="visitor_id" id="select_visitor_id" onchange="getVisitor(this.value)">
									<option value="">Select Visitor</option>
									@foreach($vistors as $vistor)
										<option value="{{$vistor->id}}" @if(isset($visitorMeetingRequest) && ($visitorMeetingRequest->visitor_id == $vistor->id) || (app('request')->input('vid') == $vistor->id) || (old('visitor_id') == $vistor->id)) selected @endif>
											{{$vistor->name}}({{$vistor->mobile}})
										</option>
									@endforeach
								
								</select>
								{!! $errors->first('visitor_id', '<label class="error" for="select_visitor_id">:message</label>')!!}
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-1 {{{ $errors->has('employee_id') ? 'has-error' : '' }}}">
                                <label class="form-label" for="employee_id">{{trans('visitor_master.meeting_with_whom')}} <span class="mendatory-field text-danger">*</span></label>
								<select class="form-control select2" name="employee_id" id="employee_id" onchange="getEmployee(this.value)">
									<option value="">Meeting with whom</option>
										@foreach($employees  as $index => $employee)
											<option value="{{$employee->id}}" @if(isset($visitorMeetingRequest) && ($visitorMeetingRequest->employee_id == $employee->id) || (old('employee_id') == $employee->id) || $index == 0)) selected @endif>
												{{$employee->name}} ({{$employee->email}}) (E)
											</option>
										@endforeach
										
										@if(isset($workmans))
										@foreach($workmans as $employee)
											<option value="{{$employee->id}}" @if(isset($visitorMeetingRequest) && ($visitorMeetingRequest->employee_id == $employee->id) || (old('employee_id') == $employee->id)) selected @endif>
												{{$employee->name}} ({{$employee->email}}) (W)
											</option>
										@endforeach
										@endif
								</select>
                            </div>
                            {!! $errors->first('employee_id', '<label class="error" for="employee_id">:message</label>')!!}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-1">
							<div class="card">
								<div class="card-body" style="min-height: 500px">
									<h4 class="card-title">{{ trans('visitor_master.visitor') }}</h4>
                                    <div class="img" style="height: 250px;">
									    <img id="visitor_image" src="/assets/img/default-profile-3.png" alt="visitors image" class="thumb-lg img-circle" style="height: 250px; width:250px;">
                                    </div>
                                    <br>
									<p class="card-text">{{ trans('visitor_master.visitor_name') }}: <b id="name">@if(isset($visitorMeetingRequest->visitor->name)){{$visitorMeetingRequest->visitor->name}}@endif</b>
									</p>
									<p class="card-text">{{ trans('visitor_master.email') }}: <b id="email">@if(isset($visitorMeetingRequest->visitor->email)){{$visitorMeetingRequest->visitor->email}}@endif</b>
									</p>
									<p class="card-text">{{ trans('visitor_master.mobile') }}: <b id="mobile">@if(isset($visitorMeetingRequest->visitor->mobile)){{$visitorMeetingRequest->visitor->mobile}}@endif</b>
									</p>
									<p class="card-text">{{ trans('visitor_master.address') }}: <b id="geo_address">@if(isset($visitorMeetingRequest->visitor->geo_address)){{$visitorMeetingRequest->visitor->geo_address}}@endif</b>
									</p>
									<p class="card-text">{{ trans('visitor_master.company_name') }}: <b id="company_name">@if(isset($visitorMeetingRequest->visitor->employeeDetail->company_name)){{$visitorMeetingRequest->visitor->employeeDetail->company_name}}@endif</b></p>
								</div>
							</div>
                        </div>

						<div class="col-md-6 mb-1">
							<div class="card">
								<div class="card-body" style="min-height: 515px">
									<h4 class="card-title">{{ trans('visitor_master.meeting_with_whom') }}</h4>
                                    <div class="img" style="height: 250px">
                                        @if(isset($visitorMeetingRequest->employee->image))
                                            <img id="employee_image" src="{!! $visitorMeetingRequest->employee->image !!}" alt="employee image" class="thumb-lg img-circle" onerror="this.src='/assets/img/default-profile-3.png'" style="height: 250px; width:250px;"/>
                                        @else
                                            <img id="employee_image" src="/assets/img/default-profile-3.png" alt="employee image" class="thumb-lg img-circle" style="height: 250px; width:250px;">
                                        @endif
                                    </div>
									<br>
									<p class="card-text">{{ trans('visitor_master.name') }}: <b id="emp_name">@if(isset($visitorMeetingRequest->employee->name)) {{$visitorMeetingRequest->employee->name}} @endif</b></p>
									<p class="card-text">{{ trans('visitor_master.email') }}: <b id="emp_email">@if(isset($visitorMeetingRequest->employee->email)){{$visitorMeetingRequest->employee->email}}@endif</b>
									</p>
									<p class="card-text">{{ trans('visitor_master.mobile') }}: <b id="emp_mobile">@if(isset($visitorMeetingRequest->employee->mobile)) {{$visitorMeetingRequest->employee->mobile}} @endif</b></p>
									<p class="card-text">{{ trans('visitor_master.address') }}: <b id="emp_dept">@if(isset($visitorMeetingRequest->employee->department->name)){{$visitorMeetingRequest->employee->department->name}}@endif</b></p>
									
								</div>
							</div>
                        </div>
                    </div>
                    <br><br>
                    
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" class="btn btn-outline-secondary btn-prev" disabled>
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                            </button>
							<button type="button" class="btn btn-primary btn-next">
                                <span class="align-middle d-sm-inline-block d-none">{{trans('manager/manager_create.next')}}</span>
                                <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                            </button>
                        </div>
                    </div>
                </div>

				<div id="meeting-request-info" class="content position-relative" role="tabpanel" aria-labelledby="meeting-request-info-trigger" style="min-height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('visitor_master.meeting_request_detail')}}</h5>
                        <small class="text-muted">{{trans('visitor_master.enter_meeting_request_detail')}}</small>
                    </div>

					<div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('request_from_date') ? 'has-error' : '' }}}">
                                <label class="form-label" for="request_from_date">{{trans('visitor_master.from_date')}} <span class="mendatory-field text-danger">*</span></label>
                                @if(isset($fromDateTime))
								{!! Form::text('request_from_date',$fromDateTime,['class' => 'form-control', 'id' => 'request_from_date']) !!}
								@else
								{!! Form::text('request_from_date', isset($visitorMeetingRequest) && $visitorMeetingRequest->request_from_date ? $visitorMeetingRequest->request_from_date : old('request_from_date'),['class' => 'form-control', 'id' => 'request_from_date']) !!}
								@endif
								{!! $errors->first('request_from_date', '<label class="error" for="request_from_date">:message</label>')!!}
                            </div>
                        </div>
						<div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('request_to_date') ? 'has-error' : '' }}}">
                                <label class="form-label" for="request_to_date">{{trans('visitor_master.to_date')}} <span class="mendatory-field text-danger">*</span></label>
								@if(isset($toDateTime))
								{!! Form::text('request_to_date',$toDateTime, ['class' => 'form-control', 'id' => 'request_to_date']) !!}
								@else
								{!! Form::text('request_to_date',isset($visitorMeetingRequest) && $visitorMeetingRequest->request_to_date ? $visitorMeetingRequest->request_to_date : old('request_to_date'), ['class' => 'form-control', 'id' => 'request_to_date']) !!}
								@endif

								{!! $errors->first('request_to_date', '<label class="error" for="request_to_date">:message</label>')!!}
                            </div>
                        </div>
					</div>
					<div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('purpose') ? 'has-error' : '' }}}">
                                <label class="form-label" for="purpose-to-visit">{{trans('visitor_master.purpose_of_visit')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('purpose',isset($visitorMeetingRequest) && $visitorMeetingRequest->purpose ? $visitorMeetingRequest->purpose : old('purpose'), ['class' => 'form-control', 'id' => 'purpose-to-visit', 'maxlength' => 200]) !!}
								{!! $errors->first('purpose', '<label class="error" for="purpose-to-visit">:message</label>')!!}
                            </div>
                        </div>
						@if($organization->meeting_approval_required == 'N')
						<div class="col-md-6">
							<input type="hidden" name="status" value="approved" />
                            <div class="mb-1  {{{ $errors->has('locations') ? 'has-error' : '' }}}">
                                <label class="form-label" for="location_id">{{trans('visitor_master.location')}}</label>
								<select class="form-control select2" id="location_id" name="locations[]" onchange="getsubLocations(this,'sublocations')" multiple>
									@foreach($locations as $location)
										<option value="{{$location->id}}" {{ $loop->first ? 'selected="selected"' : '' }}>
											{{$location->name}}
										</option>
									@endforeach
								</select>
								{!! $errors->first('locations', '<label class="error" for="location_id">:message</label>')!!}
                            </div>
                        </div>
						@endif
					</div>
					@if($organization->meeting_approval_required == 'N')
					<div class="row">
						<div class="col-md-6">
                            <div class="mb-1">
                                <label class="form-label" for="sub_location">{{trans('visitor_master.sub_location')}} <span class="mendatory-field text-danger">*</span></label>
								<select class="form-control select2 blank_sub_location">
									<option value="">Select Sub Location</option>
								</select>
							</div>
                        </div>
					</div>
					@endif
                    
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" class="btn btn-outline-secondary btn-prev" disabled>
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                            </button>
                            <button type="submit" class="btn btn-success btn-submit user-submit" id="submit-text">{{trans('common/common.submit')}}</button>
                        </div>
                    </div>
                </div>
            
            </div>
        </div>
    </section>
 
{!! Form::close() !!} 
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<!-- END: Page JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" type="text/javascript"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">

    function getVisitor (visitor_id) {
        var url = "{{url('/'.$alias.'/visitor/details')}}";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "visitor_id": visitor_id},
                success: function (data) {
                    if(data.imagebase64code != 'null' && data.imagebase64code != null ){
                        $('#visitor_image').attr('src', 'data:image/png;base64, ' + data.imagebase64code);
                    } else if(data.image){
                        $('#visitor_image').attr('src', data.image);
                    } else  {
						$('#visitor_image').attr('src', '/assets/img/default-profile-3.png');
					}
                    $('#name').html(data.name);
                    $('#email').html(data.email);
                    $('#mobile').html(data.mobile);
                    $('#geo_address').html(data.geo_address);
                    $('#company_name').html(data.employee_detail.company_name);
                    $('#designation').html(data.employee_detail.designation);
                }
        });
    }

    function getEmployee (employee_id) {
        var url = "{{url('/'.$alias.'/employee/details')}}";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "employee_id": employee_id},
                success: function (data) {
					if(data.imagebase64code){
                        $('#employee_image').attr('src', 'data:image/png;base64, ' + data.imagebase64code);
                    } else {
                        if(data.image != 'null' && data.image != null){
						    $('#employee_image').attr('src', data.image);
                        }
                        else{
						    $('#employee_image').attr('src', '/assets/img/default-profile-3.png');
                        }
					}
                    $('#emp_name').html(data.name);
                    $('#emp_email').html(data.email);
                    $('#emp_mobile').html(data.mobile);
                    $('#emp_dept').html(data.department.name);
                }
        });
    }

    $('#request_from_date').datetimepicker({
        // minDate:new Date(),
		// minTime:new Date()
    });
	
	
    $('#request_to_date').datetimepicker({
        // minDate:new Date(),
		// minTime:new Date()
    });

    var subLocations = '';

    function getsubLocations(th) {
        var locationId = $('#location_id').val();
        
        var subLocationId = "";

        var data = {
            location_id: locationId,
            '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/{{$organization->alias}}/location/sub-locations',
            type: 'POST',
            data: data,
            success: function(data) {
                var selectbox = '';
                if (data) {
                    selectbox = '<label for="sub_location_id">Sub Locations</label>';
                    selectbox += '<select name="sublocations[]" class="form-control select2" id="sub_location_id" multiple>';
					
					
                    $.each(data, function(i, item) {
                        if (subLocations.includes(i)) {
                            selectbox += '<option value="' + i + '" selected="selected">' + item + '</option>';
                        } else {
                            selectbox += '<option value="' + i + '">' + item + '</option>';
                        }
						
                    });
                    selectbox += '</select>';
                }
                
                $('#blank_sub_location').css('display', 'none');
                $('.sublocations').css('display', 'block');
                $('.sublocations').html(selectbox);
                $("#sub_location_id").select2({
                    //multiple: true
                });
            }
        });
        
    }
	
	$(document).ready(function() {
        if ($('#location_id').val()) {
            getsubLocations();
        }
		
		if ($('#select_visitor_id').val()) {
            getVisitor($('#select_visitor_id').val());
        }
		
		if ($('#employee_id').val()) {
            getEmployee($('#employee_id').val());
        }
        
		$('#location_div').show();
        $('#sublocation_div').show();
        $("#location_id").attr("disabled", false);
        $("#sub_location_id").attr("disabled", false);
    });
</script>
@endpush