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

@section('content')
    <div class="md:px-20 pb-4">
        <div class="mt-20 mx-4 md:mx-12 px-4 bg-purple-custom rounded-xl flex flex-col md:flex-row justify-between">
            <div class="flex items-center md:space-x-2">
                <div class="relative flex items-center justify-center">
                    <img src="{{ asset('img-2025/profile/PLANET.png') }}" alt="" class="h-20">
                    @if (Auth::user()->image)
                        <img src="{{ '/storage/' . Auth::user()->image }}" alt=""
                            class="absolute rounded-full w-12 h-12 mt-1 ml-1">
                    @else
                        <i class="absolute fa-regular fa-user fa-2xl mt-1 ml-1"></i>
                    @endif
                </div>
                <h4 class="text-white font-dunkin-sans-display text-3xl">
                    ¡
                    {{ Auth::user()->name }}
                    @role('adviser')
                        {{ Auth::user()->shop_name }}
                    @endrole
                    !
                </h4>
            </div>
            <div class="relative flex items-center pr-2 py-2 justify-center">
                <img src="{{ asset('img-2025/profile/GOLDEN-DONUT.png') }}" alt="" width="70"
                    class="absolute -left-4">
                <div class="border-2 border-black rounded-3xl p-1 flex justify-end">
                    <div class="bg-cream-custom font-dunkin-sans-medium rounded-3xl py-1 pl-10 pr-6">
                        <p>PUNTOS PARA REDIMIR: {{ auth()->user()->total_points_format }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="justify-items-center w-full mb-4">
            <form action="" id="form-month"
                class="bg-coffee-custom font-dunkin-sans-medium px-10 py-1 rounded-b-3xl flex items-center space-x-2">
                <i class="fa-regular fa-calendar-days text-white"></i>
                <select class="bg-coffee-custom text-white text-xl" 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="flex flex-col md:flex-row  mx-10 md:space-x-8 space-y-4 md:space-y-0">
            <div class="w-full md:w-2/5">
                <div class="relative flex justify-between items-center h-full">
                    <div class="overflow-hidden w-full">
                        <div class="font-dunkin-sans-book text-sm flex transition-transform duration-500"
                            id="carousel-items">
                            @forelse($notices as $item)
                                <a href="{{ asset('storage/' . $item->pdf) }}" target="_blank"
                                    class="flex-none w-full my-auto justify-items-center">
                                    <div class="pb-100 relative w-86/100">
                                        <img src="/storage/{{ $item->image }}" class="absolute h-full w-full object-cover"
                                            alt="">
                                    </div>
                                </a>
                            @empty
                                <div class="text-center flex flex-col space-y-4">
                                    <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 text-white rounded-full cursor-pointer text-5xl px-4 pb-3 absolute left-0">
                            &lt;
                        </button>
                        <button id="next"
                            class="bg-purple-custom text-white rounded-full cursor-pointer text-5xl px-4 pb-3 absolute right-0">
                            &gt;
                        </button>
                    @endif
                </div>
            </div>
            <div
                class="w-full md:w-3/5 bg-custom-back-frame bg-contain sm:bg-cover bg-no-repeat flex flex-col px-6 space-y-4">
                <h2 class="font-dunkin-sans-display text-white sm:text-2xl text-center sm:mt-2 2xl:mt-4">INDICADOR</h2>
                <div class="font-dunkin-sans-medium grid md:grid-cols-2 w-full">
                    @foreach ($indicators as $indicator)
                        <div class="flex relative items-center justify-center">
                            <img src="{{ asset('/img-2025/profile/TARGET.png') }}" alt="">
                            <div class="absolute w-full h-full flex flex-col">
                                <h1 class="text-white h-1/3 flex justify-center items-center">
                                    {{ $indicator->name }}
                                </h1>
                                <div class="flex-1 flex w-full items-center">
                                    <div class="w-2/5 flex justify-center items-center">
                                        <img src="{{ asset($indicator->image ?: 'img-2025/indicators/DEFAULT.png') }}"
                                            alt="" width="50">
                                    </div>
                                    <div>
                                        <h1>
                                            Puntos: {{ $indicator->points }}
                                            @if ($indicator->with_goal)
                                                <span style="color: {{ $indicator->color }}; display: none;">
                                                    ({{ $indicator->compliance }}/{{ $indicator->goal }})
                                                </span>
                                            @endif
                                        </h1>
                                        <a href="{{ url('home?indicator=' . $indicator->id) }}"
                                            class="open-modal-indicators text-purple-custom underline">
                                            Ver
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    @if ($indicator_birthday)
                        <div class="flex relative items-center justify-center">
                            <img src="{{ asset('/img-2025/profile/TARGET.png') }}" alt="">
                            <div class="absolute w-full h-full flex flex-col">
                                <h1 class="text-center text-white">{{ $indicator_birthday->indicator->name }}</h1>
                                <div class="flex-1 flex w-full items-center">
                                    <div class="w-2/5 flex justify-center items-center">
                                        <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 relative items-center mt-3">
                        <div class="w-full h-full flex flex-col px-2 mr-4">
                            <h1 class="text-center bg-cream-custom py-2 md:py-6">
                                <span class="font-dunkin-sans-display">
                                    Puntos por indicadores en el mes de {{ strtoupper($month_name) }}
                                    {{ $year }} :
                                </span>
                                {{ $points_month }}
                            </h1>
                        </div>
                        <img src="{{ asset('/img-2025/profile/LAST-TARGET.png') }}" alt="" class="absolute">
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('partials.modal-indicators')
@endsection