@extends('member') @section('page-title')
<div class="row bg-title">

    <!-- .page title -->
    <div class="col-lg-8 col-md-5 col-sm-6 col-xs-12">
        <h4 class="page-title"><i class="icon-logout"></i> @lang('modules.ticket.tickets')
            <!-- <span class="text-info b-l p-l-10 m-l-5"></span> <span class="font-12 text-muted m-l-5"> @lang('modules.dashboard.totalClients')</span> -->
        </h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-4 col-sm-6 col-md-7 col-xs-12 text-right">
        

    </div>
    <!-- /.breadcrumb -->
</div>
@endsection @push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/custom-select/custom-select.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css"> @endpush @section('content')

@if (isset($status))
<div class="pad margin no-print">
    <div class="alert alert-{{$status['code']}} alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
        <ul>
            @foreach ($status['messages'] as $m)
            <li>{{$m}}</li>
            @endforeach
        </ul>
    </div>
</div>
@endif

<div class="row">
    <div class="col-xs-12">

        <div class="panel panel-inverse">
            <div class="panel-heading"> @lang('modules.ticket.createTitle')</div>
            <div class="panel-wrapper collapse in" aria-expanded="true">
                <div class="panel-body">
                    {!! Form::model($ticket, ['id'=>'createTicket','class'=>'ajax-form11','files' => 'true','method' => isset($ticket) && $ticket->id ? 'put' : 'post']) !!}
                    <div class="form-body">
                        <div class="row">
                            <div class="col-md-12 ">
                                <div class="form-group">
                                    <label>@lang('modules.ticket.ticketfor')</label>
                                    <div class="radio-list">
                                        <label class="radio-inline p-0">
											<div class="radio radio-info">
												<input type="radio" name="ticketfor" id="forself" checked="" value="self">
												<label for="forself">Self</label>
											</div>
										</label>
										@if(count($employees)>0)
										<label class="radio-inline">
											<div class="radio radio-info">
												<input type="radio" name="ticketfor" id="foremp" value="employee">
												<label for="foremp">Employee</label>
											</div>
										</label>
										@endif
										@if(count($workmans)>0)
										<label class="radio-inline">
											<div class="radio radio-info">
												<input type="radio" name="ticketfor" id="forworkman" value="workman">
												<label for="forworkman">Workman</label>
										</div>
										@endif
									</label>

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

                            <!--/span-->
                        </div>
                        <div class="row">
							<div class="col-md-12" id="section4emp" style="display:none;">
                                <div class="form-group">
                                    <label class="required">@lang('modules.ticket.chooseEmployee')</label>
                                    <select class="select2 form-control" data-placeholder="@lang('modules.ticket.chooseMember')" id="selectControlEmp" name="emp_id">
										@foreach($employees as $employee)
											<option value="{{ $employee->id }}">{{ ucwords($employee->name) }} ({{ $employee->employee_code }})</option>
										@endforeach
									</select>
                                </div>
                            </div>
							<div class="col-md-12" id="section4workman" style="display:none;">
                                <div class="form-group">
                                    <label class="required">@lang('modules.ticket.chooseWorkman')</label>
                                    <select class="select2 form-control" data-placeholder="@lang('modules.ticket.chooseWorkman')" id="selectControlWorkman" name="emp_id_1" style="width:100%">
										@foreach($workmans as $employee)
											<option value="{{ $employee->id }}">{{ ucwords($employee->name) }} ({{ $employee->employee_code }})</option>
										@endforeach
									</select>
                                </div>
                            </div>
                        </div>
                        <div class="row">

                            <div class="col-md-6 ">
                                <div class="form-group">
                                
                                    <label class="control-label  required">@lang('modules.ticket.severity')				
									</label>
                                    <select class="form-control select2" id="severity" required name="severity">
										@foreach($ticketSeverity as $val)
											<option value="{{$val}}">{{ucfirst($val)}}</option>
										@endforeach
									</select> 
                                </div>
                            </div>
							
							<div class="col-md-6 ">
                                <div class="form-group">
                                
                                    <label class="control-label  required">@lang('modules.ticket.department')
										
									</label>
                               
                                    <select class="form-control select2" id="ticket_type" required name="ticket_type">
											<option value="">@lang('modules.ticket.selectdepartment')</option>
                                            @foreach($ticketType as $val)
                                                <option value="{{$val}}">{{ucfirst($val)}}</option>
                                            @endforeach
                                        </select> 
                                </div>
                            </div>


                        

            </div>
            <!--/row-->

           <div class="row">
                            <div class="col-md-12 ">
                                <div class="form-group">
								
									<label class="control-label required">@lang('modules.ticket.subject')
										
									</label>
									{!! Form::text('subject', 
										isset($department) && $department->subject ? $department->subject : old('subject'), 
										['class' => 'form-control',
										'id' => 'subject', 'Placeholder' => 'Subject', 'required']) 
									!!}								
									{!! $errors->first('subject', '<label class="control-label"  for="subject">:message</label>')!!}
									
									

                                </div>
                            </div>

                            <!--/span-->
                        </div>
            <!--/span-->

            <div class="row">
                <div class="col-md-12">
                    <label class="control-label required">@lang('modules.ticket.description')</label>
                    <div class="form-group">
                        <textarea name="description" required id="description" class="form-control" cols="30" rows="5">{!! old('description') !!}</textarea>
                    </div>
                </div>

                

            </div>
			
			<div class="row">
                <div class="col-md-12">
                    <label>@lang('modules.ticket.attachment') <span style="color:grey">(can attach more than one)</span></label> 
                    <div class="form-group {{{ $errors->has('attachments[]') ? 'has-error' : '' }}}">
                        <div class="row">
                            <div class="col-md-2">
                                <button type="button" id="add_more" class="btn btn-primary" style="line-height:15px;"><i class="fa fa-plus" aria-hidden="true"></i> Add Attachment</button>
                            </div>
                        </div>
                        <i><b>Max size limit: 5MB</b><i><br />
						@foreach ($errors->all() as $error)
							@if (strpos($error, 'attachment'))
								<li>{{ $error }}
							@endif
                        @endforeach
                    </div>
                </div>
            </div>
            
            <input type="hidden" name="deleted_attachemnts" id="deleted_attachemnts" value=[] />


        </div>
        <div class="form-actions">
            <button type="submit" id="save-form-2" class="btn btn-success"><i class="fa fa-check"></i>
                                @lang('app.save')
                            </button>

        </div>
        {!! Form::close() !!}
    </div>

