@extends('layouts.app')

@section('title')
   {{ $ad->title }} - View Ad Details | {{ config('app.name') }}
@endsection

@section('meta')
    <meta name="description" content="{{ Str::limit($ad->description, 160) }}">
    <meta property="og:title" content="{{ $ad->title }}">
    <meta property="og:description" content="{{ Str::limit($ad->description, 300) }}">
    @if ($ad->images->count() > 0)
        <meta property="og:image" content="{{ asset('storage/' . $ad->images->first()->image_path) }}">
    @endif
@endsection
@section('styles')
    <style>
        /* ===== Base Styles ===== */
        :root {
            --primary-color: #2563eb;
            --secondary-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --dark-color: #1f2937;
            --light-color: #f9fafb;
            --border-color: #e5e7eb;
        }

        /* ===== Ad Performance Optimizatoion ===== */
       
/* Add this back to your styles section */




        /* ===== Main Content Styles ===== */
        .ad-detail-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Image Gallery */
        .image-gallery-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            margin-bottom: 24px;
        }

        .main-image-container {
            position: relative;
            background: var(--light-color);
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .main-image {
            max-width: 100%;
            max-height: 500px;
            object-fit: contain;
        }

        .thumbnail-container {
            display: flex;
            gap: 10px;
            padding: 15px;
            overflow-x: auto;
            background: white;
            border-top: 1px solid var(--border-color);
        }

        .thumbnail {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .thumbnail.active {
            border-color: var(--primary-color);
            transform: scale(1.05);
        }

        .thumbnail:hover {
            border-color: var(--secondary-color);
        }

        .image-counter {
            position: absolute;
            top: 15px;
            left: 15px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
        }

        /* ===== Product Info ===== */
        .product-header {
            margin-bottom: 24px;
        }

        .product-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--dark-color);
            margin-bottom: 8px;
            line-height: 1.3;
        }

        .product-price {
            font-size: 32px;
            font-weight: 700;
            color: var(--secondary-color);
            margin-bottom: 16px;
        }

        .product-meta {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #6b7280;
            font-size: 14px;
        }

        .meta-item i {
            color: var(--primary-color);
        }

        /* ===== Sidebar Action Buttons ===== */
        .sidebar-action-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }

        .sidebar-action-btn {
            width: 100%;
            background: white;
            color: var(--dark-color);
            border: 2px solid var(--border-color);
            padding: 14px 20px;
            border-radius: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            font-size: 16px;
        }

        .sidebar-action-btn:hover {
            border-color: var(--primary-color);
            background: #f8fafc;
            transform: translateY(-2px);
        }

        .sidebar-action-btn i {
            color: var(--primary-color);
            font-size: 18px;
        }

        .sidebar-action-btn.favorited {
            background: #fee2e2;
            border-color: var(--danger-color);
            color: var(--danger-color);
        }

        .sidebar-action-btn.favorited i {
            color: var(--danger-color);
        }

        .btn-primary-action {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
        }

        .btn-primary-action:hover {
            background: #1d4ed8;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
            color: white;
        }

        .btn-secondary-action {
            background: white;
            color: var(--dark-color);
            border: 2px solid var(--border-color);
            padding: 14px 20px;
            border-radius: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn-secondary-action:hover {
            border-color: var(--primary-color);
            background: #f8fafc;
        }

        .btn-danger-action {
            background: var(--danger-color);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn-danger-action:hover {
            background: #dc2626;
            transform: translateY(-2px);
        }

        /* ===== Seller Info Card ===== */
        .seller-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 24px;
        }

        .seller-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
        }

        .seller-avatar {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }

        .seller-info h4 {
            margin: 0 0 4px 0;
            font-size: 18px;
        }

        .seller-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 16px;
        }

        .stat-item {
            text-align: center;
            padding: 12px;
            background: var(--light-color);
            border-radius: 8px;
        }

        .stat-value {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-color);
        }

        .stat-label {
            font-size: 12px;
            color: #6b7280;
            margin-top: 4px;
        }

        /* ===== Description Section ===== */
        .description-section {
            background: white;
            border-radius: 16px;
            padding: 28px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 24px;
        }

        .section-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .description-content {
            line-height: 1.7;
            color: #4b5563;
        }

        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 20px;
        }

        .tag {
            background: #e0f2fe;
            color: #0369a1;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }

        /* ===== Specifications ===== */
        .specs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 16px;
            margin-top: 20px;
        }

        .spec-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .spec-label {
            color: #6b7280;
            font-weight: 500;
        }

        .spec-value {
            color: var(--dark-color);
            font-weight: 600;
        }

        /* Phone number styles */
        .phone-number-display {
            background: var(--light-color);
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            padding: 14px 20px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: default;
            pointer-events: none;
        }

        .phone-number-display i {
            color: var(--primary-color);
            font-size: 20px;
        }






/* ===== MODAL BUTTON FIX - HIGH SPECIFICITY ===== */
/* These selectors are more specific than Bootstrap's defaults */

