@extends('layouts.header')

@section('content')

<h2 class="page-title my-4">Update Service Request</h2>

<div class="row">
  <div class="col-md-8">
    <P><a onClick="goBack();" class="text-primary mb-3" style="cursor:pointer;"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Back</a></P>
    <div class="card form-style bg-light p-md-5 p-3 ">
      <div class="row">

        <div class="col-md-12 mb-3">
          <label>Title</label>
          <p>{{ $data->title }}</p>
        </div>
        <div class="col-md-12 mb-4">
          <label>Type</label>
          <p>{{ $data->responsibility }}</p>
          <hr>
        </div>

        @if(count($resolved_data) > 0)
        @foreach($resolved_data as $resolved)
        <div class="col-md-12 mb-4">
          <label>Comment by : <span class="mr-2 text-dark"> {{ ($resolved->comment_by_first_name == Auth::user()->first_name && $resolved->comment_by_last_name == Auth::user()->last_name) ? 'Me' : $resolved->comment_by_first_name.' '.$resolved->comment_by_last_name }}</span></label><span class="text-secondary" style="float:right;"><i class="fa fa-clock-o ml-2 mr-1 text-secondary" aria-hidden="true"></i>{{ Carbon\Carbon::parse($resolved->created_at)->diffForHumans()}}</span>
          <p><i class="fa fa-comments-o" style="color:#214884"></i> {{ $resolved->comment }}</p>

          @if($resolved->attachment != "")

          @if($resolved->attachment_ext == 'xls' || $resolved->attachment_ext == 'xlsx' || $resolved->attachment_ext == 'docx' || $resolved->attachment_ext == 'doc')
          <a href="https://view.officeapps.live.com/op/view.aspx?src={{$resolved->attachment}}&embedded=true" target="_blank" style="color:#274d8e">{{ Str::limit($resolved->attachment,50)}}</a>
          @else
          <a href="{{ $resolved->attachment  }}" target="_blank" style="color:#274d8e;"><i class="fa fa-paperclip" style="font-size:20px;color:#214884;"></i> {{ Str::limit($resolved->attachment,50)}}</a>
          @endif

          <a href="{{ $resolved->attachment  }}" download="{{ $resolved->attachment }}" style="float:right;" title="Download"><i class="fa fa-cloud-download" style="font-size:20px;color:#dc3545"></i></a>
          @endif

          <hr>
        </div>
        @endforeach
        @endif

        <div class="col-12 text-left">
          <!-- <button type="button" class="btn btn-outline-primary mr-3" onClick="goBack();">Back</button> -->
          <button type="button" class="btn btn-outline-danger mr-3" onclick="closeRequest()">Close Request</button>
          <button type="button" class="btn btn-outline-info mr-3" onclick="reopenRequest()">Reopen Request</button>

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


</div>
</div>
<!--	reopen -->

