<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile</title>
  <!-- Favicon -->
  <link rel="shortcut icon" href="{{url('design/img/svg/Logo_Original.png')}}">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- Custom styles -->
  <!-- Custom styles -->
  <link rel="stylesheet" href="{{url('design/css/style.min.css')}}">
  <link rel="stylesheet" href="{{url('design/fonts/stylesheet.css')}}">
  <!-- Project Style -->
  <link rel="stylesheet" href="{{url('design/css/project-style.css')}}">
</head>

<body>
  <div class="layer"></div>
  <!-- ! Body -->
  <div class="page-flex">
    <!-- ! Sidebar -->
    @include('component.sidebar')
    <div class="main-wrapper">
      <!-- ! Main nav -->
      @include('component.navbar')
      <!-- ! Main -->
      <main class="main users chart-page">
        <div class="container">
          <h2 class="main-title">Profile</h2>
          <div class="row">
            <div class="col-md-3 data-profil">
              <article class="stat-cards-item">
                <div class="stat-cards-icon primary profile-image">
                  <picture>
                    @if (session('role') == "Dokter")
                    <source srcset="{{url('design/img/avatar/doctor.svg')}}" type="image/webp">
                    <img src="{{url('design/img/avatar/doctor.svg')}}" style="width: 140px;" alt="User name">
                    @elseif (session('role') == "Admin")
                    <source srcset="{{url('design/img/avatar/businessman.svg')}}" type="image/webp">
                    <img src="{{url('design/img/avatar/businessman.svg')}}" style="width: 140px;" alt="User name">
                    @else
                    <source srcset="{{url('design/img/avatar/coding.svg')}}" type="image/webp">
                    <img src="{{url('design/img/avatar/coding.svg')}}" style="width: 140px;" alt="User name">
                    @endif
                  </picture>
                </div>

                <div class="stat-cards-info mt-5">
                  <p class="stat-cards-info__title mb-1">Nama</p>
                  <p class="stat-cards-info__num mb-2">{{$profile->u_nama}}</p>
                  <p class="stat-cards-info__title mb-1">Email</p>
                  <p class="stat-cards-info__num mb-2">{{$profile->u_email}}</p>
                  <p class="stat-cards-info__title mb-1">Role</p>
                  <p class="stat-cards-info__num mb-2">{{$profile->u_role}}</p>
                  <p class="stat-cards-info__title mb-1">Nomor Handphone</p>
                  <p class="stat-cards-info__num mb-2">{{$profile->u_no_hp}}</p>
                </div>
              </article>
            </div>
            <div class="col-md-4">
              <div class="white-block">
                <form id="formEditUser{{$profile->u_id}}" action="{{url('user/'.$profile->u_id)}}" method="post">
                  @method('PUT')
                  @csrf
                  <input type="hidden" name="page" value="profile">
                  <label class="form-label-wrapper">
                    <p class="form-label">Nama</p>
                    <input class="form-input" type="text" name="u_nama" placeholder="Masukan nama anda" value="{{$profile->u_nama}}" required>
                  </label>
                  <label class="form-label-wrapper">
                    <p class="form-label">Email</p>
                    <input class="form-input" type="email" name="u_email" placeholder="Masukan email anda" value="{{$profile->u_email}}" minlength="11" maxlength="12" required>
                  </label>
                  @if (session('role') != 'Developer')
                  <label class="form-label-wrapper">
                    <p class="form-label">Wewenang</p>
                    <select class="form-input" name="u_role" required>
                      <option value="Dokter" <?php if ("Dokter" == $profile->u_role) echo 'selected="selected"'; ?>>Dokter</option>
                      <option value="Admin" <?php if ("Admin" == $profile->u_role) echo 'selected="selected"'; ?>>Admin</option>
                    </select>
                  </label>
                  @endif
                  <label class="form-label-wrapper">
                    <p class="form-label">Nomor Handphone</p>
                    <input class="form-input" type="text" name="u_no_hp" placeholder="Masukan nomor ponsel anda" value="{{$profile->u_no_hp}}" required>
                  </label>
                  <div class="form-check form-switch">
                    <input class="form-check-input border" type="checkbox" id="togglePassword{{$profile->u_id}}">
                    <label class="form-check-label" for="togglePassword{{$profile->u_id}}">Ubah Password</label>
                  </div>
                  <div id="passInput{{$profile->u_id}}">
                    <label class="form-label-wrapper">
                      <p class="form-label">Password</p>
                      <input class="form-input" type="password" name="u_password" placeholder="Masukan password anda" minlength="6">
                    </label>
                    <label class="form-label-wrapper">
                      <p class="form-label">Konfirmasi Password</p>
                      <input class="form-input" type="password" name="konfirmasi_password" placeholder="Masukan konfirmasi password anda">
                    </label>
                  </div>
                  <button class="btn btn-primary" type="submit" form="formEditUser{{$profile->u_id}}">Simpan</button>

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

          </div>
        </div>
      </main>
      <!-- ! Footer -->
      @include('component.footer')
    </div>
  </div>
  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <!-- Bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <!-- Chart library -->
  <script src="{{url('design/plugins/chart.min.js')}}"></script>
  <!-- Icons library -->
  <script src="{{url('design/plugins/feather.min.js')}}"></script>
  <!-- Custom scripts -->
  <script src="{{url('design/js/script.js')}}"></script>
  <!-- Notiflix -->
  <script src="https://cdn.jsdelivr.net/npm/notiflix@3.0.1/dist/notiflix-aio-3.0.1.min.js"></script>

  <script>
    $(function() {
      $("#passInput{{$profile->u_id}}").hide();
      $("#togglePassword{{$profile->u_id}}").change(function() {
        if ($(this).is(":checked")) {
          $("#passInput{{$profile->u_id}}").show();
        } else {
          $("#passInput{{$profile->u_id}}").hide();
        }
      });
    });
  </script>

  <script>
    function onChange() {
      const password = document.querySelector('input[name=u_password]');
      const confirm = document.querySelector('input[name=konfirmasi_password]');
      if (confirm.value === password.value) {
        confirm.setCustomValidity('');
      } else {
        confirm.setCustomValidity('Passwords do not match');
      }
    };
  </script>

  @include('component.notif')

</body>

</html>