@extends('layouts.app')

@section('title', 'My Profile')

@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.profile-wrap {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    padding: 2rem 1.2rem;
    color: #2d2f45;
}

/* ── header row ── */
.profile-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    /* max-width: 920px; */
    margin: 0 auto 1.6rem;
}
.profile-title-group { display: flex; align-items: center; gap: 14px; }
.profile-icon-box {
    width: 46px; height: 46px; border-radius: 13px;
    background: #414662;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.profile-title { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: #2d2f45; }
.profile-sub   { font-size: 12px; color: #9099b8; margin: 0; }
.profile-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #414662;
    text-decoration: none; padding: 8px 14px;
    border: 1.5px solid #dde0ef; border-radius: 9px;
    background: #fff; transition: all .18s;
    font-family: 'Poppins', sans-serif;
}
.profile-back:hover { background: #414662; color: #fff; border-color: #414662; }

/* ── card ── */
.profile-card {
    margin: 0 auto 1.4rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 36px rgba(65,70,98,.11);
    overflow: hidden;
}
.profile-bar {
    height: 5px;
    background: linear-gradient(90deg,#414662 0%,#f5a623 50%,#414662 100%);
    background-size: 200% 100%;
    animation: profile-shimmer 3s linear infinite;
}
@keyframes profile-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.profile-body { padding: 2rem 2.2rem; }

/* section head */
.profile-sh { display: flex; align-items: center; gap: 10px; margin-bottom: 1.1rem; }
.profile-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a623; flex-shrink: 0; }
.profile-stitle { font-size: 11px; font-weight: 700; color: #414662; letter-spacing: .09em; text-transform: uppercase; }
.profile-hr { border: none; border-top: 1.5px solid #f0f1f7; margin: 1.8rem 0; }

/* ── info grid ── */
.profile-igrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.profile-tile {
    position: relative;
    background: #f7f8fc;
    border: 1.5px solid #eceef6;
    border-radius: 13px;
    padding: 15px 16px 15px 16px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.profile-tile:hover { border-color: #c0c5da; box-shadow: 0 4px 16px rgba(65,70,98,.07); }
.profile-tile-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 13px 13px 0 0; background: #414662;
    opacity: 0; transition: opacity .2s;
}
.profile-tile:hover .profile-tile-bar { opacity: 1; }
.profile-tile-gold .profile-tile-bar { background: #f5a623; opacity: 1; }
.profile-tlabel {
    font-size: 10px; font-weight: 700; color: #9099b8;
    letter-spacing: .09em; text-transform: uppercase; margin-bottom: 7px;
    display: flex; align-items: center; gap: 6px;
}
.profile-tlabel svg { flex-shrink: 0; }
.profile-tval { font-size: 15px; font-weight: 700; color: #2d2f45; }
.profile-tval-gold { font-size: 22px; font-weight: 700; color: #f5a623; }
.profile-tval-gold span { font-size: 12px; color: #9099b8; font-weight: 500; }

/* badges */
.profile-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px;
    font-size: 12px; font-weight: 700;
}
.profile-bdot { width: 7px; height: 7px; border-radius: 50%; }
.profile-badge-student { background:#eff6ff; color:#2563eb; } .profile-badge-student .profile-bdot { background:#2563eb; }
.profile-badge-admin   { background:#fffbeb; color:#d97706; } .profile-badge-admin   .profile-bdot { background:#d97706; }
.profile-badge-other   { background:#f7f8fc; color:#6b7194; } .profile-badge-other   .profile-bdot { background:#6b7194; }

/* Info list */
.profile-info-list {
    display: flex; flex-direction: column; gap: 16px;
}
.profile-info-item {
    padding: 14px 16px;
    background: #f7f8fc;
    border: 1.5px solid #eceef6;
    border-radius: 13px;
    transition: border-color .2s;
}
.profile-info-item:hover { border-color: #c0c5da; }
.profile-info-label {
    font-size: 10px; font-weight: 700; color: #9099b8;
    letter-spacing: .09em; text-transform: uppercase; margin-bottom: 6px;
}
.profile-info-val { font-size: 14px; font-weight: 600; color: #2d2f45; }

@media(max-width:640px){
    .profile-body { padding: 1.4rem 1rem; }
    .profile-igrid { grid-template-columns: 1fr 1fr; }
    .profile-top-row { flex-direction: column; align-items: flex-start; }
}
@media(max-width:400px){
    .profile-igrid { grid-template-columns: 1fr; }
}
</style>

<div class="profile-wrap">

    {{-- ── Top row ── --}}
    <div class="profile-top-row">
        <div class="profile-title-group">
            <div class="profile-icon-box">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                </svg>
            </div>
            <div>
                <p class="profile-title">My Profile</p>
                <p class="profile-sub">Account Information</p>
            </div>
        </div>
        @if(auth()->check() && auth()->id() === $user->id)
            <a href="{{ route('profile.edit') }}" class="profile-back">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                </svg>
                Edit Profile
            </a>
        @endif
    </div>

    {{-- ── Main card ── --}}
    <div class="profile-card">
        <div class="profile-bar"></div>
        <div class="profile-body">

            {{-- Success Message --}}
            @if(session('success'))
            <div style="background:#f0fdf4; border:1.5px solid #86efac; border-radius:13px; padding:14px 16px; margin-bottom:1.8rem; display:flex; gap:12px; align-items:flex-start;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0; margin-top:1px;">
                    <polyline points="20 6 9 17 4 12"/>
                </svg>
                <p style="color:#16a34a; font-size:13px; font-weight:600; margin:0;">{{ session('success') }}</p>
            </div>
            @endif

            {{-- ── Section: Basic Information ── --}}
            <div class="profile-sh">
                <div class="profile-dot"></div>
                <span class="profile-stitle">Basic Information</span>
            </div>

            <div class="profile-igrid">

                {{-- Full Name --}}
                <div class="profile-tile">
                    <div class="profile-tile-bar"></div>
                    <div class="profile-tlabel">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                            <circle cx="12" cy="7" r="4"/>
                        </svg>
                        Full Name
                    </div>
                    <div class="profile-tval">{{ $user->name }}</div>
                </div>

                {{-- Email --}}
                <div class="profile-tile">
                    <div class="profile-tile-bar"></div>
                    <div class="profile-tlabel">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="2" y="4" width="20" height="16" rx="2"/>
                            <path d="M22 6L12 13 2 6"/>
                        </svg>
                        Email
                    </div>
                    <div class="profile-tval" style="font-size:13px; word-break:break-all;">{{ $user->email }}</div>
                </div>

                {{-- Role --}}
                <div class="profile-tile">
                    <div class="profile-tile-bar"></div>
                    <div class="profile-tlabel">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                            <polyline points="7 10 12 13 17 10"/>
                            <polyline points="2 6 12 1 22 6"/>
                        </svg>
                        Role
                    </div>
                    <div style="margin-top:2px;">
                        @php
                            $roleType = $user->role;
                            if ($roleType === 'admin') $badgeClass = 'profile-badge-admin';
                            elseif ($roleType === 'student') $badgeClass = 'profile-badge-student';
                            else $badgeClass = 'profile-badge-other';
                        @endphp
                        <span class="profile-badge {{ $badgeClass }}">
                            <span class="profile-bdot"></span>
                            {{ ucfirst(str_replace('_', ' ', $user->role)) }}
                        </span>
                    </div>
                </div>

            </div>{{-- /basic grid --}}

            {{-- ── Section: Student Information (single, merged) ── --}}
            @if($user->role === 'student' && $user->student)

                <hr class="profile-hr">

                <div class="profile-sh">
                    <div class="profile-dot"></div>
                    <span class="profile-stitle">Student Information</span>
                </div>

                <div class="profile-igrid">

                    {{-- Student Photo --}}
                    <div class="profile-tile profile-tile-gold">
                        <div class="profile-tile-bar"></div>
                        <div class="profile-tlabel">Student Photo</div>
                        <div style="margin-top:10px;">
                            @if($user->student->photo)
                                <img src="{{ asset('storage/'.$user->student->photo) }}"
                                     alt="Student Photo"
                                     style="width:90px; height:90px; border-radius:50%; object-fit:cover; border:3px solid #f5a623;">
                            @else
                                <div style="width:90px; height:90px; border-radius:50%; background:#f3f4f6; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:12px; font-weight:600;">
                                    No Photo
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Roll Number --}}
                    <div class="profile-tile">
                        <div class="profile-tile-bar"></div>
                        <div class="profile-tlabel">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                <polyline points="14 2 14 8 20 8"/>
                                <line x1="12" y1="13" x2="8" y2="13"/>
                                <line x1="16" y1="17" x2="8" y2="17"/>
                            </svg>
                            Roll Number
                        </div>
                        <div class="profile-tval">{{ $user->student->roll_no ?? '—' }}</div>
                    </div>

                    {{-- Mobile --}}
                    <div class="profile-tile">
                        <div class="profile-tile-bar"></div>
                        <div class="profile-tlabel">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
                                <line x1="12" y1="18" x2="12.01" y2="18"/>
                            </svg>
                            Mobile Number
                        </div>
                        <div class="profile-tval">{{ $user->student->mobile ?? '—' }}</div>
                    </div>

                    {{-- Gender --}}
                    <div class="profile-tile">
                        <div class="profile-tile-bar"></div>
                        <div class="profile-tlabel">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="8" r="4"/>
                                <path d="M12 12v8M9 18h6"/>
                            </svg>
                            Gender
                        </div>
                        <div class="profile-tval">{{ ucfirst($user->student->gender ?? '—') }}</div>
                    </div>


                    {{-- Trade --}}
                    <div class="profile-tile">
                        <div class="profile-tile-bar"></div>
                        <div class="profile-tlabel">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2" y="7" width="20" height="14" rx="2"/>
                                <path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
                            </svg>
                            Trade
                        </div>
                        <div class="profile-tval">{{ ucfirst($user->student->trade ?? '—') }}</div>
                    </div>

                    {{-- Shift --}}
                    <div class="profile-tile">
                        <div class="profile-tile-bar"></div>
                        <div class="profile-tlabel">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            Shift
                        </div>
                        <div class="profile-tval">{{ ucfirst($user->student->shift ?? '—') }}</div>
                    </div>


                </div>{{-- /student grid --}}

                {{-- Address --}}
                <div style="margin-top:18px;">
                    <div class="profile-info-item">
                        <div class="profile-info-label">Address</div>
                        <div class="profile-info-val">{{ $user->student->address ?? '—' }}</div>
                    </div>
                </div>

            @endif
            {{-- /student section --}}

            <hr class="profile-hr">

            {{-- ── Section: Account Information ── --}}
            <div class="profile-sh">
                <div class="profile-dot"></div>
                <span class="profile-stitle">Account Information</span>
            </div>

            <div class="profile-info-list">
                <div class="profile-info-item">
                    <div class="profile-info-label">
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline; margin-right:5px; vertical-align:-1px;">
                            <rect x="3" y="4" width="18" height="18" rx="2"/>
                            <line x1="16" y1="2" x2="16" y2="6"/>
                            <line x1="8" y1="2" x2="8" y2="6"/>
                            <line x1="3" y1="10" x2="21" y2="10"/>
                        </svg>
                        Member Since
                    </div>
                    <div class="profile-info-val">{{ $user->created_at->format('d M Y') }}</div>
                </div>

                <div class="profile-info-item">
                    <div class="profile-info-label">
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline; margin-right:5px; vertical-align:-1px;">
                            <circle cx="12" cy="12" r="10"/>
                            <polyline points="12 6 12 12 16 14"/>
                        </svg>
                        Last Updated
                    </div>
                    <div class="profile-info-val">{{ $user->updated_at->format('d M Y, H:i A') }}</div>
                </div>
            </div>

        </div>{{-- /card-body --}}
    </div>{{-- /card --}}

</div>{{-- /wrap --}}

@endsection