@extends('frontend.template', ['title'=>strtoupper($action). ' TICKET'])

@section('content')
  <div id="app">
    <form method="post" action="" 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-group">
        <label class="control-label col-md-2 ticket-md-2">
          Title *
        </label>
        <div class="col-md-10 ticket-md-10">
          {{Form::text('title', $ticket->title, ['class'=>'form-control', 'autofocus'])}}
        </div>
      </div>
      
      @if($ticket->stat != null)
        <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 r-text">
                {{ $ticket->ticket_code }}
              </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 form-control-static r-text">
                {{ TicketStat::$values[$ticket->stat] }}
              </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 *
            </label>
            <div class="col-md-9">
              {{ Form::select('category_id', $categories, $ticket->category_id, ['placeholder'=>'', 'class'=>'form-control']) }}
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label class="control-label col-md-3">
              Urgency
            </label>
            <div class="col-md-9">
              {{Form::select('urgency', \App\Models\Enums\TicketUrgency::$values, $ticket->urgency, ['placeholder'=>'', '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">
              Company Name
            </label>
            <div class="col-md-9 form-control-static r-text">
              @if($ticket->stat == null)
                {{ $company->name }}
              @else
                {{ $ticket->company_name }}
              @endif
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label class="control-label col-md-3">
              Office Name
            </label>
            <div class="col-md-9 form-control-static r-text">
              {{ $office->name }}
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label class="control-label col-md-3">
              Address
            </label>
            <div class="col-md-9 form-control-static r-text" id="office_addr">
                @if($ticket->stat == null)
                  {{ $office->addr }}
                @else
                  {{ $ticket->office_addr }}
                @endif
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label class="control-label col-md-3">
              Postal Code
            </label>
            <div class="col-md-9 form-control-static r-text" id="office_postal">
                @if($ticket->stat == null)
                  {{ $office->postal }}
                @else
                  {{ $ticket->office_postal }}
                @endif
            </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
            </label>
            <div class="col-md-9 form-control-static r-text">
              @if($action == "draft")
                {{Auth::user()->username}} on {{ ViewHelper::formatDateTime(\Carbon\Carbon::now()) }}
              @else
                {{$ticket->requested_by}} on {{ ViewHelper::formatDateTime(\Carbon\Carbon::now()) }}
              @endif
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label class="control-label col-md-3">
              Description
            </label>
            <div class="col-md-9">
              {{Form::textarea('requester_desc', $ticket->requester_desc, ['rows'=>3, '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">
              Agent Code
            </label>
            <div class="col-md-9 form-control-static r-text">
              @if($action == "draft")
                {{Form::text('agent_code', '', ['class'=>'form-control'])}}
              @else
                {{Form::hidden('agent_code', $ticket->agent_code, ['class'=>'form-control'])}}
                {{$ticket->agent_code }}
              @endif
            </div>
          </div>
        </div>
      </div>
      <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">
            <thead>
            <tr>
              <th style="min-width:53px"></th>
              <th width="33%">
                Image / Video<br>
                <span style="font-size:13px">(Supported image formats: png, jpg, gif)<br>
                (Supported video formats: wmv, avi, flv, mp4, mov),(Supported document formats: pdf)<br>
                  (max size 50mb)</span>
              </th>
              <th width="33%">Issue</th>
              <th width="33%">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-if="issue.image" 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>
                </div>
                <div v-else>
                  <input type="file" v-bind:name="'image' + index" v-on:change="previewImage(index,$event)">
                </div>
              </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" class="text-center">
                <div class="text-center">
                  <button type="button" @click="addIssue" 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">
          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" 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()" 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>
      <div class="text-center">
        @if($ticket->stat == TicketStat::Drafted || $ticket->stat == TicketStat::Opened)
          <input type="submit" @click='updateTicket' value="UPDATE TICKET" class="more active">
          <input type="submit" @click='openTicket' value="OPEN TICKET" class="more active">
          <input type="button" onclick='deleteTicket()' value="DELETE TICKET" class="more active">
        @elseif($ticket->stat == null)
          <input type="submit" @click='draftTicket' value="DRAFT TICKET" class="more active">
        @endif
      </div>
    </form>
  </div>
@endsection

@section('script')
  <script src="{{asset('assets/js/axios.min.js')}}" type="text/javascript"></script>
  <script src="{{asset('assets/js/ticket.js')}}" type="text/javascript"></script>
  <link href="{{asset('assets/metronic/global/plugins/bootstrap-toastr/toastr.min.css')}}" rel="stylesheet" type="text/css" />
  <script src="{{asset('assets/metronic/global/plugins/bootstrap-toastr/toastr.min.js')}}" type="text/javascript"></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;
    toastr.options.positionClass = "toast-top-center";
    toastr.options.preventDuplicates = true;
    //https://github.com/CodeSeven/toastr/issues/166
    toastr.options.timeOut = 0;
    toastr.options.extendedTimeOut = 0;
    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++){
        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-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();
        }
      }else{
        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){
      $("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-attachment",function(){
        $(this).parent().parent().remove()
        count = $('input[name=attachment_count]').val();
        count--;
        $('input[name=attachment_count]').val(count);
        updateAttachmentRow();
      });
      
      $(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();
      });

      $("#office_id").change(function() {
        var office_id = $(this).val();
        
        axios.get('{{url('api/getOffice')}}?office_id='+office_id)
          .then(function (response) {
            var office = response.data;
            $("#office_addr").text(office.addr);
            $("#office_postal").text(office.postal);
          })
          .catch(function (error) {
            console.log('office_id change error='+error);
          })
      });
      
      for(i=0;i<$('input[name=preferred_slots_count]').val();i++){
        setTimepicker(i);
      }

      $('#form-ticket').validate({ // initialize the plugin
            ignore:[],
            rules: {
                title: {
                    required: true,
                },
                category_id: {
                    required: true,
                }
            },
            submitHandler: function (form) {
                window.form_valid = true
                vm.submitForm(); // recall vue submit form
                return true; // do action submit
            }
        });
      
    });

    var vm = new Vue({
      el: "#app",
      data: {
        issues: {!! $ticket->issues !!},
        preferred_slots: {!! $ticket->preferred_slots !!},
        submit_action: '',
      },
      updated:function(){
        this.$nextTick(function(){
            for(var i=0;i<this.issues.length;i++){
              setValidatorIssues(i);
            }
        })
      },
      methods: {
        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');
          }

        },
        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';
        },
        submitForm: function() {
          Vue.nextTick(function() {
            var validate = validateTicketForm();
            if (validate && window.form_valid) {
              document.getElementById("form-ticket").submit();
            }
          });
        },
        draftTicket: function() {
          this.submit_action = "draft";
        },
        updateTicket: function() {
          this.submit_action = "update";
        },
        openTicket: function() {
          this.submit_action = "open";
        },
      }
    });
    
    function deleteTicket() {
      var result = confirm("Are you sure you want to delete the ticket?");
      if (result === true) {
        $("#delete").val('true');
        $("form").submit();
      }
    }
  </script>
@endsection