@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* ======================================
   PAGE PRESTATAIRES - DESIGN PREMIUM 2025
   ====================================== */

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #a5b4fc;
    --secondary: #f59e0b;
    --success: #10b981;
    --danger: #ef4444;
    --dark: #0f172a;
    --gray-900: #1e293b;
    --gray-700: #334155;
    --gray-500: #64748b;
    --gray-300: #cbd5e1;
    --gray-100: #f1f5f9;
    --white: #ffffff;
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* Page container */
.presta-page {
    min-height: 100vh;
    background: var(--gray-100);
    padding-bottom: 100px;
}

/* ============ HERO SECTION ============ */
.presta-hero {
    background: var(--gradient-hero);
    padding: 40px 20px 80px;
    position: relative;
    overflow: hidden;
}

.presta-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.presta-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.presta-hero-content {
    text-align: center;
    margin-bottom: 32px;
}

.presta-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    color: var(--primary-light);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.presta-hero-badge i {
    color: var(--secondary);
}

.presta-hero h1 {
    font-size: 32px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 12px;
    line-height: 1.2;
}

.presta-hero h1 span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.presta-hero-subtitle {
    font-size: 16px;
    color: var(--gray-300);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .presta-hero {
        padding: 60px 40px 100px;
    }
    .presta-hero h1 {
        font-size: 42px;
    }
    .presta-hero-subtitle {
        font-size: 18px;
    }
}

/* Stats row */
.presta-hero-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.presta-stat-item {
    text-align: center;
}

.presta-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--white);
    display: block;
}

.presta-stat-label {
    font-size: 13px;
    color: var(--gray-300);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============ SEARCH SECTION ============ */
.presta-search-section {
    max-width: 900px;
    margin: -50px auto 0;
    padding: 0 16px;
    position: relative;
    z-index: 10;
}

.presta-search-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 24px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.presta-search-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.presta-search-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .presta-search-row {
        grid-template-columns: 1.7fr 1fr 1.35fr 0.85fr;
    }
}

.presta-input-group {
    position: relative;
}

.presta-input-group i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    font-size: 16px;
    z-index: 1;
}

.presta-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--gray-100);
    border-radius: var(--radius-md);
    font-size: 15px;
    background: var(--gray-100);
    transition: all 0.2s ease;
    color: var(--gray-900);
}

.presta-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.presta-location-group .presta-input {
    padding-right: 58px;
}

.presta-location-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.presta-location-btn:hover {
    background: rgba(99, 102, 241, 0.14);
    transform: translateY(-50%) scale(1.03);
}

.presta-location-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.presta-location-btn i {
    font-size: 14px;
}

.presta-location-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 18px;
    box-shadow: 0 18px 35px -24px rgba(15, 23, 42, 0.32);
    overflow: hidden;
    z-index: 30;
    max-height: 280px;
    overflow-y: auto;
}

.presta-location-suggestions.hidden {
    display: none;
}

.presta-location-suggestion {
    width: 100%;
    padding: 11px 13px;
    cursor: pointer;
    transition: background 0.18s ease;
    border-bottom: 1px solid rgba(241, 245, 249, 0.95);
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
}

.presta-location-suggestion:last-child {
    border-bottom: none;
}

.presta-location-suggestion:hover,
.presta-location-suggestion.active {
    background: rgba(99, 102, 241, 0.06);
}

.presta-location-suggestion-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-900);
}

.presta-location-suggestion-subtitle {
    margin-top: 3px;
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.35;
}

.presta-select {
    width: 100%;
    padding: 14px 40px 14px 48px;
    border: 2px solid var(--gray-100);
    border-radius: var(--radius-md);
    font-size: 15px;
    background: var(--gray-100);
    transition: all 0.2s ease;
    color: var(--gray-900);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}

.presta-select:focus {
    outline: none;
    border-color: var(--primary);
    background-color: var(--white);
}

.presta-select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.presta-search-actions {
    display: flex;
    gap: 12px;
}

.presta-btn {
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    text-decoration: none;
}

.presta-btn-primary {
    background: var(--gradient-primary);
    color: var(--white);
    flex: 1;
}

.presta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.presta-btn-outline {
    background: transparent;
    color: var(--gray-500);
    border: 2px solid var(--gray-300);
}

