{{-- CityHub - Communal Service - Reports by user --}}

<div id="">
	<div class="row">
		<div class="col s12">
			<div class="widget-holder hoverable fadeIn">
				<div class="widget-content">
					<div class="table-wrapper">
						{{ Form::hidden('token', csrf_token(), array('id' => 'token')) }}
						<table class="bordered responsive-table">
							<thead>
							<tr>
								<th class="text-center">{{ Lang::get('communalService.header_id') }}</th>
								<th></th>
								<th>{{ Lang::get('communalService.header_user') }}<br><small>{{ Lang::get('communalService.header_date_time') }}</small></th>
								<th class="text-center">{{ Lang::get('communalService.header_is_active') }}</th>
								<th class="text-center">{{ Lang::get('communalService.header_city') }}</th>
								<th class="text-center">{{ Lang::get('communalService.header_priority') }}</th>
								<th class="text-center">{{ Lang::get('communalService.header_status') }}</th>
								<th class="text-center">{{ Lang::get('communalService.header_action') }}</th>

							</tr>
							</thead>

							<tbody id="searchable">
							@foreach ($reports as $report)
								<tr>
									<td class="text-center">{{ Form::button($report->id, array('type' => 'button', 'class' => 'btn btn-sm btn-default focusButton', 'data-id' => $report->id, 'data-latitude' => $report->latitude, 'data-longitude' => $report->longitude, 'title' => Lang::get('communalService.tooltip_button_focus'))) }}</td>
									<td class="text-center">
										@if ($report->is_active == true)
											<span class="text-success" id="report{{ $report->id }}active" title="{{ Lang::get('communalService.tooltop_indicator_active') }}"><span class="icon-done" id="report{{ $report->id }}activeicon"></span></span>
										@else
											<span class="text-danger" id="report{{ $report->id }}active" title="{{ Lang::get('communalService.tooltop_indicator_inactive') }}"><span class="icon-close" id="report{{ $report->id }}activeicon"></span></span>
										@endif
									</td>
									<td><strong>{{ $report->user_first_name . ' ' . $report->user_last_name }}</strong><br><small>{{ $report->created_at }}</small></td>
									<td class="text-center">
										@if ($report->is_active == true)
											{{ Form::button('<i class="material-icons">block</i>', array('type' => 'button', 'class' => 'btn  red   activateButton', 'data-id' => $report->id, 'data-status' => 'true', 'title' => Lang::get('communalService.tooltip_button_deactivate'))) }}
										@else
											{{ Form::button('<i class="material-icons">done</i>', array('type' => 'button', 'class' => 'btn waves-effect waves-light green activateButton', 'data-id' => $report->id, 'data-status' => 'false', 'title' => Lang::get('communalService.tooltip_button_activate'))) }}
										@endif
									</td>
									<td class="text-center">
										@if (isset($citiesReports[$report->id]))
											<a href="{{ URL::route('CommunalServiceCityReports', array('id' => $citiesReports[$report->id]->city_id)) }}" title="{{ Lang::get('communalService.link_city_view', array('name' => $citiesReports[$report->id]->city_name)) }}">{{ $citiesReports[$report->id]->city_name }}</a>
										@else
											-
										@endif
									</td>
									<td class="text-center"><span id="report{{ $report->id }}prioritydisplay">{{ Lang::get('communalService.' . $report->priority_name) }}</span></td>
									<td class="text-center">{{ Lang::get('communalService.' . $report->status_name) }}</td>
									<td class="text-center">
										<a onclick="manage({{$report->id}})" class="icon-btn icon-btn-edit"><i class="material-icons">mode_edit</i></a>
										<a href="{{ URL::route('CommunalServiceDeleteReport', array('id' => $report->id)) }}" class="icon-btn icon-btn-delete" title="{{ Lang::get('communalService.tooltip_button_delete_template') }}"  data-id="{{ $report->id }}"><i class="material-icons">delete</i></a>
									</td>
								</tr>

							@endforeach

							</tbody>
						</table>
					</div>
					<div id="report-modal" class="modal modal-fixed-footer">
						{{ Form::open(array('route' => 'CommunalServicePostEditReport', 'role' => 'form', 'class' => 'form-horizontal', 'id'=>'modal-form', 'autocomplete' => 'off', 'files' => true )) }}

						<div class="modal-content"  id="report">


							<input type="hidden" name="city" id="city" v-bind:value="report.city">
							<input type="hidden" name="id" v-bind:value="report.id">
							<input type="hidden" name="reportLatitude" v-bind:value="report.latitude">
							<input type="hidden" name="reportLongitude" v-bind:value="report.longitude">

							<h4>@{{report.title}}</h4>

							<ul class="tabs tabs-fixed-width">
								<li class="tab"><a class="active" href="#report-overview">{{Lang::get('dashboard.statistics')}}</a></li>
								<li class="tab"><a href="#report-edit">{{Lang::get('cityForm.table_edit')}}</a></li>
								<li class="tab"><a href="#report-delegate">{{Lang::get('communalService.header_delegate')}}</a></li>
								<li class="tab"><a href="#report-tracking">{{Lang::get('communalService.report_history')}}</a></li>

							</ul>
							@if(count($reports)>0)
								<div id="report-overview" class="fadeIn">
									<div class="inputs-wrapper"  >
										<div class="row">
											<div class="col s12 m4 l4">
												<div class="report-holder hoverable">
													<div class="report-image" v-bind:style="report.image" onclick="showImage()">
														<div class="report-image-fader">
															<p v-if="report.location_address"><i class="material-icons">room</i>@{{ report.location_address }}</p>
															<p><i class="material-icons">schedule</i>@{{ report.created_at }}</p>
														</div>
													</div>
													<div class="report-content">
														<h5 v-if="report.user_first_name!='Anonymous'">{{Lang::get('communalService.report_by')}}: @{{ report.user_first_name + ' ' + report.user_last_name }}</h5>
														<p>@{{ report.description }}</p>
													</div>
												</div>
											</div>
											<div class="col s12 m4 l4">
												<div class="report-map-holder hoverable" style="height:70vh !important;">
													<div  id="map-canvas"  class="map" style="height: 100%; width: 100%;"></div>
												</div>

											</div>

											<div class="col s12 m4 l4">
												<div class="manage-holder hoverable">

													<h5>{{Lang::get('communalService.options')}}</h5>
													<div class="switch">
														<label>
															{{ucfirst(Lang::get('core.inactive'))}}
															<input name="active" value=1 type="checkbox" v-bind:checked="report.is_active">
															<span class="lever"></span>
															{{ucfirst(Lang::get('core.active'))}}
														</label>
													</div>

													<div class="input-field">
														{{-- Form::select('priority', $priorities, null, array('id' => 'priority' , 'class' => 'sort-dropdown reports-input')) --}}


													</div>

													<div class="input-field">
														{{-- Form::select('status', $statuses, null, array('id' => 'status', 'class' => 'sort-dropdown reports-input')) --}}

													</div>
													<div class="input-field">
														<textarea name="admin_note" id="admin-reply" class="materialize-textarea" v-model="report.admin_note"></textarea>
														<label v-bind:class="{active:report.admin_note}" for="admin-reply">{{Lang::get('communalService.label_report_admin_note')}}</label>
													</div>
													<div class="input-field">
														<a v-bind:href="report.pdfRoute + '/' + report.id"  class="btn btn-xs btn-success"><i class="material-icons">picture_as_pdf</i></a>
													</div>

												</div>

											</div>
										</div>


									</div>



								</div>
							@endif

							<div id="report-edit" class="fadeIn">
								<div class="inputs-wrapper">
									<div class="row">
										<div class="col s12 m4 l4">
											<div class="report-holder hoverable">
												<div class="report-image" v-bind:style="report.image" onclick="showImage()">
													<div class="report-image-fader">
														<p v-if="report.location_address"><i class="material-icons">room</i>@{{ report.location_address }}</p>
														<p><i class="material-icons">schedule</i>@{{ report.created_at }}</p>
													</div>
												</div>
												<div class="report-content">
													<h5 v-if="report.user_first_name!='Anonymous'">{{Lang::get('communalService.report_by')}}: @{{ report.user_first_name + ' ' + report.user_last_name }}</h5>
													<p>@{{ report.description }}</p>
												</div>
											</div>
										</div>
										<div  v-if="report.attach_image" class="col s12 m4 l4">
											<div class="report-holder hoverable">
												<div class="report-image" v-bind:style="report.attach_image">
													<div class="report-image-fader">
														<p>{{ Lang::get('communalService.status_resolved') }}</p>

													</div>
												</div>

											</div>
										</div>

										<div class="col" v-bind:class="{'s12 m8 l8':report.image}">
											<div class="edit-holder hoverable">


												<div class=" col s6">
													<label  class="active"  for="type">{{ Lang::get('communalService.header_type') }}</label>
													<select class="browser-default" name="type" id="type"  onchange="changeSubtypes(0)">
														<option selected  disabled>{{ Lang::get('communalService.header_type') }}</option>

														<option v-for="(type,id) in report.types" :value="id " :selected="id == report.type_id"  >@{{ type.name }}</option>
													</select>

												</div>
												<div class="col s6">
													<label class="active"  for="subtype">{{ Lang::get('communalService.header_subtype_name') }}</label>

													<select class="browser-default" name="subtype" id="subtype" >
														<option value=""  disabled selected>{{ Lang::get('communalService.header_subtype_name') }}</option>
													</select>

												</div>



												<div class="input-field col s12">
													<textarea id="report-desc" class="materialize-textarea" name="description" v-model="report.description"></textarea>
													<label v-bind:class="{active:report.description}" for="repot-desc">{{ Lang::get('communalService.header_description') }}</label>
												</div>


												<div class="file-field input-field col s10">
													<div class="btn">
														<span>{{ Lang::get('communalService.label_current_attach_image') }}</span>
														<input name="attach_image" type="file" id="attach-image-file" >
													</div>
													<div class="file-path-wrapper">
														<input class="file-path validate" type="text"  v-bind:value="report.attach_image">
													</div>
												</div>

												<div class=" col s2">
													<label  class="active" for="votes">{{ Lang::get('communalService.label_report_votes') }}</label>

													<input name="votes" id="votes" type="text" v-model="report.votes">
												</div>

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

							<div id="report-delegate" class="fadeIn">
								<div class="inputs-wrapper">
									<div class="row">
										<div class="col s12 m4 l4">
											<div class="report-holder hoverable">
												<div class="report-image" v-bind:style="report.image" onclick="showImage()">
													<div class="report-image-fader">
														<p><i class="material-icons">room</i>@{{ report.location_address }}</p>
														<p><i class="material-icons">schedule</i>@{{ report.created_at }}</p>
													</div>
												</div>
												<div class="report-content">
													<h5 v-if="report.user_first_name!='Anonymous'">{{Lang::get('communalService.report_by')}}: @{{ report.user_first_name + ' ' + report.user_last_name }}</h5>
													<p>@{{ report.description }}</p>
												</div>
											</div>
										</div>
										<div class="col s12 m8 l8">
											<div class="edit-holder hoverable">

												<div class="row">
													<div class="input-field col s12 m6">
														<label class="active">{{Lang::get('core.city_company')}}</label>
														<select class="browser-default" name="type" id="company">
															<option selected  disabled>{{ Lang::get('communalService.header_type') }}</option>

															<option v-for="(company,id) in report.companies" :value="company.id "  >@{{ company.name }}</option>
														</select>
														{{-- Form::select('company', $citycompanies, null, array('id' => 'company' , 'class' => 'sort-dropdown reports-input')) --}}
													</div>

													<div class="input-field col s12 m6">

														<label class="active">{{Lang::get('communalService.title_template_list')}}</label>
														<select class="browser-default" name="type" >
															<option selected  disabled>{{ Lang::get('communalService.header_type') }}</option>

															<option v-for="(template,id) in report.answer_template" :value="id "  >@{{ template }}</option>
														</select>
														{{-- Form::select('template', $templates, null, array('id' => 'template' , 'class' => 'sort-dropdown reports-input')) --}}

													</div>
													<div class="input-field col s12 m6">
														<label  class="active" >{{ Lang::get('communalService.label_report_priority') }}:</label>
															<select class="browser-default" name="priority" id="priority">
																<option selected  disabled>{{ Lang::get('communalService.header_type') }}</option>

																<option v-for="(priority,id) in report.priorities" :value="priority.id "  >@{{ priority.identifier }}</option>
															</select>
													</div>
												</div>
												<div class="row">
													<div class="input-field col s12">
														<textarea name="admin_note_for_managers" id="delegate-note" class="materialize-textarea">@{{ report.admin_note_for_managers }}</textarea>
														<label v-bind:class="{active:report.admin_note_for_managers}" for="repot-desc" id="delegate-note-label">{{Lang::get('communalService.details_admin_note_for_managers')}}</label>
													</div>
												</div>
												<div class="row valign-wrapper">
													<a id="doTheDelegate" onclick="delegate()" class="waves-effect waves-light btn btn-primary">{{Lang::get('communalService.header_delegate')}}</a>

												</div>
											</div>

										</div>
									</div>

								</div>

							</div>

							<div id="report-tracking" class="fadeIn">
								<div class="inputs-wrapper">
									<div class="row">
										<div class="col s12 m4 l4">
											<div class="report-holder hoverable">
												<div class="report-image" v-bind:style="report.imageBack" onclick="showImage()">
													<div class="report-image-fader">
														<p><i class="material-icons">room</i>@{{ report.location_address }}</p>
														<p><i class="material-icons">schedule</i>@{{ report.created_at }}</p>
													</div>
												</div>
												<div class="report-content">
													<h5 v-if="report.user_first_name!='Anonymous'">{{Lang::get('communalService.report_by')}}: @{{ report.user_first_name + ' ' + report.user_last_name }}</h5>
													<p>@{{ report.description }}</p>
												</div>
											</div>
										</div>

										<div class="col s12 m4 l4">

											<div class="report-history-holder">
												<template v-if="report.tracking">


													<table class="bordered responsive-table">
														<thead>
														<tr >
															<th>{{ Lang::get('communalService.header_action') }}</th>
															<th>{{ Lang::get('communalService.header_user') }}</th>
															<th>{{ Lang::get('communalService.header_date_time') }}</th>
														</tr>
														</thead>
														<tbody>
														<template v-for="track in report.tracking">
															<tr>
																<td>@{{track.action}}</td>
																<td>@{{track.first_name + ' ' + track.last_name}}</td>
																<td>@{{ track.date }}</td>
															</tr>
														</template>
														</tbody>
													</table>
												</template>



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

						<div class="modal-footer right-align">
							<a class="modal-action modal-close waves-effect waves-light btn-flat modal-cancel">{{ Lang::get('core.cancel') }}</a>
							<button class="modal-action waves-effect waves-light btn-flat modal-save">{{ Lang::get('core.save') }}</button>

						</div>
						{{ Form::close() }}
					</div>
					<div id="show-image-modal" class="modal modal-fixed-footer">
						<div class="modal-content">
							<img id="big-image" src="">
						</div>

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






