@extends('layouts.app')

@section('title', 'Annonces - TaPrestation')

@section('content')
<div class="pb-24 sm:pb-12">
    <style>
        .sales-grid{
            display:grid;
            grid-template-columns:1fr;
            gap:0.75rem;
            padding:0.35rem 0;
        }
        @media (min-width: 640px){
            .sales-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        }
        .sale-photo-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.5)}
        .sale-photo-dot--active{background:#fff}
        .sale-card-media{height:165px}
        .sale-card-content{padding:7px 11px 9px}
        .sale-card-title{font-size:14px;color:#333;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        @media (min-width: 1200px){
            .sales-grid{
                grid-template-columns:repeat(4,minmax(0,1fr));
                gap:0.85rem !important;
            }
            .sale-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;
            }
            .sale-card:hover{
                transform:translateY(-2px);
                box-shadow:0 10px 18px rgba(15,23,42,0.12) !important;
            }
            .sale-card-media{height:150px;min-height:150px}
            .sale-card-content{padding:9px 11px}
            .sale-card-price{font-size:17px !important}
            .sale-card-title{font-size:15px}
        }
    </style>
    {{-- Bannière d'en-tête (compact mobile) --}}
    <div class="text-white" style="background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #dc2626 100%);">
        <div class="max-w-7xl mx-auto px-4 py-3 sm:py-8 text-center">
            <h1 class="text-lg sm:text-3xl font-extrabold tracking-tight">Ventes Flash</h1>
            <p class="text-xs sm:text-base max-w-2xl mx-auto mt-0.5" style="color: #fed7aa;">Les meilleures affaires du moment.</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' => 'urgent-sales',
            'themeColor' => 'orange',
            'formAction' => route('urgent-sales.index'),
            'categories' => $categories ?? [],
            'conditions' => $conditions ?? []
        ])
    </div>
    
    {{-- Résultats --}}
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 xl:px-8">
        @if($urgentSales->count() > 0)
            <div class="sales-grid">
                @foreach($urgentSales as $sale)
                    @php
                        $saleLat = $sale->latitude ?? $sale->prestataire?->latitude;
                        $saleLon = $sale->longitude ?? $sale->prestataire?->longitude;
                        $photos = $sale->photos ?? [];
                        $firstPhoto = is_array($photos) && count($photos) > 0 ? $photos[0] : null;
                        $photoCount = is_array($photos) ? count($photos) : 0;
                        $seller = $sale->prestataire?->user ?? $sale->user;
                        $sellerName = $seller?->name ?? 'Vendeur';
                    @endphp
                    <div class="sale-card block"
                        role="link"
                        tabindex="0"
                        data-href="{{ route('urgent-sales.show', $sale) }}"
                        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"
                        @if($saleLat && $saleLon) data-lat="{{ $saleLat }}" data-lon="{{ $saleLon }}" @endif>
                        
                        {{-- Image --}}
                        <div class="sale-card-media relative w-full overflow-hidden">
                            @if($firstPhoto)
                                <x-media-image :path="$firstPhoto" :alt="$sale->title" 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-image" style="font-size:24px;color:#ccc"></i>
                                </div>
                            @endif
                        </div>
                        
                        {{-- Infos --}}
                        <div class="sale-card-content">
                            <div style="display:flex;justify-content:space-between;align-items:baseline">
                                <div class="sale-card-price" style="font-size:17px;font-weight:800;color:#1a1a1a">{{ number_format($sale->price, 0, ',', ' ') }} €</div>
                                <div style="font-size:12px;color:#aaa;white-space:nowrap">{{ $sale->created_at->diffForHumans(null, true, true) }}</div>
                            </div>
                            <div class="sale-card-title">{{ $sale->title }}</div>
                            @if($sale->condition)<div style="font-size:13px;color:#666;margin-top:2px">{{ $conditions[$sale->condition] ?? $sale->condition }}</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">
                                    <span>@if(isset($sale->distance_km) && $sale->distance_km !== null)Distance: {{ $sale->distance_km }} km @elseif($saleLat && $saleLon)<span class="sale-distance">Distance: <span class="dist-text">…</span></span>@elseif($sale->location){{ Str::limit($sale->location, 20) }}@endif</span>
                                    @if($sale->quantity > 1)<span>Quantité: {{ $sale->quantity }}</span>@endif
                                </div>

                                <div style="flex-shrink:0">
                                    @if($sale->prestataire)
                                        @auth
                                            @if(auth()->user()->role === 'client' && auth()->user()->id !== $sale->prestataire->user_id)
                                                <a href="{{ route('client.messaging.start', $sale->prestataire) }}"
                                                   onclick="event.stopPropagation();"
                                                   class="inline-flex items-center justify-center"
                                                   style="background:transparent;color:#ea580c;font-weight:700;font-size:14px;padding:0;border-radius:0;line-height:1;text-decoration:underline">
                                                    Contacter
                                                </a>
                                            @endif
                                        @else
                                            <a href="{{ route('login') }}"
                                               onclick="event.stopPropagation();"
                                               class="inline-flex items-center justify-center"
                                               style="background:transparent;color:#ea580c;font-weight:700;font-size:14px;padding:0;border-radius:0;line-height:1;text-decoration:underline">
                                                Contacter
                                            </a>
                                        @endauth
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            
            {{-- Pagination --}}
            @if($urgentSales->hasPages())
                <div class="mt-8 flex justify-center">
                    {{ $urgentSales->appends(request()->query())->links() }}
                </div>
            @endif
        @else
            {{-- État vide --}}
            <div class="bg-white rounded-xl shadow-md p-12 text-center border border-orange-100">
                <div class="w-24 h-24 mx-auto mb-6 bg-orange-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-search text-3xl text-orange-600"></i>
                </div>
                <h3 class="text-xl font-bold text-orange-900 mb-3">Aucune vente flash trouvée</h3>
                <p class="text-orange-700 mb-6">Essayez de modifier vos filtres ou explorez toutes les annonces.</p>
                <a href="{{ route('urgent-sales.index') }}" class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition shadow-lg">
                    Réinitialiser les filtres
                </a>
            </div>
        @endif
    </div>
</div>

{{-- Calcul de distance côté client quand les coordonnées existent mais que le serveur n'a pas calculé --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (!navigator.geolocation) return;

    var cards = document.querySelectorAll('.sale-card[data-lat][data-lon] .sale-distance');
    if (cards.length === 0) return;

    navigator.geolocation.getCurrentPosition(function(pos) {
        var uLat = pos.coords.latitude;
        var uLon = pos.coords.longitude;

        cards.forEach(function(badge) {
            var card = badge.closest('.sale-card');
            var lat = parseFloat(card.dataset.lat);
            var lon = parseFloat(card.dataset.lon);
            if (isNaN(lat) || isNaN(lon)) return;

            var R = 6371;
            var dLat = (lat - uLat) * Math.PI / 180;
            var dLon = (lon - uLon) * Math.PI / 180;
            var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                    Math.cos(uLat * Math.PI / 180) * Math.cos(lat * Math.PI / 180) *
                    Math.sin(dLon/2) * Math.sin(dLon/2);
            var km = R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

            var txt = badge.querySelector('.dist-text');
            if (txt) {
                txt.textContent = (km < 1 ? (Math.round(km * 1000) + ' m') : (Math.round(km * 10) / 10 + ' km'));
            }
        });
    }, function() {
        // Permission refusée – masquer les "…"
        cards.forEach(function(b) { b.style.display = 'none'; });
    }, { timeout: 5000 });
});
</script>
@endpush
@endsection