@php
use Illuminate\Support\Facades\Storage;
@endphp

@extends('layouts.app')

@section('title', 'Enviar Avatar')

@section('content')
<div class="row g-3 mb-4">
    <div class="col-auto">
        <h2 class="mb-0">Enviar Avatar</h2>
    </div>
    <div class="col-auto">
        <a href="{{ route('profile.edit') }}" class="btn btn-outline-secondary">
            <span class="fas fa-arrow-left me-2"></span>Voltar ao Perfil
        </a>
    </div>
</div>

<div class="row g-3">
    <div class="col-12 col-xl-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Upload de Avatar</h5>
            </div>
            <div class="card-body">
                @if (session('status') === 'avatar-updated')
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        Avatar atualizado com sucesso!
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

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

                <form method="post" action="{{ route('profile.avatar.update') }}" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="mb-4">
                        <label class="form-label" for="avatar">Selecionar Imagem</label>
                        <input class="form-control" id="avatar" name="avatar" type="file" accept="image/*" onchange="previewAvatar(this)" />
                        <div class="form-text">
                            Formatos aceitos: JPEG, PNG, JPG, GIF. Tamanho máximo: 2MB.
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-auto">
                            <button class="btn btn-primary" type="submit">
                                <span class="fas fa-upload me-2"></span>Enviar Avatar
                            </button>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-outline-secondary" type="reset" onclick="resetPreview()">
                                Cancelar
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Preview</h5>
            </div>
            <div class="card-body text-center">
                <div class="avatar avatar-5xl mb-3">
                    <img id="avatar-preview" class="rounded-circle" 
                         src="{{ $user->avatar ? Storage::url($user->avatar) : asset('img/team/72x72/57.webp') }}" 
                         alt="Preview do avatar" />
                </div>
                <h6 class="mb-2">{{ $user->name }}</h6>
                <p class="text-body-tertiary">Preview do novo avatar</p>
            </div>
        </div>

        @if($user->avatar)
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="mb-0">Avatar Atual</h5>
            </div>
            <div class="card-body text-center">
                <div class="avatar avatar-3xl mb-3">
                    <img class="rounded-circle" src="{{ Storage::url($user->avatar) }}" alt="Avatar atual" />
                </div>
                <p class="text-body-tertiary small">Avatar que está sendo usado</p>
            </div>
        </div>
        @endif
    </div>
</div>

<script>
function previewAvatar(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            document.getElementById('avatar-preview').src = e.target.result;
        };
        
        reader.readAsDataURL(input.files[0]);
    }
}

function resetPreview() {
    document.getElementById('avatar-preview').src = '{{ $user->avatar ? Storage::url($user->avatar) : asset("img/team/72x72/57.webp") }}';
}
</script>
@endsection