@extends('layouts.admin')

@section('title', 'Meu Perfil')

@section('content')
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Meu Perfil</h1>
</div>

@if(session('success'))
    <div class="alert alert-success border-0 shadow-sm mb-4">
        {{ session('success') }}
    </div>
@endif

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Informações Pessoais</h6>
            </div>
            <div class="card-body">
                <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row mb-4 justify-content-center">
                        <div class="col-md-4 text-center">
                            <label class="font-weight-bold d-block mb-3">Foto de Perfil</label>
                            <div class="mb-3">
                                @if($user->avatar)
                                    <img src="{{ asset('storage/' . $user->avatar) }}" class="img-profile rounded-circle shadow-sm" style="width: 150px; height: 150px; object-fit: cover;">
                                @else
                                    <img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=4e73df&color=fff&size=150" class="img-profile rounded-circle shadow-sm" style="width: 150px; height: 150px; object-fit: cover;">
                                @endif
                            </div>
                            <div class="custom-file">
                                <input type="file" name="avatar" class="custom-file-input @error('avatar') is-invalid @enderror" id="avatarFile">
                                <label class="custom-file-label" for="avatarFile" data-browse="Procurar">Escolher foto...</label>
                                @error('avatar') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <small class="text-muted mt-2 d-block">PNG, JPG ou JPEG (Máx 2MB)</small>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="font-weight-bold">Nome</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="form-group mb-3">
                        <label class="font-weight-bold">E-mail</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>

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

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="font-weight-bold">Site</label>
                            <input type="text" name="website" class="form-control @error('website') is-invalid @enderror" value="{{ old('website', $user->website) }}">
                            @error('website') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="font-weight-bold">WhatsApp</label>
                            <input type="text" name="whatsapp" class="form-control @error('whatsapp') is-invalid @enderror" value="{{ old('whatsapp', $user->whatsapp) }}">
                            @error('whatsapp') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <hr class="my-4">
                    <h6 class="font-weight-bold text-primary mb-3"><i class="bi bi-lock me-1"></i> Segurança (Alterar Senha)</h6>
                    <p class="text-muted small mb-3">Deixe em branco se não desejar alterar sua senha atual.</p>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="font-weight-bold">Nova Senha</label>
                            <div class="input-group">
                                <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Mínimo 8 caracteres" autocomplete="new-password">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary toggle-password" type="button">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                                @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="font-weight-bold">Confirmar Nova Senha</label>
                            <div class="input-group">
                                <input type="password" name="password_confirmation" class="form-control" placeholder="Repita a nova senha" autocomplete="new-password">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary toggle-password" type="button">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-block py-2 fw-bold shadow-sm">
                        <i class="bi bi-floppy me-1"></i> Atualizar Perfil
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    // Mostrar o nome do arquivo selecionado no campo de upload
    document.getElementById('avatarFile').addEventListener('change', function(e){
        var fileName = document.getElementById("avatarFile").files[0].name;
        var nextSibling = e.target.nextElementSibling
        nextSibling.innerText = fileName
    });
</script>
@endpush