<script>
    var pdfRoute = '{{URL::route('ReportCreatePdf')}}';
    var report_activate_link = "{{ URL::route('CommunalServicePostActivateReport') }}";
    var report_deactivate_link = "{{ URL::route('CommunalServicePostDeactivateReport') }}";
    var lang_activate_tooltip = "{{{ Lang::get('communalService.tooltip_button_activate') }}}";
    var lang_deactivate_tooltip = "{{{ Lang::get('communalService.tooltip_button_deactivate') }}}";
    var lang_activate_message = "{{{ Lang::get('communalService.report_activated') }}}";
    var lang_deactivate_message = "{{{ Lang::get('communalService.report_deactivated') }}}";
    var lang_activate_error = "{{{ Lang::get('communalService.report_activate_error') }}}";
    var lang_delegate_error = "{{{ Lang::get('communalService.msg_no_companies') }}}";
    var lang_delegate_set_error = "{{{ Lang::get('communalService.msg_error_delegating') }}}";
    var lang_delegate_set_success = "{{{ Lang::get('communalService.msg_success_delegating') }}}";
    var lang_confirm_delete_text = "{{ Lang::get('communalService.lang_confirm_delete_text') }}";
    var lang_tooltip_active = "{{ Lang::get('communalService.tooltop_indicator_active') }}";
    var lang_tooltip_inactive = "{{ Lang::get('communalService.tooltop_indicator_inactive') }}";

    var priorityLang = {
        'priority'				:	'Prioritet',
        'priority_undefined'	:	'Nedefiniran',
        'priority_urgent'		:	'Hitno',
        'priority_high'			:	'Visoko',
        'priority_medium'		:	'Srednje',
        'priority_low'			: 	'Nisko',
        'priority_all'			:	'Svi prioriteti',
	}
    var reportsList = {};
    var citiesList = {};

    var bigImage;
    var currentLink = '{{ URL::route('CommunalServiceUserReports', array('id' => $user->id)) }}';
    var delegationDataLink = '{{ URL::route('CommunalServicePostDelegationData') }}';
    var delegateLink = '{{ URL::route('CommunalServicePostDelegateReport') }}';

	@foreach ($reports as $report)
        reportsList[{{ $report->id }}] = { status: {{ $report->status_id }}, latitude: {{ $report->latitude }}, longitude: {{ $report->longitude }}, image: "{{ URL::to('/') . '/uploads/communalService/' . $report->image }}", thumb: "{{ URL::to('/') . '/uploads/communalService/thumbs/' . $report->image }}" };
	@endforeach

			@foreach ($cities as $city)
        citiesList[{{ $city->city_id }}] = { name: '{{ $city->city_name }}', latitude: '{{ $city->city_center_latitude }}', longitude: '{{ $city->city_center_longitude }}', radius: '{{ $city->city_radius_from_center }}', zipcode: '{{ $city->city_zip_code }}' };
	@endforeach

    var report= new Vue( {
            el:'#report',
            data:{report:{
                votes:null
            }},
            computed:{zerovotes:function () {
                return
            }},
            watch:{
                report:function () {
                    Materialize.updateTextFields();

                }
            },

        });
    function initializeMap(mapLatitude, mapLongitude) {
        var mapOptions = {
            zoom: 11,
            center: new google.maps.LatLng(mapLatitude, mapLongitude)
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        google.maps.event.trigger(map, 'resize');
    }
    function initMap() {
        // Get city data
        cityCenterLatitude = report.report.city_coords.lat;
        cityCenterLongitude = report.report.city_coords.lon;
        coordinates = $('#coordinates').val();

        // Initialize map
        initializeMap(cityCenterLatitude, cityCenterLongitude);

        // Create city marker image
        cityCenterImage = {
            url: rootPath + '/img/core/ch-city-center.png',
            size: new google.maps.Size(54, 72),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(13, 35),
            scaledSize: new google.maps.Size(27, 36),
        };

        // Create first city marker
        cityCenterMarker = new google.maps.Marker({
            position: new google.maps.LatLng(cityCenterLatitude, cityCenterLongitude),
            map: map,
            icon: cityCenterImage
        });

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(reportsList[report.report_id].latitude, reportsList[report.report_id].longitude),
            icon: rootPath + '/img/modules/communalService/ch-report-in-progress.png'
        });
		marker.setMap(map);
    }

	function changeSubtypes(type)
	{
	    console.log(report.report.types[type]);
	    if(type == 0)
			type = $("#type").val();
		var subtypes = '<option value="" disabled selected>{{ Lang::get('communalService.header_subtype_name') }}</option>';
		$.each(report.report.types[type].subtypes,function(index,value)
		{
		    if(index == report.report.subtype_id)
		    	subtypes += '<option selected value="'+index+'">'+value+'</option>';
		    else
                subtypes += '<option  value="'+index+'">'+value+'</option>';

        });
		$("#subtype").html(subtypes);
	};

    function manage(id){

        var url='https://'+window.location.hostname+'/communal-service/reports/edit/'+id;

        $.get(url).then(function(resp){

            if(!resp.report.votes>0) resp.report.votes='Nema';

            report.title=resp.title;
            report.report=resp.report;
            report.report_id = id;
            report.report.city = resp.reportCity.city_id;
            report.report.city_coords = {lat:resp.reportCity.city_center_latitude,lon:resp.reportCity.city_center_longitude};
            report.report.types = resp.typesGrid;
            report.report.pdfRoute = pdfRoute;
            $.each(resp.priorities,function(index,value)
			{
			     value.identifier = priorityLang[value.identifier];
			});

            report.report.priorities = resp.priorities;
			report.report.companies = resp.companies;
            report.report.answer_template = resp.templates;
            if(resp.tracking.length>0){
                resp.report.tracking=resp.tracking;
            }else{
                resp.report.tracking=null;
            }
            bigImage="https://"+window.location.hostname+"/uploads/communalService/"+resp.report.image;
            resp.report.image="background-image: url('https://"+window.location.hostname+"/uploads/communalService/"+resp.report.image+"')";


            $('#report-modal').modal('open');

            initMap();
            changeSubtypes(report.report.type_id);
        });
    }
    function delegate() {

        var companyID = $('#company').val();
        var priorityID = $('#priority').val();
        var noteContent = $('#delegate-note').val();

        var loadCityCompanies = $.ajax({
            url: delegateLink,
            dataType: 'json',
            data: {
                '_token': $('#token').val(),
                'report': report.report.id,
                'company': companyID,
                'priority': (priorityID=='all')?1:priorityID,
                'note': noteContent
            },
            type: 'post',
        }).done(function(data) {
            console.log('data', data);

            if (data.status == '1') {
                $('#doTheDelegate').attr('disabled', 'disabled');

                var n = noty({
                    text: lang_delegate_set_success,
                    type: 'success',
                    theme: 'cityhub',
                    layout: 'bottomRight',
                    animation: {
                        open: 'animated bounceInUp',
                        close: 'animated bounceOutDown',
                    }
                });

            } else {
                var n = noty({
                    text: lang_delegate_set_error,
                    type: 'error',
                    theme: 'cityhub',
                    layout: 'bottomRight',
                    animation: {
                        open: 'animated bounceInUp',
                        close: 'animated bounceOutDown',
                    }
                });
            }
            refreshReportData(report.report.id);
        }).fail(function(data) {
            var n = noty({
                text: lang_delegate_set_error,
                type: 'error',
                theme: 'cityhub',
                layout: 'bottomRight',
                animation: {
                    open: 'animated bounceInUp',
                    close: 'animated bounceOutDown',
                }
            });
        });

    }

    function showImage(){
        console.log(bigImage);


        $('#show-image-modal').modal('open');

        $('#big-image').prop('src', bigImage);


    }
    $('#show-image-modal').click(function(){
        $('#show-image-modal').modal('close');
    });




</script>