@extends('layouts.main')
@section('content')
  @push('style')
    <link rel="stylesheet" href="{{asset('assets/css/toastr.min.css')}}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  @endpush  
  <div class="content__header content__boxed overlapping">
    <div class="content__wrap">
      <!-- Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="{{ route('index-dashboard') }}">Home</a></li>
          <li class="breadcrumb-item" aria-current="page">{{ $title }}</li>
          <li class="breadcrumb-item active" aria-current="page">{{ $titleMenu }}</li>
        </ol>
      </nav>
      <!-- END : Breadcrumb -->
      <h1 class="page-title mb-0 mt-2">{{$titleMenu}}</h1>
      <p class="lead"></p>
    </div>
  </div>

  <div class="content__boxed">
    <div class="content__wrap">
      <div class="row">
        <div class="col-sm-12 mt-2">
          <div class="card">
            <div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div>
            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-4">
                    <div class="card pb-2">
                      <div class="card-header bg-success" style="min-height:0px;"></div>
                      <div class="card-body">
                        @php
                          $defaultFoto = session('sex') == '1'
                            ? asset('assets/profile-photos/4.png')
                            : asset('assets/profile-photos/7.png');
                          $foto = session('photo') ? asset('storage/' . session('photo')) : $defaultFoto;
                        @endphp
                        <div class="fotouser text-center p-2 mt-3" style="margin-bottom:5px;">
                          <a href="javascript:void(0)" onclick="ubahfoto()">
                            <img src="{{ $foto }}" class="rounded-circle" width="130" height="130" alt="Profile Picture">
                          </a>
                        </div>
                        <div class="pt-1 text-center">
                          <p class="text-muted">Role Akses: {{ $user->role->role_access }}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-8">
                    <div class="card">
                      <div class="card-header bg-blue" style="min-height:0px;"></div>
                      <div class="card-body">
                        <h5 class="text-araki">Detail Pengguna</h5>
                        <table class="table table-striped">
                          <tr>
                            <td class="text-muted">Nama Lengkap</td>
                            <td style="width:3%; padding-right: 30px;">:</td>
                            <td>{{ $user->name }}</td>
                          </tr>
                          <tr>
                            <td class="text-muted">Jenis Kelamin</td>
                            <td style="width:3%; padding-right: 30px;">:</td>
                            <td>{{ $user->sex == 1 ? 'Laki-laki' : 'Perempuan' }}</td>
                          </tr>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-sm-12 mt-3">
                  <div class="card">
                    <div class="card-header bg-pink" style="min-height:0px;"></div>
                    <div class="card-body">
                      <div class="row">
                        <div class="col-sm-3">
                          <h5 class="text-araki">Info Akun</h5>
                          <table class="table">
                            <tr>
                              <td class="text-muted">Email / Username</td>
                              <td style="width:3%; padding-right: 30px;">:</td>
                              <td>{{ $user->email }}</td>
                            </tr>
                            <tr>
                              <td class="text-muted">Password</td>
                              <td style="width:3%; padding-right: 30px;">:</td>
                              <td>
                                ******
                                <a href="javascript:void(0)" onclick="ubahpassword()">
                                  <span class="btn btn-xs btn-warning"><i class="pli-pen-5"></i></span>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="text-muted">Terdaftar pada</td>
                              <td style="width:3%; padding-right: 30px;">:</td>
                              <td>{{ toDmy($user->created_at) }}</td>
                            </tr>
                            <tr>
                              <td colspan="3">
                                @error('current_password')
                                  <div class="text-danger">{{ $message }}</div>
                                @enderror
                                @error('new_password')
                                  <div class="text-danger">{{ $message }}</div>
                                @enderror
                                @error('new_password_confirmation')
                                  <div class="text-danger">{{ $message }}</div>
                                @enderror
                              </td>
                            </tr>
                          </table>
                        </div>
                        <div class="col-sm-1"></div>
                        <div class="col-sm-8">
                          <h5 class="text-araki">Riwayat LogIn</h5>
                          <table class="table">
                            <tr>
                              <td class="text-muted">Browser</td>
                              <td style="width:3%; padding-right: 30px;">:</td>
                              <td>{{ $browser ?? '(Tidak Terdeteksi)' }}</td>
                            </tr>
                            <tr>
                              <td class="text-muted" style="width:15%;">Alamat IP</td>
                              <td style="width:3%; padding-right: 30px;">:</td>
                              <td>{{ $localIp ?? '(Tidak Terdeteksi)' }}</td>
                            </tr>
                            <tr>
                              <td class="text-muted">Waktu</td>
                              <td style="width:3%; padding-right: 30px;">:</td>
                              <td>{{ date('m-d-Y H:i:s') }}</td>
                            </tr>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  @include('sistem::user.modal')

  @push('script')
    <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/js/toastr.min.js') }}"></script>
    <script>
      function ubahpassword(){
        $("#modalpassword").modal("show")
      }
      function ubahfoto(){
        $("#modalfoto").modal("show")
      }

      function togglePasswordVisibility(fieldId, iconId) {
        const field = document.getElementById(fieldId);
        const icon = document.getElementById(iconId);
        
        if (field.type === "password") {
          field.type = "text"
          icon.classList.remove("fa-eye")
          icon.classList.add("fa-eye-slash")
        } else {
          field.type = "password"
          icon.classList.remove("fa-eye-slash")
          icon.classList.add("fa-eye")
        }
      }

      $(document).ready(function(){
        $(document).on("input", "#new_password, #new_password_confirmation", function(){
          let newPassword = $("#new_password").val().trim()
          let confirmPassword = $("#new_password_confirmation").val().trim()
            
          if(newPassword !== confirmPassword){
            $("#new_password, #new_password_confirmation").addClass('is-invalid').removeClass('is-valid')
          } else {
            $("#new_password, #new_password_confirmation").addClass('is-valid').removeClass('is-invalid')
          }
        })
      })
    </script>
    <script>
      @if(session()->has('success'))
        toastr.success('{{ session('success') }}', 'BERHASIL'); 
      @elseif(session()->has('error'))
        toastr.error('{{ session('error') }}', 'GAGAL'); 
      @endif
    </script>
  @endpush

@endsection