@extends('layout.front.master')
@section('content')

@php
    $moduleConfig = get_module_page_header_config('references');
    $pageTitle = $moduleConfig['title'];
    $pageSubtitle = $moduleConfig['subtitle'];
    $breadcrumbs = get_module_breadcrumbs('references');
@endphp

@if(should_use_modern_page_header('references'))
    {{-- Modern Page Header (x-page-header) --}}
    <x-page-header
        :title="$pageTitle"
        :subtitle="$pageSubtitle"
        :icon="$moduleConfig['icon']"
        :breadcrumbs="$breadcrumbs"
        background="primary" />
@else
    {{-- Classic Page Header --}}
    @if(view()->exists('modules.references.frontend.partials.dynamic-header'))
        @include('modules.references.frontend.partials.dynamic-header')
    @else
        {{-- Fallback to old hardcoded header --}}
        <section class="page-header page-header-modern page-header-background page-header-background-sm overlay overlay-color-primary overlay-show overlay-op-8" style="background-image: url({{ asset('public/template/img/page-header/page-header-bg.jpg') }});">
            <div class="container container-xl-custom">
                <div class="row">
                    <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                        <h1 class="text-light font-weight-bold text-8">{{ __('Referencias') }}</h1>
                        <span class="sub-title text-light opacity-7">{{ __('Nuestros casos de éxito y clientes destacados') }}</span>
                    </div>
                    <div class="col-md-4 order-1 order-md-2 align-self-center">
                        <ul class="breadcrumb breadcrumb-light d-block text-md-end">
                            <li><a href="{{ url('/') }}">{{ __('Inicio') }}</a></li>
                            <li class="active">{{ __('Referencias') }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    @endif
@endif

    <!-- References Section -->
    <section class="section section-height-3 bg-color-light border-0 m-0 py-5">
        <div class="container container-xl-custom">


                    <div class="row">
                        @forelse ($categories as $category)
                            <div class="col-lg-6 mb-5">
                                <div class="card border-0 box-shadow-1">
                                    <div class="card-body p-4">
                                        <h4 class="font-weight-bold text-5 mb-3 text-color-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 bg-light rounded">
                                                        @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">
                                                                {{ $reference->name }}
                                                            </h6>
                                                            @if($reference->featured)
                                                                <span class="badge badge-primary text-1">
                                                                    <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-muted" style="font-size: 3rem;"></i>
                                                        <p class="text-muted mt-3">{{ __('No hay referencias en esta categoría.') }}</p>
                                                    </div>
                                                </div>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12">
                                <div class="text-center py-5">
                                    <i class="fas fa-building text-muted" style="font-size: 4rem;"></i>
                                    <h3 class="text-muted mt-3">{{ __('No hay categorías disponibles') }}</h3>
                                    <p class="text-muted">{{ __('Próximamente agregaremos nuestras referencias.') }}</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured References Section -->
    @if($references->where('featured', true)->count() > 0)
    <section class="section section-height-2 bg-color-primary border-0 m-0">
        <div class="container container-xl-custom py-5">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="font-weight-bold text-6 text-light mb-4">{{ __('Referencias Destacadas') }}</h2>
                    <p class="text-light opacity-7 text-4 mb-5">{{ __('Casos de éxito que demuestran nuestra experiencia y compromiso') }}</p>
                </div>
            </div>
            <div class="row">
                @foreach($references->where('featured', true) as $reference)
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="card border-0 bg-light">
                            <div class="card-body text-center p-4">
                                @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">{{ $reference->name }}</h5>
                                @if($reference->category)
                                    <span class="badge badge-primary text-2">{{ $reference->category->name }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

@endsection