@extends('layoutuser.app')

@section('content')
<style>
    body {
        background: linear-gradient(135deg, #e3f2fd, #ffffff);
        background-size: cover;
    }
</style>

<div class="py-5" style="background: linear-gradient(135deg, #e3f2fd, #ffffff); min-height: 100vh;">
    <div class="container py-5">

        {{-- Flash & error messages --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <ul class="mb-0">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <h2 class="fw-bold mb-4">👤 My Profile</h2>

        <div class="row g-4">
            {{-- Profile Sidebar --}}
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm text-center p-4 rounded-4">
                    <div class="mb-3">
                        <div class="d-flex justify-content-center">
                            <div class="rounded-circle bg-white shadow p-4 d-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                                <i class="bi bi-person-fill text-primary fs-1"></i>
                            </div>
                        </div>
                    </div>
                    <h5 class="fw-semibold mb-1">{{ $user->name }}</h5>
                    <p class="text-muted mb-2">{{ $user->email }}</p>
                    <span class="badge rounded-pill bg-primary">
                        <i class="bi bi-award me-1"></i> {{ ucfirst($user->role->name ?? 'user') }}
                    </span>
                </div>
            </div>

            {{-- Profile Content --}}
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body">

                        <ul class="nav nav-tabs nav-justified mb-4" role="tablist">
                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-details" role="tab">
                                    <i class="bi bi-person-lines-fill me-1"></i> Details
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-edit" role="tab">
                                    <i class="bi bi-pencil-square me-1"></i> Edit Profile
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-password" role="tab">
                                    <i class="bi bi-lock-fill me-1"></i> Change Password
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content">
                            {{-- TAB: Details --}}
                            <div class="tab-pane fade show active" id="tab-details" role="tabpanel">
                                <h5 class="fw-semibold mb-3">👁️ Profile Overview</h5>
                                <p><strong>Name:</strong> {{ $user->name }}</p>
                                <p><strong>Email:</strong> {{ $user->email }}</p>
                                <p><strong>Phone:</strong> {{ $user->no_telp }}</p>
                            </div>

                            {{-- TAB: Edit Profile --}}
                            <div class="tab-pane fade" id="tab-edit" role="tabpanel">
                                <h5 class="fw-semibold mb-3">✏️ Update Profile</h5>
                                <form action="{{ route('user.update') }}" method="POST">
                                    @csrf @method('PATCH')
                                    <div class="mb-3">
                                        <label class="form-label">Name</label>
                                        <input name="name" type="text" class="form-control" value="{{ old('name', $user->name) }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Email</label>
                                        <input name="email" type="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Phone</label>
                                        <input name="no_telp" type="text" class="form-control" value="{{ old('no_telp', $user->no_telp) }}" required>
                                    </div>
                                    <button class="btn btn-success w-100">💾 Save Changes</button>
                                </form>
                            </div>

                            {{-- TAB: Change Password --}}
                            <div class="tab-pane fade" id="tab-password" role="tabpanel">
                                <h5 class="fw-semibold mb-3">🔒 Change Password</h5>
                                <form action="{{ route('user.password') }}" method="POST">
                                    @csrf @method('PATCH')

                                    <div class="mb-3">
                                        <label class="form-label">Current Password</label>
                                        <div class="input-group">
                                            <input name="password" type="password" class="form-control" id="currentPassword" value="{{ old('password', $user->password) }}" required>
                                            <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('currentPassword', this)"><i class="bi-eye-slash text-secondary"></i></button>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">New Password</label>
                                        <div class="input-group">
                                            <input name="new_password" type="password" class="form-control" id="newPassword" required>
                                            <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('newPassword', this)">
                                                <i class="bi bi-eye-slash text-secondary"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Confirm New Password</label>
                                        <div class="input-group">
                                            <input name="password_confirmation" type="password" class="form-control" id="confirmPassword" required>
                                            <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('confirmPassword', this)">
                                                <i class="bi bi-eye-slash text-secondary"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <button class="btn btn-warning w-100">🔁 Update Password</button>
                                </form>
                            </div>
                        </div>

                        {{-- Toggle Password Script --}}
                        <script>
                            function togglePassword(inputId, button) {
                                const input = document.getElementById(inputId);
                                const icon = button.querySelector('i');
                                if (input.type === "password") {
                                    input.type = "text";
                                    icon.classList.remove('bi-eye-slash', 'text-secondary');
                                    icon.classList.add('bi-eye', 'text-primary');
                                } else {
                                    input.type = "password";
                                    icon.classList.remove('bi-eye', 'text-primary');
                                    icon.classList.add('bi-eye-slash', 'text-secondary');
                                }
                            }
                        </script>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection