@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>
          @if($action == 'update')
          <li>
            <a href="#tab-history" data-toggle="tab">History</a>
          </li>
          @endif
        </ul>
        <div class="tab-content no-space">
          <div class="tab-pane fade active in" id="tab-general">
            <form action="" method="post" id="form-ticket" v-on:submit.prevent="submitForm" class="form-horizontal" enctype="multipart/form-data">
              {!! csrf_field() !!}
              <input type="hidden" name="delete" id="delete">
              <input type="hidden" v-model="submit_action" name="submit_action">

              <div class="form-body">
                <div class="form-group">
                  <label class="control-label col-md-2 ticket-md-2">Title <span class="required">*</span></label>
                  <div class="col-md-10 ticket-md-10">
                    {{Form::text('title', $ticket->title, ['class'=>'form-control'])}}
                  </div>
                </div>
                @if($action !== 'create')
                  <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">
                          <div class="form-control-static">
                            {{ $ticket->ticket_code }}
                          </div>
                        </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">
                            {{ TicketStat::$values[$ticket->stat] }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                @endif

                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-3">Category <span class="required">*</span></label>
                      <div class="col-md-9">
                        {{Form::select('category_id', $categories, $ticket->category_id, ['class'=>'form-control', 'placeholder'=>''])}}
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-3">Urgency <span class="required">*</span></label>
                      <div class="col-md-9">
                        {{Form::select('urgency', TicketUrgency::$values, $ticket->urgency, ['id'=>'requester_id', 'class'=>'form-control', 'placeholder'=>''])}}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-3">Company <span class="required">*</span></label>
                      <div class="col-md-9">
                        {{Form::select('company_id', $companies, $ticket->company_id, ['id'=>'company_id', 'class'=>'form-control', 'placeholder'=>''])}}
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-3">Office <span class="required">*</span></label>
                      <div class="col-md-9">
                        @if($action != 'create')
                        {{Form::select('office_id', $offices, $ticket->office_id, ['id'=>'office_id', 'class'=>'form-control', 'placeholder'=>''])}}
                          @else
                          {{Form::select('office_id',[],'', ['id'=>'office_id', 'class'=>'form-control', 'placeholder'=>''])}}
                        @endif
                      </div>
                    </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>
                      <div class="col-md-9 form-control-static">
                        <div id="office_addr">{{ $ticket->office_addr }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-3">Office Postal</label>
                      <div class="col-md-9 form-control-static">
                        <div id="office_postal">{{ $ticket->office_postal }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-3">Requested By <span class="required">*</span></label>
                      <div class="col-md-9">
                        @if($action != 'create')
                        {{Form::select('requested_by', $requesters, $ticket->requested_by, ['id'=>'requested_by', 'class'=>'form-control', 'placeholder'=>''])}}
                        @else
                          {{Form::select('requested_by', [], '', ['id'=>'requested_by', 'class'=>'form-control', 'placeholder'=>''])}}
                        @endif
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-3">Requested On <span class="required">*</span></label>
                      <div class="col-md-9">
                        {{Form::text('requested_on', ViewHelper::formatDate($ticket->requested_on != ''?$ticket->requested_on:date('d M Y')), ['class'=>'form-control datepicker', 'placeholder'=>''])}}
                      </div>
                    </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>
                      <div class="col-md-9">
                        {{Form::textarea('requester_desc', $ticket->requester_desc, ['class'=>'form-control', 'rows'=>3])}}
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label col-md-3">Agent Code</label>
                        <div class="col-md-9 form-control-static">
                            @if($action == 'create')
                                {{Form::select('agent_code', $agent_codes, '', ['class'=>'form-control', 'placeholder'=>''])}}
                            @else
                                {{$ticket->agent_code }}
                                <input type="hidden" name="agent_code" value="{{$ticket->agent_code}}">
                            @endif
                        </div>
                    </div>
                  </div>
                </div>


                {{--START Hide ticket on first time--}}
                @if($action != 'create' && $ticket->stat != TicketStat::Drafted)
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-3">Quoted Price <span class="required">*</span></label>
                      <div class="col-md-9">
                        {{Form::text('quoted_price', ViewHelper::formatNumber($ticket->quoted_price) == '0' ? '':ViewHelper::formatNumber($ticket->quoted_price), ['class'=>'form-control allow_decimal', 'step'=>".01" ])}}
                      </div>
                    </div>
                  </div>
                </div>
                <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>

                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-3">Quotation No. <span class="required">*</span></label>
                      <div class="col-md-9">{{Form::text('quotation_no',$ticket->quotation_no,['class'=>'form-control'])}}</div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-3">Sales Person <span class="required">*</span></label>
                      <div class="col-md-9">
                        {{Form::text('sales_person',$ticket->sales_person,['class'=>'form-control'])}}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="control-label col-md-3">Contact No. <span class="required">*</span></label>
                        <div class="col-md-9">{{Form::text('contact_no',$ticket->contact_no,['class'=>'form-control'])}}</div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="control-label col-md-3">Date <span class="required">*</span></label>
                        <div class="col-md-9">
                          {{Form::text('quotation_date',$ticket->quotation_date,['class'=>'form-control'])}}
                        </div>
                      </div>
                    </div>
                  </div>
                <div class="form-group">
                    <label class="control-label col-md-2 ticket-md-2">Terms of Payment <span class="required">*</span></label>
                    <div class="col-md-10 ticket-md-10">
                      {{Form::textarea('terms_of_payment', $ticket->terms_of_payment, ['class'=>'form-control', 'rows'=>5, 'maxlength'=>5000,'id'=>'terms_of_payment'])}}
                    </div>
                  </div>

                @endif
                {{--END Hide ticket on first time--}}

              @if ($ticket->stat == TicketStat::Quoted)
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="control-label col-md-3">Quote Valid Till</label>
                        <div class="col-md-9">
                          <div class="form-control-static">
                            {{ ViewHelper::formatDate($ticket->quote_valid_till) }} (inclusive)
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">

                    </div>
                  </div>
                @endif

                @if($ticket->stat == TicketStat::Declined)
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="control-label col-md-3">Decline Reason</label>
                        <div class="col-md-9">
                          {{Form::text('decline_reason', ViewHelper::formatNumber($ticket->decline_reason), ['class'=>'form-control'])}}
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                    </div>
                  </div>
                @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">
                    <input type="hidden" name="issues_count" v-bind:value="issues.filter(a => a.stat == undefined || a.stat == 'add').length">

                    <table class="table table-bordered no-margin-btm">
                      <thead>
                      <tr>
                        <th style="min-width:53px"></th>
                        <th width="32%">
                          Image / Video<br>
                          <small>Supported image formats: png, jpg, gif, video formats: wmv, avi, flv, mp4, mov, Supported document formats: pdf</small>
                        </th>
                        <th width="32%">Issue</th>
                        <th width="32%">Expected Outcome</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="(issue, index) in issues" v-bind:class="'row-'+issue.stat">
                        <td>
                          <template v-if="issues.filter(a => a.stat == undefined || a.stat == 'add').length > 1">
                          <button type="button" class="btn btn-primary" @click="deleteIssue(index)">
                            <i class="fa fa-times"></i>
                          </button>
                          </template>
                          <input type="hidden" v-bind:name="'issue_stat'+index" v-bind:value="issue.stat" v-if="issue.stat">
                          <input type="hidden" v-bind:name="'issue_id'+index" v-bind:value="issue.ticket_issue_id">
                        </td>
                        <td>
                          <div v-bind:id="'preview-image' + index">
                            <img v-if="isImage(issue.image)" :src="'{{asset('assets/images/tickets')}}/'+ issue.image" v-if="issue.image" class="ticket-image"/>
                            <video v-else-if="isVideo(issue.image)" width="320" height="240" controls>
                              <source :src="'{{asset('assets/images/tickets')}}/'+ issue.image">
                              Your browser does not support the video tag.
                            </video>
                            <a target="_blank"  v-if="isPdf(issue.image)" :href="'{{asset('assets/images/tickets')}}/'+ issue.image" v-if="issue.image" class="btn btn-warning"><i class="fa fa-file-pdf-o"></i> @{{issue.image}}</a>
                          <br>
                          </div>
                          <input type="file" v-bind:name="'image' + index" v-on:change="previewImage(index,$event)">
                        </td>
                        <td>
                          <textarea v-bind:name="'issue' + index" class="form-control" placeholder="Issue">@{{ issue.issue_desc }}</textarea>
                        </td>
                        <td>
                          <textarea v-bind:name="'expected' + index"  class="form-control" placeholder="Expected Outcome">@{{ issue.expected_desc }}</textarea>
                        </td>
                      </tr>
                      </tbody>
                      <tfoot>
                      <tr>
                        <td colspan="4">
                          <div class="text-center">
                            <button type="button" class="btn blue" @click='addIssue'>Add</button>
                          </div>
                        </td>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>

                <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">
                  <input type="hidden" name="preferred_slots_count" value="{{count($ticket->preferred_slots)}}">

                    <table class="table table-bordered no-margin-btm" id="preferred_slot">
                      <thead>
                      <tr>
                          <th style="min-width:53px"></th>
                          <th width="33%">Date</th>
                          <th width="33%">Start Time</th>
                          <th width="33%">End Time</th>
                      </tr>
                      </thead>
                      <tbody>
                        @foreach($ticket->preferred_slots as $index => $slot)
                        <tr aria-index="{{$index}}">
                          <td>
                            @if(count($ticket->preferred_slots) !=1)
                            <button type="button" class="btn btn-primary btn-delete-preferred_slot_date">
                                <i class="fa fa-times"></i>
                            </button>
                            @endif
                          </td>
                          <td>
                              <date-picker name="preferred_slot_date{{$index}}" value="{{$slot->date}}"></date-picker>
                          </td>
                          <td>
                              <input name="preferred_slot_time_start{{$index}}" class="form-control timepicker start_time"  value="{{$slot->time_start}}">
                          </td>
                          <td>
                              <input name="preferred_slot_time_end{{$index}}" class="form-control timepicker end_time"  value="{{$slot->time_end}}">
                          </td>
                        </tr>
                        @endforeach

                      </tbody>
                      <tfoot>
                      <tr>
                        <td colspan="4">
                          <div class="text-center">
                            <button type="button" onclick="addPreferredSlot()" id="btn-add-preferredslot" class="btn btn-primary">Add</button>
                          </div>
                        </td>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>


                <div class="form-group">
                  <label class="control-label col-md-2 ticket-md-2">Attachments</label>
                  <div class="col-md-10 ticket-md-10">
                      <input type="hidden" name="attachment_count" value="{{count($ticket->attachments)}}">

                      <table class="table table-bordered no-margin-btm" id="attachment">
                        <thead>
                        <tr>
                            <th style="min-width:53px"></th>
                            <th width="97%">Supported document formats: xls,pdf,doc,docs</th>
                        </tr>
                        </thead>
                        <tbody>
                          @foreach($ticket->attachments as $index=>$a)
                          <tr>
                            <td>
                                <button type="button" class="btn btn-primary btn-delete-attachment">
                                    <i class="fa fa-times"></i>
                                </button>
                            </td>
                            <td>
                              @if(!empty($a->filename))
                            <a href="{{url('assets/attachment/tickets').'/'.$a->filename}}">Attachment {{$a->filename}}</a>
                                <input type="hidden" name="attachment_{{$index}}">
                            <input type="hidden" name="keep_attachment_{{$index}}" value="{{$a->id}}">
                              @else
                                <input type="file" name="attachment_{{$index}}">
                              @endif
                            </td>
                          </tr>
                          @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                              <td colspan="4">
                                <div class="text-center">
                                  <button type="button" onclick="addAttachment()" class="btn btn-primary">Add</button>
                                </div>
                              </td>
                            </tr>
                        </tfoot>
                      </table>

                  </div>
                </div>
                {{--Hide ticket on first time--}}
                @if($action != 'create' && $ticket->stat != TicketStat::Drafted && $ticket->stat != TicketStat::Opened)
                <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">
                      <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
              </div>
            <div class="form-group">
                <label class="control-label col-md-2 ticket-md-2">Remarks <span class="required">*</span></label>
                <div class="col-md-10 ticket-md-10">
                    {{Form::textarea('remarks', $ticket->remarks, ['class'=>'form-control', 'rows'=>5, 'maxlength'=>5000,'id'=>'remarks'])}}
                </div>
            </div>
              <div class="form-actions">
                <div class="row">
                  <div class="col-md-offset-2 col-md-10">
                    @if($ticket->stat == null)
                      <input type="submit" @click='draftTicket' value="Draft Ticket" class="btn blue">
                    @elseif($ticket->stat == TicketStat::Drafted)
                      <input type="submit" @click='updateTicket' value="Update Ticket" class="btn blue">
                      <input type="submit" @click='openTicket' value="Open Ticket" class="btn blue">
                      <input type="button" value="Delete Ticket" class="btn red confirmation" data-toggle='confirmation'>
                    @elseif($ticket->stat == TicketStat::Opened)
                      <input type="submit" @click='updateTicket' value="Update Ticket" class="btn blue">
                      <input type="button"  value="Send Quotation" class="btn green" data-toggle="modal" data-target="#CcMailModal">
                      <input type="button" value="Delete Ticket" class="btn red confirmation" data-toggle='confirmation'>
                    @endif

                    @if($ticket->stat == TicketStat::Quoted)
                      <div class="alert alert-info">
                        Quotation has been sent. Waiting for customer's response.
                      </div>
                    @endif
                  </div>
                </div>
              </div>
              @if($ticket->stat == TicketStat::Opened)
              <!-- 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" class="btn btn-primary" @click='sendQuotation' value="Send Quotation"></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>



@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>
  <link rel="stylesheet" href="{{asset('assets/css/jquery.timepicker.min.css')}}"/>
  <script src="{{asset('assets/js/jquery.timepicker.min.js')}}"></script>

  <!-- BEGIN VALIDATION PLUGINS -->
  <script src="{{asset('assets/metronic/global/plugins/jquery-validation/'.'jquery.validate.min.js')}}"></script>
  <script src="{{asset('assets/metronic/global/plugins/jquery-validation/'.'additional-methods.min.js')}}"></script>
  <!-- END VALIDATION PLUGINS -->

  <script>
    window.form_valid = false;
    function addAttachment(){
      count = $('input[name=attachment_count]').val();
        count++;
        $('input[name=attachment_count]').val(count);
        $('#attachment').find('tbody')
          .append($('<tr>')
            .append($('<td>'))
            .append($('<td>').append('<input type="file" name="attachment_'+(count-1)+'">'))
        );
        updateAttachmentRow();
    }

    function updateAttachmentRow(){
      count = $('input[name=attachment_count]').val();
      tr = $('#attachment').find('tbody').children();
        for(i=0;i<tr.length;i++){
          $(tr[i].children[0]).html('<button  type="button" class="btn btn-primary btn-delete-attachment"><span class="fa">&#xf00d;</span></button');
        }

    }
    function addPreferredSlot(){
      count = $('input[name=preferred_slots_count]').val();
      if(count < 2){
        count++;
        $('input[name=preferred_slots_count]').val(count);
        $('#preferred_slot').find('tbody')
          .append($('<tr>')
            .append($('<td>'))
            .append($('<td>').append('<input type="text" name="preferred_slot_date'+(count-1)+'" class="form-control datepicker" aria-invalid="false">'))
            .append($('<td>').append('<input text="text" name="preferred_slot_time_start'+(count-1)+'" class="form-control timepicker start_time">'))
            .append($('<td>').append('<input text="text" name="preferred_slot_time_end'+(count-1)+'" class="form-control timepicker end_time">'))
        );
        setTimepicker(count-1);
        $(".datepicker").datepicker({
          dateFormat: "dd M yy",
          minDate: 0
        });
        $('input[name=preferred_slot_date'+(count-1)+']').datepicker().datepicker("setDate", new Date())
        updateRows();
      }
    }

    function updateRows(){
      count = $('input[name=preferred_slots_count]').val();
      tr = $('#preferred_slot').find('tbody').children();
      if(count == 1){
        for(i=0;i<tr.length;i++){
          tr[i].children[0].children[0].remove();
        }
        $('#btn-add-preferredslot').show();
      }else{
          $('#btn-add-preferredslot').hide();
          for(i=0;i<tr.length;i++){
          if(tr[i].children[0].length > 0){
            tr[i].children[0].children[0].remove();
          }
          $(tr[i].children[0]).html('<button  type="button" class="btn btn-primary btn-delete-preferred_slot_date"><span class="fa">&#xf00d;</span></button');
        }
      }

      for(i=0;i<tr.length;i++){
          $(tr[i].children[1].children[0]).attr('name','preferred_slot_date'+i);
          $(tr[i].children[2].children[0]).attr('name','preferred_slot_time_start'+i);
          $(tr[i].children[3].children[0]).attr('name','preferred_slot_time_end'+i);
          setValidatorPreferredSlots(i);
      }

    }

    function setValidatorIssues(index){
      if(!vm.issues[index].image){
        $("input[type=file][name=image"+index+"]").rules("add", {
          required:true,
          extension: "jpg|jpeg|png|gif|wmv|avi|flv|mp4|mov|pdf"
        });
      }

      $('textarea[name=issue'+index+']').rules("add", {
        required:true,
      });
      $('textarea[name=expected'+index+']').rules("add", {
        required:true,
      });
    }


    function setValidatorPreferredSlots(index){
      $("input[name=preferred_slot_date"+index+"]").rules("add", {
        required:true,
        date:true
      });
      $("input[name=preferred_slot_time_start"+index+"]").rules("add", {
        required:true,
        time:true
      });
      $("input[name=preferred_slot_time_end"+index+"]").rules("add", {
        required:true,
        time:true
      });
    }

    function setTimepicker(index){
      $('.start_time[name=preferred_slot_time_start'+index+']').timepicker({
        'timeFormat': 'H:i'
      });

      disableTimes = [];
      $('.start_time[name=preferred_slot_time_start'+index+']').on('changeTime', function() {
          _index = parseInt($(this).attr('name').replace('preferred_slot_time_start',''));
          $('.end_time[name=preferred_slot_time_end'+index+']').val('');
          disableTimes = ['00:00', $(this).val()];
          $('.end_time[name=preferred_slot_time_end'+index+']').timepicker('option',{
            'showDuration': false,
            'disableTimeRanges': [disableTimes]
          });
      });

       $('.end_time[name=preferred_slot_time_end'+index+']').timepicker({
            'timeFormat': 'H:i',
            'disableTimeRanges': [disableTimes]
        });
        if($('.start_time[name=preferred_slot_time_start'+index+']').val() != ""){
          disableTimes = ['00:00', $('.start_time[name=preferred_slot_time_start'+index+']').val()];
          $('.end_time[name=preferred_slot_time_end'+index+']').timepicker('option',{
            'showDuration': false,
            'disableTimeRanges': [disableTimes]
          });
        }
    }

    $(document).ready(function() {
      $(document).on("click","button.btn-delete-preferred_slot_date",function(){
        $(this).parent().parent().remove()
        count = $('input[name=preferred_slots_count]').val();
        count--;
        $('input[name=preferred_slots_count]').val(count);
        updateRows();
      });

      $(document).on("click","button.btn-delete-attachment",function(){
        $(this).parent().parent().remove()
        count = $('input[name=attachment_count]').val();
        count--;
        $('input[name=attachment_count]').val(count);
        updateAttachmentRow();
      });

      for(i=0;i<$('input[name=preferred_slots_count]').val();i++){
        setTimepicker(i);
      }



      $(".allow_decimal").on("input", function(evt) {
        var self = $(this);
        self.val(self.val().replace(/[^0-9\.]/g, ''));
        if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57))
        {
          evt.preventDefault();
        }
      });

      $("#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();
    });

    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 = vm.currentDate.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));
      })
    }

    var vm = new Vue({
      el: "#app",
      data: {
        issues: {!! $ticket->issues !!},
        preferred_slots: {!! $ticket->preferred_slots !!},
        preferred_slots_delete: [],
        currentDate: moment(),
        currentDateFormatted: moment().format('DD MMM YYYY'),
        submit_action: '',
      },
      updated:function(){
        this.$nextTick(function(){
            for(var i=0;i<this.issues.length;i++){
              setValidatorIssues(i);
            }
        })
      },computed: {
        yesterday: function() {
          return moment().add(-1, "days");
        },
        tomorrow: function() {
          return moment().add(1, "days");
        }
      },
      methods: {
        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());
        },
        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());
        },
        addIssue: function() {
          this.issues.push({image:'', issue_desc:'', expected_desc:'', stat:'add'});
        },
        deleteIssue: function(index) {
          var issue = this.issues[index];
          if (issue.stat === 'add') {
            this.issues.splice(index, 1);
          }

          if (issue.stat == 'delete') {
            issue.stat = '';
          } else {
            Vue.set(issue, 'stat', 'delete');
          }
        },
        addPreferredSlot: function() {
          if(this.preferred_slots.length < 2){
            var slot = {date: this.currentDate.format('YYYY-MM-DD'), time_start: '', time_end: '', stat:'add'};
            this.preferred_slots.push(slot);
            Vue.nextTick(function() {
              initDatepicker();
            });
          }
        },
        deletePreferredSlot: function(index) {
          this.preferred_slots.splice(index, 1);
        },
        previewImage: function(index,e) {
          var reader = new FileReader();
          var file_mime = e.target.files[0].type;
          if (fileMimeIsImage(file_mime) === false) {
            $('#preview-image' + index).html("Video");
            return;
          }
          reader.onload = function (e) {
            var img = $('<img/>', {
              width:250,
              height:200,
              src: e.target.result
            });
            $('#preview-image'+index).html(img);
          };
          var file = e.target.files[0];
          reader.readAsDataURL(file);
        },
        isImage: function(file_name) {
          return fileExtensionIsImage(file_name);
        },
        isVideo: function(file_name) {
          return fileExtensionIsVideo(file_name);
        },
        isPdf:function(file_name){
          return file_name.split(".")[file_name.split(".").length-1].toLowerCase()==='pdf';
        },
        draftTicket: function() {
          this.submit_action = "draft";
        },
        updateTicket: function() {
          this.submit_action = "update";
        },
        sendQuotation: function() {
          this.submit_action = "quote";
        },
        openTicket: function() {
          this.submit_action = "open";
        },
        submitForm: function() {
          Vue.nextTick(function() {
            var validate = validateTicketForm();
            if (validate && window.form_valid) {
              document.getElementById("form-ticket").submit();
            }
          });
        }
      },
    });

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

    @if($action != 'create' && $ticket->stat != TicketStat::Drafted)
    setupCKEDITOR('quotation_desc');
    setupCKEDITOR('terms_of_payment');
    @endif
    setupCKEDITOR('remarks');


    jQuery.validator.addMethod("ckeditor", function(value, element) {
            return value.replace("<p>&nbsp;</p>","").length > 0;
      }, "This field is required.");

    $(document).ready(function () {
        $('input[name=quotation_date]').datepicker().datepicker('setDate',new Date());
        $('#form-ticket').validate({ // initialize the plugin
            ignore:[],
            rules: {
              @if($action != 'create' && $ticket->stat != TicketStat::Drafted)
              quotation_no: {
                    required: true,
                },
                sales_person: {
                    required: true,
                },
                contact_no:{
                    required:true,
                },
                quotation_date:{
                    required:true,
                    date:true
                },
                terms_of_payment:{
                  ckeditor:true,
                },
                remarks:{
                  ckeditor:true,
                },
                quoted_price:{
                  required:true
                }
                @endif
            },
            submitHandler: function (form) {
                window.form_valid = true
                vm.submitForm(); // recall vue submit form
                return true; // do action submit
            }
        });

    });
</script>
@endsection