.presta-btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ============ RESULTS BAR ============ */
.presta-results-bar {
    max-width: 1200px;
    margin: 24px auto 0;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.presta-results-count {
    font-size: 15px;
    color: var(--gray-500);
}

.presta-results-count strong {
    color: var(--gray-900);
    font-weight: 700;
}

/* ============ GRID PRESTATAIRES ============ */
.presta-grid {
    max-width: 1320px;
    margin: 32px auto 0;
    padding: 0 20px;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

@media (max-width: 1279px) {
    .presta-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 959px) {
    .presta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 639px) {
    .presta-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 16px;
    }
}

/* ============ CARTE PRESTATAIRE ============ */
.presta-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.45), 0 10px 24px -18px rgba(15, 58, 134, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    isolation: isolate;
}

.presta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(15, 58, 134, 0.04), rgba(245, 158, 11, 0.04) 48%, transparent 78%);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

.presta-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 50px -30px rgba(15, 23, 42, 0.52), 0 18px 36px -24px rgba(15, 58, 134, 0.18);
    border-color: rgba(15, 58, 134, 0.18);
}

.presta-card:hover::before {
    opacity: 1;
}

/* Header compact */
.presta-card-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.presta-card-top {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.presta-card-avatar {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 12px 24px -18px rgba(15, 23, 42, 0.45);
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.presta-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #f8fafc;
}

.presta-card-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f3a86 0%, #2563eb 100%);
    color: var(--white);
    font-size: 28px;
    font-weight: 800;
}

.presta-card-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.presta-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.presta-card-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.presta-card-name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.08;
    color: var(--dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.presta-card-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #0f3a86;
    font-weight: 600;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(15, 58, 134, 0.08), rgba(15, 58, 134, 0.03));
    border: 1px solid rgba(15, 58, 134, 0.12);
    border-radius: 100px;
    max-width: max-content;
}

.presta-card-category i {
    font-size: 10px;
    color: #0f3a86;
}

.presta-card-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: max-content;
    padding: 8px 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.05));
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.22);
    font-size: 12px;
    font-weight: 800;
}

.presta-card-score i {
    color: var(--secondary);
    font-size: 12px;
}

.presta-card-score.is-fresh {
    background: linear-gradient(135deg, rgba(15, 58, 134, 0.1), rgba(15, 58, 134, 0.03));
    color: #0f3a86;
    border-color: rgba(15, 58, 134, 0.14);
}

/* Badges */
.presta-card-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.presta-badge {
    padding: 5px 8px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 12px 24px -20px rgba(15, 23, 42, 0.9);
}

.presta-badge-verified {
    background: rgba(16, 185, 129, 0.92);
    color: var(--white);
}

.presta-badge-verified i {
    font-size: 10px;
}

.presta-badge-new {
    background: rgba(15, 58, 134, 0.92);
    color: var(--white);
}

.presta-badge-top {
    background: rgba(245, 158, 11, 0.9);
    color: var(--white);
}

/* Content */
/* Rating */
.presta-card-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.presta-rating-stars {
    display: flex;
    gap: 2px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.presta-rating-stars i {
    font-size: 10px;
    color: var(--secondary);
}

.presta-rating-stars i.empty {
    color: var(--gray-300);
}

.presta-rating-value {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-900);
}

.presta-rating-count {
    font-size: 12px;
    color: #64748b;
}

.presta-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.55;
    color: #475569;
    min-height: 42px;
}

/* Location & Meta */
.presta-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.presta-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(226, 232, 240, 0.95);
    color: #334155;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.presta-meta-item i {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 58, 134, 0.1);
    color: #0f3a86;
    font-size: 12px;
    flex-shrink: 0;
}

.presta-meta-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Actions */
.presta-card-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-top: auto;
    padding-top: 0;
}

.presta-card-actions form {
    display: flex;
}

.presta-action-btn {
    flex: 1;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    letter-spacing: -0.01em;
}

.presta-action-primary {
    background: linear-gradient(135deg, #111827 0%, #4338ca 100%);
    color: var(--white);
    box-shadow: 0 18px 24px -18px rgba(67, 56, 202, 0.7);
}

.presta-action-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 30px -20px rgba(67, 56, 202, 0.75);
}

.presta-action-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
}

.presta-action-secondary:hover {
    background: var(--gray-300);
}

.presta-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: var(--white);
    color: #334155;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 10px 18px -16px rgba(15, 23, 42, 0.5);
}