/* Target all modal buttons */
.modal-content .btn,
.modal .btn,
div[id*="Modal"] .btn,
div[class*="modal"] .btn {
    /* Reset Bootstrap overrides */
    background-image: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;

    /* Your custom styles */
    border-radius: 10px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* Report button in modal - RED */
.modal .btn-danger,
#reportAdModal .btn-danger {
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
}

.modal .btn-danger:hover,
#reportAdModal .btn-danger:hover {
    background: #dc2626 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3) !important;
}

/* Login button in modal - DARK */
.modal .btn-dark,
#authPhoneModal .btn-dark {
    background: #1f2937 !important;
    color: white !important;
}

.modal .btn-dark:hover,
#authPhoneModal .btn-dark:hover {
    background: #111827 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(31, 41, 55, 0.3) !important;
}

/* Register button in modal - GREEN */
.modal .btn-success,
#authPhoneModal .btn-success {
    background: #10b981 !important;
    color: white !important;
}

.modal .btn-success:hover,
#authPhoneModal .btn-success:hover {
    background: #059669 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3) !important;
}

/* Google button in modal */
.modal a.btn-danger,
#authPhoneModal a.btn-danger {
    background: #db4437 !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}

.modal a.btn-danger:hover,
#authPhoneModal a.btn-danger:hover {
    background: #c53929 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(219, 68, 55, 0.3) !important;
}

/* Form inputs in modal */
.modal .form-control,
.modal .form-select,
#authPhoneModal .form-control,
#authPhoneModal .form-select,
#reportAdModal .form-control,
#reportAdModal .form-select {
    border-radius: 10px !important;
    padding: 12px 15px !important;
    border: 2px solid #e5e7eb !important;
    height: auto !important;
    font-size: 16px !important;
}

.modal .form-control:focus,
.modal .form-select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    outline: none !important;
}

/* Form floating labels fix */
.modal .form-floating>label {
    padding: 1rem 1rem !important;
    color: #6b7280 !important;
}

.modal .form-floating>.form-control:focus~label,
.modal .form-floating>.form-control:not(:placeholder-shown)~label {
    color: #2563eb !important;
    opacity: 0.8 !important;
}

/* Modal header styling */
.modal .modal-header,
#reportAdModal .modal-header,
#authPhoneModal .modal-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: white !important;
}

.modal .modal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

/* Modal body */
.modal .modal-body {
    padding: 24px !important;
}

/* Tab navigation */
.modal .nav-tabs {
    border-bottom: 2px solid #e5e7eb !important;
    padding: 0 24px !important;
    background: white !important;
}

.modal .nav-tabs .nav-link {
    border: none !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    margin-right: 10px !important;
    background: transparent !important;
    font-size: 16px !important;
}

.modal .nav-tabs .nav-link:hover {
    color: #2563eb !important;
    border: none !important;
    background: transparent !important;
}

.modal .nav-tabs .nav-link.active {
    color: #2563eb !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid #2563eb !important;
}

/* OR separator */
.modal .text-muted.my-3 {
    position: relative !important;
    text-align: center !important;
    margin: 20px 0 !important;
    color: #6b7280 !important;
}

.modal .text-muted.my-3::before,
.modal .text-muted.my-3::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    width: 45% !important;
    height: 1px !important;
    background: #e5e7eb !important;
}

.modal .text-muted.my-3::before {
    left: 0 !important;
}

.modal .text-muted.my-3::after {
    right: 0 !important;
}

/* Close button */
.modal .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
    opacity: 0.5 !important;
}

.modal .btn-close:hover {
    opacity: 0.75 !important;
}

/* Modal content container */
.modal .modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

/* Disable animations in modal (as per your requirement) */
.modal .btn {
    animation: none !important;
}

