@extends("admin.template")

@section('content')
<h1 class="page-title">
  {{ucfirst($action)}} Ticket
</h1>

<div class="portlet light bordered" id="app">
  <div class="portlet-body form">

    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#tab-general" data-toggle="tab">
          Ticket </a>
        </li>
        <li>
          <a href="#tab-history" data-toggle="tab">History</a>
        </li>
      </ul>
      <div class="tab-content no-space">
        <div class="tab-pane fade active in" id="tab-general">
          <form action="" method="post" class="form-horizontal" id="form" enctype="multipart/form-data">
            {!! csrf_field() !!}
            <div class="form-body">
              <div class="form-group">
                <label class="control-label col-md-2 ticket-md-2">Title</label>
                <div class="col-md-10 form-control-static ticket-md-10">
                  {{ $ticket->title }}
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Ticket Code</label>
                    <div class="col-md-9 form-control-static">
                      {{ $ticket->ticket_code }}
                      @if($ticket->stat == TicketStat::Declined)
                      <button class="btn btn-sm btn-success" type="button" data-toggle="modal" data-target='#declineModal'><i class="fa fa-info-circle"></i> View Reason</button>
                      @endif
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Status</label>
                    <div class="col-md-9">
                      <div class="form-control-static">
                        {{ ViewHelper::ticketStatFrontend($ticket) }}
                        @if(in_array($ticket->stat, [TicketStat::Accepted, TicketStat::Declined]) && $ticket->accept_decline_reason)
                        - {{ $ticket->accept_decline_reason }}
                        @endif
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              @if($ticket->payment_method)
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Payment Method</label>
                    <label class="col-md-9 form-control-static">
                      {{ PaymentMethod::$values[$ticket->payment_method]}}
                    </label>
                  </div>
                </div>
                @if($ticket->ref_no)
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Ref No</label>
                    <label class="col-md-9 form-control-static">
                      {{ $ticket->ref_no }}
                    </label>
                  </div>
                </div>
                @endif
              </div>
              @endif
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Category</label>
                    <label class="col-md-9 form-control-static">
                      {{ $ticket->category_name }}
                    </label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Urgency</label>
                    <label class="col-md-9 form-control-static">
                      {{ \App\Models\Enums\TicketUrgency::$values[$ticket->urgency] }}
                    </label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Company</label>
                    <label class="col-md-9 form-control-static">
                      {{ $ticket->company_name }}
                    </label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Office</label>
                    <label class="col-md-9 form-control-static">
                      {{ $ticket->office_name }}
                    </label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Office Address</label>
                    <label class="col-md-9 form-control-static">
                      {{ $ticket->office_addr }}
                    </label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Office Postal</label>
                    <label class="col-md-9 form-control-static">
                      {{ $ticket->office_postal }}
                    </label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Requested By</label>
                    <label class="col-md-9 form-control-static">
                      {{ $ticket->requested_by }} on {{ ViewHelper::formatDateTime($ticket->requested_on) }}
                    </label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Contact</label>
                    <label class="col-md-9 form-control-static">
                      {{ $ticket->requester_mobile }}<br>
                    </label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Requester Description</label>
                    <label class="col-md-9 form-control-static">
                      {!! nl2br($ticket->requester_desc) !!}
                    </label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Agent Code</label>
                    <label class="col-md-9 form-control-static">
                      {{$ticket->agent_code}}
                    </label>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="control-label col-md-2 ticket-md-2">Remarks</label>
                <div class="col-md-10 ticket-md-10 form-control-static">
                  {!! $ticket->remarks !!}
                </div>
              </div>

              @if(Auth::user()->type == \App\Models\Enums\UserType::Operator)
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Quoted Price</label>
                    <label class="col-md-9 form-control-static">
                      @if($ticket->stat == TicketStat::Completed)

                      <div class="input-group">
                        <span class="input-group-addon">{{ ViewHelper::formatCurrency('') }}</span>
                        <input class="form-control" value="{{$ticket->quoted_price}}" name="quoted_price" type="number"  min="0" step="any">
                      </div>
                      @else
                      {{ ViewHelper::formatCurrency($ticket->quoted_price) }}
                      {{ Form::text('quoted_price', '', ['id'=>'txt-quoted-price', 'class'=>'form-control', 'style'=>'display:none']) }}

                      @endif
                    </label>
                  </div>
                </div>
                @if($ticket->stat != TicketStat::Completed)
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="control-label col-md-3">Quotation Description</label>
                    <label class="col-md-9 form-control-static">
                      {!!  $ticket->quotation_desc !!}
                    </label>
                  </div>
                </div>
                @endif
              </div>
              @if($ticket->stat == TicketStat::Completed)
              <div class="form-group">
                <label class="control-label col-md-2 ticket-md-2">Quotation Description</label>
                <div class="col-md-10 ticket-md-10">
                  {{Form::textarea('quotation_desc', $ticket->quotation_desc, ['class'=>'form-control', 'rows'=>5, 'maxlength'=>5000,'id'=>'quotation_desc'])}}
                </div>
              </div>
              @endif
              @endif

              <div class="form-group">
                <label class="control-label col-md-2 ticket-md-2">Issues</label>
                <div class="col-md-10 ticket-md-10">
                  <table class="table table-bordered no-margin-btm table-responsive">
                    <thead>
                      <tr>
                        <th width="33%">Image / Video</th>
                        <th width="33%">Issue</th>
                        <th width="33%">Expected Outcome</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($ticket->issues as $issue)
                      <tr>
                        <td>
                          <img src="{{asset('assets/images/tickets/'.$issue->image)}}" class="ticket-image" style="max-width:100%"/>
                        </td>
                        <td>
                          {{ $issue->issue_desc }}
                        </td>
                        <td>
                          {{ $issue->expected_desc }}
                        </td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>

              <!--TODO-->
              @if(Auth::user()->type == \App\Models\Enums\UserType::Operator)
              <div class="form-group">
                <label class="control-label col-md-2 ticket-md-2">Preferred Slots</label>
                <div class="col-md-10 ticket-md-10">
                  <table class="table table-bordered no-margin-btm table-responsive">
                    <thead>
                      <tr>
                        <th width="50%">Date</th>
                        <th width="50%">Time</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($ticket->preferred_slots as $slot)
                      <tr>
                        <td>
                          {{ ViewHelper::formatDate($slot->date)}}
                        </td>
                        <td>
                          {{ ViewHelper::formatTime($slot->time_start) }} to {{ ViewHelper::formatTime($slot->time_end) }}
                        </td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
              @endif

              @if(Auth::user()->type == \App\Models\Enums\UserType::Operator)
              <div class="form-group">
                <label class="control-label col-md-2 ticket-md-2">Attachments</label>
                <div class="col-md-10 ticket-md-10">
                  <table class="table table-bordered no-margin-btm table-responsive">
                    <thead>
                      <tr>
                        <th width="50%">File Attachment</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($ticket->attachments as $a)
                      <tr>
                        <td>
                         <a href="{{url('assets/attachment/tickets').'/'.$a->filename}}">Attachment {{$a->filename}}</a>
                       </td>
                     </tr>
                     @endforeach
                   </tbody>
                 </table>
               </div>
             </div>
             @endif
             @if($ticket->stat == TicketStat::PendingStaffAssignment)
             <div class="form-group">
              <label class="control-label col-md-2 ticket-md-2">Skills</label>
              <div class="col-md-10 ticket-md-10">
                <div class="mt-checkbox-inline">
                  @foreach($skills as $skill_id => $name)
                  <label class="mt-checkbox mt-checkbox-outline">
                                        <input type="checkbox" value="{{$skill_id}}" id="skills" name="skills[]" {{$checked}}> {{ $name }}
                    <span></span>
                  </label>
                  @endforeach
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-2 ticket-md-2">Staffs</label>
              <div class="col-md-10 ticket-md-10">
                <select id="staffs" class="form-control select2-multiple" multiple="multiple">
                </select>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-2 ticket-md-2">Date</label>
              <div class="col-md-10 ticket-md-10">
                <div class="input-group" style="max-width:300px">
                  <span class="input-group-btn">
                    <button class="btn red" type="button" @click="previousDate">Previous</button>
                  </span>
                  <input type="text" id="date" name="date" v-model="currentDateFormatted" class="form-control datepicker datepicker-width"  onchange="vm.changeDate()">
                  <span class="input-group-btn">
                    <button class="btn red" type="button" @click="nextDate">Next</button>
                  </span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="" class="control-label col-md-2 ticket-md-2">Calendar</label>
              <div class="col-md-10 ticket-md-10">
                <input type='hidden' name="staff_assignments" id="staff_assignments" value="{{ json_encode($ticket->staff_assignments) }}"/>
                <div id="div-calendar"></div>
              </div>
            </div>
            @endif
            @if(ViewHelper::ticketShowStaffAssignments($ticket->stat) )
            <div class="form-group">
              <label class="control-label col-md-2 ticket-md-2">Staff Assignments</label>
              <div class="col-md-10 ticket-md-10">
                <table class="table table-bordered no-margin-btm table-responsive">
                  <thead>
                    <tr>
                      <th width="33%">Date</th>
                      <th width="33%">Staff</th>
                      <th width="33%">Time</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach(ViewHelper::mergeStaffAssignment($ticket->staff_assignments) as $date => $assignments)
                    @foreach($assignments as $a)
                    <tr>
                      <td>{{ ViewHelper::formatDate($date) }}</td>
                      <td>{{ $a->staff_name }}</td>
                      <td>{{ ViewHelper::formatTime($a->time_start) }} to {{ ViewHelper::formatTime($a->time_end) }}</td>
                    </tr>
                    @endforeach
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
              @if($ticket->stat === TicketStat::ServiceSchedule)
                <div class="form-group">
                  <label class="control-label col-md-2 ticket-md-2"></label>
                  <div class="col-md-10 ticket-md-10">
                    <input type="submit" name='submit' value="Change Slot" class="btn btn-sm btn-success">
                  </div>
                </div>
              @endif
            @endif
            @if(ViewHelper::ticketShowOtps($ticket->stat))
            <div class="form-group">
              <label class="control-label col-md-2 ticket-md-2">One time passwords</label>
              <div class="col-md-10 ticket-md-10">
                <table class="table table-bordered no-margin-btm table-responsive">
                  <tbody>
                    <tr>
                      <th width="120px">First OTP</th>
                      <td width="150px">{{ $ticket->otps->first_otp }}</td>
                      <td>
                        @if ($ticket->otps->manual_complete)
                        Manual complete
                        @elseif($ticket->otps->first_entered_on)
                        Entered by {{ $ticket->otps->first_entered_by }} on {{ ViewHelper::formatDateTime($ticket->otps->first_entered_on) }}
                        @else
                        Provide First OTP to repairman <b><u>upon arrival</u></b>. This helps us keep track of attendance and punctuality of our repairman
                        @endif
                      </tr>
                      <tr>
                        <th>Second OTP</th>
                        <td>{{ $ticket->otps->second_otp }}</td>
                        <td>
                          @if ($ticket->otps->manual_complete)
                          Manual complete
                          @elseif ($ticket->otps->second_entered_on)
                          Entered by {{ $ticket->otps->second_entered_by }} on {{ ViewHelper::formatDateTime($ticket->otps->second_entered_on) }}
                          @else
                          Provide Second OTP upon the <b><u>completion</u></b> of the job. DO NOT give OTP to repairman if job is incomplete
                          @endif
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              @endif
            </div>

            <div class="form-actions">
              <div class="row">
                <div class="col-md-9">
                  <div class="row">
                    <div class="col-md-offset-2 col-md-12">
                      <div>
                        @if($ticket->stat == TicketStat::Quoted && ViewHelper::hasAccess('ticket_respond'))
                        <div>
                          <textarea name="accept_decline_reason" title="" class="form-control textarea-ticket-submit" placeholder="[Optional] Please share with us the reason for accepting or declining">
                          </textarea>
                        </div>

                        <div>
                          <button type="submit" name="submit" class="btn blue" value="Accept">
                            Accept
                          </button>
                          <button type="submit" name="submit" class="btn blue" value="Decline">
                            Decline
                          </button>
                        </div>
                        @elseif($ticket->stat == TicketStat::ServiceSchedule ||$ticket->stat == TicketStat::Accepted && ViewHelper::hasAccess('ticket_complete'))
                        <div><button type="submit" name="submit" class="btn blue" value="Complete">
                          Complete
                        </button></div>
                        @elseif($ticket->stat == TicketStat::Completed && ViewHelper::hasAccess('ticket_invoice'))
                        <div><button type="button" class="btn blue" value="Send Invoice" data-toggle="modal" data-target="#CcMailModal">
                          Send Invoice
                        </button></div>
                        @elseif($ticket->stat == TicketStat::Invoiced && ViewHelper::hasAccess('ticket_pay'))
                        <div class="mt-radio-list">
                          @foreach($payment_methods as $payment_method)
                          <label class="mt-radio mt-radio-outline">
                            <input type="radio" name="payment_method" value="{{$payment_method->value}}" @click="selectPaymentMethod('{{$payment_method->value}}')"> {{$payment_method->name}}
                            <span></span>
                          </label>
                          @endforeach
                          <input type="text" name="ref_no" v-show="showRefNo" class="form-control" placeholder="Ref No">
                        </div>
                        <br>
                        <div><button type="submit" name="submit" class="btn blue" value="Paid">
                          Paid
                        </button></div>
                        @elseif($ticket->stat == TicketStat::PendingStaffAssignment)
                        <div><button type="submit" name="submit" class="btn blue" value="service schedule">
                          Service Scheduled
                        </button></div>
                        @elseif($ticket->stat == TicketStat::PaymentSubmited && ViewHelper::hasAccess('ticket_pay'))

                          <div><button type="submit" name="submit" class="btn blue" value="paid">
                              Paid
                            </button></div>
                        @endif
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6"> </div>
              </div>
            </div>

            @if($ticket->stat == TicketStat::Completed && ViewHelper::hasAccess('ticket_invoice'))
            <!-- Modal -->
              <div class="modal fade" id="CcMailModal" tabindex="-1" role="dialog" aria-labelledby="CcMailModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="CcMailModalLabel">Email Configuration!</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p>
                        CC : (Please use comma for multiple emails)
                      </p>
                      {{Form::text("email_cc","", ['class'=>'form-control'])}}
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                      <input type="submit"  name="submit" class="btn btn-primary" @click='sendQuotation' value="Send Invoice"></input>
                    </div>
                  </div>
                </div>
              </div>
            @endif
          </form>
        </div>
        <div class="tab-pane fade" id="tab-history">
          @include('admin.ticket.history', ['ticket'=>$ticket])
        </div>

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

