@extends('layouts.tecnico.app')

@section('content')
<div class="container py-4">

    <div class="row justify-content-center">
        <div class="col-xl-8">

            <div class="text-light card border-0 shadow rounded-4">

                <div class="text-light card-body p-4">

                    <h4 class="fw-bold mb-4">👤 Meu Perfil</h4>

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

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

                        {{-- AVATAR --}}
                        <div class="text-center mb-4">

                            <div class="profile-avatar mx-auto mb-3">

                                @if(auth()->user()->photo)
                                    <img src="{{ asset('storage/'.auth()->user()->photo) }}">
                                @else
                                    <span>
                                        {{ strtoupper(substr(auth()->user()->name,0,1)) }}
                                    </span>
                                @endif

                            </div>

                            <input type="file"
                                   name="photo"
                                   class="form-control"
                                   style="max-width:260px;margin:auto;">
                        </div>

                        {{-- NOME --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Nome</label>
                            <input type="text"
                                   name="name"
                                   value="{{ auth()->user()->name }}"
                                   class="form-control"
                                   required>
                        </div>

                        <hr class="my-4">

                        <h6 class="fw-bold mb-3">🔒 Alterar Senha</h6>

                        <div class="row g-3">

                            <div class="col-md-6">
                                <input type="password"
                                       name="password"
                                       class="form-control"
                                       placeholder="Nova senha">
                            </div>

                            <div class="col-md-6">
                                <input type="password"
                                       name="password_confirmation"
                                       class="form-control"
                                       placeholder="Confirmar senha">
                            </div>

                        </div>

                        <div class="mt-4 d-grid">
                            <button class="btn btn-primary btn-lg fw-bold">
                                💾 Atualizar Perfil
                            </button>
                        </div>

                    </form>

                </div>
            </div>

        </div>
    </div>

</div>

<style>
.profile-avatar{
    width:120px;
    height:120px;
    border-radius:50%;
    overflow:hidden;
    background:#0ea5e9;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    color:#fff;
    font-weight:700;
}
.profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}
</style>
@endsection