@extends('frontend.layout_2')
@section('title', 'Update Photo')
@section('sub_layout')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

<style>
    :root { --primary:#e53935; --bg:#f5f5f5; --soft:#ffe5e5; --border:#f0f0f0; }
    * { box-sizing:border-box;margin:0;padding:0; }
    body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg); }

    .page { max-width:900px;margin:18px auto 30px;padding:0 12px; }
    .card { background:#fff;border-radius:18px;padding:18px 18px 20px;
            box-shadow:0 6px 16px rgba(0,0,0,.06);margin-bottom:14px; }

    .form-header{ display:flex;align-items:center;gap:10px;margin-bottom:14px; }
    .form-icon{
        height:36px;width:36px;border-radius:50%;
        background:var(--soft);
        display:flex;align-items:center;justify-content:center;
        color:var(--primary);font-size:17px;
    }
    .form-title{ font-size:18px;font-weight:700;color:#333; }
    .form-sub{ font-size:13px;color:#777; }

    .form-group{ margin-bottom:16px; }
    .form-label{ font-size:13px;font-weight:600;margin-bottom:6px;display:block;color:#444; }
    .input-control{
        width:100%;padding:9px 10px;border-radius:10px;
        border:1px solid var(--border);font-size:14px;
        outline:none;transition:.15s border;
        background:#fafafa;
    }
    .input-control:focus{ border-color:var(--primary);background:#fff; }

    .avatar-preview{ display:flex;align-items:center;gap:12px;margin-bottom:10px; }
    .avatar-circle{
        height:72px;width:72px;border-radius:50%;
        background:#eee;display:flex;align-items:center;justify-content:center;
        font-size:28px;font-weight:700;color:#555;object-fit:cover;overflow:hidden;
    }
    .avatar-circle img{ width:100%;height:100%;object-fit:cover; }

    .btn-row{ display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:8px; }
    .btn{
        border-radius:999px;padding:9px 18px;font-size:14px;
        font-weight:600;border:1px solid transparent;
        display:inline-flex;align-items:center;gap:6px;
        cursor:pointer;text-decoration:none;transition:.15s all;white-space:nowrap;
    }
    .btn-primary{ background:var(--primary);color:#fff;border-color:var(--primary); }
    .btn-primary:hover{ filter:brightness(.95); }
    .btn-outline{ background:#fff;color:var(--primary);border-color:var(--primary); }
    .btn-outline:hover{ background:var(--soft); }

    .alert{ padding:8px 10px;border-radius:10px;font-size:13px;margin-bottom:10px; }
    .alert-success{ background:#e6f7e9;color:#1b7a36; }
    .alert-error{ background:#ffeaea;color:#b3261e; }

    @media (max-width:480px){ .btn-row{ justify-content:center; } }
</style>

@php
    $user = auth()->user();
@endphp

<div class="page">
    <div class="card">
        <div class="form-header">
            <div class="form-icon">
                <i class="fa-regular fa-image"></i>
            </div>
            <div>
                <div class="form-title">Update Photo</div>
                <div class="form-sub">শুধু প্রোফাইল ছবিটা পরিবর্তন করতে পারবেন।</div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        @if($errors->any())
            <div class="alert alert-error">
                @foreach($errors->all() as $err)
                    <div>{{ $err }}</div>
                @endforeach
            </div>
        @endif

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

            {{-- Current photo --}}
            <div class="form-group">
                <label class="form-label">Current Photo</label>
                <div class="avatar-preview">
                    <div class="avatar-circle">
                        @if($user->avatar)
                            <img src="{{ asset('storage/'.$user->avatar) }}" alt="avatar">
                        @else
                            {{ strtoupper(substr($user->name,0,1)) }}
                        @endif
                    </div>
                    <div style="font-size:13px;color:#666;">
                        ভালো কোয়ালিটির ছবি দিন।
                    </div>
                </div>
            </div>

            {{-- New photo input --}}
            <div class="form-group">
                <label class="form-label" for="avatar">Select New Photo</label>
                <input type="file" name="avatar" id="avatar" class="input-control" accept="image/*">
            </div>

            {{-- Live preview --}}
            <div class="form-group" id="preview-group" style="display:none;">
                <label class="form-label">New Photo Preview</label>
                <div class="avatar-preview">
                    <div class="avatar-circle" id="preview-circle">
                        <span id="preview-initial">{{ strtoupper(substr($user->name,0,1)) }}</span>
                        <img id="preview-img" src="" alt="preview" style="display:none;">
                    </div>
                    <div style="font-size:13px;color:#666;">
                        যদি ছবি ঠিক না লাগে, আবার নতুন ছবি সিলেক্ট করুন।
                    </div>
                </div>
            </div>

            <div class="btn-row">
                <a href="{{ route('profile') }}" class="btn btn-outline">
                    <i class="fa-solid fa-arrow-left"></i> Back
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-regular fa-circle-check"></i> Save Photo
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    const fileInput      = document.getElementById('avatar');
    const previewGroup   = document.getElementById('preview-group');
    const previewImg     = document.getElementById('preview-img');
    const previewInitial = document.getElementById('preview-initial');

    fileInput.addEventListener('change', function () {
        const file = this.files[0];

        if (file) {
            const reader = new FileReader();

            reader.onload = function (e) {
                previewImg.src = e.target.result;
                previewImg.style.display = 'block';
                if (previewInitial) previewInitial.style.display = 'none';
                previewGroup.style.display = 'block';
            };

            reader.readAsDataURL(file);
        } else {
            // reset preview
            previewImg.src = '';
            previewImg.style.display = 'none';
            if (previewInitial) previewInitial.style.display = 'block';
            previewGroup.style.display = 'none';
        }
    });
</script>

@endsection