@extends('layoutuser.app')

@section('content')
<style>
    /* Optional: background animation */
    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">
            {{-- Sidebar Profile --}}
            <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" style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
            <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">
                            {{-- DETAILS TAB --}}
                            <div class="tab-pane fade show active" id="tab-details" role="tabpanel">
                                <h5 class="fw-semibold mb-3">👁️ Profile Overview</h5>
                                <div class="mb-2"><strong>Name:</strong> {{ $user->name }}</div>
                                <div class="mb-2"><strong>Email:</strong> {{ $user->email }}</div>
                                <div class="mb-2"><strong>Phone:</strong> {{ $user->no_telp }}</div>
                            </div>

                            {{-- EDIT PROFILE TAB --}}
                            <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>

                            {{-- CHANGE PASSWORD TAB --}}
                            <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>
                                        <input name="current_password" type="password" class="form-control" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">New Password</label>
                                        <input name="password" type="password" class="form-control" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Confirm New Password</label>
                                        <input name="password_confirmation" type="password" class="form-control" required>
                                    </div>
                                    <button class="btn btn-warning w-100">🔁 Update Password</button>
                                </form>
                            </div>
                        </div>

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