<div class="modal fade" id="reopen" tabindex="-1" role="dialog" aria-labelledby="reopen" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-22 text-primary">Add Reply </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <img src="/images/close.svg" width="20">
        </button>
      </div>

      <div class="modal-body form-style pb-0 px-lg-4 px-3 form-style">

        <div id="reopen_form">
          <form id="reopenForm" method="POST" action="javascript:void(0)">
            @csrf

            <div class="row justify-content-center">

              <input type="hidden" name="id" value="{{ $data->id}}" id="id">
              <input type="hidden" name="status" value="REOPENED" id="status">

              <div class="col-lg-12 mb-3">
                <label>Your Comment<span class="text-danger">*</span></label>
                <textarea class="form-control h-auto" rows="3" name="comment" id="comment" placeholder="Enter comment"></textarea>
              </div>

              <div class="col-lg-12 mb-3">
                <label>Attachment</label>
                <div class="input-group mb-3">
                  <div class="custom-file">
                    <label class="custom-file-label" for="attachment">Choose file</label>
                    <input type="file" class="custom-file-input" name="attachment" id="attachment" style="display:block;" accept=".pdf,.docx,.xls,.xlsx,.stp,.step,.iges,.igs" aria-describedby="inputGroupFileAddon01">
                  </div>
                </div>
              </div>

              <div class="col-lg-12 mb-3">
                <div class="progress">
                  <div class="progress-bar"></div>
                </div>
                <div id="uploadStatus"></div>
              </div>


            </div>
            <div class="modal-footer border-0 justify-content-center">
              <button type="submit" class="btn btn-primary" id="btnAdd" onclick="submitForm()">Reopen</button>
              <button type="button" data-dismiss="modal" class="btn btn-outline-primary">Cancel</button>
            </div>

          </form>
        </div>


        <div id="close_form">
          <div class="row justify-content-center">
            <div class="col-lg-12 mb-0 text-center">
              <h2><i class="fa fa-exclamation-circle text-danger" aria-hidden="true"></i></h2>
              <h3 class="text-dark font-22 font-weight-normal">Are you sure you want to Close Request?</h3>
            </div>
          </div>
          <input type="hidden" name="id" value="{{ $data->id}}" id="id">
          <div class="modal-footer border-0 justify-content-center">
            <button type="button" class="btn btn-outline-primary" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="updateRequest('CLOSED')">Yes</button>
          </div>
        </div>

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


  @endsection


  @section('append')
  <script>
    $(document).ready(function() {

    });

    $('#attachment').change(function() {
      var i = $(this).prev('label').clone();
      var file = $('#attachment')[0].files[0].name;
      $(this).prev('label').text(file);
    });

    $('input[type=file]').change(function() {
      var val = $(this).val().toLowerCase(),
        regex = new RegExp("(.*?)\.(pdf|xls|xlsx|docx|stp|step|iges|igs)$");

      if (!(regex.test(val))) {
        $(this).val('');
        toastr.warning('Supported documents are PDF, Docx, XLS, XLSX, stp, step, iges, igs');
      }
      var FileSize = this.files[0].size / 1024 / 1024; // in MB
      if (FileSize > 50) {
        toastr.warning('File size exceeds 50 MB');
        $(this).val(''); //for clearing with Jquery
        $(this).prev('label').text("Choose file");
      }
    });


    function updateRequest(status) {
      var id = $('#id').val();

      $.ajax({
        type: "POST",
        url: '/update/my-service-request',
        data: {
          "id": id,
          "status": status,
        },
        beforeSend: function(request) {
          return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
        },
        success: function(data) {
          toastr.success(data.success);
          setTimeout(() => {
            // window.location.href = "/manage/my-service-request";
            window.location.href = "javascript:goBack(-1)";
          }, 2000);
        },
        error: function(error) {
          toastr.error('Something went wrong !');
        }

      });

    }


    function closeRequest() {
      $('.progress').hide();
      $('#reopen_form').hide();
      $('#close_form').show();
      $('#reopen').modal('show');
      $('.modal-title').html("Close Service Request");
    }


    function reopenRequest() {
      $('#reopen_form').show();
      $('#close_form').hide();
      $('#reopenForm')[0].reset();
      $('#attachment').prev('label').text("Choose file");
      $('.progress').hide();
      $('#reopen').modal('show');
      $('.modal-title').html("Add Reply");
    }

    function submitForm() {

      $("#reopenForm").validate({
        errorElement: 'div',
        rules: {
          comment: {
            required: true,
          },
          attachment: {
            // required: true,
          }

        },

        messages: {
          comment: {
            required: "Please enter comment",
          },
          attachment: {
            required: "Please select file",
          }

        },

        errorPlacement: function(error, element) {
          if (element.hasClass('select2')) {
            error.insertAfter(element.parent());
          } else {
            error.appendTo(element.parent());
          }
        },
        submitHandler: function(form) {
          //form.submit();
          if ($('#attachment').val() != "") {
            $('.progress').show();
          }
          var form = $('#reopenForm')[0];
          var formData = new FormData(form);
          $.ajax({
            xhr: function() {
              var xhr = new window.XMLHttpRequest();
              xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                  var percentComplete = ((evt.loaded / evt.total) * 100);
                  $(".progress-bar").width(parseInt(percentComplete) + '%');
                  $(".progress-bar").html(parseInt(percentComplete) + '%');
                }
              }, false);
              return xhr;
            },
            url: '/reopen/my-service-request',
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
              $('#btnAdd').addClass('btn-disabled');
              $('#btnAdd').html("<span class='spinner-border spinner-border' id='loader' style='width:20px;height:20px;'></span> Please wait...");
              $(".progress-bar").width('0%');
            },
            success: function(data) {
              if (data.success != undefined) {
                toastr.success(data.success);
                $('#reopenForm')[0].reset();
                $('.close').click();
                setTimeout(() => {
                  // window.location.href="/manage/my-service-request";
                  window.location.reload();
                }, 2000);
              } else {
                toastr.error(data.error);
              }

            },
            complete: function() {
              setTimeout(function() {
                $('#btnAdd').removeClass('btn-disabled');
                $('#btnAdd').html('Reopen');
              }, 1000);
            },
            error: function(error) {
              toastr.error("Something went wrong !");
            },
          });

        },

      });

    }
  </script>

  @endsection