.presta-action-icon:hover {
    border-color: rgba(99, 102, 241, 0.24);
    color: #4338ca;
    background: rgba(99, 102, 241, 0.06);
    transform: translateY(-2px);
}

.presta-action-icon.active {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
}

/* ============ EMPTY STATE ============ */
.presta-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 24px;
    background: var(--white);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--gray-300);
}

.presta-empty-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.2;
}

.presta-empty-icon i {
    font-size: 40px;
    color: var(--white);
}

.presta-empty h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
}

.presta-empty p {
    color: var(--gray-500);
    font-size: 16px;
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ============ PAGINATION ============ */
.presta-pagination {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 16px;
    display: flex;
    justify-content: center;
}

.presta-pagination nav {
    display: flex;
    gap: 8px;
}

.presta-pagination .page-link {
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    background: var(--white);
    color: var(--gray-700);
    border: 2px solid var(--gray-200);
}

.presta-pagination .page-link:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.presta-pagination .page-item.active .page-link {
    background: var(--gradient-primary);
    color: var(--white);
    border-color: transparent;
}

/* ============ SCROLL TO TOP ============ */
.scroll-top-btn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 52px;
    height: 52px;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 30;
    transition: all 0.3s ease;
}

.scroll-top-btn.visible {
    display: flex;
}

.scroll-top-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

