@extends('layouts.app')

@section('page_title', 'Profile')
@section('breadcrumb', $breadcrumb)
@section('breadcrumb_title', 'Profile')

@section('content')
    <!--begin::Row-->
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">User Profile</h5>
                </div>
                <div class="card-body">
                    <!-- Nav Tabs -->
                    <ul class="nav nav-tabs mb-3" id="profileTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="info-tab" data-bs-toggle="tab" data-bs-target="#info" type="button" role="tab" aria-controls="info" aria-selected="true">Informasi User</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password" type="button" role="tab" aria-controls="password" aria-selected="false">Ubah Password</button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="profileTabsContent">
                        <!-- Tab Informasi User -->
                        <div class="tab-pane fade show active" id="info" role="tabpanel" aria-labelledby="info-tab">
                            <div class="row">
                                <div class="col-12 col-md-8 col-lg-6">
                                    <form>
                                        <div class="row mb-3">
                                            <div class="col-12 col-sm-2 fw-bold px-3">Username</div>
                                            <div class="col-12 col-sm-10">{{ $user->getUsernameField() }}</div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-12 col-sm-2 fw-bold px-3">Nama</div>
                                            <div class="col-12 col-sm-10">{{ $user->getNameField() }}</div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-12 col-sm-2 fw-bold px-3">E-mail</div>
                                            <div class="col-12 col-sm-10">{{ $user->getEmailField() }}</div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-12 col-sm-2 fw-bold px-3">Jabatan</div>
                                            <div class="col-12 col-sm-10">{{ $user->getRoleName() }}</div>
                                        </div>
                                        {{-- <button type="submit" class="btn btn-primary"><i class="bi bi-send"></i> Ubah Data</button> --}}
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- Tab Ubah Password -->
                        <div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="password-tab">
                            <div class="row">
                                <div class="col-12 col-md-8 col-lg-6">
                                    <form>
                                        <div class="row mb-3">
                                            <label class="col-sm-3 fw-bold col-form-label">Kata Sandi Lama</label>
                                            <div class="col-sm-9 spill-password-container">
                                                <input type="password" id="current-password" class="form-control" placeholder="Masukkan kata sandi lama">
                                                <span data-toggle="password" data-target="#current-password">
                                                    <i class="bi bi-eye-slash"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-3 fw-bold col-form-label">Kata Sandi Baru</label>
                                            <div class="col-sm-9 spill-password-container">
                                                <input type="password" id="new-password" class="form-control" placeholder="Masukkan kata sandi baru">
                                                <span data-toggle="password" data-target="#new-password">
                                                    <i class="bi bi-eye-slash"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-3 fw-bold col-form-label">Konfirmasi Kata Sandi</label>
                                            <div class="col-sm-9 spill-password-container">
                                                <input type="password" id="confirm-password" class="form-control" placeholder="Konfirmasi kata sandi baru">
                                                <span data-toggle="password" data-target="#confirm-password">
                                                    <i class="bi bi-eye-slash"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <button type="submit" class="btn btn-primary"><i class="bi bi-send"></i> Simpan Perubahan</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end::Row-->
@endSection

@push('script')
<script>
    function togglePassword(inputId, el) {
        const input = document.getElementById(inputId);
        const icon = document.getElementById('icon-' + inputId);
        if (input.type === "password") {
            input.type = "text";
            icon.classList.remove('bi-eye-slash');
            icon.classList.add('bi-eye');
        } else {
            input.type = "password";
            icon.classList.remove('bi-eye');
            icon.classList.add('bi-eye-slash');
        }
    }
</script>
@endpush