@extends('layouts.app')

@section('title', 'Hồ sơ tài khoản | GreenCard.vn')

@section('content')
<main class="container dash-layout">
    @include('partials.dash-sidebar')

    <section class="dash-main card-panel">
        <h1>Hồ sơ tài khoản</h1>
        <p class="page-sub">Quản lý thông tin hồ sơ để bảo mật tài khoản</p>

        <div style="display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:start;">
            <form method="POST" action="{{ route('user.info.update') }}">
                @csrf
                <div class="info-grid">
                    <label>Tên đăng nhập</label>
                    <span style="font-size:14px;">admin</span>

                    <label>Họ Và Tên</label>
                    <input class="input" name="name" value="{{ old('name', $user->name) }}">

                    <label>Email</label>
                    <span style="font-size:14px;">
                        {{ $user->email ? substr($user->email, 0, 2).'***@'.explode('@', $user->email)[1] : 'ad***@gmail.com' }}
                        <a href="#" style="color:var(--green-dark);font-weight:600;margin-left:6px;">Thay Đổi</a>
                    </span>

                    <label>Số điện thoại</label>
                    <span style="font-size:14px;">
                        ********{{ substr($user->phone, -2) }}
                        <a href="#" style="color:var(--green-dark);font-weight:600;margin-left:6px;">Thay Đổi</a>
                    </span>

                    <label>Giới tính</label>
                    <span style="display:flex;gap:18px;font-size:14px;">
                        <label style="display:flex;align-items:center;gap:6px;"><input type="radio" name="gender" value="male" checked style="accent-color:var(--green);"> Nam</label>
                        <label style="display:flex;align-items:center;gap:6px;"><input type="radio" name="gender" value="female" style="accent-color:var(--green);"> Nữ</label>
                        <label style="display:flex;align-items:center;gap:6px;"><input type="radio" name="gender" value="other" style="accent-color:var(--green);"> Khác</label>
                    </span>

                    <label>Ngày sinh</label>
                    <span style="display:flex;gap:10px;">
                        <select class="select" name="dob_day" style="flex:1;">
                            @for($d = 1; $d <= 31; $d++)<option {{ $d === 15 ? 'selected' : '' }}>{{ $d }}</option>@endfor
                        </select>
                        <select class="select" name="dob_month" style="flex:1.2;">
                            @for($m = 1; $m <= 12; $m++)<option {{ $m === 6 ? 'selected' : '' }}>Tháng {{ $m }}</option>@endfor
                        </select>
                        <select class="select" name="dob_year" style="flex:1;">
                            @for($y = 2010; $y >= 1960; $y--)<option {{ $y === 2005 ? 'selected' : '' }}>{{ $y }}</option>@endfor
                        </select>
                    </span>

                    <span></span>
                    <span><button type="submit" class="btn btn-green">Lưu thông tin</button></span>
                </div>
            </form>

            {{-- Thẻ minh họa bên phải --}}
            <div style="position:relative;padding-bottom:40px;">
                <div style="height:150px;border-radius:14px;background:linear-gradient(120deg,#86efac,#dcfce7 45%,#4ade80);position:relative;overflow:hidden;">
                    <div style="position:absolute;left:16px;bottom:14px;width:52px;height:36px;border-radius:6px;background:repeating-linear-gradient(90deg,#16a34a 0 3px,transparent 3px 6px);opacity:.5;"></div>
                    <div style="position:absolute;right:16px;bottom:14px;width:52px;height:36px;border-radius:6px;background:repeating-linear-gradient(90deg,#16a34a 0 3px,transparent 3px 6px);opacity:.5;"></div>
                </div>
                <div style="position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:86px;height:86px;border-radius:50%;background:#e5e7eb;border:5px solid #fff;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;box-shadow:0 10px 24px -8px rgba(15,23,42,.35);">
                    <img src="{{ asset('img/avatar.png') }}" alt="avatar" style="width:100%;height:100%;object-fit:cover;">
                </div>
            </div>
        </div>
    </section>
</main>
@endsection