/* Mobile responsiveness */
@media (max-width: 576px) {
    .modal .modal-content {
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .modal .modal-body {
        padding: 20px !important;
    }

    .modal .nav-tabs .nav-link {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
}

 /* Only animation button code */
        /* ===== Professional Button Animations ===== */

        /* Professional pulse - only for specific buttons */
        @keyframes professionalPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
            }

            70% {
                box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
            }
        }

        /* Subtle shine animation */
        @keyframes subtleShine {
            0% {
                background-position: -100% 0;
            }

            100% {
                background-position: 200% 0;
            }
        }

        /* Gentle breathing effect */
        @keyframes gentleBreathing {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.02);
                opacity: 0.95;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Border highlight animation */
        @keyframes borderHighlight {
            0% {
                border-color: var(--border-color);
                border-width: 2px;
            }

            50% {
                border-color: var(--primary-color);
                border-width: 3px;
            }

            100% {
                border-color: var(--border-color);
                border-width: 2px;
            }
        }

        /* ===== Apply animations ONLY to specific buttons ===== */

        /* Phone button - Professional pulse (targeted selector) */
        button[id="showPhoneBtn"],
        .btn-primary-action:not(.cookie-btn):not(.modal *) {
            animation: professionalPulse 2s infinite;
            position: relative;
            z-index: 1;
        }

        /* Message Seller button - Subtle shine (targeted) */
        .sidebar-action-btn:first-child,
        a[href*="chat"]:not(.cookie-btn):not(.modal a) {
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.2) 50%,
                    rgba(255, 255, 255, 0) 100%);
            background-size: 200% 100%;
            animation: subtleShine 3s infinite;
            position: relative;
            overflow: hidden;
        }

        /* Favorite button - Gentle breathing */
        .favorite-btn:not(.modal button):not(.cookie-btn) {
            animation: gentleBreathing 3s ease-in-out infinite;
        }

        /* Contact info phone button - Border highlight */
        .phone-number-display:not(.modal div) {
            animation: borderHighlight 3s infinite;
        }

        /* Stop animations on hover for better UX */
        button[id="showPhoneBtn"]:hover,
        .sidebar-action-btn:first-child:hover,
        .favorite-btn:hover,
        .phone-number-display:hover {
            animation: none !important;
            transform: translateY(-2px);
            transition: transform 0.3s ease;
        }

        /* Ensure modal buttons and cookie consent are NEVER animated */
        .modal button,
        .modal .btn,
        .cookie-consent *,
        .cookie-btn,
        [class*="cookie"] {
            animation: none !important;
            transform: none !important;
            background: none !important;
            background-image: none !important;
        }

        /* Professional hover effect for all buttons */
        .sidebar-action-btn {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        /* Subtle ripple effect on click */
        .sidebar-action-btn:active {
            transform: scale(0.98);
        }

        /* Add a subtle border glow on hover instead of animation */
        .sidebar-action-btn:hover {
            border-color: var(--primary-color);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
        }

        /* Phone button hover effect */
        button[id="showPhoneBtn"]:hover {
            background: #1d4ed8;
            box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
        }

        /* Mobile optimization - reduce animation intensity */
        @media (max-width: 768px) {

            button[id="showPhoneBtn"],
            .sidebar-action-btn:first-child,
            .favorite-btn {
                animation-duration: 3s;
                /* Slower on mobile */
            }
        }

        /* Optional: Add a subtle attention indicator (small dot) */
        @keyframes attentionDot {
            0% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.5;
                transform: scale(1.2);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Small attention dot for phone button (very subtle) */
        button[id="showPhoneBtn"]::after {
            content: '';
            position: absolute;
            top: 5px;
            right: 5px;
            width: 8px;
            height: 8px;
            background-color: #ff4444;
            border-radius: 50%;
            animation: attentionDot 2s infinite;
            opacity: 0.8;
        }

        /* Remove dot on hover */
        button[id="showPhoneBtn"]:hover::after {
            opacity: 0;
            transition: opacity 0.3s ease;
        }



        /* ===== Mobile Optimizations ===== */
        @media (max-width: 768px) {
            .product-title {
                font-size: 24px;
            }

            .product-price {
                font-size: 28px;
            }

            .main-image-container {
                min-height: 300px;
            }

            .thumbnail {
                width: 60px;
                height: 60px;
            }

            .seller-stats {
                grid-template-columns: repeat(3, 1fr);
            }

            .specs-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .product-title {
                font-size: 20px;
            }

            .product-price {
                font-size: 24px;
            }

            .main-image-container {
                min-height: 250px;
            }

            .seller-header {
                flex-direction: column;
                text-align: center;
            }

            .seller-stats {
                grid-template-columns: 1fr;
            }
        }

        /* ===== Animation Effects ===== */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }

        /* ===== Loading States ===== */
        .loading-skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* ===== Report Modal Improvements ===== */
        .report-modal .modal-content {
            border-radius: 16px;
            border: none;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        }

        /* ===== Success Alert ===== */
        .custom-alert {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            padding: 16px 24px;
            border-radius: 10px;
            background: var(--secondary-color);
            color: white;
            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* ===== Accessibility Improvements ===== */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
    </style>
@endsection


@section('content')
    <div class="ad-detail-container fade-in">
                 <!-- Top Ad Zone -->
         <div class="row my-3">
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-4155905641018537"
                 data-ad-slot="9487563407"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
        <div class="row g-4">
            <!-- Left Column: Main Content -->
            <div class="col-lg-8 col-md-7">
                <!-- Product Images -->
                <div class="image-gallery-container">
                    <div class="main-image-container">
                        @if ($ad->images->count() > 0)
                            <img id="mainImage" src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                alt="{{ $ad->title }}" class="main-image"
                                onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                        @else
                            <img src="{{ asset('storage/product_images/default.png') }}" class="main-image"
                                alt="No Image Available">
                        @endif

                        <div class="image-counter">
                            <span id="currentImage">1</span> / <span id="totalImages">{{ $ad->images->count() }}</span>
                        </div>
                    </div>

                    @if ($ad->images->count() > 1)
                        <div class="thumbnail-container">
                            @foreach ($ad->images as $index => $image)
                                <img src="{{ asset('storage/' . $image->image_path) }}"
                                    alt="Thumbnail {{ $index + 1 }}"
                                    class="thumbnail {{ $index === 0 ? 'active' : '' }}" data-index="{{ $index }}"
                                    onclick="changeImage({{ $index }})">
                            @endforeach
                        </div>
                    @endif
                </div>

                <!-- Inline Ad Zone -->
                 <div class="row my-3">
                    <ins class="adsbygoogle"
                         style="display:block"
                         data-ad-client="ca-pub-4155905641018537"
                         data-ad-slot="9487563407"
                         data-ad-format="auto"
                         data-full-width-responsive="true"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>

                <!-- Product Info -->
                <div class="product-header">
                    <h1 class="product-title">{{ $ad->title }}</h1>
                    <div class="product-price">
                        {{ config('app.currency_symbol') }}{{ number_format($ad->price, 2) }}
                    </div>
                    <div class="product-meta">
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>{{ $ad->city ?? 'Location not specified' }}, {{ $ad->country }}</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>Posted: {{ $ad->created_at->diffForHumans() }}</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-eye"></i>
                            <span>{{ $ad->views ?? 0 }} views</span>
                        </div>
                    </div>
                </div>

                <!-- Hidden Action Buttons (for functionality only) -->
                <div class="action-buttons" style="display: none;">
                    <button class="btn-secondary-action favorite-btn" data-ad-id="{{ $ad->id }}">
                        <i class="far fa-heart"></i>
                        <span>Add to Wishlist</span>
                    </button>
                </div>

                <!-- Report Button -->
                <div class="d-flex justify-content-end mb-4">
                    <button class="btn-danger-action" data-bs-toggle="modal" data-bs-target="#reportAdModal">
                        <i class="fas fa-exclamation-triangle"></i>
                        Report This Ad
                    </button>
                </div>

                <!-- Description Section -->
                <div class="description-section">
                    <h2 class="section-title">
                        <i class="fas fa-file-alt"></i>
                        Description
                    </h2>
                    <div class="description-content">
                        {!! nl2br(e($ad->description)) !!}
                    </div>

                    @if ($ad->tags->count() > 0)
                        <div class="mt-4">
                            <h3 class="h6 mb-2"><strong>Tags:</strong></h3>
                            <div class="tags-container">
                                @foreach ($ad->tags as $tag)
                                    <span class="tag">{{ $tag->name }}</span>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Specifications -->
                <div class="description-section">
                    <h2 class="section-title">
                        <i class="fas fa-list-alt"></i>
                        Specifications
                    </h2>
                    <div class="specs-grid">
                        <div class="spec-item">
                            <span class="spec-label">Brand</span>
                            <span class="spec-value">{{ $ad->brand->name ?? 'Not specified' }}</span>
                        </div>
                        <div class="spec-item">
                            <span class="spec-label">Condition</span>
                            <span class="spec-value">{{ $ad->condition ?? 'Not specified' }}</span>
                        </div>
                        <div class="spec-item">
                            <span class="spec-label">Category</span>
                            <span class="spec-value">{{ $ad->category->name ?? 'Not specified' }}</span>
                        </div>
                        @if ($ad->model)
                            <div class="spec-item">
                                <span class="spec-label">Model</span>
                                <span class="spec-value">{{ $ad->model }}</span>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Another Inline Ad Zone -->
                <div class="row my-3">
                    <ins class="adsbygoogle"
                         style="display:block"
                         data-ad-client="ca-pub-4155905641018537"
                         data-ad-slot="9487563407"
                         data-ad-format="auto"
                         data-full-width-responsive="true"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>

            <!-- Right Column: Sidebar (Removed Ad, Added Buttons) -->
            <div class="col-lg-4 col-md-5">
                <!-- Sidebar Action Buttons (Message Seller & Add to Wishlist) -->
                <div class="sidebar-action-buttons">
                    <a href="{{ route('chat.show') }}?ad_id={{ $ad->id }}&seller_id={{ $ad->user_id }}"
                        class="sidebar-action-btn">
                        <i class="fas fa-comment"></i>
                        <span>Message Seller</span>
                    </a>

                    {{-- <button class="sidebar-action-btn favorite-btn" data-ad-id="{{ $ad->id }}"
                        id="favorite-btn-{{ $ad->id }}">
                        <i class="far fa-heart"></i>
                        <span id="favorite-text-{{ $ad->id }}">Add to Wishlist</span>
                    </button> --}}

                    <!-- Favorite Button with Server-side Check -->
                    <button class="sidebar-action-btn favorite-btn" data-ad-id="{{ $ad->id }}"
                        id="favorite-btn-{{ $ad->id }}">
                        @auth
                            @if (Auth::user()->favorites()->where('ad_id', $ad->id)->exists())
                                <i class="fas fa-heart"></i>
                                <span id="favorite-text-{{ $ad->id }}">Remove from Wishlist</span>
                            @else
                                <i class="far fa-heart"></i>
                                <span id="favorite-text-{{ $ad->id }}">Add to Wishlist</span>
                            @endif
                        @else
                            <i class="far fa-heart"></i>
                            <span id="favorite-text-{{ $ad->id }}">Add to Wishlist</span>
                        @endauth
                    </button>
                </div>

                <!-- Seller Info Card (Removed response rate) -->
                <div class="seller-card">
                    <div class="seller-header">
                        <div class="seller-avatar">
                            {{ substr($ad->seller_name ?? 'S', 0, 1) }}
                        </div>
                        <div class="seller-info">
                            <h4 class="mb-1">{{ $ad->seller_name ?? 'Seller' }}</h4>
                            <p class="text-muted mb-0">
                                <i class="fas fa-map-marker-alt me-1"></i>
                                {{ $ad->state ?? '' }}, {{ $ad->country }}
                            </p>
                        </div>
                    </div>

                    <div class="seller-stats">
                        <div class="stat-item">
                            <div class="stat-value">{{ $sameSellerAds->count() }}</div>
                            <div class="stat-label">Total Ads</div>
                        </div>
                        {{-- <div class="stat-item">
                            <div class="stat-value">{{ number_format($ad->user->averageRating() ?? 4.5, 1) }}</div>
                            <div class="stat-label">Rating</div>
                        </div> --}}
                        <div class="stat-item">
                            <div class="stat-value">{{ $ad->user->created_at->diffForHumans() ?? '1 yr' }}</div>
                            <div class="stat-label">Member Since</div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <a href="{{ route('ads.user.profile', ['id' => $ad->user?->id ?? 0]) }}"
                            class="btn-secondary-action w-100" style="text-decoration: none;">
                            <i class="fas fa-user-circle"></i>
                            View Full Profile
                        </a>
                    </div>
                </div>

                <!-- Contact Info -->
                <div class="seller-card">
                    <h4 class="section-title mb-3">
                        <i class="fas fa-address-card"></i>
                        Contact Information
                    </h4>
                    <div class="d-grid" id="phoneNumber" data-ad-id="{{ $ad->id }}">
                        <div class="d-grid">
                            <button class="btn-primary-action mb-2" id="showPhoneBtn" data-ad-id="{{ $ad->id }}">
                                <i class="fas fa-phone-alt"></i>
                                Show Phone Number
                            </button>

                            <div id="phoneNumberBox" class="mt-2 d-none">
                                <div id="phoneLink" class="phone-number-display">
                                    <i class="fas fa-phone-alt"></i>
                                    {{ $ad->seller_phone }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Safety Tips -->
                <div class="seller-card">
                    <h4 class="section-title mb-3">
                        <i class="fas fa-shield-alt"></i>
                        Safety Tips
                    </h4>
                    <ul class="list-unstyled text-muted small">
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>Meet in a public place
                        </li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>Check the item before
                            buying</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>Never pay in advance</li>
                        <li><i class="fas fa-check-circle text-success me-2"></i>Trust your instincts</li>
                    </ul>
                </div>
                
                
                <div class="row my-4">
                    <ins class="adsbygoogle"
                         style="display:block"
                         data-ad-client="ca-pub-4155905641018537"
                         data-ad-slot="9487563407"
                         data-ad-format="auto"
                         data-full-width-responsive="true"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>

            </div>
        </div>

        @if ($sameSellerAds->count())
            <div class="mt-5">
                <h5 class="mb-3">More ads from this seller</h5>

                <div class="row g-3">
                    @foreach ($sameSellerAds as $item)
                        <div class="col-md-4 col-12">
                            <a href="{{ route('ads.show', $item->slug) }}" class="text-decoration-none">
                                <div class="card h-100">
                                    @if ($item->images->count() > 0)
                                        <img src="{{ asset('storage/' . $item->images->first()->image_path) }}"
                                            alt="{{ $item->title }}" class="card-img-top"
                                            onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';"
                                            style="height:180px;object-fit:cover;">
                                    @else
                                        <img src="{{ asset('storage/product_images/default.png') }}" class="card-img-top"
                                            alt="No Image Available" style="height:180px;object-fit:cover;">
                                    @endif
                                    <div class="card-body">
                                        <h6 class="text-dark">{{ Str::limit($item->title, 40) }}</h6>
                                        <p class="text-primary fw-bold mb-0">£{{ number_format($item->price) }}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        @if ($recommendedAds->count())
            <div class="mt-5">
                <h5 class="mb-3">Recommended for you</h5>

                <div class="row g-3">
                    @foreach ($recommendedAds as $item)
                        <div class="col-md-4 col-12">
                            <a href="{{ route('ads.show', $item->slug) }}" class="text-decoration-none">
                                <div class="card h-100">
                                    @if ($item->images->count() > 0)
                                        <img src="{{ asset('storage/' . $item->images->first()->image_path) }}"
                                            alt="{{ $item->title }}" class="card-img-top"
                                            onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';"
                                            style="height:180px;object-fit:cover;">
                                    @else
                                        <img src="{{ asset('storage/product_images/default.png') }}" class="card-img-top"
                                            alt="No Image Available" style="height:180px;object-fit:cover;">
                                    @endif
                                    <div class="card-body">
                                        <h6 class="text-dark">{{ Str::limit($item->title, 40) }}</h6>
                                        <p class="text-primary fw-bold mb-0">£{{ number_format($item->price) }}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Bottom Ad Zone -->
        <div class="row my-3">
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-4155905641018537"
                 data-ad-slot="9487563407"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
    </div>

    <!-- Report Modal -->
    <div class="modal fade report-modal" id="reportAdModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Report This Ad</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="reportForm" method="POST" action="{{ route('ads.reports.store') }}">
                        @csrf
                        <input type="hidden" name="ad_id" value="{{ $ad->id }}">

                        <div class="mb-3">
                            <label for="reason" class="form-label">Select Reason</label>
                            <select name="reason" id="reason" class="form-select" required>
                                <option value="">Choose a reason...</option>
                                <option value="Inappropriate Content">Inappropriate Content</option>
                                <option value="Misleading Information">Misleading Information</option>
                                <option value="Scam or Fraud">Scam or Fraud</option>
                                <option value="Already Sold">Already Sold</option>
                                <option value="Wrong Category">Wrong Category</option>
                                <option value="Spam">Spam</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Additional Details (Optional)</label>
                            <textarea name="description" id="description" rows="3" class="form-control"
                                placeholder="Please provide more details..."></textarea>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-paper-plane me-2"></i>Submit Report
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @if (session('success'))
        <div class="custom-alert alert-dismissible fade show" role="alert">
            <div class="d-flex align-items-center">
                <i class="fas fa-check-circle me-2"></i>
                <span>{{ session('success') }}</span>
                <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="alert"></button>
            </div>
        </div>
    @endif

    <!-- Phone & Login Modal -->
    <div class="modal fade" id="authPhoneModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md modal-fullscreen-sm-down">
            <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="modal-header border-0 pb-0">
                    <div>
                        <h5 class="modal-title fw-bold">Access Contact Details</h5>
                        <small class="text-muted">Login or create an account to view the seller's phone number.</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <ul class="nav nav-tabs mb-4" id="adTabs" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#loginTab">
                            Login
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#registerTab">
                            Register
                        </button>
                    </li>
                </ul>

                <div class="modal-body px-4 pb-4">
                    <div class="tab-content mt-4">
                        <div class="tab-pane fade show active" id="loginTab">
                            <form id="ajaxLoginForm" method="POST" action="{{ route('login.ajax') }}">
                                @csrf
                                <div class="form-floating mb-3">
                                    <input type="email" name="email" class="form-control rounded-3"
                                        placeholder="Email" required>
                                    <label>Email address</label>
                                </div>

                                <div class="form-floating mb-3">
                                    <input type="password" name="password" class="form-control rounded-3"
                                        placeholder="Password" required>
                                    <label>Password</label>
                                </div>

                                <button type="submit" class="btn btn-dark w-100 rounded-3 py-2 fw-semibold">
                                    Login
                                </button>
                            </form>

                            <div class="text-center my-3 text-muted">OR</div>

                            <a href="{{ route('login.google') }}?redirect={{ urlencode(request()->fullUrl()) }}&show_phone=1"
                                class="btn btn-danger w-100 rounded-3 py-2 fw-semibold">
                                Continue with Google
                            </a>
                        </div>

                        <div class="tab-pane fade" id="registerTab">
                            <form id="ajaxRegisterForm" action="{{ route('register.ajax') }}" method="post">
                                @csrf
                                <div class="form-floating mb-3">
                                    <input type="text" name="name" class="form-control rounded-3"
                                        placeholder="Name" required>
                                    <label>Full Name</label>
                                </div>

                                <div class="form-floating mb-3">
                                    <input type="email" name="email" class="form-control rounded-3"
                                        placeholder="Email" required>
                                    <label>Email address</label>
                                </div>

                                <div class="form-floating mb-3">
                                    <input type="password" name="password" class="form-control rounded-3"
                                        placeholder="Password" required>
                                    <label>Password</label>
                                </div>

                                <button type="submit" class="btn btn-success w-100 rounded-3 py-2 fw-semibold">
                                    Create Account
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Login Modal for Favorite -->
    <div class="modal fade" id="loginFavoriteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold">Login Required</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center p-4">
                    <i class="fas fa-heart text-danger fa-3x mb-3"></i>
                    <p class="mb-4">Please login to add items to your wishlist.</p>
                    <div class="d-grid gap-2">
                        <button class="btn btn-dark"
                            onclick="window.location.href='{{ route('login') }}?redirect={{ urlencode(request()->fullUrl()) }}'">
                            Login / Register
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        console.log("Ad Detail Page Loaded");

        // Image Gallery Functionality
        let currentImageIndex = 0;
        const totalImages = {{ $ad->images->count() }};
        const images = @json(
            $ad->images->pluck('image_path')->map(function ($path) {
                return asset('storage/' . $path);
            }));

        function changeImage(index) {
            if (index >= 0 && index < totalImages) {
                currentImageIndex = index;
                document.getElementById('mainImage').src = images[index];
                document.getElementById('currentImage').textContent = index + 1;

                // Update active thumbnail
                document.querySelectorAll('.thumbnail').forEach((thumb, i) => {
                    thumb.classList.toggle('active', i === index);
                });
            }
        }

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft') {
                changeImage((currentImageIndex - 1 + totalImages) % totalImages);
            } else if (e.key === 'ArrowRight') {
                changeImage((currentImageIndex + 1) % totalImages);
            }
        });

        // Touch/swipe support for mobile
        let touchStartX = 0;
        let touchEndX = 0;

        const mainImage = document.getElementById('mainImage');
        if (mainImage) {
            mainImage.addEventListener('touchstart', (e) => {
                touchStartX = e.changedTouches[0].screenX;
            });

            mainImage.addEventListener('touchend', (e) => {
                touchEndX = e.changedTouches[0].screenX;
                handleSwipe();
            });
        }

        function handleSwipe() {
            const swipeThreshold = 50;
            const diff = touchStartX - touchEndX;

            if (Math.abs(diff) > swipeThreshold) {
                if (diff > 0) {
                    // Swipe left - next image
                    changeImage((currentImageIndex + 1) % totalImages);
                } else {
                    // Swipe right - previous image
                    changeImage((currentImageIndex - 1 + totalImages) % totalImages);
                }
            }
        }

        // Check favorite status on page load
        @auth
        checkFavoriteStatus();
        @endauth

        function checkFavoriteStatus() {
            @auth
            fetch('/ads/{{ $ad->id }}/favorite-status', {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.favorited) {
                        updateFavoriteButton(true);
                    }
                })
                .catch(error => console.error('Error checking favorite status:', error));
        @endauth
        }

        // Favorite functionality
        document.querySelectorAll('.favorite-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    const adId = this.dataset.adId;
                    const button = this;
                    const icon = this.querySelector('i');
                    const textSpan = this.querySelector('span');

                    @guest
                    // Show login modal for guests
                    new bootstrap.Modal(document.getElementById('loginFavoriteModal')).show();
                @else
                    // Toggle favorite for logged in users
                    toggleFavorite(adId, button, icon, textSpan);
                @endguest
            });
        });

        function toggleFavorite(adId, button, icon, textSpan) {
            // Store original content to restore in case of error
            const originalIconClass = icon.className;
            const originalText = textSpan.textContent;

            // Show loading state - change icon but keep button enabled
            icon.className = 'fas fa-spinner fa-spin';
            textSpan.textContent = 'Processing...';

            fetch(`/ads/${adId}/favorite`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({})
                })
                .then(response => response.json())
                .then(data => {
                    if (data.favorited) {
                        // Update to favorited state
                        icon.className = 'fas fa-heart';
                        textSpan.textContent = 'Remove from Wishlist';
                        button.classList.add('favorited');
                        showToast('Added to your wishlist!', 'success');
                    } else {
                        // Update to unfavorited state
                        icon.className = 'far fa-heart';
                        textSpan.textContent = 'Add to Wishlist';
                        button.classList.remove('favorited');
                        showToast('Removed from wishlist', 'info');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    // Restore original state on error
                    icon.className = originalIconClass;
                    textSpan.textContent = originalText;
                    showToast('An error occurred. Please try again.', 'error');
                });
        }

        function updateFavoriteButton(isFavorited) {
            document.querySelectorAll('.favorite-btn').forEach(button => {
                const icon = button.querySelector('i');
                const textSpan = button.querySelector('span');

                if (isFavorited) {
                    icon.className = 'fas fa-heart';
                    textSpan.textContent = 'Remove from Wishlist';
                    button.classList.add('favorited');
                } else {
                    icon.className = 'far fa-heart';
                    textSpan.textContent = 'Add to Wishlist';
                    button.classList.remove('favorited');
                }
            });
        }

        // Toast notification function
        function showToast(message, type = 'info') {
            const toastContainer = document.getElementById('toast-container') || createToastContainer();

            const toast = document.createElement('div');
            toast.className =
                `toast align-items-center text-white bg-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'} border-0`;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');

            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            `;

            toastContainer.appendChild(toast);

            const bsToast = new bootstrap.Toast(toast, {
                autohide: true,
                delay: 3000
            });
            bsToast.show();

            toast.addEventListener('hidden.bs.toast', () => {
                toast.remove();
            });
        }

        function createToastContainer() {
            const container = document.createElement('div');
            container.id = 'toast-container';
            container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
            container.style.zIndex = '9999';
            document.body.appendChild(container);
            return container;
        }

        // Auto-dismiss success alert
        const successAlert = document.querySelector('.custom-alert');
        if (successAlert) {
            setTimeout(() => {
                successAlert.style.transition = 'opacity 0.5s';
                successAlert.style.opacity = '0';
                setTimeout(() => successAlert.remove(), 500);
            }, 5000);
        }

        // Initialize Google Ads
        document.addEventListener('DOMContentLoaded', function() {
            // Lazy load images
            const lazyImages = document.querySelectorAll('img[data-src]');
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        img.removeAttribute('data-src');
                        observer.unobserve(img);
                    }
                });
            });

            lazyImages.forEach(img => imageObserver.observe(img));
        });

        // Report form submission
        document.getElementById('reportForm')?.addEventListener('submit', function(e) {
            e.preventDefault();

            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Submitting...';
            submitBtn.disabled = true;

            fetch(this.action, {
                    method: 'POST',
                    body: new FormData(this),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast('Report submitted successfully!', 'success');
                        setTimeout(() => {
                            bootstrap.Modal.getInstance(document.getElementById('reportAdModal'))
                                .hide();
                        }, 1500);
                    } else {
                        showToast('Failed to submit report. Please try again.', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('An error occurred. Please try again.', 'error');
                })
                .finally(() => {
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                });
        });

        // Phone number functionality
        const showPhoneBtn = document.getElementById('showPhoneBtn');
        if (showPhoneBtn) {
            showPhoneBtn.addEventListener('click', function() {
                    @guest
                    sessionStorage.setItem('autoShowPhone', '1');
                    new bootstrap.Modal(document.getElementById('authPhoneModal')).show();
                @else
                    revealPhone();
                @endguest
            });
        }

        document.addEventListener("DOMContentLoaded", function() {
            const flag = sessionStorage.getItem('autoShowPhone');
            if (flag === '1') {
                sessionStorage.removeItem('autoShowPhone');

                setTimeout(function() {
                    if (typeof revealPhone === "function") {
                        revealPhone();
                    }
                }, 500);
            }

            const loginForm = document.getElementById("ajaxLoginForm");
            if (loginForm) {
                loginForm.addEventListener("submit", function(e) {
                    e.preventDefault();

                    fetch(this.action, {
                            method: "POST",
                            body: new FormData(this),
                            headers: {
                                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
                                    .content,
                                "X-Requested-With": "XMLHttpRequest"
                            }
                        })
                        .then(res => res.json())
                        .then(data => {
                            if (data.authenticated) {
                                sessionStorage.setItem('autoShowPhone', '1');
                                location.reload();
                            } else {
                                alert(data.message || 'Login failed');
                            }
                        })
                        .catch(err => console.log(err));
                });
            }

            const registerForm = document.getElementById('ajaxRegisterForm');
            if (registerForm) {
                registerForm.addEventListener('submit', function(e) {
                    e.preventDefault();

                    fetch(this.action, {
                            method: 'POST',
                            body: new FormData(this),
                            headers: {
                                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
                                    .content,
                                "X-Requested-With": "XMLHttpRequest"
                            }
                        })
                        .then(res => res.json())
                        .then(data => {
                            if (data.registered) {
                                sessionStorage.setItem('autoShowPhone', '1');
                                bootstrap.Modal.getInstance(document.getElementById('authPhoneModal'))
                                    .hide();
                                location.reload();
                            } else {
                                alert(data.message || 'Registration failed');
                            }
                        })
                        .catch(err => console.error(err));
                });
            }
        });

        // Reveal phone function
        function revealPhone() {
            fetch("{{ route('ads.reveal-phone') }}", {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
                        "Accept": "application/json",
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        ad_id: {{ $ad->id }}
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'success') {
                        const phoneBox = document.getElementById('phoneNumberBox');
                        phoneBox.classList.remove('d-none');
                        document.getElementById('showPhoneBtn').style.display = 'none';
                        showToast('Phone number revealed!', 'success');
                    }
                });
        }
    </script>

    <style>
        .toast-container {
            z-index: 9999;
        }

        .toast {
            min-width: 250px;
            backdrop-filter: blur(10px);
        }

        .modal-content {
            transition: all 0.3s ease;
        }

        .favorited {
            background: #fee2e2 !important;
            border-color: var(--danger-color) !important;
            color: var(--danger-color) !important;
        }

        .favorited i {
            color: var(--danger-color) !important;
        }

        .phone-number-display {
            background: var(--light-color);
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            padding: 14px 20px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: default;
            pointer-events: none;
        }

        @media (max-width: 576px) {
            .modal-content {
                border-radius: 0 !important;
            }
        }
    </style>
@endsection