@if($ticket->stat == TicketStat::Declined)
<!-- Modal -->

<form method="POST">
{!! csrf_field() !!}
<div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="declineModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="declineModalLabel">Decline reason</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {!!empty($ticket->accept_decline_reason)?'<i>No reason</i>':$ticket->accept_decline_reason!!}
        </div>
        <div class="modal-footer">
          <input type="submit" name="submit" class="btn btn-success" value="Send Quotation Back">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
        </div>
      </div>
    </div>
  </div>
</form>

@endif
@endsection

@section('css')

<link href="{{asset('assets/css/jquery-bootstrap-datepicker.css')}}" rel="stylesheet" type="text/css" />
<script src="https://cdn.ckeditor.com/4.10.0/full/ckeditor.js"></script>
<style>
.ck-editor__editable{
  min-height: 200px;
}
</style>
@endsection

@section('script')
<script src="{{asset('assets/js/ticket.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/jquery-ui.js')}}"></script>

<script>
  $(document).ready(function(){
    $("#btn-adjust").click(function() {
      $("#txt-quoted-price").show();
    });

    var setupCKEDITOR = function(id){
      var editor = CKEDITOR.replace(id);
      editor.on('change',function(){
        $('textarea#'+id).html(editor.getData());
        if($('#form').valid()){
          $("#form-user-edit .error").removeClass('error');
        }
      })
    }

    $("#staffs").select2({
      allowClear: true,
      placeholder: "Select"
    }).on('select2:unselecting', function() {
            //unselect prevent open dropdown
            //http://stackoverflow.com/questions/29618382/disable-dropdown-opening-on-select2-clear
            $(this).data('unselecting', true);
          }).on('select2:opening', function(e) {
            if ($(this).data('unselecting')) {
              $(this).removeData('unselecting');
              e.preventDefault();
            }
          }).on("select2:select select2:unselect", function(e) {
            getValuesAndPopulateCalendar();
          });


          $("input[name='skills[]']").click(function() {
            populateStaffsAndCalendar();
          });

          $("#date").on('changeDate', function() {
            getValuesAndPopulateCalendar();
          });

          populateStaffsAndCalendar();
          @if($ticket->stat == TicketStat::Completed)
          setupCKEDITOR('quotation_desc');
          @endif

        });
  var selected_cells = {!! json_encode($ticket->staff_assignments) !!};

  function selectSlot(cell) {
    if ($(cell).hasClass('calendar-assigned-other-ticket')) {
      return;
    }

    var date = $(cell).attr('data-date');
    var time = $(cell).attr('data-time');
    var staff_id = $(cell).attr('data-staff_id');
        //console.log('date=' + date + ' time=' + time + ' staff_id=' + staff_id);
        if ($(cell).hasClass('calendar-assigned-current-ticket')) {
          removeFromCalendarObject(selected_cells, staff_id, date, time);
          $(cell).removeClass('calendar-assigned-current-ticket');
          $(cell).addClass('calendar-assigned-remove');
        } else if ($(cell).hasClass('calendar-assigned-remove')) {
          pushToCalendarObject(selected_cells, staff_id, date, time);
          $(cell).removeClass('calendar-assigned-remove');
          $(cell).addClass('calendar-assigned-current-ticket');
        } else if ($(cell).hasClass('calendar-selected')) {
          removeFromCalendarObject(selected_cells, staff_id, date, time);
          $(cell).removeClass('calendar-selected');
        } else {
          pushToCalendarObject(selected_cells, staff_id, date, time);
          $(cell).addClass('calendar-selected');
        }

        $("#staff_assignments").val(JSON.stringify(selected_cells));
      }

      function populateStaffsAndCalendar() {
        var skill_ids = getSelectedCheckboxesByName('skills[]');

        axios.get('{{url('api/getStaffWithSkills')}}?skill_ids='+skill_ids)
        .then(function (response) {
                //change select2 options
                //https://github.com/select2/select2/issues/2830
                var staffs = response.data;

                var $select = $('#staffs');
                var options = $select.data('select2').options;
                $select.html('');

                var res = [];
                for (var i = 0; i < staffs.length; i++) {
                  res.push({
                    "id": staffs[i].staff_id,
                    "text": staffs[i].name
                  });
                  $select.append('<option value=' + staffs[i].staff_id + ' selected>' + staffs[i].name + '</option>');
                }
                options.data = res;
                $select.select2(options);

                getValuesAndPopulateCalendar();
              })
        .catch(function (error) {
          console.log('populateStaffWithSkills error='+error);
        })
      }

      function getValuesAndPopulateCalendar() {
        var staff_ids = getSelectedMultiSelect2ById('staffs');
        if(staff_ids.length == 0) {
          return;
        }

        var date = moment($('#date').val()).format('YYYY-MM-DD');
        
        if (staffs.length === 0) {
          toastr.error('Select skills and staffs first');
        }

        axios.get('{{url('api/getStaffCalendar')}}?staff_ids='+staff_ids+'&date='+date)
        .then(function (response) {
          if (response.data.is_date_blocked === true) {
            $('#div-calendar').html("<div class='alert alert-info no-margin-btm'>Blocked</div>");
            return;
          }
          if (response.data.is_non_working_day === true) {
            $('#div-calendar').html("<div class='alert alert-info no-margin-btm'>Non working day</div>");
            return;
          }

          var html = '<table class="table table-bordered no-margin-btm"><thead><tr><th width="70px"></th>';

          var staffs = response.data.staffs;
          for (var staff_id in staffs) {
            if (staffs.hasOwnProperty(staff_id)) {
              html += "<th>" + staffs[staff_id].name + "</th>";
            }
          }
          html+= "</tr><tbody>";

          var cells = response.data.cells;
          var intervals = response.data.intervals;
          var current_ticket_id = {{ $ticket->ticket_id > 0 ? $ticket->ticket_id : 0 }};

          for(var j = 0; j<intervals.length; j++) {
            var time = intervals[j];
            html += "<tr><td>"+time+"</td>";

            var cols = cells[time];
            for (var staff_id in cols) {
              if (cols.hasOwnProperty(staff_id)) {
                var text = cols[staff_id].ticket_code;

                var ticket_id = cols[staff_id].ticket_id;
                var background = "calendar-empty";
                if (current_ticket_id === ticket_id) {
                  background = "calendar-assigned-current-ticket";
                } else if (text !== "") {
                  background = "calendar-assigned-other-ticket";
                } else if (typeof selected_cells[staff_id] !== "undefined" && typeof selected_cells[staff_id][date] !== "undefined"){
                  if (arrayContains(selected_cells[staff_id][date], time) === true) {
                    background = "calendar-selected";
                  }
                }

                if (current_ticket_id !== ticket_id && text !== "") {
                  text = "<a href='{{url('admin/ticket/save/')}}/"+ticket_id+"'>"+text+"</a>";
                } else if (text == "") {
                  text = staffs[staff_id].name
                }

                html += "<td onclick='selectSlot(this)' class='"+background+"' data-date='"+date+"' data-time='"+time+"' data-staff_id='"+staffs[staff_id].staff_id+"'>"+text+"</td>";
              }
            }
          }
          $('#div-calendar').html(html);
        })
        .catch(function (error) {
          console.log('populateCalendar error='+JSON.stringify(error));
        })
      }
      function pushToCalendarObject(obj, staff_id, date, time) {
        if (typeof obj[staff_id] === "undefined") {
          obj[staff_id] = {};
        }

        if(typeof obj[staff_id][date] === "undefined") {
          obj[staff_id][date] = [];
        }

        var exist = arrayContains(obj[staff_id][date], time);
        if (! exist) {
          obj[staff_id][date].push(time);
        }
      }

      function removeFromCalendarObject(obj, staff_id, date, time) {
        if (typeof obj[staff_id] === "undefined") {
          return;
        }

        if(typeof obj[staff_id][date] === "undefined") {
          return;
        }

        for(var i=0; i<obj[staff_id][date].length; i++) {
          if (obj[staff_id][date][i] === time) {
            obj[staff_id][date].splice(i, 1);
          }
        }
      }
      var vm = new Vue({
        el: "#app",
        data: {
          showRefNo: false,
          currentDate: moment(),
          currentDateFormatted: moment().format('DD MMM YYYY'),
        },
        methods: {
          selectPaymentMethod: function(pm) {
            this.showRefNo = pm == 'B' || pm == 'Q';
          },
          previousDate: function() {
            this.currentDate = this.currentDate.add(-1, "days");
            this.currentDateFormatted = this.currentDate.format('DD MMM YYYY');
            $('#date').datepicker("setDate", this.currentDate.startOf('day').toDate());
            populateStaffsAndCalendar();

          },
          nextDate: function() {
            this.currentDate = this.currentDate.add(1, "days");
            this.currentDateFormatted = this.currentDate.format('DD MMM YYYY');
            $('#date').datepicker("setDate", this.currentDate.startOf('day').toDate());
            populateStaffsAndCalendar();
          },
          changeDate:function(){
            populateStaffsAndCalendar();
          }
        },
      });
    </script>
    @endsection