@extends('layouts.app')
@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        @role(['Administrador', 'Empleado'])
            @include('layouts.options.linkHome')
        @endrole
        @role(['Administrador', 'Empleado'])
            <div id="chartContainer" class="col-md-8">
                <div class="row px-4">
                    <div class="col-md-12 bg-white p-2 rounded shadow-sm mt-0">
                        <canvas id="periodChart"></canvas>
                    </div>
                    <div class="col-md-12 bg-white p-2 rounded shadow-sm mt-3">
                        <canvas id="membershipsChart"></canvas>
                    </div>
                </div>
            </div>
        @endrole
        @role(['Administrador', 'Empleado'])
        <div class="col-md-4 bg-white p-4 rounded shadow-sm">
            <div class="mb-4 position-relative">
                <h3 class="text-dark mb-0">Próximos cumpleaños</h3>
                <span class="balloon-birthday-icon">
                    <i class="bi bi-balloon-fill"></i>
                </span>
            </div>

            <style>
            @keyframes balloon-float {
                0% { transform: translateY(0); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0); }
            }
            .balloon-birthday-icon {
                position: absolute;
                top: -18px;
                right: 0;
                z-index: 2;
                pointer-events: none;
            }
            .balloon-birthday-icon .bi-balloon-fill {
                font-size: 3rem;
                color: #ffcd11;
                animation: balloon-float 2s infinite ease-in-out;
                filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
            }
            </style>
            @if ($listNextBirthDays->isEmpty())
                <p>No hay próximos cumpleaños.</p>
            @else
                @foreach ($listNextBirthDays as $i => $user)
                    @php
                        $isOdd = $i % 2 === 0;
                        $bg = $isOdd
                            ? 'birthday-caterpillar'
                            : 'birthday-black';
                    @endphp
                    <div class="mb-1 p-2 border rounded d-flex align-items-center gap-2 {{ $bg }}">
                        @php
                            $imgSrc = !empty($user->url_face)
                                ? route('admin_fit.users.image', ['filename' => $user->url_face])
                                : asset('images/no-user-imagen.jpg');
                        @endphp
                        <img src="{{ $imgSrc }}" alt="Foto de {{ $user->user_name }}" class="birthday-face me-2">
                        <div class="flex-grow-1">
                            <div class="font-weight-bold birthday-name">{{ $user->user_name }}</div>
                            <div class="small birthday-date">{{ $user->birth_date }}</div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
        @endrole
    </div>
</div>
@endsection

@push('styles')
<style>
    .birthday-caterpillar {
        background: linear-gradient(135deg, #ffcd11, #f4b400);
        color: #1f2937;
    }
    .birthday-black {
        background: #111111;
        color: #fff;
    }
    .birthday-caterpillar .birthday-name,
    .birthday-caterpillar .birthday-date {
        color: #1f2937;
    }
    .birthday-black .birthday-name,
    .birthday-black .birthday-date {
        color: #fff !important;
    }
    .birthday-face {
        width: 38px;
        height: 38px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #fffbe6;
        background: #fffbe6;
    }
</style>
@endpush