</div>
</div>
</div>
</div>
<!-- .row -->


@endsection @push('footer-script')
<script src="/assets/plugins/bower_components/datatables/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="/assets/plugins/bower_components/custom-select/custom-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<!-- <script src="/assets/js/datatables/buttons.server-side.js"></script> -->



<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>

<script>
    $('#forself').change(function () {
        if($(this).is(':checked')){
			$('#selectControlEmp').attr('name', 'emp_id_e');
			$('#selectControlWorkman').attr('name', 'emp_id_w');
			$('#section4workman').hide();
            $('#section4emp').hide();
        }
    });
	$('#foremp').change(function () {
        if($(this).is(':checked')){
			$('#selectControlEmp').attr('name', 'emp_id');
			$('#selectControlWorkman').attr('name', 'emp_id_w');
			$('#section4workman').hide();
            $('#section4emp').show();
        }
    });
	$('#forworkman').change(function () {
        if($(this).is(':checked')){
			$('#selectControlWorkman').attr('name', 'emp_id');
			$('#selectControlEmp').attr('name', 'emp_id_e');
            $('#section4emp').hide();
            $('#section4workman').show();
        }
    });
	
	var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(event) {
                var extension = input.files[0].name.split('.').pop().toLowerCase();
                if(extension == "pdf"){
                    $($.parseHTML('<img src="/assets/img/pdf-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
                }
                else if(extension == "docx" || extension=="doc"){
                    $($.parseHTML('<img src="/assets/img/docx-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
                }
                else{
                    $($.parseHTML('<img style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }
            }
            reader.readAsDataURL(input.files[0]);
        }
    };

    function deleteAttachment(){
        $(this).parent().remove();
    }

    function delAttached(attachment){
        $(this).parent().remove();
        var val = JSON.parse($('#deleted_attachemnts').val());
        val.push(attachment);
        $('#deleted_attachemnts').val(JSON.stringify(val));
    }

    function preview() {
        imagesPreview(this, $(this).closest('div'));
    }

    $('#add_more').click(function(e){
        var temp = $(this).parent().parent().parent().append("<div style='display:inline-block; position:relative; margin: 7px 7px 0 0;'><input type='file' style='display:none;' class='fileinput form-control attachments' name='attachments[]' data-filename-placement='inside' title='Browse' onchange='preview.call(this)' /></div>");
        var result = temp.find('div:last input').trigger('click');
    });
</script>

@endpush