@extends('layouts.app')

@section('breadcrumb')
  <ul class="breadcrumb">
    <li><a href="/home">{!! trans('messages.home') !!}</a></li>
    @if ($menu == "officer_deployment")
      <li class="active">{!! trans('messages.officer_deployment') !!}</li>
    @else
      <li class="active">{!! trans('messages.supervisor').' '.trans('messages.dashboard') !!}</li>
    @endif
  </ul>
@stop

@section('css')
	<style>
		.site-header { border-bottom:0px; margin-bottom:0px; display:block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
	</style>
@stop

@section('content')

  <div class="row">
    <div class="col-md-12">
      <div class="box-info">
        <h2 style="display:flex; justify-content:space-between; align-items:center;">
          @if ($menu == "officer_deployment")
            <div><b>{!! trans('messages.officer').' '.trans('messages.deployment') !!}</b> {!! trans('messages.dashboard') !!}</div>
          @else
            <div><b>{!! trans('messages.attendance') !!}</b> {!! trans('messages.dashboard').' | '.showDate($deployment_date) !!}</div><div>Refresh Timer | <span id="timer"></span></div>
          @endif
        </h2>
        @if ($menu == "officer_deployment")
          <div class="row">
            <div class="col-md-12">
              {!! Form::label('deployment_date',trans('messages.deployment').' '.trans('messages.date'),[]) !!}
              {!! tooltip("Change this date to see the deployment on that day") !!}
            </div>
            <div class="col-md-2">
              <div class="form-group">
  							{!! Form::input('text','deployment_date',$deployment_date,['id'=>'deployment_date','class'=>'form-control datepicker','placeholder'=>trans('messages.deployment').' '.trans('messages.date')]) !!}
              </div>
            </div>
            <div class="col-md-10">
              {!! Form::button('<i class="fa fa-forward"></i> Go to Selected Date',['id'=>'m-filter','class'=>'btn btn-success pull-right','type'=>'submit','style'=>'margin-left:5px;','onclick'=>"dateChange();"]) !!}
              @if(Laratrust::isAbleTo('manage-officer-roster'))
                {!! Form::button('<i class="fa fa-sliders"></i> '.trans('messages.roster').' '.trans('messages.planner'),['id'=>'m-download','class'=>'btn btn-primary pull-right','type'=>'submit','onclick'=>"planRoster();"]) !!}
              @endif
            </div>
          </div>
        @else
          {{-- Display Google Map. Must have width and height --}}
  				<div style="width: 100%; height: 700px;" id="andy">
  					{!! Mapper::render() !!}
  				</div>
        @endif
      </div>
    </div>
  </div>

  @if ($menu == "officer_deployment")  {{-- Admin Dashboard --}}
    @foreach($area_locations as $area_location)
      @if ($area_location->child_locations->count() > 0)
        <div class="row">
          <div class="col-md-12">
            <div class="box-info full">
            <h2><b>{{$area_location->name}}</b></h2>
            @if(Laratrust::isAbleTo('manage-officer-roster'))
              <div class="additional-btn" style="padding-right:5px;">
                {!! Form::button('<i class="fa fa-sliders"></i> '.$area_location->name.' '.trans('messages.roster').' '.trans('messages.planner'),['id'=>'m-download','class'=>'btn btn-sm btn-primary pull-right','type'=>'submit','onclick'=>"planRoster($area_location->id);"]) !!}
              </div>
            @endif
            @foreach($area_location->child_locations as $key => $child_location)
              <div class="col-md-2">
                <div class="box-info full">
                  <a target="_blank" href="/officer-deployment/{{$child_location->id}}/detail?date={{$deployment_date}}&mode=admin" data-toggle="tooltip" title="{{$child_location->name}}">
                    <h2 class="site-header"><b>{{$child_location->name}}</b></h2>
                  </a>
                  <div class="table-responsive">
                    <table class="table table-striped show-table">
                      <tbody>
                        <tr>
                          <th><span class="label label-primary">{{ trans('messages.day').' '.trans('messages.shift').' '.pluralize(2,trans('messages.officer')) }}</div></th>
                          <td class="text-right">{{ $child_location->day_count }}</td>
                        </tr>
                        <tr>
                          <th><span class="label label-primary">{{ trans('messages.night').' '.trans('messages.shift').' '.pluralize(2,trans('messages.officer')) }}</span></th>
                          <td class="text-right">{{ $child_location->night_count }}</td>
                        </tr>
                        @if(Laratrust::isAbleTo('list-task'))
                          <tr>
                            <th><span class="label label-danger">{{ trans('messages.pending').' '.pluralize(2,trans('messages.task')) }}</span></th>
                            <td class="text-right">{{ $child_location->incident_count }}</td>
                          </tr>
                        @endif
                        @if(Laratrust::isAbleTo('list-ticket'))
                          <tr>
                            <th><span class="label label-success">{{ trans('messages.open').' '.pluralize(2,trans('messages.ticket')) }}</span></th>
                            <td class="text-right">{{ $child_location->ticket_count }}</td>
                          </tr>
                        @endif
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            @endforeach
            </div>
          </div>
        </div>
      @endif
    @endforeach
  @else  {{-- Supervisor Dashboard --}}
    @foreach($area_locations as $area_location)
      @if ($area_location->child_locations->count() > 0)
        <div class="row">
          <div class="col-md-12">
            <div class="box-info">
            <h2><b>{{$area_location->name}}</b></h2>
              @foreach($area_location->child_locations as $key => $child_location)
                <div class="col-md-2">
                  <div class="box-info full">
                    @if (Laratrust::isAbleTo('download-organization-charts'))
                      <a target="_blank" href="/officer-deployment/{{$child_location->id}}/detail?date={{$deployment_date}}&mode=dashboard" data-toggle="tooltip" title="{{$child_location->name}}">
                        <h2 class="site-header"><b>{{$child_location->name}}</b></h2>
                      </a>
                    @else
                      <h2 class="site-header"><b>{{$child_location->name}}</b></h2>
                    @endif
                    <div class="table-responsive">
                      <table class="table table-striped show-table">
                        <tbody>
                          <tr>
                            <th><span class="label label-primary">{{ trans('messages.day').' '.trans('messages.shift').' '.pluralize(2,trans('messages.officer')) }}</div></th>
                            <td class="text-right">{{ '['.$child_location->day_current_str.'/'.(!empty($child_location->manpower[$weekday]['day']) ? $child_location->manpower[$weekday]['day'] : 0).']' }}</td>
                          </tr>
                          <tr>
                            <th><span class="label label-primary">{{ trans('messages.night').' '.trans('messages.shift').' '.pluralize(2,trans('messages.officer')) }}</span></th>
                            <td class="text-right">{{ '['.$child_location->night_current_str.'/'.(!empty($child_location->manpower[$weekday]['night']) ? $child_location->manpower[$weekday]['night'] : 0).']' }}</td>
                          </tr>
                          <tr>
                            <th><span class="label label-info">{{ trans('messages.supervisor').' '.trans('messages.visited') }}</span></th>
                            <td class="text-right">{{ $child_location->sup_visit }}</td>
                          </tr>
                          <tr>
                            <th><span class="label label-info">{{ trans('messages.management').' '.trans('messages.visited') }}</span></th>
                            <td class="text-right">{{ $child_location->mgt_visit }}</td>
                          </tr>
                          @if(Laratrust::isAbleTo('list-route'))
                            <tr>
                              <th><span class="label label-success">{{ trans('messages.w_completed').' '.trans('messages.patrol') }}</span></th>
                              <td class="text-right">{{ $child_location->patrol_count }}</td>
                            </tr>
                          @endif
                          @if(Laratrust::isAbleTo('list-task'))
                            <tr>
                              <th><span class="label label-warning">{{ pluralize(2,trans('messages.task')).' '.trans('messages.pending') }}</span></th>
                              <td class="text-right">{{ $child_location->incident_count }}</td>
                            </tr>
                          @endif
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        </div>
      @endif
    @endforeach
  @endif

@stop

@section('js')
  <script>

    function planRoster(location_id) {
      var url;
      if (typeof location_id !== 'undefined')
        url = "/scheduler?id="+location_id;
      else
        url = "/scheduler";

      var win = window.open(url,'_blank');  // Open new tab
      win.focus();
    };

    function dateChange() {
      var date = document.getElementById("deployment_date").value;
      window.location.href = "{!! url('/officer-deployment?mode=admin&date=') !!}"+date;
    };

    var marker_array = [];
    function setMarker() {
      $.ajax({
         type:'GET',
         url:'/officer-deployment/setMarker',
         success:function(data) {
           data = JSON.parse(data);

           for (var i = 0; i < data.length; i++) {
             var marker = new google.maps.Marker({
               map: maps[0].map,
               position: { lat: parseFloat(data[i]["lat"]), lng: parseFloat(data[i]["lng"]) },
               icon: { url: data[i]["icon"] },
               content: data[i]["content"],
               maxWidth: data[i]["maxWidth"],
             });

             marker.setAnimation(google.maps.Animation[data[i]["animation"]]);

             google.maps.event.addListener(marker, 'click', function(){
               new google.maps.InfoWindow({
                 content: this.content,
                 maxWidth: this.maxWidth
               }).open(maps[0].map, this);
             });

             marker_array.push(marker);
           }

         }
      });
    };

    function removeMarker() {
      for (var i = 0; i < marker_array.length; i++) {
        marker_array[i].setMap(null);
      }
    };

    var menu = '{{$menu}}';
    if (menu == 'supervisor_dashboard') {
      setMarker();  // Set markers on page first load

      var distance = 60000;
      setInterval(function() {
        // Time calculations for minutes and seconds
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        var timer = document.getElementById("timer");
        if (timer)
          timer.innerHTML = minutes + "min " + seconds + "sec";

        // Reduce the distance
        distance = distance - 1000;

        if (distance < 0) {
          // re-pin the markers on the map and refresh the timer
          removeMarker();
          setMarker();
          distance = 60000;
        }
      }, 1000);
    }

  </script>
@stop