@extends('layouts.app')

@push('styles')
<style>
    .account-hero {
        border: 0;
        border-radius: 1rem;
        background: linear-gradient(135deg, #0b6fa4 0%, #0d8abc 55%, #3fa8d3 100%);
        color: #fff;
        box-shadow: 0 10px 26px rgba(13, 138, 188, 0.22);
    }

    .account-avatar {
        width: 140px;
        max-width: 100%;
        height: 80px;
        border-radius: 0;
        border: 3px solid rgba(255, 255, 255, 0.45);
        object-fit: contain;
        object-position: center;
        display: block;
        background: #fff;
    }

    .account-avatar-fallback {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.45);
    }

    .account-avatar-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
        font-size: 2rem;
        font-weight: 700;
    }

    .account-chip {
        display: inline-block;
        font-size: .79rem;
        background: rgba(255, 255, 255, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        padding: .25rem .75rem;
    }

    .account-card {
        border: 1px solid #e9ecef;
        border-radius: .85rem;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
        height: 100%;
    }

    .account-card .card-header {
        background: #fff;
        border-bottom: 1px solid #f0f2f5;
        font-weight: 700;
    }

    .kv-row {
        display: grid;
        grid-template-columns: minmax(150px, 38%) 1fr;
        gap: .65rem;
        padding: .45rem 0;
        border-bottom: 1px dashed #edf1f4;
    }

    .kv-row:last-child {
        border-bottom: 0;
    }

    .kv-label {
        font-weight: 600;
        color: #4f5b67;
    }

    .kv-value {
        color: #1f2d3d;
        word-break: break-word;
    }

    @media (max-width: 767.98px) {
        .kv-row {
            grid-template-columns: 1fr;
            gap: .2rem;
        }
    }
</style>
@endpush

@section('content')
@php
    $user = auth()->user();
    $fallback = 'Non renseigne';
    $display = function ($value) use ($fallback) {
        if (is_null($value)) {
            return $fallback;
        }

        if (is_string($value) && trim($value) === '') {
            return $fallback;
        }

        return $value;
    };

    $avatarInitial = strtoupper(substr((string) ($user->user_name ?? 'U'), 0, 1));
@endphp

<div class="container-fluid py-4">
    <div class="card account-hero mb-4">
        <div class="card-body p-4 p-lg-5">
            <div class="row align-items-center">
                <div class="col-md-auto text-center mb-3 mb-md-0">
                    @if(!empty($user->logo))
                        <img src="{{ asset('logos/' . $user->logo) }}" alt="Logo" class="account-avatar">
                    @else
                        <div class="account-avatar-fallback">{{ $avatarInitial }}</div>
                    @endif
                </div>
                <div class="col">
                    <span class="account-chip mb-2">Mon Compte</span>
                    <h3 class="mb-1">{{ $display($user->user_name ?? null) }}</h3>
                    <p class="mb-1">{{ $display($user->email ?? null) }}</p>
                    <p class="mb-0">{{ $display($user->company_name ?? null) }}</p>
                </div>
                <div class="col-md-auto mt-3 mt-md-0 text-md-right">
                    <a href="{{ url('/users/' . $user->id . '/edit') }}" class="btn btn-light text-primary font-weight-bold">
                        Modifier mon profil
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 mb-4">
            <div class="card account-card">
                <div class="card-header">Informations personnelles</div>
                <div class="card-body">
                    <div class="kv-row"><div class="kv-label">Nom d'utilisateur</div><div class="kv-value">{{ $display($user->user_name ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Contact</div><div class="kv-value">{{ $display($user->contact_person ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Fonction</div><div class="kv-value">{{ $display($user->position ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Email</div><div class="kv-value">{{ $display($user->email ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Telephone mobile</div><div class="kv-value">{{ $display($user->phone_mobile ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Telephone fixe</div><div class="kv-value">{{ $display($user->phone_landline ?? null) }}</div></div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card account-card">
                <div class="card-header">Societe</div>
                <div class="card-body">
                    <div class="kv-row"><div class="kv-label">Raison sociale</div><div class="kv-value">{{ $display($user->company_name ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Secteur d'activite</div><div class="kv-value">{{ $display($user->business_sector ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Numero TVA</div><div class="kv-value">{{ $display($user->vat_number ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Numero d'enregistrement</div><div class="kv-value">{{ $display($user->registration_number ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Site web</div><div class="kv-value">{{ $display($user->website ?? null) }}</div></div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card account-card">
                <div class="card-header">Adresse de facturation</div>
                <div class="card-body">
                    <div class="kv-row"><div class="kv-label">Adresse</div><div class="kv-value">{{ $display($user->billing_address ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Ville</div><div class="kv-value">{{ $display($user->billing_city ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Code postal</div><div class="kv-value">{{ $display($user->billing_postal_code ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Pays</div><div class="kv-value">{{ $display($user->billing_country ?? null) }}</div></div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card account-card">
                <div class="card-header">Adresse de livraison</div>
                <div class="card-body">
                    <div class="kv-row"><div class="kv-label">Adresse</div><div class="kv-value">{{ $display($user->shipping_address ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Ville</div><div class="kv-value">{{ $display($user->shipping_city ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Code postal</div><div class="kv-value">{{ $display($user->shipping_postal_code ?? null) }}</div></div>
                    <div class="kv-row"><div class="kv-label">Pays</div><div class="kv-value">{{ $display($user->shipping_country ?? null) }}</div></div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card account-card">
                <div class="card-header">Securite</div>
                <div class="card-body">
                    <div class="kv-row"><div class="kv-label">Email verifie</div><div class="kv-value">{{ !empty($user->email_verified_at) ? 'Oui' : 'Non' }}</div></div>
                    <div class="kv-row"><div class="kv-label">Compte cree le</div><div class="kv-value">{{ !empty($user->created_at) ? $user->created_at->format('d/m/Y H:i') : $fallback }}</div></div>
                    <div class="mt-3">
                        <a href="{{ url('/users/' . $user->id . '/edit') }}" class="btn btn-outline-primary btn-sm">
                            Modifier mon profil
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card account-card">
                <div class="card-header">Preferences</div>
                <div class="card-body">
                    <div class="kv-row"><div class="kv-label">Notes</div><div class="kv-value">{{ $display($user->notes ?? null) }}</div></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection