@extends('layout.front.master')

@section('title', config('site.modules.references.page_header.title', __('Referencias')))

@section('content')

{{-- Dynamic Header --}}
@include('modules.references.frontend.partials.dynamic-header')

{{-- References Section --}}
<section class="section border-0 m-0 py-5" style="background-color: var(--secondary);">
    <div class="container container-xl-custom">
        <div class="row">
            @forelse ($categories as $category)
                <div class="col-lg-6 mb-4">
                    <div class="rounded-0 p-4 h-100" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10);">
                        <h4 class="font-weight-bold text-5 mb-3" style="color: var(--primary);">
                            {{ $category->name }}
                        </h4>
                        <div class="row">
                            @forelse ($category->references as $reference)
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center p-3 rounded-0" style="background-color: var(--secondary); border: 1px solid var(--primary-rgba-10);">
                                        @if($reference->logo)
                                            <div class="me-3">
                                                <img src="{{ asset($reference->logo) }}"
                                                     alt="{{ $reference->name }}"
                                                     class="img-fluid"
                                                     style="max-width: 60px; max-height: 60px; object-fit: contain;">
                                            </div>
                                        @endif
                                        <div class="flex-grow-1">
                                            <h6 class="font-weight-bold text-4 mb-1" style="color: var(--light);">
                                                {{ $reference->name }}
                                            </h6>
                                            @if($reference->featured)
                                                <span class="badge rounded-0 text-1 px-2 py-1" style="color: var(--primary); background-color: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-20);">
                                                    <i class="fas fa-star me-1"></i>{{ __('Destacado') }}
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <div class="text-center py-4">
                                        <i class="fas fa-folder-open text-4" style="color: var(--quaternary);"></i>
                                        <p class="mt-2" style="color: var(--quaternary);">{{ __('No hay referencias en esta categoría.') }}</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="text-center py-5">
                        <i class="fas fa-building" style="font-size: 3rem; color: var(--primary); opacity: 0.5;"></i>
                        <h3 class="font-weight-bold mt-3" style="color: var(--light);">{{ __('Próximamente') }}</h3>
                        <p style="color: var(--quaternary);">{{ __('Próximamente agregaremos nuestras referencias.') }}</p>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
</section>

{{-- Featured References Section --}}
@if($references->where('featured', true)->count() > 0)
<section class="section border-0 m-0 py-5" style="background-color: var(--dark);">
    <div class="container container-xl-custom py-4">
        <div class="row mb-4">
            <div class="col-lg-12 text-center">
                <h2 class="font-weight-bold text-8 mb-2" style="color: var(--light);">{{ __('Referencias Destacadas') }}</h2>
                <p class="text-4" style="color: var(--quaternary);">{{ __('Casos de éxito que demuestran nuestra experiencia y compromiso') }}</p>
            </div>
        </div>
        <div class="row justify-content-center">
            @foreach($references->where('featured', true) as $reference)
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="rounded-0 text-center p-4 h-100 anim-hover-translate-top-10px transition-3ms" style="background-color: var(--secondary); border: 1px solid var(--primary-rgba-10);">
                        @if($reference->logo)
                            <div class="mb-3">
                                <img src="{{ asset($reference->logo) }}"
                                     alt="{{ $reference->name }}"
                                     class="img-fluid"
                                     style="max-width: 120px; max-height: 80px; object-fit: contain;">
                            </div>
                        @endif
                        <h5 class="font-weight-bold text-4 mb-2" style="color: var(--light);">{{ $reference->name }}</h5>
                        @if($reference->category)
                            <span class="badge rounded-0 text-1 px-2 py-1" style="color: var(--primary); background-color: var(--primary-rgba-10);">{{ $reference->category->name }}</span>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

@endsection