@extends('backend.master')
@section('title', 'My Profile')

@section('content')
    {{-- extra: Font Awesome যদি layout এ না থাকে --}}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
          integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
          crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        :root{
            --primary:#e53935;
            --primary-soft:#fee2e2;
            --ink:#111827;
            --muted:#6b7280;
            --ring:#e5e7eb;
        }
        *{box-sizing:border-box;}

        .page-wrap{
            max-width:1100px;
            margin:20px auto 60px;
            padding:0 12px;
        }

        .profile-header{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:16px;
            background:#ffffff;
            border-radius:20px;
            padding:18px 18px;
            box-shadow:0 10px 28px rgba(15,23,42,.10);
            border:1px solid #e5e7eb;
            margin-bottom:18px;
        }

        .avatar-wrap{
            position:relative;
            width:88px;
            height:88px;
            border-radius:999px;
            overflow:hidden;
            border:3px solid #ffffff;
            box-shadow:0 14px 30px rgba(0,0,0,.22);
            background:linear-gradient(135deg,#fecaca,#fee2e2);
            display:flex;
            align-items:center;
            justify-content:center;
            color:#b91c1c;
            font-size:34px;
            font-weight:700;
        }
        .avatar-wrap img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .avatar-badge{
            position:absolute;
            right:-2px;
            bottom:-2px;
            background:#22c55e;
            width:24px;
            height:24px;
            border-radius:999px;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            border:2px solid #ffffff;
            font-size:13px;
        }

        .ph-main-name{
            font-size:20px;
            font-weight:700;
            color:var(--ink);
        }
        .ph-role{
            font-size:13px;
            font-weight:600;
            color:#fef2f2;
            background:rgba(0,0,0,.35);
            padding:3px 10px;
            border-radius:999px;
            display:inline-flex;
            align-items:center;
            gap:6px;
        }
        .ph-role i{font-size:12px;}
        .ph-meta{
            font-size:13px;
            color:var(--muted);
        }
        .ph-meta i{width:16px;}

        .pill-stat{
            border-radius:999px;
            padding:6px 12px;
            font-size:12px;
            font-weight:600;
            display:inline-flex;
            align-items:center;
            gap:6px;
            background:var(--primary-soft);
            color:#b91c1c;
        }

        .grid-2{
            display:grid;
            grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
            gap:16px;
        }
        @media (max-width:900px){
            .grid-2{grid-template-columns:1fr;}
        }

        .card{
            background:#ffffff;
            border-radius:18px;
            padding:18px 18px 20px;
            box-shadow:0 8px 22px rgba(15,23,42,.06);
            border:1px solid #e5e7eb;
        }
        .card-title{
            display:flex;
            align-items:center;
            gap:10px;
            margin-bottom:12px;
            font-weight:600;
            color:var(--ink);
        }
        .card-title i{
            width:26px;height:26px;
            border-radius:999px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:var(--primary-soft);
            color:#b91c1c;
            font-size:13px;
        }

        .form-label{
            font-size:13px;
            font-weight:600;
            color:#374151;
            margin-bottom:4px;
        }
        .form-control{
            border-radius:12px;
            border:1px solid #e5e7eb;
            font-size:14px;
        }
        .form-control:focus{
            border-color:var(--primary);
            box-shadow:0 0 0 1px rgba(229,57,53,.35);
        }
        .form-text{
            font-size:11px;
            color:var(--muted);
        }

        .btn-primary-soft{
            border-radius:999px;
            border:none;
            padding:8px 18px;
            font-size:14px;
            font-weight:600;
            color:#fff;
            background:linear-gradient(135deg,#ef4444,#e11d48);
            box-shadow:0 10px 24px rgba(248,113,113,.45);
        }
        .btn-primary-soft:hover{
            filter:brightness(1.04);
        }

        .btn-outline-muted{
            border-radius:999px;
            border:1px solid #e5e7eb;
            padding:7px 14px;
            font-size:13px;
            font-weight:500;
            color:#374151;
            background:#fff;
        }
        .btn-outline-muted:hover{
            background:#f3f4f6;
        }

        .flash-success{
            margin-bottom:12px;
            border-radius:12px;
            padding:8px 12px;
            background:#ecfdf5;
            color:#166534;
            font-size:13px;
            border:1px solid #bbf7d0;
        }
        .flash-error{
            margin-bottom:12px;
            border-radius:12px;
            padding:8px 12px;
            background:#fef2f2;
            color:#b91c1c;
            font-size:13px;
            border:1px solid #fecaca;
        }

        .avatar-small-hint{
            font-size:11px;color:#9ca3af;margin-top:4px;
        }
    </style>

    <div class="page-wrap">

        {{-- flash messages --}}
        @if(session('success'))
            <div class="flash-success">
                <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="flash-error">
                <i class="fa-solid fa-circle-exclamation"></i> {{ session('error') }}
            </div>
        @endif

        {{-- PROFILE HEADER --}}
        <div class="profile-header">
            <div class="avatar-wrap">
                @if($user->avatar)
                    <img src="{{ asset('storage/'.$user->avatar) }}" alt="Avatar">
                @else
                    {{ strtoupper(substr($user->name,0,1)) }}
                @endif
                <div class="avatar-badge">
                    <i class="fa-solid fa-camera"></i>
                </div>
            </div>

            <div style="flex:1 1 220px;min-width:0;">
                <div class="ph-main-name">{{ $user->name }}</div>
                <div class="mt-1 ph-role">
                    <i class="fa-solid fa-user-shield"></i>
                    <span>Administrator</span>
                </div>
                <div class="mt-2 ph-meta">
                    <div><i class="fa-solid fa-envelope"></i> {{ $user->email }}</div>
                    @if($user->phone)
                        <div><i class="fa-solid fa-phone"></i> {{ $user->phone }}</div>
                    @endif
                </div>
            </div>

            <div style="display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:170px;">
                <span class="pill-stat">
                    <i class="fa-solid fa-shield-halved"></i> Secure profile
                </span>
                <button type="button" class="btn-outline-muted" onclick="document.getElementById('avatarInput').click();">
                    <i class="fa-regular fa-image"></i> Change photo
                </button>
            </div>
        </div>

        <div class="grid-2">

            {{-- LEFT: PROFILE INFO --}}
            <div class="card">
                <div class="card-title">
                    <i class="fa-regular fa-id-card"></i>
                    <span>Profile information</span>
                </div>

                <form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="mb-3">
                        <label class="form-label">Full name</label>
                        <input type="text" name="name"
                               class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $user->name) }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Email address</label>
                        <input type="email" name="email"
                               class="form-control @error('email') is-invalid @enderror"
                               value="{{ old('email', $user->email) }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text"><i class="fa-regular fa-circle-question"></i> এই ইমেইলেই নোটিফিকেশন যাবে।</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone"
                               class="form-control @error('phone') is-invalid @enderror"
                               value="{{ old('phone', $user->phone) }}">
                        @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Profile photo</label>
                        <input type="file" id="avatarInput" name="avatar"
                               class="form-control @error('avatar') is-invalid @enderror"
                               accept="image/*">
                        @error('avatar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="avatar-small-hint">
                            JPG/PNG • Max 1MB • Square image হলে ভাল দেখাবে।
                        </div>
                    </div>

                    <button type="submit" class="btn-primary-soft">
                        <i class="fa-solid fa-floppy-disk"></i> Save changes
                    </button>
                </form>
            </div>

            {{-- RIGHT: PASSWORD CHANGE --}}
            <div class="card">
                <div class="card-title">
                    <i class="fa-solid fa-lock"></i>
                    <span>Change password</span>
                </div>

                <form action="{{ route('admin.profile.password') }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="mb-3">
                        <label class="form-label">Current password</label>
                        <input type="password" name="current_password"
                               class="form-control @error('current_password') is-invalid @enderror" required>
                        @error('current_password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">New password</label>
                        <input type="password" name="password"
                               class="form-control @error('password') is-invalid @enderror" required>
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">
                            কমপক্ষে ৮ অক্ষর, strong password ব্যবহার করা ভাল (letters + numbers + symbol).
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Confirm new password</label>
                        <input type="password" name="password_confirmation"
                               class="form-control" required>
                    </div>

                    <button type="submit" class="btn-primary-soft" style="width:100%;margin-top:4px;">
                        <i class="fa-solid fa-key"></i> Update password
                    </button>
                </form>
            </div>

        </div>
    </div>

    <script>
        // small JS: photo নির্বাচনের সাথে সাথে প্রিভিউ আপডেট
        document.getElementById('avatarInput')?.addEventListener('change', function(e){
            const file = e.target.files[0];
            if(!file) return;
            const reader = new FileReader();
            reader.onload = function(ev){
                const img = document.querySelector('.avatar-wrap img');
                const wrap = document.querySelector('.avatar-wrap');
                if(img){
                    img.src = ev.target.result;
                }else if(wrap){
                    wrap.innerHTML = '<img src="'+ev.target.result+'" alt="Avatar">';
                    const badge = document.createElement('div');
                    badge.className = 'avatar-badge';
                    badge.innerHTML = '<i class="fa-solid fa-camera"></i>';
                    wrap.appendChild(badge);
                }
            };
            reader.readAsDataURL(file);
        });
    </script>
@endsection