@extends('layouts.app')

@section('content')
<style>
    .profile-avatar {
        width: 104px;
        height: 104px;
        background: #E3F2FD;
        color: #1565C0;
    }

    .profile-stat {
        border-left: 4px solid #1565C0;
    }

    .profile-tabs .nav-link {
        color: #5f6c7b;
        border: 0;
        border-bottom: 3px solid transparent;
        font-weight: 600;
        padding: 1rem 1.25rem;
    }

    .profile-tabs .nav-link.active {
        color: #1565C0;
        border-bottom-color: #1565C0;
        background: transparent;
    }
</style>

<section class="py-5 bg-light min-vh-100">
    <div class="container">
        <div class="mb-4 fade-in">
            <h2 class="fw-bold font-poppins text-primary-custom mb-2">Profil Saya</h2>
            <p class="text-muted mb-0">Kelola informasi akun dan lihat ringkasan konsultasi Anda.</p>
        </div>

        @if(session('success'))
            <div class="alert alert-success border-0 shadow-sm rounded-3">
                <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger border-0 shadow-sm rounded-3">
                <div class="fw-semibold mb-1">
                    <i class="fas fa-circle-exclamation me-2"></i>Data belum valid
                </div>
                <ul class="mb-0 ps-3">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="row g-4">
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body text-center p-4">
                        <div class="profile-avatar rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3">
                            <i class="fas fa-user fa-3x"></i>
                        </div>
                        <h5 class="fw-bold font-poppins mb-1">{{ $user->name }}</h5>
                        <p class="text-muted small mb-3">{{ $user->email }}</p>
                        <div class="badge bg-primary-custom rounded-pill px-3 py-2">
                            <i class="fas fa-calendar-check me-1"></i>
                            Bergabung {{ $user->created_at->format('d M Y') }}
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm rounded-4 mb-3 profile-stat">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <p class="text-muted small mb-1">Total Konsultasi</p>
                                <h3 class="fw-bold text-dark mb-0">{{ $totalKonsultasi }}</h3>
                            </div>
                            <div class="rounded-circle bg-primary bg-opacity-10 p-3">
                                <i class="fas fa-stethoscope text-primary fa-lg"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm rounded-4 mb-3 profile-stat">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <p class="text-muted small mb-1">Konsultasi Bulan Ini</p>
                                <h3 class="fw-bold text-dark mb-0">{{ $konsultasiBulanIni }}</h3>
                            </div>
                            <div class="rounded-circle bg-success bg-opacity-10 p-3">
                                <i class="fas fa-chart-line text-success fa-lg"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm rounded-4 profile-stat">
                    <div class="card-body p-4">
                        <p class="text-muted small mb-1">Hasil Terbanyak</p>
                        <h6 class="fw-bold text-dark mb-1">{{ $hasilTerbanyak?->disease?->nama ?? 'Belum ada data' }}</h6>
                        <p class="text-muted small mb-0">
                            {{ $hasilTerbanyak ? $hasilTerbanyak->total . ' kali konsultasi' : 'Mulai konsultasi untuk melihat ringkasan.' }}
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-header bg-white border-0 p-0">
                        <ul class="nav nav-tabs profile-tabs px-3" id="profileTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="edit-profile-tab" data-bs-toggle="tab" data-bs-target="#editProfile" type="button" role="tab" aria-controls="editProfile" aria-selected="true">
                                    <i class="fas fa-user-pen me-2"></i>Edit Profil
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="change-password-tab" data-bs-toggle="tab" data-bs-target="#changePassword" type="button" role="tab" aria-controls="changePassword" aria-selected="false">
                                    <i class="fas fa-lock me-2"></i>Ubah Password
                                </button>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body p-4">
                        <div class="tab-content" id="profileTabContent">
                            <div class="tab-pane fade show active" id="editProfile" role="tabpanel" aria-labelledby="edit-profile-tab">
                                <form method="POST" action="{{ route('profil.update') }}">
                                    @method('PUT')
                                    @csrf

                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">Nama Lengkap</label>
                                        <input type="text" name="name" value="{{ old('name', $user->name) }}" class="form-control rounded-3" required minlength="3" maxlength="100">
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">Email</label>
                                        <input type="email" value="{{ $user->email }}" class="form-control rounded-3 bg-light" disabled>
                                        <small class="text-muted">Email tidak dapat diubah.</small>
                                    </div>

                                    <button type="submit" class="btn btn-primary-custom rounded-pill px-4">
                                        <i class="fas fa-save me-2"></i>Simpan Perubahan
                                    </button>
                                </form>
                            </div>

                            <div class="tab-pane fade" id="changePassword" role="tabpanel" aria-labelledby="change-password-tab">
                                <form method="POST" action="{{ route('profil.password') }}">
                                    @method('PUT')
                                    @csrf

                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">Password Lama</label>
                                        <input type="password" name="current_password" class="form-control rounded-3" required>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">Password Baru</label>
                                        <input type="password" name="password" class="form-control rounded-3" required minlength="8">
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">Konfirmasi Password Baru</label>
                                        <input type="password" name="password_confirmation" class="form-control rounded-3" required>
                                    </div>

                                    <button type="submit" class="btn btn-warning rounded-pill px-4">
                                        <i class="fas fa-key me-2"></i>Ubah Password
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-header bg-white border-0 p-4 pb-0">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <h5 class="fw-bold font-poppins mb-1">Riwayat Terakhir</h5>
                                <p class="text-muted small mb-0">Lima konsultasi terbaru Anda.</p>
                            </div>
                            <a href="{{ route('riwayat.index') }}" class="btn btn-sm btn-light border rounded-pill px-3">
                                Lihat Semua
                            </a>
                        </div>
                    </div>

                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="ps-4 py-3">Tanggal</th>
                                        <th class="py-3">Hasil Diagnosis</th>
                                        <th class="py-3 text-center">CF%</th>
                                        <th class="pe-4 py-3">Interpretasi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($riwayatTerakhir as $row)
                                        <tr>
                                            <td class="ps-4 py-3">
                                                <div class="fw-medium text-dark">{{ $row->created_at->format('d M Y') }}</div>
                                                <div class="small text-muted">{{ $row->created_at->format('H:i') }} WIB</div>
                                            </td>
                                            <td class="py-3 fw-semibold text-primary-custom">
                                                {{ $row->disease->nama ?? '-' }}
                                            </td>
                                            <td class="py-3 text-center fw-bold">
                                                {{ number_format((float) $row->cf_persen, 2) }}%
                                            </td>
                                            <td class="pe-4 py-3">
                                                <span class="badge rounded-pill bg-primary px-3 py-2">
                                                    {{ $row->interpretasi ?? '-' }}
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center py-5 text-muted">
                                                <i class="fas fa-folder-open fa-3x mb-3 opacity-50"></i>
                                                <p class="mb-0">Belum ada riwayat konsultasi.</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection