@extends('layouts.app')

@section('form-title') {{ __('Complaint, solution and acceptance end user') }} @endsection
@section('form-sub-title') {{ $project->client->name }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('projects.index') }}">{{ __('Projects') }}</a> </li> 
<li class="breadcrumb-item"><a href="{{ route('projects.show', $project->uuid) }}">{{ __('Complaint, solution and acceptance end user') }}</a></li> 
@endsection

@section('content')

@push('child-style')
  <style>
    .no-signature {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      color: #686663;
    }
    #sig-image{
      border: 1px solid #ccc;
      padding: 5px;
      width: 100%;
      cursor: pointer;
    }
    .btn-file {
      position: relative;
      overflow: hidden;
    }
    .btn-file input[type=file] {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      font-size: 100px;
      text-align: right;
      filter: alpha(opacity=0);
      opacity: 0;
      outline: none;   
      cursor: inherit;
      display: block;
    }
    .preview-image {
        max-width: 200px;
        margin: 10px;
    }
    #signature-pad canvas {
      width: 100%;
      height: 200px;
    }
  </style>
@endpush

<div class="pcoded-inner-content">
    <div class="main-body">
      <div class="page-wrapper">
        <!-- Page body start -->
        <div class="page-body">
          <div class="row">
            <div class="col-sm-12">
              <!-- Basic Inputs Validation start -->
              <div class="card">
                <div class="card-block">
                  <form id="frm-complaint" method="post" action="{{ route('complaints.update', $project->uuid) }}" enctype="multipart/form-data" novalidate>
                    @csrf
                    @method('put')
                    <input type="hidden" name="photos" id="photos" value="">

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Complaint according to customer') }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <textarea name="customer_complaint" rows="5" class="form-control" placeholder="">{{ old('customer_complaint', $project->complaint ? $project->complaint->customer_complaint : '') }}</textarea>
                        <span class="messages">
                          @if($errors->has('customer_complaint'))
                          <p class="text-danger error">{{ $errors->first('customer_complaint') }}</p>
                          @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-12 col-form-label">
                        {{ __('complaint_desc') }}
                      </label>
                    </div>

                    <div class="mb-3 row">
                      <hr>
                    </div>

                    @for($i = 1; $i <= 4; $i++)
                      <div class="mb-3 row">
                        <label class="form-label col-sm-3 col-form-label">{{ __('Complaint') . ' ' . $i }}</label>
                        <div class="col-sm-6 col-xl-9">
                          <textarea name="complaint{{ $i }}" rows="2" class="form-control" placeholder="">{{ old("complaint{$i}", $project->complaint ? $project->complaint->complaint($i) : '') }}</textarea>
                          <span class="messages">
                            @if($errors->has("complaint{$i}"))
                            <p class="text-danger error">{{ $errors->first("complaint{$i}") }}</p>
                            @endif
                          </span>
                        </div>
                      </div>

                      <div class="mb-3 row">
                        <label class="form-label col-sm-3 col-form-label">{{ __('Cause of complaint') }}</label>
                        <div class="col-sm-6 col-xl-9">
                          {{-- {!! subject_judgements('subject1', old('subject1', $project->complaint ? $project->complaint->complaintSubject(1) : '')) !!} --}}
                          <input type="text" name="subject{{ $i }}" class="form-control" value="{{ old("subject{$i}", $project->complaint ? $project->complaint->complaintSubject($i) : '') }}">
                          <span class="messages">
                            @if($errors->has("subject{$i}"))
                            <p class="text-danger error">{{ $errors->first("subject{$i}") }}</p>
                            @endif
                          </span>
                        </div>
                      </div>

                      <div class="mb-3 row">
                        <label class="form-label col-sm-3 col-form-label">{{ __('Solution') }}</label>
                        <div class="col-sm-6 col-xl-9">
                          <textarea class="form-control" name="solution{{ $i }}" rows="2"  placeholder="">{{ old("solution{$i}", $project->complaint ? $project->complaint->complaintSolution($i) : '') }}</textarea>
                          <span class="messages">
                            @if($errors->has("solution{$i}"))
                            <p class="text-danger error">{{ $errors->first("solution{$i}") }}</p>
                            @endif
                          </span>
                        </div>
                      </div>

                      <div class="mb-3 row">
                        <label class="form-label col-sm-3 col-form-label">{{ __('Problem solved') }}</label>
                        <div class="col-sm-6 col-xl-9">
                          {!! problemSolvedOptions("problem_solved{$i}", old("problem_solved{$i}", $project->complaint ? $project->complaint->complaintSolved($i) : 'no')) !!}
                          <span class="messages">
                              @if($errors->has("problem_solved{$i}"))
                              <p class="text-danger error">{{ $errors->first("problem_solved{$i}") }}</p>
                              @endif
                          </span>
                        </div>
                      </div>

                      <div class="mb-3 row">
                        <label class="form-label col-sm-3 col-form-label">{{ __('Complaint justified?') }}</label>
                        <div class="col-sm-6 col-xl-9">
                          {!! complaintJustifiedOptions(
                            "complaint_justified{$i}", 
                            old("complaint_justified{$i}", $project->complaint ? $project->complaint->complaintJustified($i) : 'no'),
                            old("complaint_justified{$i}_details", $project->complaint ? $project->complaint->complaintJustifiedDetails($i) : '')
                          ) !!}
                          <span class="messages">
                              @if($errors->has("complaint_justified{$i}"))
                              <p class="text-danger error">{{ $errors->first("complaint_justified{$i}") }}</p>
                              @endif
                          </span>
                        </div>
                      </div>

                      <div class="mb-3 row">
                        <hr>
                      </div>
                    @endfor

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Extra info or complaints, subjects and judgements') }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <textarea name="extra_info_complaint" rows="8" class="form-control" placeholder="">{{ old('extra_info_complaint', $project->complaint ? $project->complaint->extra_info_complaint : '') }}</textarea>
                        <span class="messages">
                          @if($errors->has('extra_info_complaint'))
                          <p class="text-danger error">{{ $errors->first('extra_info_complaint') }}</p>
                          @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <hr>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Solution') }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <textarea name="solution" rows="8" class="form-control" placeholder="">{{ old('solution', $project->complaint ? $project->complaint->solution : '') }}</textarea>
                        <span class="messages">
                          @if($errors->has('solution'))
                          <p class="text-danger error">{{ $errors->first('solution') }}</p>
                          @endif
                        </span>
                      </div>
                    </div>
                    
                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Photos') }}</label>
                      <div class="col-sm-6 col-xl-9">
                        @if($project->complaint)
                          @foreach($project->complaint->photos as $photo)
                          <div class="mb-2">
                              <img class="mb-1 img-100 border" src="{{ $photo->url }}" alt="{{ $photo->name }}"><br>
                              <span class="remove-img" data-id="{{ $photo->id }}"  style="cursor: pointer;">
                                  <i class="fa fa-times-circle text-danger"></i> {{ $photo->name }}
                              </span>
                          </div>
                          @endforeach
                        @endif
                        <div id="img-prev"></div>
                        <span class="btn btn-inverse btn-sm btn-file">
                          {{ __('Add photo') }} <input type="file" name="complaint-photos[]" id="complaint-photos" accept="image/*" multiple>
                        </span>
                        <input type="hidden" name="photos_to_remove" id="photos_to_remove">
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Reference factory') }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <input type="text" name="ref_factory" class="form-control" value="{{ old('ref_factory', $project->ref_factory) }}">
                        <span class="messages">
                          @if($errors->has('ref_factory'))
                          <p class="text-danger error">{{ $errors->first('ref_factory') }}</p>
                          @endif
                        </span>
                      </div>
                    </div>
                    
                    <div class="mb-3 row">
                        <label class="form-label col-sm-3 col-form-label">{{ __('If justified, invoice to supplier?') }}</label>
                        <div class="col-sm-6 col-xl-9">
                            {!! ifInvoiceJustified($errors, old('justified', $project->justified)) !!}
                        </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Invoice to') }}</label>
                      <div class="col-sm-6 col-xl-9">
                          {!! projectInvoiceTypes('invoice_to', old('invoice_to', $project->invoice_to)) !!}
                          <span class="messages">
                            @if($errors->has('invoice_to'))
                            <p class="text-danger error">{{ $errors->first('invoice_to') }}</p>
                            @endif
                          </span>
                      </div>
                    </div>
                    <div class="mb-3 row" id="div_factory" style="display: {{ old('invoice_to', $project->invoice_to) == 2 ? '' : 'none' }};">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Factory') }}</label>
                      <div class="col-sm-6 col-xl-9">
                          {!! factories('factory', old('factory', $project->invoice_to_id ?? $default_factory->id)) !!}
                          <span class="messages">
                            @if($errors->has('factory'))
                            <p class="text-danger error">{{ $errors->first('factory') }}</p>
                            @endif
                          </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Extra time worked after one hour') }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <input type="text" name="extra_time" class="form-control hour-without-seconds" data-mask="99:99" placeholder="00:00" value="{{ old('extra_time', $project->complaint ? $project->complaint->extra_time : '') }}">
                        <span class="messages">
                            @if($errors->has('extra_time'))
                            <p class="text-danger error">{{ $errors->first('extra_time') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Is the house left undamaged?') }}</label>
                      <div class="col-sm-6 col-xl-9">
                        {!! yesNoRadio('solved', old('solved', $project->complaint ? $project->complaint->solved : '')) !!}
                        <span class="messages">
                            @if($errors->has('solved'))
                            <p class="text-danger error">{{ $errors->first('solved') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Money received from End User') }}</label>
                      <div class="col-sm-6 col-xl-9">
                        {!! yesNoRadio('money_received', old('money_received', $project->complaint ? $project->complaint->money_received : '')) !!}
                        <span class="messages">
                            @if($errors->has('money_received'))
                            <p class="text-danger error">{{ $errors->first('money_received') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Amount received from End User') }} {{ '(€)' }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <input type="text" name="amount_received" class="form-control" value="{{ old('amount_received', $project->complaint ? $project->complaint->amount_received : '') }}">
                        <span class="messages">
                            @if($errors->has('amount_received'))
                            <p class="text-danger error">{{ $errors->first('amount_received') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    {{-- <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Extra / discount') }} {{ '(€)' }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <input type="text" name="discount" class="form-control" value="{{ old('discount', $project->complaint ? $project->complaint->discount : '') }}">
                        <span class="messages">
                            @if($errors->has('discount'))
                            <p class="text-danger error">{{ $errors->first('discount') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __("Reason 'extra / discount'") }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <input type="text" name="reason_discount" class="form-control" value="{{ old('reason_discount', $project->complaint ? $project->complaint->reason_discount : '') }}">
                        <span class="messages">
                            @if($errors->has('reason_discount'))
                            <p class="text-danger error">{{ $errors->first('reason_discount') }}</p>
                            @endif
                        </span>
                      </div>
                    </div> --}}

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Subtotal') }} {{ '(€)' }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <input type="text" name="subtotal" class="form-control" value="{{ old('subtotal', $project->complaint ? $project->complaint->subtotal : '') }}">
                        <span class="messages">
                            @if($errors->has('subtotal'))
                            <p class="text-danger error">{{ $errors->first('subtotal') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Materials / external services') }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <textarea name="materials" rows="8" class="form-control" placeholder="">{{ old('materials', $project->complaint ? $project->complaint->materials : '') }}</textarea>
                        <span class="messages">
                          @if($errors->has('materials'))
                          <p class="text-danger error">{{ $errors->first('materials') }}</p>
                          @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Price material') }} {{ '(€)' }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <input type="text" name="price_material" class="form-control" value="{{ old('price_material', $project->complaint ? $project->complaint->price_material : '') }}">
                        <span class="messages">
                            @if($errors->has('price_material'))
                            <p class="text-danger error">{{ $errors->first('price_material') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Signature for approval End User') }}</label>
                      <div class="col-sm-6 col-xl-9">
                        <div id="div-sig" style="display:{{ $project->complaint ? $project->complaint->sig_pad : 'none' }};">
                          <input type="hidden" name="signature" id="signature" value="">
                          <img class="sig-pad" id="sig-image" src="{{ $project->complaint ? asset('storage/signatures/'.$project->complaint->signature) : '' }}" alt="signature">
                          <button type="button" class="btn btn-danger btn-sm m-t-5 pull-right remove-sig"><i class="fa fa-trash"></i>{{ __('Remove signature') }}</button>
                          <br>
                          <span class="messages">
                            *{{ __('Click above to add or change the signature') }}
                          </span>
                        </div>
                        <button 
                          style="display:{{ $project->complaint ? $project->complaint->sig_button : 'block' }};" 
                          id="no-sig-button" 
                          type="button" 
                          class="form-control no-signature sig-pad">
                          {{ __('Click here to add signature') }}
                        </button>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3"></label>
                      <div class="col-sm-6 col-xl-9">
                        <div class="mb-3" id="photos_loader" style="display: none;">
                          <span>{{ ('Please wait untill photos upload finished ...') }}</span>
                        </div>
                        
                        <button type="submit" class="btn btn-primary m-b-0" name="submit" id="btn_save" value="save">{{ __('Save') }}</button>
                        <button type="submit" class="btn btn-primary m-b-0" name="submit" id="btn_save_and_back_project" value="return">{{ __('Save & back to project page') }}</button>
                        
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <!-- Basic Inputs Validation end -->
              
            </div>
            <!-- Form components Validation card end -->
          </div>
        </div>
      </div>
      <!-- Page body end -->
    </div>
  </div>
</div>
@include('projects.report.signature-pad');
@endsection
@push('child-scripts')
<script src="{{ asset('js/signature_pad.umd.min_4.1.7.js') }}?v={{ time() }}"></script>
<script>
  let signaturePad;
  let canvas;

  $('.sig-pad').on('click', function () {
    $('#signature-pad').modal('show');
  });

  $('#signature-pad').on('shown.bs.modal', function () {
    canvas = document.getElementById("sig-canvas");
    if (!canvas) return;

    resizeCanvas();
    signaturePad = new SignaturePad(canvas);
  });

  $('#signature-pad').on('hidden.bs.modal', function () {
    if (signaturePad) {
      signaturePad.clear();
      signaturePad.off();
      signaturePad = null;
    }
  });

  function clearSignature(){
    signaturePad.clear();
  }

  function saveSignature() {
    if (signaturePad && !signaturePad.isEmpty()) {
      let sig = signaturePad.toDataURL(); // save image as PNG
      $('#sig-image').attr('src', sig);
      $('#signature').val(sig);
      $('#div-sig').show();
      $('#no-sig-button').hide();
      $('#signature-pad').modal('hide');
    } else {
      $('#signature-pad').modal('hide');
    }
  }

  function resizeCanvas() {
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
  }

  $(document).ready(function () {
    document.querySelector('.remove-sig').onclick = function () {
      swal({
        title: "Are you sure?",
        text: "",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-danger",
        confirmButtonText: "Yes, remove it!",
        closeOnConfirm: false
      },
      function () {
        $('#signature').val('remove');
        $('#div-sig').hide();
        $('#no-sig-button').show();
        swal.close();
      });
    };

    $('#invoice_to').on('change', function () {
      let invoice_type = $(this).val();
      if (invoice_type == 2) {
        $('#div_factory').fadeIn();
      } else {
        $('#div_factory').fadeOut();
      }
    });

    handleImageUpload();
  });

  function handleImageUpload() {
    const photos = document.getElementById('complaint-photos');
    const divImg = document.getElementById('img-prev');
    const btn_save = document.getElementById('btn_save');
    const btn_save_and_back_project = document.getElementById('btn_save_and_back_project');
    const loadingIndicator = document.getElementById('photos_loader');

    photos.addEventListener('change', function () {
      btn_save.disabled = true;
      btn_save_and_back_project.disabled = true;
      loadingIndicator.style.display = 'block';

      let filesUploaded = 0;
      const totalFiles = photos.files.length;

      for (const file of photos.files) {
        if (file.type.startsWith('image/')) {
          const reader = new FileReader();

          reader.onload = (function () {
            return function (e) {
              const base64Data = e.target.result;
              const fileName = file.name;

              const newHTML = createImageHTML(base64Data, fileName);
              divImg.innerHTML += newHTML;

              uploadFile(file, fileName, divImg, base64Data, () => {
                filesUploaded++;

                if (filesUploaded === totalFiles) {
                  loadingIndicator.style.display = 'none';
                  btn_save.disabled = false;
                  btn_save_and_back_project.disabled = false;
                }
              });
            };
          })();
          reader.readAsDataURL(file);
        }
      }

      photos.value = null;
    });
  }

  function uploadFile(file, fileName, divImg, base64Data, callback) {
    const formData = new FormData();
    let project_id = "{{ $project->id }}";
    formData.append('attachments[]', file);
    formData.append('project_id', project_id);

    $.ajax({
      url: "/upload",
      type: 'POST',
      data: formData,
      contentType: false,
      processData: false,
      headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
      success: function (uploadedName) {
        formData.delete('attachments[]');
        let photos = $('#photos').val();

        if (photos === '') {
          $('#photos').val(uploadedName);
        } else {
          $('#photos').val(photos + ',' + uploadedName);
        }

        if (typeof callback === 'function') {
          callback(uploadedName);
        }
      },
      error: function (xhr, status, error) {
        console.error('Upload failed:', xhr.responseText);
      }
    });
  }

  function createImageHTML(src, fileName) {
    return `
      <div class="mb-2">
        <img class="mb-1 img-100 border" src="${src}" alt=""><br>
        <span class="remove-img" data-id="new" style="cursor: pointer;">
          <i class="fa fa-times-circle text-danger"></i> ${fileName}
        </span>
      </div>
    `;
  }

  $(document).on('click', '.remove-img', function () {
    let photo_id = $(this).data('id');
    if (photo_id !== 'new') {
      $('#photos_to_remove').val($('#photos_to_remove').val() + ',' + photo_id);
    }
    $(this).parent().fadeOut().remove();
  });
</script>
@endpush