/* ============ ANIMATIONS ============ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.presta-card {
    animation: fadeInUp 0.5s ease forwards;
}

.presta-card:nth-child(1) { animation-delay: 0.05s; }
.presta-card:nth-child(2) { animation-delay: 0.1s; }
.presta-card:nth-child(3) { animation-delay: 0.15s; }
.presta-card:nth-child(4) { animation-delay: 0.2s; }
.presta-card:nth-child(5) { animation-delay: 0.25s; }
.presta-card:nth-child(6) { animation-delay: 0.3s; }
.presta-card:nth-child(7) { animation-delay: 0.35s; }
.presta-card:nth-child(8) { animation-delay: 0.4s; }

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
    .presta-hero h1 {
        font-size: 24px;
    }
    
    .presta-hero-subtitle {
        font-size: 13px;
    }
    
    .presta-search-card {
        padding: 12px;
    }
    
    .presta-search-actions {
        flex-direction: column;
    }
    
    .presta-card-top {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
    }

    .presta-location-btn {
        width: 36px;
        height: 36px;
        right: 8px;
        border-radius: 11px;
    }

    .presta-location-suggestion {
        padding: 10px 12px;
    }

    .presta-card-avatar {
        width: 72px;
        height: 72px;
        border-radius: 24px;
    }
    
    .presta-card-avatar-placeholder {
        font-size: 24px;
    }
    
    .presta-card-content {
        padding: 16px;
        gap: 12px;
    }
    
    .presta-card-name {
        font-size: 16px;
    }
    
    .presta-card-category {
        font-size: 10px;
        padding: 5px 9px;
    }

    .presta-card-score {
        padding: 7px 9px;
        font-size: 11px;
    }

    .presta-card-header {
        gap: 10px;
    }

    .presta-card-badges {
        gap: 6px;
    }

    .presta-card-desc {
        min-height: auto;
    }

    .presta-card-meta {
        gap: 6px;
    }

    .presta-meta-item {
        flex-basis: calc(50% - 3px);
        padding: 7px 9px;
        border-radius: 13px;
        font-size: 10.5px;
    }

    .presta-meta-item i {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .presta-action-btn,
    .presta-action-icon {
        min-height: 40px;
    }

    .presta-action-btn {
        font-size: 12px;
        padding: 0 12px;
    }

    .presta-action-icon {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }
}
</style>
@endpush

@section('content')
<div class="presta-page">
    {{-- ============ HERO SECTION ============ --}}
    <section class="presta-hero">
        <div class="presta-hero-inner">
            <div class="presta-hero-content">
                <div class="presta-hero-badge">
                    <i class="fas fa-star"></i>
                    Professionnels vérifiés
                </div>
                <h1>Trouvez le <span>prestataire idéal</span></h1>
                <p class="presta-hero-subtitle">
                    Des milliers de professionnels qualifiés prêts à réaliser vos projets. 
                    Comparez, contactez et réservez en toute confiance.
                </p>
            </div>
            
            <div class="presta-hero-stats">
                <div class="presta-stat-item">
                    <span class="presta-stat-value">{{ $prestataires->total() }}+</span>
                    <span class="presta-stat-label">Prestataires</span>
                </div>
                <div class="presta-stat-item">
                    <span class="presta-stat-value">{{ $categories->count() }}</span>
                    <span class="presta-stat-label">Catégories</span>
                </div>
                <div class="presta-stat-item">
                    <span class="presta-stat-value">4.8</span>
                    <span class="presta-stat-label">Note moyenne</span>
                </div>
            </div>
        </div>
    </section>
    
    {{-- ============ SEARCH SECTION ============ --}}
    <section class="presta-search-section">
        <div class="presta-search-card">
            <form action="{{ route('prestataires.index') }}" method="GET" class="presta-search-form" id="searchForm">
                <div class="presta-search-row">
                    <div class="presta-input-group">
                        <i class="fas fa-search"></i>
                        <input 
                            type="text" 
                            name="name" 
                            class="presta-input" 
                            placeholder="Nom du prestataire..."
                            value="{{ request('name') }}"
                        >
                    </div>
                    
                    <div class="presta-input-group">
                        <i class="fas fa-folder"></i>
                        <select name="category" id="category" class="presta-select">
                            <option value="">Catégorie</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="presta-input-group presta-location-group">
                        <i class="fas fa-map-marker-alt"></i>
                        <input 
                            type="text" 
                            name="city" 
                            id="prestaLocationInput"
                            class="presta-input" 
                            placeholder="Ville, adresse ou code postal..."
                            value="{{ request('city') }}"
                            autocomplete="off"
                        >
                        <input type="hidden" name="latitude" id="prestaLatitudeInput" value="{{ request('latitude') }}">
                        <input type="hidden" name="longitude" id="prestaLongitudeInput" value="{{ request('longitude') }}">
                        <button type="button" class="presta-location-btn" id="prestaGpsButton" title="Utiliser ma position" aria-label="Utiliser ma position">
                            <i class="fas fa-crosshairs" id="prestaGpsIcon"></i>
                        </button>
                        <div id="prestaLocationSuggestions" class="presta-location-suggestions hidden"></div>
                    </div>

                    <div class="presta-input-group">
                        <i class="fas fa-location-arrow"></i>
                        <select name="radius" id="prestaRadiusSelect" class="presta-select" {{ request('latitude') && request('longitude') ? '' : 'disabled' }}>
                            @foreach([5, 10, 25, 50, 100] as $radiusOption)
                                <option value="{{ $radiusOption }}" {{ (int) request('radius', 50) === $radiusOption ? 'selected' : '' }}>
                                    {{ $radiusOption }} km
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                <div class="presta-search-actions">
                    <button type="submit" class="presta-btn presta-btn-primary">
                        <i class="fas fa-search"></i>
                        Rechercher
                    </button>
                    @if(request()->anyFilled(['name', 'category', 'subcategory', 'city', 'latitude', 'longitude', 'radius']))
                        <a href="{{ route('prestataires.index') }}" class="presta-btn presta-btn-outline">
                            <i class="fas fa-undo"></i>
                            Réinitialiser
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </section>
    
    {{-- ============ RESULTS BAR ============ --}}
    <div class="presta-results-bar">
        <div class="presta-results-count">
            <strong>{{ $prestataires->total() }}</strong> prestataire{{ $prestataires->total() > 1 ? 's' : '' }} trouvé{{ $prestataires->total() > 1 ? 's' : '' }}
            @if(request('category') && $categories->where('id', request('category'))->first())
                dans <strong>{{ $categories->where('id', request('category'))->first()->name }}</strong>
            @endif
            @if(request('city'))
                à <strong>{{ request('city') }}</strong>
            @endif
            @if(request('latitude') && request('longitude'))
                dans un rayon de <strong>{{ (int) request('radius', 50) }} km</strong>
            @endif
        </div>
    </div>
    
    {{-- ============ GRID PRESTATAIRES ============ --}}
    <div class="presta-grid">
        @forelse($prestataires as $prestataire)
            @php
                $rating = (float) ($prestataire->reviews_avg_rating ?? 0);
                $reviewCount = (int) ($prestataire->reviews_count ?? 0);
                $isNew = $prestataire->created_at && $prestataire->created_at->diffInDays(now()) < 30;
                $isTop = $reviewCount >= 5 && $rating >= 4.5;
                $categoryName = $prestataire->category->name ?? $prestataire->secteur_activite ?? null;
                $coverPhoto = $prestataire->cover_photo ?? null;
                $coverUrl = $coverPhoto
                    ? (filter_var($coverPhoto, FILTER_VALIDATE_URL) ? $coverPhoto : asset('storage/' . ltrim($coverPhoto, '/')))
                    : null;
                $avatarPath = $prestataire->photo ?: ($prestataire->user->avatar ?? null);
                $avatarUrl = $avatarPath
                    ? (filter_var($avatarPath, FILTER_VALIDATE_URL) ? $avatarPath : asset('storage/' . ltrim($avatarPath, '/')))
                    : null;
                $serviceCount = (int) ($prestataire->active_services_count ?? 0);
                $distanceKm = isset($prestataire->distance_km) && is_numeric($prestataire->distance_km)
                    ? (float) $prestataire->distance_km
                    : null;
                $distanceLabel = $distanceKm !== null
                    ? ($distanceKm < 1 ? round($distanceKm * 1000) . ' m' : number_format($distanceKm, 1) . ' km')
                    : null;
                $locationLabel = $prestataire->city ?: $prestataire->address;
                $secondaryMetaIcon = $distanceLabel
                    ? 'fa-location-arrow'
                    : ($serviceCount > 0 ? 'fa-briefcase' : 'fa-calendar-alt');
                $secondaryMetaLabel = $distanceLabel
                    ? $distanceLabel
                    : ($serviceCount > 0
                        ? $serviceCount . ' service' . ($serviceCount > 1 ? 's' : '')
                        : ($prestataire->created_at ? 'Depuis ' . $prestataire->created_at->format('Y') : null));
                $cardDescription = $prestataire->description
                    ? Str::limit(trim(strip_tags($prestataire->description)), 120)
                    : 'Profil professionnel disponible sur TaPrestation. Consultez son profil pour voir ses prestations.';
            @endphp
            
            <div class="presta-card">
                <div class="presta-card-content">
                    <div class="presta-card-top">
                        <div class="presta-card-avatar">
                            @if($avatarUrl)
                                <img src="{{ $avatarUrl }}" alt="{{ $prestataire->user->name }}" loading="lazy">
                            @else
                                <div class="presta-card-avatar-placeholder">
                                    {{ strtoupper(substr($prestataire->user->name, 0, 1)) }}
                                </div>
                            @endif
                        </div>

                        <div class="presta-card-main">
                            <div class="presta-card-header">
                                <div class="presta-card-identity">
                                    <div class="presta-card-name">
                                        {{ $prestataire->user->name }}
                                    </div>
                                    @if($categoryName)
                                        <span class="presta-card-category">
                                            <i class="fas fa-tag"></i>
                                            {{ $categoryName }}
                                        </span>
                                    @endif
                                </div>
                                <div class="presta-card-score {{ $reviewCount > 0 ? '' : 'is-fresh' }}">
                                    <i class="fas {{ $reviewCount > 0 ? 'fa-star' : 'fa-seedling' }}"></i>
                                    <span>{{ $reviewCount > 0 ? number_format($rating, 1) : 'Nouveau' }}</span>
                                </div>
                            </div>

                            @if($prestataire->isVerified() || $isTop || $isNew)
                                <div class="presta-card-badges">
                                    @if($prestataire->isVerified())
                                        <span class="presta-badge presta-badge-verified">
                                            <i class="fas fa-check-circle"></i> Vérifié
                                        </span>
                                    @endif
                                    @if($isTop)
                                        <span class="presta-badge presta-badge-top">
                                            <i class="fas fa-trophy"></i> Top
                                        </span>
                                    @elseif($isNew)
                                        <span class="presta-badge presta-badge-new">
                                            <i class="fas fa-seedling"></i> Nouveau
                                        </span>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>
                    
                    {{-- Rating --}}
                    <div class="presta-card-rating">
                        <div class="presta-rating-stars">
                            @for($i = 1; $i <= 5; $i++)
                                <i class="fas fa-star {{ $i <= round($rating) ? '' : 'empty' }}"></i>
                            @endfor
                        </div>
                        <span class="presta-rating-count">
                            {{ $reviewCount > 0 ? $reviewCount . ' avis' : 'Premiers retours à venir' }}
                        </span>
                    </div>
                    
                    {{-- Description --}}
                    <p class="presta-card-desc">
                        {{ $cardDescription }}
                    </p>
                    
                    {{-- Meta Info --}}
                    <div class="presta-card-meta">
                        @if($locationLabel)
                            <div class="presta-meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>{{ $locationLabel }}</span>
                            </div>
                        @endif
                        @if($secondaryMetaLabel)
                            <div class="presta-meta-item">
                                <i class="fas {{ $secondaryMetaIcon }}"></i>
                                <span>{{ $secondaryMetaLabel }}</span>
                            </div>
                        @endif
                    </div>
                    
                    {{-- Actions --}}
                    <div class="presta-card-actions">
                        <a href="{{ route('prestataires.show', $prestataire) }}" class="presta-action-btn presta-action-primary">
                            <i class="fas fa-eye"></i>
                            Voir profil
                        </a>
                        @auth
                            @if(auth()->user()->isClient())
                                <a href="{{ route('client.messaging.start', $prestataire) }}" class="presta-action-icon" title="Contacter">
                                    <i class="fas fa-comment-dots"></i>
                                </a>
                                @if(auth()->user()->client && auth()->user()->client->isFollowing($prestataire->id))
                                    <form action="{{ route('client.prestataire-follows.unfollow', $prestataire) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="presta-action-icon active" title="Ne plus suivre">
                                            <i class="fas fa-heart"></i>
                                        </button>
                                    </form>
                                @else
                                    <form action="{{ route('client.prestataire-follows.follow', $prestataire) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="presta-action-icon" title="Suivre">
                                            <i class="far fa-heart"></i>
                                        </button>
                                    </form>
                                @endif
                            @endif
                        @endauth
                    </div>
                </div>
            </div>
        @empty
            <div class="presta-empty">
                <div class="presta-empty-icon">
                    <i class="fas fa-search"></i>
                </div>
                <h3>Aucun prestataire trouvé</h3>
                <p>Modifiez vos critères de recherche ou explorez toutes les catégories disponibles</p>
                @if(request()->anyFilled(['name', 'category', 'subcategory', 'city', 'latitude', 'longitude']))
                    <a href="{{ route('prestataires.index') }}" class="presta-btn presta-btn-primary">
                        <i class="fas fa-undo"></i>
                        Voir tous les prestataires
                    </a>
                @endif
            </div>
        @endforelse
    </div>
    
    {{-- Pagination --}}
    @if($prestataires->hasPages())
        <div class="presta-pagination">
            {{ $prestataires->withQueryString()->links() }}
        </div>
    @endif
</div>

{{-- Bouton scroll to top --}}
<button id="scrollTopBtn" class="scroll-top-btn">
    <i class="fas fa-chevron-up"></i>
</button>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Catégorie -> Sous-catégorie (if needed)
    const searchForm = document.getElementById('searchForm');
    const categorySelect = document.getElementById('category');
    const locationInput = document.getElementById('prestaLocationInput');
    const latitudeInput = document.getElementById('prestaLatitudeInput');
    const longitudeInput = document.getElementById('prestaLongitudeInput');
    const radiusSelect = document.getElementById('prestaRadiusSelect');
    const suggestionsContainer = document.getElementById('prestaLocationSuggestions');
    const gpsButton = document.getElementById('prestaGpsButton');
    const gpsIcon = document.getElementById('prestaGpsIcon');
    let locationDebounce = null;
    let gpsLookupInProgress = false;
    let activeSuggestionIndex = -1;
    
    if (categorySelect) {
        categorySelect.addEventListener('change', function() {
            // Auto-submit on category change for faster filtering
            // document.getElementById('searchForm').submit();
        });
    }

    const getSuggestionItems = () => suggestionsContainer
        ? Array.from(suggestionsContainer.querySelectorAll('.presta-location-suggestion'))
        : [];

    const syncRadiusAvailability = () => {
        if (!radiusSelect) {
            return;
        }

        const hasCoordinates = Boolean(latitudeInput?.value && longitudeInput?.value);
        radiusSelect.disabled = !hasCoordinates;
    };

    const hideLocationSuggestions = () => {
        if (!suggestionsContainer) {
            return;
        }

        suggestionsContainer.classList.add('hidden');
        activeSuggestionIndex = -1;
    };

    const markActiveSuggestion = () => {
        getSuggestionItems().forEach((item, index) => {
            item.classList.toggle('active', index === activeSuggestionIndex);
        });
    };

    const getLocationPrimaryLabel = (item) => {
        const address = item?.address || {};
        const city = address.city || address.town || address.village || address.municipality || address.county || '';
        const postcode = address.postcode || '';
        const road = address.road || address.pedestrian || address.cycleway || address.footway || address.neighbourhood || item?.name || '';
        const houseNumber = address.house_number || '';
        const street = [houseNumber, road].filter(Boolean).join(' ').trim();
        const locality = [postcode, city].filter(Boolean).join(' ').trim();

        if (street && locality) {
            return `${street}, ${locality}`;
        }

        return locality || street || item?.display_name || item?.name || '';
    };

    const getLocationTitle = (item) => {
        const address = item?.address || {};
        return address.city || address.town || address.village || address.municipality || address.county || address.postcode || item?.name || getLocationPrimaryLabel(item);
    };

    const setLocationValues = (label, latitude = '', longitude = '') => {
        if (locationInput) {
            locationInput.value = label || '';
        }

        if (latitudeInput) {
            latitudeInput.value = latitude || '';
        }

        if (longitudeInput) {
            longitudeInput.value = longitude || '';
        }

        syncRadiusAvailability();
        hideLocationSuggestions();
    };

    const applySuggestion = (element) => {
        if (!(element instanceof HTMLElement)) {
            return;
        }

        setLocationValues(
            element.dataset.label || '',
            element.dataset.lat || '',
            element.dataset.lon || '',
        );
    };

    const renderLocationSuggestions = (items) => {
        if (!suggestionsContainer) {
            return;
        }

        const fragment = document.createDocumentFragment();
        let hasSuggestions = false;

        items.forEach((item) => {
            const label = getLocationPrimaryLabel(item);
            const title = getLocationTitle(item);
            const subtitle = typeof item?.display_name === 'string' ? item.display_name : label;

            if (!label) {
                return;
            }

            hasSuggestions = true;

            const suggestion = document.createElement('button');
            suggestion.type = 'button';
            suggestion.className = 'presta-location-suggestion';
            suggestion.dataset.label = label;
            suggestion.dataset.lat = item.lat || '';
            suggestion.dataset.lon = item.lon || '';

            const titleEl = document.createElement('div');
            titleEl.className = 'presta-location-suggestion-title';
            titleEl.textContent = title;

            const subtitleEl = document.createElement('div');
            subtitleEl.className = 'presta-location-suggestion-subtitle';
            subtitleEl.textContent = subtitle.length > 90 ? `${subtitle.slice(0, 90)}...` : subtitle;

            suggestion.appendChild(titleEl);
            suggestion.appendChild(subtitleEl);
            fragment.appendChild(suggestion);
        });

        suggestionsContainer.replaceChildren(fragment);
        suggestionsContainer.classList.toggle('hidden', !hasSuggestions);
        activeSuggestionIndex = -1;
    };

    const finishGpsLookup = (iconClass = 'fas fa-crosshairs') => {
        if (gpsIcon) {
            gpsIcon.className = iconClass;
        }

        if (gpsButton) {
            gpsButton.disabled = false;
        }

        gpsLookupInProgress = false;
    };

    const useCurrentPosition = () => {
        if (gpsLookupInProgress || !gpsButton || !gpsIcon) {
            return;
        }

        if (!navigator.geolocation) {
            alert('Géolocalisation non supportée par votre navigateur.');
            return;
        }

        gpsLookupInProgress = true;
        gpsButton.disabled = true;
        gpsIcon.className = 'fas fa-spinner fa-spin';

        navigator.geolocation.getCurrentPosition(function(position) {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;

            setLocationValues('Position GPS...', String(latitude), String(longitude));

            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&zoom=14&addressdetails=1&accept-language=fr`)
                .then((response) => response.json())
                .then((data) => {
                    const label = getLocationPrimaryLabel(data) || 'Ma position';
                    setLocationValues(label, String(latitude), String(longitude));
                    finishGpsLookup('fas fa-check');
                    window.setTimeout(() => finishGpsLookup(), 1800);
                })
                .catch(() => {
                    setLocationValues('Ma position', String(latitude), String(longitude));
                    finishGpsLookup('fas fa-check');
                    window.setTimeout(() => finishGpsLookup(), 1800);
                });
        }, function(error) {
            let message = 'Erreur de géolocalisation.';

            if (error.code === error.PERMISSION_DENIED) {
                message = 'Permission refusée pour la géolocalisation.';
            } else if (error.code === error.POSITION_UNAVAILABLE) {
                message = 'Position indisponible.';
            } else if (error.code === error.TIMEOUT) {
                message = 'Délai dépassé pour récupérer la position.';
            }

            alert(message);
            finishGpsLookup();
        }, {
            enableHighAccuracy: false,
            timeout: 10000,
            maximumAge: 300000,
        });
    };

    locationInput?.addEventListener('input', function(event) {
        if (latitudeInput) {
            latitudeInput.value = '';
        }

        if (longitudeInput) {
            longitudeInput.value = '';
        }

        syncRadiusAvailability();

        window.clearTimeout(locationDebounce);

        const query = event.currentTarget.value.trim();

        if (query.length < 2) {
            hideLocationSuggestions();
            return;
        }

        locationDebounce = window.setTimeout(() => {
            fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=6&addressdetails=1&accept-language=fr&countrycodes=fr,be,ch,lu`)
                .then((response) => response.json())
                .then((data) => {
                    if (!Array.isArray(data) || data.length === 0) {
                        hideLocationSuggestions();
                        return;
                    }

                    renderLocationSuggestions(data);
                })
                .catch(() => {
                    hideLocationSuggestions();
                });
        }, 220);
    });

    locationInput?.addEventListener('keydown', function(event) {
        const items = getSuggestionItems();
        const hasSuggestions = items.length > 0 && !suggestionsContainer?.classList.contains('hidden');

        if (event.key === 'ArrowDown' && hasSuggestions) {
            event.preventDefault();
            activeSuggestionIndex = (activeSuggestionIndex + 1) % items.length;
            markActiveSuggestion();
            return;
        }

        if (event.key === 'ArrowUp' && hasSuggestions) {
            event.preventDefault();
            activeSuggestionIndex = activeSuggestionIndex <= 0 ? items.length - 1 : activeSuggestionIndex - 1;
            markActiveSuggestion();
            return;
        }

        if (event.key === 'Escape') {
            hideLocationSuggestions();
            return;
        }

        if (event.key === 'Enter') {
            event.preventDefault();

            if (hasSuggestions) {
                applySuggestion(items[activeSuggestionIndex >= 0 ? activeSuggestionIndex : 0]);
                return;
            }

            searchForm?.submit();
        }
    });

    suggestionsContainer?.addEventListener('click', function(event) {
        const target = event.target;

        if (!(target instanceof Element)) {
            return;
        }

        const item = target.closest('.presta-location-suggestion');
        if (item instanceof HTMLElement) {
            applySuggestion(item);
        }
    });

    document.addEventListener('click', function(event) {
        const target = event.target;

        if (!(target instanceof Node)) {
            return;
        }

        if (!locationInput?.contains(target) && !suggestionsContainer?.contains(target) && !gpsButton?.contains(target)) {
            hideLocationSuggestions();
        }
    });

    gpsButton?.addEventListener('click', function() {
        useCurrentPosition();
    });

    syncRadiusAvailability();
    
    // Scroll to top button
    const scrollBtn = document.getElementById('scrollTopBtn');
    
    window.addEventListener('scroll', function() {
        if (window.scrollY > 400) {
            scrollBtn.classList.add('visible');
        } else {
            scrollBtn.classList.remove('visible');
        }
    });
    
    scrollBtn.addEventListener('click', function() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
    
    // Submit form on Enter in search input
    const searchInputs = document.querySelectorAll('.presta-input');
    searchInputs.forEach(input => {
        input.addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && this !== locationInput) {
                e.preventDefault();
                searchForm?.submit();
            }
        });
    });
    
    // Lazy load images with Intersection Observer
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                if (img.dataset.src) {
                    img.src = img.dataset.src;
                    img.removeAttribute('data-src');
                }
                observer.unobserve(img);
            }
        });
    });
    
    document.querySelectorAll('img[data-src]').forEach(img => {
        imageObserver.observe(img);
    });
});
</script>
@endpush