@extends('layout.base')
@section('title')
@section('style')
    @parent
    <style>
        /* Efecto hover para todas las tarjetas */
        .hover-border:hover {
            border-width: 3px !important;
            /* Grosor del borde */
            border-color: inherit !important;
            /* Usa el color del borde actual */
            transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
            /* Animación suave */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
            /* Sombra al hover */
        }

        /* Colores específicos para el hover */
        .border-secondary:hover {
            border-color: #6c757d !important;
            /* Gris para tarjetas secundarias */
        }

        .border-danger:hover {
            border-color: #dc3545 !important;
            /* Rojo para tarjetas de peligro */
        }

        .border-warning:hover {
            border-color: #ffc107 !important;
            /* Amarillo para tarjetas de advertencia */
        }
    </style>



@endsection

@section('container')
    <div class="row">
        <div class="col-lg-6">
            <!-- Tarjeta: Citas Ingresadas -->
            <div class="card text-white bg-primary-gt overflow-hidden radius-default">
                <div class="card-body position-relative z-1">
                    <span class="badge badge-custom-dark d-inline-flex align-items-center gap-2 fs-3">
                        <iconify-icon icon="mdi:greeting" width="24" height="24"></iconify-icon>
                        <span class="fw-normal"><span class="fw-semibold">Bienvenido de nuevo</span>
                        </span>
                    </span>
                    <h4 class="text-white fw-normal mt-5 pt-7 mb-1">Hola, <span
                            class="fw-bolder">{{ session('nombre') }}</span>
                    </h4>
                    <h6 class="opacity-75 fw-normal text-white mb-0">Que tengas un excelente día</h6>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="row">
                <div class="col-md-6">
                    <!-- ----------------------------------------- -->
                    <!-- Subscriptions -->
                    <!-- ----------------------------------------- -->
                    <div class="card bg-danger-subtle overflow-hidden shadow-none radius-default">
                        <div class="card-body px-4">
                            <div class="d-flex align-items-center justify-content-between mb-8">
                                <div>
                                    <span class="text-dark-light fw-semibold fs-12">Asistieron</span>
                                    <div class="hstack gap-2">
                                        <h5 class="card-title fw-semibold mb-0 fs-7">
                                        </h5>
                                    </div>
                                </div>
                                <span class="round-48 d-flex align-items-center justify-content-center  rounded">
                                    <iconify-icon icon="ic:baseline-person-pin" width="64" height="64"
                                        style="color: #ffffff"></iconify-icon>
                                </span>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-md-6">
                    <!-- ----------------------------------------- -->
                    <!-- Users -->
                    <!-- ----------------------------------------- -->
                    <div class="card bg-secondary-subtle overflow-hidden shadow-none radius-default"
                        style="background: #C3D3C6 !important;">
                        <div class="card-body px-4">
                            <div class="d-flex align-items-center justify-content-between mb-8">
                                <div>
                                    <span class="text-dark-light fw-semibold fs-12">Completadas</span>
                                    <div class="hstack gap-2">
                                        <h5 class="card-title fw-semibold mb-0 fs-7">
                                        </h5>
                                    </div>
                                </div>
                                <span class="round-48 d-flex align-items-center justify-content-center  rounded">
                                    <iconify-icon icon="fluent-mdl2:completed-solid" width="54" height="54"
                                        style="color: #ffffff"></iconify-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card radius-default">
                <div class="card-body">
                    <div id="citasPorMesChart"></div>
                </div>
            </div>
        </div>
        

    </div>

@endsection


@section('scripts')
    @parent
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="{{ asset('assets/libs/apexcharts/dist/apexcharts.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            /*----- Avatars -----*/
            const avatars = ['/antelope.png', '/bat.png', '/bear.png', '/beaver.png', '/bison.png',
                '/buffalo.png', '/bug.png', '/hippo.png', '/frog.png', '/fox.png', '/panda.png',
                '/racoon.png', '/wolf.png', '/shark.png', '/mouse.png', '/monkey.png', '/lion.png',
                '/puma.png', '/rabbit.png', '/tiger.png', '/squirrel.png', '/penguin.png', '/horse.png',
                '/mandrill.png', '/owl.png', '/sheep.png', '/pig.png', '/hedgehog.png', '/german.png',
            ];
            let random = Math.floor(Math.random() * (0, avatars.length));

            //Si no existe el avatar se guarda
            if (localStorage.getItem('avatar')) {
                $('.avatar').attr('src', localStorage.getItem('avatar'));
            } else {
                let urlAvatar = `{{ asset('one_ui/fotos_perfil/') }}${avatars[random]}`;
                localStorage.setItem('avatar', urlAvatar);
                $('.avatar').attr('src', urlAvatar);
            }

            $('.avatar').click(() => {
                let random = Math.floor(Math.random() * (0, avatars.length));
                let urlAvatar = `{{ asset('one_ui/fotos_perfil/') }}${avatars[random]}`;
                localStorage.setItem('avatar', urlAvatar);
                $('.avatar').attr('src', urlAvatar);
            });
        });

        
    </script>

@endsection