@extends('layouts.app')

@section('title', 'Location de matériel')

@section('content')
<div class="pb-24 sm:pb-12">
    <style>
        .equipment-grid{
            display:grid;
            grid-template-columns:1fr;
            gap:0.75rem;
            padding:0.35rem 0;
        }
        @media (min-width: 640px){
            .equipment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        }
        .equipment-card-media{height:165px}
        .equipment-card-content{padding:7px 11px 9px}
        .equipment-card-title{font-size:14px;color:#333;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        @media (min-width: 1200px){
            .equipment-grid{
                grid-template-columns:repeat(4,minmax(0,1fr));
                gap:0.85rem !important;
            }
            .equipment-card{
                width:100%;
                display:block;
                border-radius:12px !important;
                border:1px solid #e5e7eb !important;
                background:#fff !important;
                overflow:hidden !important;
                box-shadow:0 4px 12px rgba(15,23,42,0.08) !important;
                transition:transform 180ms ease, box-shadow 180ms ease;
                padding:0;
            }
            .equipment-card:hover{
                transform:translateY(-2px);
                box-shadow:0 10px 18px rgba(15,23,42,0.12) !important;
            }
            .equipment-card-media{height:150px;min-height:150px}
            .equipment-card-content{padding:9px 11px}
            .equipment-card-price{font-size:17px !important}
            .equipment-card-title{font-size:15px}
        }
    </style>
    {{-- Bannière d'en-tête --}}
    <div class="text-white" style="background: linear-gradient(135deg, #059669 0%, #047857 50%, #0f766e 100%);">
        <div class="max-w-7xl mx-auto px-4 py-6 sm:py-10 text-center">
            <div class="inline-flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl mb-3" style="background: rgba(255,255,255,0.2);">
                <i class="fas fa-tools text-xl sm:text-2xl text-white"></i>
            </div>
            <h1 class="text-2xl sm:text-4xl font-extrabold tracking-tight mb-1 sm:mb-2">Location de Matériel</h1>
            <p class="text-sm sm:text-lg max-w-2xl mx-auto" style="color: #a7f3d0;">Trouvez l'équipement dont vous avez besoin.</p>
        </div>
    </div>
    
    {{-- Filtres compacts --}}
    <div class="max-w-7xl mx-auto px-3 sm:px-4 mb-4 sm:mb-6 -mt-4 sm:-mt-6">
        @include('components.filters.compact-filters', [
            'pageType' => 'equipment',
            'themeColor' => 'emerald',
            'formAction' => route('equipment.index'),
            'categories' => $categories ?? collect()
        ])
    </div>
    
    {{-- Résultats --}}
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 xl:px-8">
        @if($equipments->count() > 0)
            <div class="equipment-grid">
                @foreach($equipments as $equipment)
                    @php
                        $firstPhoto = $equipment->main_photo ?? ($equipment->photos[0] ?? null);
                        $prestataire = $equipment->prestataire;
                        $canContact = auth()->check()
                            && auth()->user()->role === 'client'
                            && $prestataire
                            && auth()->user()->id !== $prestataire->user_id;

                        $city = $equipment->city ?: ($prestataire?->city ?: null);
                        $ratingAvg = $equipment->average_rating ?? null;
                        $ratingCount = $equipment->total_reviews ?? null;
                    @endphp

                    <div class="equipment-card block"
                         role="link"
                         tabindex="0"
                         data-href="{{ route('equipment.show', $equipment) }}"
                         onclick="window.location.href=this.dataset.href"
                         onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();window.location.href=this.dataset.href}"
                         style="cursor:pointer">

                        {{-- Image --}}
                        <div class="equipment-card-media relative w-full overflow-hidden">
                            @if($firstPhoto)
                                <x-media-image :path="$firstPhoto" :alt="$equipment->name" style="width:100%;height:100%;object-fit:cover;display:block" />
                            @else
                                <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center">
                                    <i class="fas fa-tools" style="font-size:24px;color:#ccc"></i>
                                </div>
                            @endif
                        </div>

                        {{-- Infos --}}
                        <div class="equipment-card-content">
                            <div style="display:flex;justify-content:space-between;align-items:baseline">
                                <div class="equipment-card-price" style="font-size:17px;font-weight:800;color:#1a1a1a">{{ number_format($equipment->price_per_day, 0, ',', ' ') }} €</div>
                                <div style="font-size:12px;color:#aaa;white-space:nowrap">{{ $equipment->created_at->diffForHumans(null, true, true) }}</div>
                            </div>
                            <div class="equipment-card-title">{{ $equipment->name }}</div>
                            @if($equipment->brand || $equipment->model)
                                <div style="font-size:13px;color:#666;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ trim(($equipment->brand ?? '') . ' ' . ($equipment->model ?? '')) }}</div>
                            @elseif($prestataire)
                                <div style="font-size:13px;color:#666;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $prestataire->company_name ?? $prestataire->first_name }}</div>
                            @endif

                            <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px">
                                <div style="display:flex;gap:12px;min-width:0;font-size:12px;color:#999;flex-wrap:wrap">
                                    @if($city)
                                        <span>Ville: {{ Str::limit($city, 18) }}</span>
                                    @endif

                                    @if(is_numeric($ratingAvg) && (float)$ratingAvg > 0)
                                        <span>Note: {{ number_format((float)$ratingAvg, 1, '.', '') }}@if(is_numeric($ratingCount) && (int)$ratingCount > 0) ({{ (int)$ratingCount }})@endif</span>
                                    @endif

                                    @if(isset($equipment->distance_km) && $equipment->distance_km !== null)
                                        <span>Distance: {{ $equipment->distance_km }} km</span>
                                    @endif
                                </div>

                                <div style="flex-shrink:0;display:flex;gap:6px">
                                    @auth
                                        @if($canContact)
                                            <a href="{{ route('client.messaging.start', $prestataire) }}"
                                               onclick="event.stopPropagation();"
                                               class="inline-flex items-center justify-center"
                                               style="background:transparent;color:#047857;font-weight:700;font-size:14px;padding:0;border-radius:0;line-height:1;text-decoration:underline">
                                                Contacter
                                            </a>
                                        @endif

                                        @if($equipment->is_available)
                                            <a href="{{ route('equipment.show', $equipment) }}#reservation"
                                               onclick="event.stopPropagation();"
                                               class="inline-flex items-center justify-center"
                                               style="background:transparent;color:#047857;font-weight:700;font-size:14px;padding:0;border-radius:0;line-height:1;text-decoration:underline">
                                                Réserver
                                            </a>
                                        @endif
                                    @else
                                        <a href="{{ route('login') }}"
                                           onclick="event.stopPropagation();"
                                           class="inline-flex items-center justify-center"
                                           style="background:transparent;color:#047857;font-weight:700;font-size:14px;padding:0;border-radius:0;line-height:1;text-decoration:underline">
                                            Contacter
                                        </a>
                                    @endauth
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            {{-- État vide --}}
            <div class="bg-white rounded-xl shadow-md p-12 text-center border border-emerald-100">
                <div class="w-24 h-24 mx-auto mb-6 bg-emerald-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-search text-3xl text-emerald-600"></i>
                </div>
                <h3 class="text-xl font-bold text-emerald-900 mb-3">Aucun équipement trouvé</h3>
                <p class="text-emerald-700 mb-6">Essayez de modifier vos filtres ou explorez tout le matériel.</p>
                <a href="{{ route('equipment.index') }}" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-6 rounded-lg transition shadow-lg">
                    Réinitialiser les filtres
                </a>
            </div>
        @endif
        
        {{-- Pagination --}}
        @if($equipments->hasPages())
            <div class="mt-12 flex justify-center">
                {{ $equipments->appends(request()->query())->links() }}
            </div>
        @endif
    </div>
</div>
@endsection