@extends('dashboard.base')

@section('content')

        <div class="container-fluid">
          <div class="animated fadeIn">
            <div class="row justify-content-center">
              <div class="col-sm-12 col-md-12 col-lg-12">
                @if ($message = Session::get('fail'))
                  <div class="alert alert-danger alert-block">
                      <button type="button" class="close" data-dismiss="alert">×</button>    
                      <strong>{{ $message }}</strong>
                  </div>
                @endif
                @if ($message = Session::get('success'))
                  <div class="alert alert-success alert-block">
                      <button type="button" class="close" data-dismiss="alert">×</button>    
                      <strong>{{ $message }}</strong>
                  </div>
                @endif
                <div class="card">
                    <div class="card-header d-flex justify-content-lg-between">
                      <h4 class="m-0">Profil Saya</h4>
                      <button id="btn-edit" class="btn btn-success mr-1" type="button">Edit Profil</button>
                    </div>
                    <div class="card-body">
                        <form id="form" method="POST" action="{{ route('profil.update', $user->id) }}" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row">
                              <div class="col-md-4 col-sm-12">
                                <img class="p-4" src="{{ $user->photo ? asset('uploads/'.$user->photo) : 'https://ui-avatars.com/api/?name='.$user->name }}" alt="" width="100%">
                                <label for="photo">Foto</label>
                                <div class="custom-file my-1">
                                  <input type="file" class="custom-file-input" name="photo" id="photo" disabled>
                                  <label class="custom-file-label text-truncate" for="photo">Ubah Foto</label>
                                </div>
                                @error('photo')
                                  <div class="alert alert-danger py-1 px-2 mb-2">{{ $message }}</div>
                                @enderror
                                <label for="signature-pad" class="mt-4">Tanda Tangan</label>
                                <div class="w-100">
                                  <canvas id="signature-pad" class="border w-100"></canvas>
                                </div>
                                <input type="text" class="form-control" name="signature" id="signature" hidden>
                                @error('signature')
                                  <div class="alert alert-danger py-1 px-2 mb-2">{{ $message }}</div>
                                @enderror
                                <button type="button" id="clear" class="btn btn-sm btn-outline-danger mt-1">Hapus</button>
                                <div class="custom-file my-1">
                                  <input type="file" class="custom-file-input" name="ttdimage" id="ttdimage" disabled>
                                  <label class="custom-file-label text-truncate" for="ttdimage">Upload Gambar TTD</label>
                                </div>
                              </div>
                              <div class="col-md-8 col-sm-12">
                                {{-- <label class="mb-0">Role</label>
                                <p class="mb-3">
                                  {{ ucwords(str_replace('_', ' ', $user->menuroles)) }}
                                </p> --}}
                                <div class="form-group">
                                  <label for="name">Nama</label>
                                  <input type="text" class="form-control" name="name" value="{{ $user->name }}" disabled>
                                </div>
                                @error('name')
                                  <div class="alert alert-danger py-1 px-2 mb-2">{{ $message }}</div>
                                @enderror
                                @if ($user->menuroles == 'instansi')
                                  <label class="mb-1">Instansi</label>
                                  <h5 class="mb-3">{{ $user->instansi->name }}</h5>
                                @endif
                                
                                <div class="form-group">
                                  <label for="email">Email</label>
                                  <input type="email" class="form-control" name="email" value="{{ $user->email }}" disabled>
                                </div>
                                @error('email')
                                  <div class="alert alert-danger py-1 px-2 mb-2">{{ $message }}</div>
                                @enderror

                                @if ($user->menuroles !== 'instansi')
                                  <div class="row">
                                    <div class="col">
                                      <div class="form-group">
                                        <label>Jenis Kelamin</label><br>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="gender" id="gender_male" value="1" disabled @if ($user->gender == '1') checked @endif>
                                            <label class="form-check-label" for="gender_male">Laki-Laki</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="gender" id="gender_female" value="2" disabled @if ($user->gender == '2') checked @endif>
                                            <label class="form-check-label" for="gender_female">Perempuan</label>
                                        </div>
                                        @error('gender')
                                            <div class="alert alert-danger py-1 px-2 my-1">{{ $message }}</div>
                                        @enderror
                                      </div>
                                    </div>
                                    <div class="col">
                                      <div class="form-group">
                                        <label>Tempat Lahir</label>
                                        <input type="text" class="form-control" name="birth_place" value="{{ $user->birth_place }}" disabled>
                                        @error('birth_place')
                                            <div class="alert alert-danger py-1 px-2 my-1">{{ $message }}</div>
                                        @enderror
                                      </div>
                                    </div>
                                    <div class="col">
                                      <div class="form-group">
                                        <label>Tanggal Lahir</label>
                                        <input type="date" class="form-control" name="birth_date" id="birth_date" value="{{ $user->birth_date }}" disabled>
                                        @error('birth_date')
                                            <div class="alert alert-danger py-1 px-2 my-1">{{ $message }}</div>
                                        @enderror
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col">
                                      <div class="form-group">
                                        <label>Agama</label><br>
                                        <select class="form-control col-sm-12 col-md-6" name="religion_id" id="religion" disabled>
                                            <option value="" disabled selected hidden></option>
                                            @foreach ($religions as $id => $religion)
                                                <option value="{{ $id }}" @if ($user->religion_id == $id) selected @endif>{{ $religion }}</option>
                                            @endforeach
                                        </select>
                                        @error('religion_id')
                                            <div class="alert alert-danger py-1 px-2 my-1">{{ $message }}</div>
                                        @enderror
                                      </div>
                                    </div>
                                    <div class="col"></div>
                                  </div>
                                @endif

                                <div class="form-group">
                                  <label>Telepon</label>
                                  <input type="text" class="form-control col-sm-12 col-md-6" name="phone" value="{{ $user->phone }}" required disabled>
                                  @error('phone')
                                      <div class="alert alert-danger py-1 px-2 my-1">{{ $message }}</div>
                                  @enderror
                                </div>
                                <div class="form-group">
                                  <label>Alamat</label>
                                  <input type="text" class="form-control" name="address" value="{{ $user->address }}" disabled>
                                  @error('address')
                                      <div class="alert alert-danger py-1 px-2 my-1">{{ $message }}</div>
                                  @enderror
                                </div>
                                <div class="row">
                                  <div class="col">
                                    <div class="form-group">
                                      <label for="name">Password Baru</label>
                                      <input type="password" class="form-control" id="password" name="password" disabled>
                                    </div>
                                    @error('password')
                                      <div class="alert alert-danger py-1 px-2 mb-2">{{ $message }}</div>
                                    @enderror
                                  </div>
                                  <div class="col">
                                    <div class="form-group">
                                      <label for="name">Konfirmasi Password Baru</label>
                                      <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" disabled>
                                    </div>
                                    @error('password_confirmation')
                                      <div class="alert alert-danger py-1 px-2 mb-2">{{ $message }}</div>
                                    @enderror
                                  </div>
                                </div>
                                <button id="btn-save" class="btn btn-primary mr-1 d-none" type="submit" disabled>Simpan Profil</button>
                                <button id="btn-cancel" type="button" class="btn btn-outline-dark d-none">Batal</a> 
                              </div>
                            </div>
                        </form>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>

