@extends('layouts.app')
@section('title', 'Perfil')

@section('content')
    <div class="md:px-20 pb-4">
        <div class="sm:mt-20 sm:mx-4 sm:py-0 bg-purple-custom rounded-xl flex justify-between px-4 pt-2 pb-8">
            <div class="sm:flex-row md:space-x-2 md:w-auto flex flex-col items-center w-3/4">
                <div class="relative flex items-center justify-center">
                    <img src="{{ asset('img-2025/profile/PLANET.png') }}" alt="" class="h-20">
                    @if ($user->image)
                        <img src="{{ '/storage/' . $user->image }}" alt=""
                            class="absolute w-12 h-12 mt-1 ml-1 rounded-full">
                    @else
                        <i class="fa-regular fa-user fa-2xl absolute mt-1 ml-1"></i>
                    @endif
                </div>
                <h4 class="font-dunkin-sans-display sm:text-3xl text-white">
                    ¡
                    {{ $user->name }}
                    @role('adviser')
                        {{ $user->shop_name }}
                    @endrole
                    !
                </h4>
            </div>
            <div class="relative flex items-center justify-center py-2 pr-2">
                <img src="{{ asset('img-2025/profile/GOLDEN-DONUT.png') }}" alt="" width="70"
                    class="-left-4 sm:block absolute hidden">
                <div class="sm:border-black rounded-3xl flex justify-end p-1 border-2 border-white">
                    <div
                        class="bg-cream-custom sm:bg-opacity-100 font-dunkin-sans-medium rounded-3xl sm:pl-10 sm:pr-6 sm:text-black px-2 py-1 text-center text-white bg-opacity-50">
                        <p>
                            PUNTOS PARA REDIMIR:
                            <span class="sm:text-base text-2xl">{{ $user->total_points_format }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="rounded-t-3xl sm:rounded-none sm:translate-y-0 transform -translate-y-6 bg-white">
            <div class="justify-items-center w-full mb-4">
                <form action="" id="form-month"
                    class="bg-coffee-custom font-dunkin-sans-medium rounded-b-3xl flex items-center px-10 py-1 space-x-2">
                    <i class="fa-regular fa-calendar-days text-white"></i>
                    <select class="bg-coffee-custom text-xl text-white" name="month"
                        onchange="document.getElementById('form-month').submit()">
                        @foreach ($months as $month)
                            <option class="others" value="{{ $month['id'] }}"
                                {{ $selected_month == $month['id'] ? 'selected' : '' }}>
                                {{ strtoupper($month['name']) }} {{ $year }}
                            </option>
                        @endforeach
                    </select>
                </form>
            </div>
            <div class="md:flex-row sm:mx-10 md:space-x-8 md:space-y-0 flex flex-col-reverse mx-4 space-y-4">
                <div class="md:w-2/5 sm:mt-0 w-full mt-10">
                    <div class="relative flex items-center justify-between h-full">
                        <div class="w-full overflow-hidden">
                            <div class="font-dunkin-sans-book flex text-sm transition-transform duration-500"
                                id="carousel-items">
                                @forelse($notices as $item)
                                    <a href="{{ $item->is_internal_url ? asset('storage/' . $item->pdf) : $item->url }}"
                                        target="_blank" class="justify-items-center flex-none w-full my-auto">
                                        <div class="pb-100 w-86/100 relative">
                                            <img src="/storage/{{ $item->image }}"
                                                class="absolute object-cover w-full h-full" alt="">
                                        </div>
                                    </a>
                                @empty
                                    <div class="flex flex-col space-y-4 text-center">
                                        <img src="{{ asset(config('constants.logo_image_path')) }}" class="img-fluid"
                                            width="300" alt="">
                                        <h3 class="title-orange">No hay noticias activas</h3>
                                        <p class="description">En el momento no hay noticias activas pero puedes
                                            volver más tarde cuando se activen nuevas noticias.</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                        @if (count($notices))
                            <button id="prevs"
                                class="bg-purple-custom absolute left-0 px-4 pb-3 text-5xl text-white rounded-full cursor-pointer">
                                &lt;
                            </button>
                            <button id="next"
                                class="bg-purple-custom absolute right-0 px-4 pb-3 text-5xl text-white rounded-full cursor-pointer">
                                &gt;
                            </button>
                        @endif
                    </div>
                </div>
                <div class="md:w-3/5 flex flex-col w-full px-6 space-y-4 bg-no-repeat bg-cover">
                    <h2 class="font-dunkin-sans-display sm:text-2xl sm:mt-1 2xl:mt-4 text-coffee-custom mt-2 text-center">
                        Indicador rol {{ $user->role_name }}
                    </h2>
                    <div class="font-dunkin-sans-medium md:grid-cols-2 grid w-full gap-5">
                        @foreach ($indicators as $indicator)
                            <div class="relative">
                                <div class="custom-filtered-shadow h-full">
                                    <div
                                        class="bg-cream-custom rounded-2xl custom-mask-image relative grid h-full grid-cols-6 grid-rows-2 gap-2 px-2 py-4">
                                        <div
                                            class="flex items-center justify-center w-full h-full col-span-2 row-span-2 p-1">
                                            <img src="{{ asset($indicator->image ?: 'img-2025/indicators/DEFAULT.png') }}"
                                                alt="{{ $indicator->name }}" class="max-h-14 max-w-full">
                                        </div>
                                        <div class="flex col-span-4 row-span-1">
                                            <span class="text-coffee-custom mt-auto text-sm">
                                                {{ $indicator->name }}
                                            </span>
                                        </div>
                                        <div class="col-span-4 row-span-1">
                                            <span class="text-purple-custom">
                                                PUNTOS: {{ $indicator->points }}
                                                @if ($indicator->with_goal)
                                                    <span style="color: {{ $indicator->color }}; display: none;">
                                                        ({{ $indicator->compliance }}/{{ $indicator->goal }})
                                                    </span>
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="absolute bottom-0 right-0">
                                    <a href="{{ url('home?indicator=' . $indicator->id) }}"
                                        class="open-modal-indicators bg-purple-custom w-13 h-13 flex items-center justify-center text-sm font-semibold text-white rounded-full shadow-lg">
                                        <img src="{{ asset('images/2026/indicators/eye.png') }}" alt="ver mas"
                                            class="w-7 h-auto">
                                    </a>
                                </div>

                                <div class="absolute top-0 bottom-0 left-0 flex">
                                    <div class="bg-purple-custom h-2/3 w-2 my-auto rounded-r-lg"></div>
                                </div>
                            </div>
                        @endforeach

                        @if ($indicator_birthday)
                            <div class="relative flex items-center justify-center">
                                <img src="{{ asset('/img-2025/profile/TARGET.png') }}" alt="">
                                <div class="absolute flex flex-col w-full h-full">
                                    <h1 class="text-center text-white">{{ $indicator_birthday->indicator->name }}</h1>
                                    <div class="flex items-center flex-1 w-full">
                                        <div class="flex items-center justify-center w-2/5">
                                            <img src="{{ asset($indicator_birthday->indicator->image ?: 'img-2025/indicators/DEFAULT.png') }}"
                                                alt="" width="50">
                                        </div>
                                        <div>
                                            <h1>
                                                Puntos: {{ $indicator_birthday->points }}
                                            </h1>
                                            <a href="{{ url('home?indicator=' . $indicator_birthday->indicator_id) }}"
                                                class="open-modal-indicators">
                                                Ver
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="flex flex-col justify-center h-full px-4 pt-4 overflow-y-auto text-center">
                            <span class="font-dunkin-sans-display text-purple-custom text-3xl">
                                TOTAL PUNTOS
                            </span>
                            <span class="text-coffee-custom h-full">
                                EN {{ strtoupper($month_name) }}
                                {{ $year }}: {{ $points_month }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('partials.modal-indicators')
@endsection