@endsection

@section('css')
  <style>
    #photo {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 150px;
    }
  </style>
@endsection

@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script>
  $(document).ready(function() {
    $("#role").select2({placeholder: "Pilih role", allowClear: true});
    $("#instansi").select2({placeholder: "Pilih instansi", allowClear: true});
    $('#photo').on('change',function(){
      var fileName = $(this).val().split('\\').pop();
      $(this).next('.custom-file-label').html(fileName);
    })
    $("#btn-edit").click(function(){
      $('.form-control, .custom-file-input, .form-check-input').prop('disabled', false);
      $(this).addClass('d-none');
      $("#btn-save").removeClass('d-none').prop('disabled', false);
      $("#btn-cancel").removeClass('d-none');
    })
    $("#btn-cancel").click(function(){
      $('.form-control, .custom-file-input, .form-check-input').prop('disabled', true);
      $("#btn-edit").removeClass('d-none');
      $("#btn-save").addClass('d-none').prop('disabled', true);
      $(this).addClass('d-none');
    })
    $("select").select2();

    // signature init
    var currentSignature = {!! json_encode($signatureUri )!!};
    var canvas = document.getElementById('signature-pad');
    var signaturePad = new SignaturePad(canvas, {
      minWidth: 1,
      maxWidth: 1,
      backgroundColor: 'rgb(255, 255, 255)' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
    });

    // resize
    var size = 200;
    canvas.style.width = size + "px";
    canvas.style.height = size + "px";
    function resizeCanvas() {
        var ratio =  window.devicePixelRatio;
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
        signaturePad.clear(); // otherwise isEmpty() might return incorrect value
    }
    window.addEventListener("resize", resizeCanvas);
    resizeCanvas();

    // show signature
    if (currentSignature)
    signaturePad.fromDataURL(currentSignature);

    $("#form").on('submit', function (e) {
      e.preventDefault();

      // save signature
      if(!signaturePad.isEmpty()){
        var url = signaturePad.toDataURL("image/jpeg");
        $("#signature").val(url);
      }

      setTimeout(function(){ 
        document.getElementById('form').submit(); 
      }, 500);
    });
    
    // clear
    document.getElementById('clear').addEventListener('click', function () {
      signaturePad.clear();
    });
  });
</script>
@endsection