@extends('frontend.layouts.app')

@section('meta_title'){{ $shop->meta_title }}@stop

@section('meta_description'){{ $shop->meta_description }}@stop

@section('meta')
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $shop->meta_title }}">
    <meta itemprop="description" content="{{ $shop->meta_description }}">
    <meta itemprop="image" content="{{ uploaded_asset($shop->logo) }}">

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="website">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:title" content="{{ $shop->meta_title }}">
    <meta name="twitter:description" content="{{ $shop->meta_description }}">
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:image" content="{{ uploaded_asset($shop->meta_img) }}">

    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $shop->meta_title }}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{ route('shop.visit', $shop->slug) }}" />
    <meta property="og:image" content="{{ uploaded_asset($shop->logo) }}" />
    <meta property="og:description" content="{{ $shop->meta_description }}" />
    <meta property="og:site_name" content="{{ $shop->name }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

{{-- ===== LOGIN PROMPT POPUP ===== --}}
<div id="loginPromptPopup" style="
    display:none; position:fixed; inset:0; z-index:9999999;
    background:rgba(0,0,0,0.6); backdrop-filter:blur(6px);
    align-items:center; justify-content:center;">
<div style="
    background:#fff; border-radius:24px; padding:0;
    width:90%; max-width:360px; overflow:hidden;
    box-shadow:0 24px 60px rgba(255,59,48,0.2);
    animation:popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);">

    {{-- Header --}}
    <div style="background:linear-gradient(135deg,#FF3B30,#FF6D00); padding:28px 24px 22px; text-align:center;">
        <div style="font-size:44px; margin-bottom:8px;">🔐</div>
        <h3 style="color:#fff; font-size:18px; font-weight:800; margin:0 0 4px; text-transform:capitalize;">Login Required</h3>
        <p style="color:rgba(255,255,255,0.85); font-size:13px; margin:0;" id="loginPromptMsg">Please log in to continue.</p>
    </div>

    {{-- Body --}}
    <div style="padding:24px;">
        <a href="{{ route('user.login') }}?redirect={{ urlencode(request()->fullUrl()) }}"
           style="display:block; width:100%; background:linear-gradient(135deg,#FF3B30,#FF6D00);
                  color:#fff; text-align:center; border:none; border-radius:40px;
                  padding:13px; font-size:15px; font-weight:700;
                  text-decoration:none; box-shadow:0 4px 18px rgba(255,59,48,0.35);
                  transition:all 0.2s; margin-bottom:10px;"
           onmouseover="this.style.opacity='0.88'" onmouseout="this.style.opacity='1'">
            🚀 Login Now
        </a>
        @if(Route::has('user.register'))
        <a href="{{ route('user.register') }}"
           style="display:block; width:100%; background:#fff; color:#FF3B30;
                  text-align:center; border:2px solid #FFB3AE;
                  border-radius:40px; padding:11px; font-size:14px;
                  font-weight:600; text-decoration:none; transition:all 0.2s; margin-bottom:10px;"
           onmouseover="this.style.background='#FFF5F5'" onmouseout="this.style.background='#fff'">
            ✨ Create Account
        </a>
        @endif
        <button onclick="closeLoginPrompt()"
           style="display:block; width:100%; background:none; border:none;
                  color:#aaa; font-size:13px; cursor:pointer; padding:8px;
                  transition:color 0.2s;"
           onmouseover="this.style.color='#FF3B30'" onmouseout="this.style.color='#aaa'">
            ← Go Back
        </button>
    </div>
</div>
</div>

<script>
function showLoginPrompt(msg) {
    var popup = document.getElementById('loginPromptPopup');
    var msgEl = document.getElementById('loginPromptMsg');
    if(msgEl && msg) msgEl.textContent = msg;
    popup.style.display = 'flex';
    document.body.style.overflow = 'hidden';
}
function closeLoginPrompt() {
    document.getElementById('loginPromptPopup').style.display = 'none';
    document.body.style.overflow = '';
}
// Close on overlay click
document.getElementById('loginPromptPopup').addEventListener('click', function(e){
    if(e.target === this) closeLoginPrompt();
});
// Replace showCheckoutModal globally
window.showCheckoutModal = function() {
    showLoginPrompt('Login To Send Enquiry Or Contact Seller.');
};
// openReviewModal — guest check
var _origOpenReviewModal = window.openReviewModal;
window.openReviewModal = function() {
    @if(!Auth::check())
        showLoginPrompt('Login To Write A Review For This Business.');
        return;
    @endif
    if(_origOpenReviewModal) _origOpenReviewModal();
    else {
        var rmEl = document.getElementById('reviewModal');
        if(rmEl){ var _rm = new bootstrap.Modal(rmEl); _rm.show(); }
    }
};
</script>


<script>
// Calculate distance between user GPS and shop (Haversine formula)
(function(){
    var shopLat = {{ $shop->user->latitude ?? 0 }};
    var shopLng = {{ $shop->user->longitude ?? 0 }};
    if(!shopLat || !shopLng) return;

    function haversine(lat1, lng1, lat2, lng2) {
        var R = 6371; // km
        var dLat = (lat2-lat1) * Math.PI/180;
        var dLng = (lng2-lng1) * Math.PI/180;
        var a = Math.sin(dLat/2)*Math.sin(dLat/2) +
                Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*
                Math.sin(dLng/2)*Math.sin(dLng/2);
        return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    }

    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(pos){
            var dist = haversine(pos.coords.latitude, pos.coords.longitude, shopLat, shopLng);
            var badge = document.getElementById('shopDistanceBadge');
            var text  = document.getElementById('shopDistanceText');
            if(badge && text){
                text.textContent = dist < 1 ? (dist*1000).toFixed(0)+' m' : dist.toFixed(1)+' km';
                badge.style.display = 'block';
            }
        }, function(){}, { timeout:8000 });
    }
})();
</script>
@endsection

@section('content')
    @php
    $subCategoryName="";
    @endphp
    @if(isset($shop->sub_cat_ids) && !empty($shop->sub_cat_ids))
        @php
            $subCategoryArray = explode(",", $shop->sub_cat_ids);
            $firstValue = $subCategoryArray[0];
            $subCategory=App\Models\Category::select('name')->find($firstValue);
            $subCategoryName=@$subCategory->name;
        @endphp
    @endif

<style>
/* ===== BestMart (BM) Global Theme Variables ===== */
:root {
    --bm-primary:    #FF3B30;
    --bm-primary-dk: #E0321F;
    --bm-blue:       #007AFF;
    --bm-blue-dk:    #0055CC;
    --bm-green:      #00C853;
    --bm-green-dk:   #009624;
    --bm-purple:     #7C3AED;
    --bm-yellow:     #FFB300;
    --bm-orange:     #FF6D00;
    --bm-teal:       #00BFA5;
    --bm-bg:         #FFF5F5;
    --bm-border:     #FFB3AE;
    --bm-text:       #1A1A2E;
    --bm-muted:      #E05A4E;
    --bm-card-bg:    #FFFAFA;
    --bm-shadow:     rgba(255,59,48,0.13);
    --bm-whatsapp:   #00E676;
    --bm-facebook:   #007AFF;
}

/* ===== GLOBAL TYPOGRAPHY ===== */
body { font-family: 'Segoe UI', system-ui, sans-serif; }

/* All headings capitalize */
h1,h2,h3,h4,h5,h6,
.bm-shop-name,
.cr-heading,
.cr-write-title,
.bm-heading,
.modal-title { text-transform: capitalize; }

</style>

<style>
       .aiz-carousel .carousel-box {
        position: relative;
        width: 100%;
    }

    .aiz-carousel img {
        width: 100%;
        height: auto;         /* maintain aspect ratio */
                            
        /* object-fit: contain;    full image visible */
    }

    .aiz-carousel .slick-prev, 
    .aiz-carousel .slick-next {
        top: 50%;             /* vertically centered */
        transform: translateY(-50%);
        z-index: 10;
    }

    .aiz-carousel .slick-dots {
        bottom: 10px;         /* bottom navigation */
    }

    .aiz-carousel img {
        max-height: 500px; /* optional */
    }

    /* Target AIZ badges specifically */
    .badge {
        width: auto !important;     /* override fixed 18px */
        display: inline-block;      /* ensures padding works */
        padding: 0.35em 0.75em;     /* vertical & horizontal spacing */
        line-height: 1.2;           /* proper text height */
        white-space: nowrap;         /* prevent wrapping */
    }

    /* Target only the second slider section */
/* Fix second slider images (full image visible, no cropping) */
section.mb-5:nth-of-type(2) .aiz-carousel .carousel-box img {
    width: 100% !important;        /* full width */
    height: auto !important;        /* maintain aspect ratio */
    max-height: none !important;    /* remove fixed height */
    object-fit: contain !important; /* show entire image */
}

/* Position arrows correctly on second slider */
section.mb-5:nth-of-type(2) .aiz-carousel .slick-prev,
section.mb-5:nth-of-type(2) .aiz-carousel .slick-next {
    top: 50%;                       /* vertically centered */
    transform: translateY(-50%);
    z-index: 10;
}

/* Dots at the bottom of second slider */
section.mb-5:nth-of-type(2) .aiz-carousel .slick-dots {
    bottom: 10px;
}

/* Button alignment styling */
.button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.button-row .btn {
    flex: 1;
    border-radius: 6px;
    text-transform: capitalize;
    font-size: 13px;
    height: 36px;
}

.button-row .btn-primary {
    background-color: #f33;
    border-color: #f33;
}

.button-row .btn-outline-primary {
    border-color: #f33;
    color: #f33;
}

.button-row .btn-outline-primary:hover {
    background-color: #f33;
    color: #fff;
}


/* Container setup */
.hov-container {
    position: relative;
    overflow: hidden;
}

/* Hover icon wrapper */
.aiz-p-hov-icon {
    position: absolute;
    top: 8px;
    right: -120px; /* Hidden off-screen initially */
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: all 0.35s ease-in-out;
}

/* When hovered, slide in from right */
.hov-container:hover .aiz-p-hov-icon {
    right: 10px;
    opacity: 1;
}

/* Individual icons */
.aiz-p-hov-icon a {
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #444;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateX(10px);
    transition: transform 0.3s ease, background 0.3s, color 0.3s;
}

/* Hover effect on individual icon */
.aiz-p-hov-icon a:hover {
    background: #f33;
    color: #fff;
    transform: translateX(0);
}

/*<!--  Slider  New  CSS — replaced by adaptive gallery below -->*/

</style>
<style>
/* ===== GALLERY LIGHTBOX — Fullscreen ===== */

/* Overlay */
#galleryModal { display:none !important; } /* replaced by bmGalleryOverlay */
#galleryModal .modal-dialog {
    margin: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#galleryModal .modal-content {
    background: rgba(0, 0, 0, 0.95) !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
}

#galleryModal .modal-body {
    padding: 0 !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Carousel fills full screen */
#galleryCarousel {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#galleryCarousel .carousel-inner {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
}

#galleryCarousel .carousel-item {
    display: none;
    text-align: center;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

#galleryCarousel .carousel-item.active {
    display: flex !important;
}

/* ===== IMAGE : full visible, no crop ===== */
.gallery-img {
    max-width: 92vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: auto;
    border-radius: 6px;
    user-select: none;
    /* Smooth zoom-in on open */
    animation: imgZoomIn 0.25s ease;
}

@keyframes imgZoomIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* ===== COUNTER badge ===== */
#galleryCounter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 20px;
    letter-spacing: 1px;
    z-index: 10;
    pointer-events: none;
}

/* ===== ARROWS ===== */
#galleryCarousel .carousel-control-prev,
#galleryCarousel .carousel-control-next {
    width: 56px;
    height: 56px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12) !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1;
    transition: background 0.2s;
    margin: 0 16px;
}

#galleryCarousel .carousel-control-prev:hover,
#galleryCarousel .carousel-control-next:hover {
    background: rgba(255,255,255,0.28) !important;
}

#galleryCarousel .carousel-control-prev-icon,
#galleryCarousel .carousel-control-next-icon {
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
}

#galleryCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 1l8 7-8 7' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

#galleryCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 1L3 8l8 7' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ===== CLOSE BUTTON ===== */
#galleryCloseBtn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 999999;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    line-height: 1;
}

#galleryCloseBtn:hover {
    background: rgba(255,255,255,0.3);
}

/* Kill page scroll when modal open */
body.modal-open { overflow: hidden !important; }
</style>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- ======= JD-Style Shop Overview ======= -->
<style>
/* ===== BREADCRUMB ===== */
.bm-breadcrumb {
    background: linear-gradient(135deg,#FFF5F5,#fff);
    padding: 9px 0;
    font-size: 13px;
    color: #555;
    border-bottom: 2px solid var(--bm-border);
}
.bm-breadcrumb a { color: #666; text-decoration: none; }
.bm-breadcrumb a:hover { color: var(--bm-primary); }
.bm-breadcrumb span { color: var(--bm-primary); font-weight:600; }

/* ===== GALLERY — Smart Adaptive Layout ===== */

/* ── Desktop: 1 image → full banner ── */
.bm-gallery-1 .bm-main-image img {
    width: 100%;
    height: 420px;
    object-fit: contain;  /* full image visible, no crop */
    border-radius: 12px;
    display: block;
    background: #1a1a2e;
}

/* ── Desktop: 2 images → side by side 50/50 ── */
.bm-gallery-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-radius: 12px;
    overflow: hidden;
    height: 380px;
}
.bm-gallery-2 .bm-main-image img {
    width: 100%;
    height: 380px;
    object-fit: contain;
    display: block;
    background: #1a1a2e;
}
.bm-gallery-2 .bm-thumb img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}
.bm-gallery-2 .bm-side-images {
    display: contents; /* flat single child next to main */
}

/* ── Desktop: 3 images → 60% main + 40% column of 2 ── */
.bm-gallery-3 {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 4px;
    border-radius: 12px;
    overflow: hidden;
    height: 380px;
}
.bm-gallery-3 .bm-main-image img {
    width: 100%;
    height: 380px;
    object-fit: contain;
    display: block;
    background: #1a1a2e;
}
.bm-gallery-3 .bm-side-images {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
}
.bm-gallery-3 .bm-thumb img {
    width: 100%;
    height: 188px;
    object-fit: cover;
    display: block;
}

/* ── Desktop: 4+ images → 55% main + 45% 2×2 grid ── */
.bm-gallery-4 {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 4px;
    border-radius: 12px;
    overflow: hidden;
    max-height: 380px;
}
.bm-gallery-4 .bm-main-image img {
    width: 100%;
    height: 380px;
    object-fit: contain;
    display: block;
    background: #1a1a2e;
}
.bm-gallery-4 .bm-side-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
}
.bm-gallery-4 .bm-thumb img {
    width: 100%;
    height: 188px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* ── Shared thumb styles ── */
.bm-thumb { position: relative; cursor: pointer; overflow: hidden; }
.bm-main-image { cursor: pointer; position: relative; }
.bm-thumb:hover img,
.bm-main-image:hover img { transform: scale(1.04); transition: transform 0.3s ease; }

.bm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bm-overlay small { font-size: 13px; font-weight: 400; margin-top: 2px; }

/* ── Mobile: always slider ── */
@media (max-width: 768px) {
    .bm-gallery-1,
    .bm-gallery-2,
    .bm-gallery-3,
    .bm-gallery-4 {
        display: block !important;
        border-radius: 10px;
        overflow: hidden;
        height: auto !important;
        max-height: none !important;
    }

    /* Hide desktop side-images on mobile */
    .bm-gallery-1 .bm-side-images,
    .bm-gallery-2 .bm-side-images,
    .bm-gallery-3 .bm-side-images,
    .bm-gallery-4 .bm-side-images {
        display: none !important;
    }

    /* Hide desktop main image on mobile */
    .bm-gallery-1 .bm-main-image,
    .bm-gallery-2 .bm-main-image,
    .bm-gallery-3 .bm-main-image,
    .bm-gallery-4 .bm-main-image {
        display: none !important;
    }

    /* Show mobile slider */
    .bm-mobile-slider { display: block !important; }

    .bm-mobile-slider .carousel-item img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        border-radius: 10px;
        display: block;
    }

    .bm-mobile-slider .carousel-control-prev,
    .bm-mobile-slider .carousel-control-next {
        width: 36px;
    }

    .bm-mobile-slider .carousel-indicators {
        bottom: 6px;
    }

    .bm-mobile-slider .carousel-indicators button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,0.7);
    }
    .bm-mobile-slider .carousel-indicators button.active {
        background: #fff;
    }
}

/* Desktop: hide mobile slider */
@media (min-width: 769px) {
    .bm-mobile-slider { display: none !important; }
}

/* ===== SHOP INFO PANEL ===== */
.bm-info-panel {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 16px 0 0;
}
.bm-shop-name {
    font-size: 24px;
    font-weight: 800;
    color: var(--bm-text);
    margin-bottom: 6px;
    line-height: 1.2;
}
.bm-shop-name .verified-icon { color: #00b050; font-size: 20px; margin-left: 6px; }
.bm-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bm-badge-rating {
    background: #00C853;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.bm-badge-verified {
    background: linear-gradient(135deg,#007AFF,#7C3AED);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,122,255,0.3);
}
.bm-badge-claimed {
    color: #333;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.bm-reviews-count { color: #666; font-size: 13px; }
.bm-meta-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: #555; margin-bottom: 6px; }
.bm-meta-info .dot { width: 4px; height: 4px; background: #999; border-radius: 50%; }
.bm-walk-info { font-size: 13px; color: #555; margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }
.bm-cat-badge {
    background: linear-gradient(135deg,#E8FFE8,#F0FFF0);
    color: var(--bm-green-dk);
    border: 1.5px solid var(--bm-green);
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,200,83,0.2);
}

/* ===== ACTION BUTTONS ===== */
/* ===== ACTION BUTTONS ===== */
.bm-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 0 14px;
}

/* Base style for all 4 buttons */
.bm-btn-call,
.bm-btn-deal,
.bm-btn-whatsapp,
.bm-btn-direction {
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

/* Colors */
.bm-btn-call      { background: linear-gradient(135deg,#00C853,#009624); color: #fff; box-shadow: 0 4px 14px rgba(0,200,83,0.35); }
.bm-btn-call:hover { background: linear-gradient(135deg,#00E676,#00C853); color: #fff; text-decoration: none; transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,200,83,0.45); }

.bm-btn-deal      { background: linear-gradient(135deg,#007AFF,#0055CC); color: #fff; box-shadow: 0 4px 14px rgba(0,122,255,0.35); }
.bm-btn-deal:hover { background: linear-gradient(135deg,#339DFF,#007AFF); color: #fff; text-decoration: none; transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,122,255,0.45); }

.bm-btn-whatsapp      { background: linear-gradient(135deg,#00E676,#00C853); color: #fff; box-shadow: 0 4px 14px rgba(0,230,118,0.35); }
.bm-btn-whatsapp:hover { background: linear-gradient(135deg,#69F0AE,#00E676); color: #fff; text-decoration: none; transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,230,118,0.45); }

.bm-btn-direction      { background: linear-gradient(135deg,#FF3B30,#E0321F); color: #fff; box-shadow: 0 4px 14px rgba(255,59,48,0.35); }
.bm-btn-direction:hover { background: linear-gradient(135deg,#FF6B62,#FF3B30); color: #fff; text-decoration: none; transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,59,48,0.45); }

/* button mobile styles handled in main mobile block */

/* ===== RATE SECTION ===== */
/* ── Rate Section (old) ── */
.bm-rate-section { display:flex; align-items:center; gap:6px; }

/* ── RATING ROW ── */
.bm-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #fffaf7 0%, #FFF0F0 100%);
    border: 1.5px solid #FFB3AE;
    border-radius: 14px;
    padding: 14px 20px;
    margin: 12px 0 10px;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.bm-rating-row:hover {
    box-shadow: 0 4px 18px rgba(232,101,15,0.1);
}
.bm-rating-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #FF3B30, #FFB300);
    border-radius: 14px 0 0 14px;
}

/* ── Left: Score + Stars ── */
.bm-rating-left {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.bm-rating-left:hover .bm-rating-count {
    color: #FF3B30;
}

.bm-big-score {
    font-size: 32px;
    font-weight: 900;
    color: var(--bm-primary);
    line-height: 1;
    letter-spacing: -1px;
}

.bm-star-row {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.bm-star-filled { color: var(--bm-yellow); font-size: 17px; }
.bm-star-empty  { color: #ddd;    font-size: 17px; }

.bm-rating-count {
    font-size: 13px;
    color: #888;
    margin-left: 4px;
    transition: color 0.2s;
    text-decoration: underline dotted;
    cursor: pointer;
}

/* ── Right: Rate + Share + Ask ── */
.bm-rate-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bm-rate-label {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

/* Animated star rating */
.bm-rate-stars {
    display: flex;
    gap: 2px;
}
.bm-rate-stars i {
    font-size: 26px;
    color: #e0e0e0;
    cursor: pointer;
    transition: color 0.12s, transform 0.12s;
    animation: starPulse 2.5s ease-in-out infinite;
}
.bm-rate-stars i:nth-child(1) { animation-delay: 0s; }
.bm-rate-stars i:nth-child(2) { animation-delay: 0.15s; }
.bm-rate-stars i:nth-child(3) { animation-delay: 0.3s; }
.bm-rate-stars i:nth-child(4) { animation-delay: 0.45s; }
.bm-rate-stars i:nth-child(5) { animation-delay: 0.6s; }

@keyframes starPulse {
    0%,100% { color: #e0e0e0; transform: scale(1); }
    50%      { color: #FFD700; transform: scale(1.12); }
}
.bm-rate-stars:hover i,
.bm-rate-stars i:hover ~ i { animation: none; }
.bm-rate-stars i:hover,
.bm-rate-stars i.hovered {
    color: var(--bm-yellow);
    transform: scale(1.25);
    animation: none;
}

.bm-rate-hint {
    font-size: 11px;
    color: #bbb;
    animation: fadeHint 2s ease-in-out infinite;
}
@keyframes fadeHint {
    0%,100% { opacity:0.5; }
    50%      { opacity:1; }
}

/* Separator */
.bm-badge-sep { color: #e0d0c8; font-size: 14px; margin: 0 2px; }

/* ── Ask Review Button ── */
.bm-ask-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1.5px solid #FFB3AE;
    color: #FF3B30;
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    text-decoration: none;
}
.bm-ask-btn:hover {
    background: #FF3B30;
    border-color: #FF3B30;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(232,101,15,0.3);
}

/* ── Share Button ── */
.bm-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    color: #555;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    position: relative;
    white-space: nowrap;
}
.bm-share-btn:hover { background: #f5f5f5; border-color: #bbb; }

/* Share Dropdown */
.bm-share-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1.5px solid #FFB3AE;
    border-radius: 12px;
    padding: 8px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 99999; /* 999 → 99999 ga marchు */
    animation: dropIn 0.2s ease;
}
@keyframes dropIn {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.bm-share-dropdown.show { display: block; }

.bm-share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    text-decoration: none;
}
.bm-share-option {
  display: flex !important;
  align-items: center;
  padding: 8px 12px;
  color: #333 !important;
  visibility: visible !important;
}
.bm-share-option:hover { background: #FFF5F5; color: #FF3B30; }
.bm-share-option span.ico { font-size: 18px; width: 24px; text-align: center; }

/* Copied tooltip */
.bm-copied {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #1e1e1e;
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.bm-logo-wrap {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}
.bm-logo-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e0e0e0;
    display: block;
}


/* rating responsive handled in main mobile block below */


/* ===== SHOP NAME CARD ===== */
.bm-name-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(255,59,48,0.1);
    padding: 16px 18px 12px;
    margin-top: 14px;
    margin-bottom: 12px;
    border: 2px solid var(--bm-border);
    position: relative;
    overflow: hidden;
}
.bm-name-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bm-primary), var(--bm-yellow), var(--bm-blue));
}

/* =====================================================
   MOBILE RESPONSIVE — Complete Fix
   ===================================================== */

@media (max-width: 768px) {

    /* ── Container ── */
    .container { padding-left: 12px !important; padding-right: 12px !important; }

    /* ── Slider: full width, no white gap ── */
    .bm-mobile-slider { margin: 0 !important; }
    .bm-mobile-slider .carousel-inner { border-radius: 0 !important; }
    .bm-mobile-slider .carousel-item img {
        width: 100% !important;
        height: 260px !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        display: block !important;
        background: #0d0d1a !important;
    }
    .container.mt-3 { margin-top: 0 !important; padding: 0 !important; }

    /* ── Shop Name Card ── */
    .bm-name-card {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }
    .bm-shop-name { font-size: 17px !important; }
    .bm-logo-thumb { width: 48px !important; height: 48px !important; }
    .bm-logo-wrap  { width: 48px !important; height: 48px !important; }

    /* ── Rating Row ── */
    .bm-rating-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        
    }
    .bm-big-score { font-size: 22px !important; }
    .bm-star-filled, .bm-star-empty { font-size: 14px !important; }
    .bm-rating-count { font-size: 12px !important; }

    /* Rate right section — wrap nicely */
    .bm-rate-right {
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .bm-rate-label { font-size: 12px !important; }
    .bm-rate-stars i { font-size: 20px !important; }
    .bm-rate-hint { display: none !important; }
    .bm-ask-btn  { font-size: 11px !important; padding: 5px 10px !important; }
    .bm-share-btn { font-size: 11px !important; padding: 5px 10px !important; }
    .bm-badge-sep { display: none !important; }

    /* ── Address & Description ── */
    .bm-meta-info { font-size: 12px !important; margin: 4px 12px !important; }
    .bm-info-panel > .container > p.text-muted {
        font-size: 12px !important;
        margin: 4px 12px !important;
    }

    /* ── Action Buttons ── */
    .bm-actions {
        padding: 8px 12px 12px !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }
    .bm-btn-call,
    .bm-btn-deal,
    .bm-btn-whatsapp,
    .bm-btn-direction {
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 22px !important;
        flex-direction: column !important;
        gap: 0 !important;
        box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
    }
    .btn-label { display: none !important; }

    /* ── Tabs ── */
    .list-inline-item a { font-size: 13px !important; padding: 10px 12px !important; }

    /* ── Products Grid ── */
    .row-cols-sm-2 > .col { padding: 6px !important; }
    .size-100px { width: 80px !important; height: 80px !important; }
    .size-md-120px { width: 80px !important; height: 80px !important; }
    .h-40px { height: auto !important; }
    .fs-14 { font-size: 13px !important; }

    /* Product buttons */
    .button-row .btn { font-size: 11px !important; padding: 5px 8px !important; }

    /* ── Reviews Section ── */
    .cr-section { padding: 20px 0 !important; }
    .cr-summary-card { padding: 14px !important; gap: 12px !important; }
    .cr-big-score { font-size: 38px !important; }
    .cr-write-card { padding: 16px 12px !important; }

    /* ── Map ── */
    #map { height: 300px !important; }

    /* ── Remove extra white space ── */
    .bm-info-panel { padding: 0 !important; }
    section.pt-3.mb-4 { padding-top: 8px !important; margin-bottom: 8px !important; }
    section.mb-4.pb-3 { margin-bottom: 8px !important; padding-bottom: 8px !important; }
}

/* Extra small phones */
@media (max-width: 400px) {
    .bm-btn-call,
    .bm-btn-deal,
    .bm-btn-whatsapp,
    .bm-btn-direction {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
    .bm-shop-name { font-size: 15px !important; }
    .bm-mobile-slider .carousel-item img { height: 220px !important; object-fit:contain !important; background:#0d0d1a !important; }
}
</style>

@php
    $images = !empty($shop->sliders) ? explode(',', $shop->sliders) : [];
    $phone = optional($shop->user)->phone ?? '';
    $whatsappNumber = preg_replace('/[^0-9]/', '', $phone);
@endphp

{{-- BREADCRUMB --}}
<div class="bm-breadcrumb">
    <div class="container">
        @if(session()->has('pincode_details'))
            @php $pin = session('pincode_details'); @endphp
            <a href="/">{{ $pin['city'] ?? 'Home' }}</a> &rsaquo;
        @else
            <a href="/">Home</a> &rsaquo;
        @endif
        @if(!empty($subCategoryName))
            <a href="#">{{ $subCategoryName }}</a> &rsaquo;
        @endif
        <span>{{ $shop->name }}</span>
    </div>
</div>

{{-- GALLERY --}}
@php
    $imgCount = count($images);
    $galleryClass = 'bm-gallery-4'; // default 4+
    if($imgCount == 1) $galleryClass = 'bm-gallery-1';
    elseif($imgCount == 2) $galleryClass = 'bm-gallery-2';
    elseif($imgCount == 3) $galleryClass = 'bm-gallery-3';
@endphp

<div class="container mt-3 px-0 px-md-3">

    {{-- ── MOBILE SLIDER (shown only on mobile via CSS) ── --}}
    <div class="bm-mobile-slider" style="display:none;">
        <div id="shopMobileCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000">

            {{-- Image count badge --}}
            

            {{-- Special Offer Ribbon --}}
            @if(!empty($shop->today_offer))
            <div class="bm-offer-ribbon">🔥 Special Offer Today</div>
            @endif

            {{-- Dot indicators --}}
            @if($imgCount > 1)
            <div class="carousel-indicators">
                @foreach($images as $k => $img)
                    <button type="button" data-bs-target="#shopMobileCarousel"
                            data-bs-slide-to="{{ $k }}"
                            class="{{ $k == 0 ? 'active' : '' }}"
                            aria-label="Slide {{ $k+1 }}"></button>
                @endforeach
            </div>
            @endif

            <div class="carousel-inner">
                @foreach($images as $k => $img)
                    <div class="carousel-item {{ $k == 0 ? 'active' : '' }}">
                        <img class="lazyload d-block w-100"
                             src="{{ static_asset('assets/img/placeholder-rect.jpg') }}"
                             data-src="{{ uploaded_asset($img) }}"
                             alt="{{ $shop->name }} - Photo {{ $k+1 }}"
                             onclick="openGalleryAt({{ $k }})"
                             style="cursor:pointer;">
                    </div>
                @endforeach
            </div>

            

            
        </div>
    </div>

<script>
// Update mobile slider count badge on slide change
document.addEventListener('DOMContentLoaded', function(){
    var mCar = document.getElementById('shopMobileCarousel');
    var countEl = document.getElementById('mobileSliderCount');
    if(mCar && countEl){
        mCar.addEventListener('slide.bs.carousel', function(e){
            countEl.textContent = (e.to + 1) + ' / {{ $imgCount }}';
        });
    }
});
</script>

    
<style>
/* ===== SPECIAL OFFER BADGE — Desktop ===== */
.bm-offer-badge-desktop {
    position: absolute;
    top: 14px; left: 0;
    background: linear-gradient(135deg,#FF3B30,#FF6D00);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 8px 12px;
    border-radius: 0 30px 30px 0;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(255,59,48,0.45);
    animation: offerPulse 2s ease-in-out infinite;
}
.bm-offer-fire {
    font-size: 22px;
    animation: fireShake 0.5s ease-in-out infinite alternate;
}
@keyframes fireShake {
    from { transform: rotate(-8deg) scale(1); }
    to   { transform: rotate(8deg) scale(1.1); }
}
@keyframes offerPulse {
    0%,100% { box-shadow: 0 4px 16px rgba(255,59,48,0.45); }
    50%      { box-shadow: 0 4px 24px rgba(255,59,48,0.75); transform: scaleX(1.02); }
}
.bm-offer-title {
    font-size: 13px; font-weight: 800; line-height: 1.1;
    letter-spacing: 0.3px;
}
.bm-offer-sub {
    font-size: 10px; opacity: 0.9; font-weight: 600;
}

/* Product card offer badge (inside product loop) */
.badge-custom {
    background: linear-gradient(135deg,#FF3B30,#FF6D00) !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(255,59,48,0.35);
}
</style>
{{-- ── DESKTOP GALLERY (adaptive by image count) ── --}}
    <div class="{{ $galleryClass }}">

        {{-- Main Image --}}
        <div class="bm-main-image gallery-click">
            @if(!empty($shop->today_offer))
                <div class="bm-offer-badge-desktop">
                    <span class="bm-offer-fire">🔥</span>
                    <div>
                        <div class="bm-offer-title">Special Offer</div>
                        <div class="bm-offer-sub">Today Only!</div>
                    </div>
                </div>
            @endif
            <img class="lazyload"
                 src="{{ static_asset('assets/img/placeholder-rect.jpg') }}"
                 data-src="{{ isset($images[0]) ? uploaded_asset($images[0]) : static_asset('assets/img/placeholder-rect.jpg') }}"
                 alt="{{ $shop->name }}">
        </div>

        {{-- Side Images (only for 2, 3, 4+) --}}
        @if($imgCount >= 2)
        <div class="bm-side-images">
            @foreach($images as $key => $img)
                @if($key > 0 && $key <= 4)
                    <div class="bm-thumb gallery-click">
                        <img class="lazyload"
                             src="{{ static_asset('assets/img/placeholder-rect.jpg') }}"
                             data-src="{{ uploaded_asset($img) }}"
                             alt="{{ $shop->name }}">
                        @if($key == 4 && $imgCount > 5)
                            <div class="bm-overlay">
                                +{{ $imgCount - 5 }}
                                <small>More</small>
                            </div>
                        @endif
                    </div>
                @endif
            @endforeach
        </div>
        @endif

    </div>
</div>

{{-- openGalleryAt is defined in the gallery lightbox JS below --}}

{{-- SHOP INFO PANEL --}}
<div class="bm-info-panel">
    <div class="container">

        {{-- SHOP NAME CARD --}}
        <div class="bm-name-card">
        {{-- TOP ROW: Name + Logo --}}
        <div class="d-flex justify-content-between align-items-start">
            <div class="flex-grow-1 pr-3">
                <h1 class="bm-shop-name">
                    {{ $shop->name }}
                    @if($shop->verification_status == 1)
                        <i class="fa fa-check-circle verified-icon" title="Verified"></i>
                    @endif
                </h1>
                {{-- Distance badge — filled by JS after GPS --}}
                <div id="shopDistanceBadge" style="display:none; margin-bottom:6px;">
                    <span style="background:linear-gradient(135deg,#007AFF,#7C3AED);
                                 color:#fff; font-size:12px; font-weight:700;
                                 padding:4px 12px; border-radius:20px;
                                 box-shadow:0 2px 8px rgba(0,122,255,0.3);
                                 display:inline-flex; align-items:center; gap:5px;">
                        <i class="las la-location-arrow"></i>
                        <span id="shopDistanceText"></span> From You
                    </span>
                </div>
                {{-- Category + Verified badges --}}
                <div class="bm-badges mt-1">
                    @if($shop->verification_status == 1)
                        <span class="bm-badge-verified"><i class="las la-check-circle"></i> Verified</span>
                        <span class="bm-badge-sep">•</span>
                    @endif
                    @if(!empty($subCategoryName))
                        <span class="bm-cat-badge">{{ $subCategoryName }}</span>
                    @endif
                </div>
            </div>
            {{-- Logo --}}
            <div class="bm-logo-wrap">
                <img class="bm-logo-thumb lazyload"
                     src="{{ static_asset('assets/img/placeholder.jpg') }}"
                     data-src="{{ $shop->logo ? uploaded_asset($shop->logo) : static_asset('assets/img/placeholder.jpg') }}"
                     alt="{{ $shop->name }} logo">
                {{-- placeholder only, offer moved to gallery --}}
            </div>
        </div>
        </div>{{-- end bm-name-card --}}

        

@php
    $ratingFloat  = (float)($shop->rating ?? 0);
    $totalRatings = $shop->totalReviews ?? 0;
    $reviewLink   = route('guest.review.page', $shop->slug);
@endphp

<div class="bm-rating-row">

    {{-- Left: Score + Stars + Count (click → all reviews popup) --}}
    <div class="bm-rating-left" onclick="openReviewsPopup()" title="View All Reviews">
        @if($ratingFloat > 0)
            <span class="bm-big-score">{{ number_format($ratingFloat, 1) }}</span>
            <div class="bm-star-row">
                @php
                    $full = floor($ratingFloat);
                    $half = ($ratingFloat - $full) >= 0.5;
                @endphp
                @for($i = 0; $i < $full; $i++)
                    <i class="las la-star bm-star-filled"></i>
                @endfor
                @if($half)<i class="las la-star-half-alt bm-star-filled"></i>@endif
                @for($i = 0; $i < 5 - $full - ($half?1:0); $i++)
                    <i class="lar la-star bm-star-empty"></i>
                @endfor
                @if($totalRatings > 0)
                    <span class="bm-rating-count ml-1">
                        ({{ $totalRatings }} {{ $totalRatings == 1 ? translate('Rating') : translate('Ratings') }})
                    </span>
                @endif
            </div>
        @else
            <span class="text-muted" style="font-size:13px;">No Ratings Yet</span>
        @endif
    </div>

    {{-- Right: Animated Rate + Ask Review + Share --}}
    <div class="bm-rate-right">

        {{-- Animated Rate Stars --}}
        <span class="bm-rate-label">Rate This Business:</span>
        <div class="bm-rate-stars" id="rateStars">
            @for($r = 1; $r <= 5; $r++)
                <i class="las la-star" data-val="{{ $r }}" onclick="handleRateClick({{ $r }})"></i>
            @endfor
        </div>
        <span class="bm-rate-hint" id="rateHintText">Click To Rate</span>

        <span class="bm-badge-sep">|</span>

        {{-- Contact Seller Button --}}
        @if(Auth::check())
            <button class="bm-ask-btn" onclick="getproduct({{ isset($product) ? $product->id : 0 }})">
                📞 Contact Seller
            </button>
        @else
            <button class="bm-ask-btn" onclick="openContactPopup('enquiry')">
                📞 Contact Seller
            </button>
        @endif

        <span class="bm-badge-sep">|</span>

        {{-- Chat With Seller Button --}}
        @if(Auth::check())
            <a href="{{ route('chat', $shop->user_id) }}" class="bm-ask-btn">
                💬 Chat With Seller
            </a>
        @else
            <button class="bm-ask-btn" onclick="openContactPopup('chat')">
                💬 Chat With Seller
            </button>
        @endif

        <span class="bm-badge-sep">|</span>

        {{-- Share Button with Dropdown --}}
        <!-- Font Awesome + Google Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Share Button -->
<button class="bm-share-btn" onclick="toggleShareMenu(event)">
    <i class="fa-solid fa-share-nodes"></i> Share
</button>

<!-- Share Modal -->
<div id="jdShareModal" onclick="if(event.target===this)closeShareModal()" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(6px); z-index:99999; align-items:center; justify-content:center; font-family:'Poppins',sans-serif;">
    
    <div style="background:#fff; border-radius:24px; padding:0; min-width:340px; max-width:94vw; box-shadow:0 24px 60px rgba(0,0,0,0.22); position:relative; overflow:hidden; animation: popIn 0.3s cubic-bezier(.34,1.56,.64,1);">
        
        <!-- Top gradient header -->
        <div style="background:linear-gradient(135deg,#FF3B30,#FF6D00,#FFB300); padding:24px 24px 20px; text-align:center;">
            <div style="width:48px; height:48px; background:rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 10px;">
                <i class="fa-solid fa-share-nodes" style="font-size:22px; color:#fff;"></i>
            </div>
            <h3 style="margin:0; font-size:18px; font-weight:700; color:#fff; letter-spacing:0.3px;">Share This Business</h3>
            <p style="margin:4px 0 0; font-size:12px; color:rgba(255,255,255,0.8);">Let Your Friends Know!</p>
        </div>

        <!-- Close button -->
        <button onclick="closeShareModal()" style="position:absolute; top:14px; right:14px; background:rgba(255,255,255,0.25); border:none; border-radius:50%; width:32px; height:32px; font-size:16px; cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center; transition:background 0.2s;">
            <i class="fa-solid fa-xmark"></i>
        </button>

        <!-- Share Options -->
        <div style="padding:16px 16px 20px; display:flex; flex-direction:column; gap:10px;">

            <a class="bm-share-option bm-modal-opt" style="--clr:#00E676; --bg:#f0fdf4;"
               href="https://wa.me/?text={{ urlencode('Rate ' . $shop->name . ' on BestMart: ' . $reviewLink) }}"
               target="_blank">
                <div class="bm-opt-icon" style="background:#00E676;">
                    <i class="fa-brands fa-whatsapp"></i>
                </div>
                <div>
                    <div style="font-weight:600; font-size:14px; color:#1a1a1a;">WhatsApp</div>
                    <div style="font-size:11px; color:#888;">Share Via WhatsApp</div>
                </div>
                <i class="fa-solid fa-chevron-right" style="margin-left:auto; color:#ccc; font-size:12px;"></i>
            </a>

            <a class="bm-share-option bm-modal-opt" style="--clr:#007AFF; --bg:#F0F8FF;"
               href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($reviewLink) }}"
               target="_blank">
                <div class="bm-opt-icon" style="background:#007AFF;">
                    <i class="fa-brands fa-facebook-f"></i>
                </div>
                <div>
                    <div style="font-weight:600; font-size:14px; color:#1a1a1a;">Facebook</div>
                    <div style="font-size:11px; color:#888;">Share On Facebook</div>
                </div>
                <i class="fa-solid fa-chevron-right" style="margin-left:auto; color:#ccc; font-size:12px;"></i>
            </a>

            <a class="bm-share-option bm-modal-opt" style="--clr:#000; --bg:#f9f9f9;"
               href="https://twitter.com/intent/tweet?text={{ urlencode('I visited ' . $shop->name . '! Rate them here: ' . $reviewLink) }}"
               target="_blank">
                <div class="bm-opt-icon" style="background:#000;">
                    <i class="fa-brands fa-x-twitter"></i>
                </div>
                <div>
                    <div style="font-weight:600; font-size:14px; color:#1a1a1a;">Twitter / X</div>
                    <div style="font-size:11px; color:#888;">Post On X</div>
                </div>
                <i class="fa-solid fa-chevron-right" style="margin-left:auto; color:#ccc; font-size:12px;"></i>
            </a>

            <button class="bm-share-option bm-modal-opt" style="--clr:#FF3B30; --bg:#FFF5F5;" onclick="copyReviewLink()">
                <div class="bm-opt-icon" style="background:linear-gradient(135deg,#FF3B30,#FF6D00,#FFB300);">
                    <i class="fa-solid fa-link"></i>
                </div>
                <div>
                    <div style="font-weight:600; font-size:14px; color:#1a1a1a;">Copy Link</div>
                    <div style="font-size:11px; color:#888;">Copy Review Link</div>
                </div>
                <i class="fa-solid fa-chevron-right" style="margin-left:auto; color:#ccc; font-size:12px;"></i>
            </button>

        </div>
    </div>
</div>

<style>
@keyframes popIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.bm-opt-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.bm-modal-opt {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: #fafafa;
    transition: background 0.18s, transform 0.15s !important;
    text-decoration: none;
    border: 1.5px solid #f0f0f0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.bm-modal-opt:hover {
    background: var(--bg) !important;
    border-color: var(--clr) !important;
    transform: translateX(3px) !important;
    color: inherit !important;
}
</style>

    </div>
</div>




        {{-- ADDRESS CARD --}}
        <div class="bm-address-card mt-2">
            <div class="bm-address-row">
                <span class="bm-address-icon"><i class="las la-map-marker-alt"></i></span>
                <div>
                    <div class="bm-address-label">Address</div>
                    <div class="bm-address-text">{{ $shop->address }}</div>
                </div>
            </div>
        </div>

        {{-- ABOUT US CARD --}}
        @if(!empty($shop->meta_description))
        <div class="bm-about-card mt-2">
            <div class="bm-about-header">
                <span class="bm-about-icon">ℹ️</span>
                <span class="bm-about-title">About Us</span>
            </div>
            <p class="bm-about-text">{{ Str::limit($shop->meta_description, 300) }}</p>
        </div>
        @endif


<style>
/* ===== ADDRESS CARD ===== */
.bm-address-card {
    background: linear-gradient(135deg,#FFF5F5,#fff);
    border: 2px solid var(--bm-border, #FFB3AE);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 8px;
    box-shadow: 0 3px 12px rgba(255,59,48,0.08);
    transition: box-shadow 0.2s, transform 0.2s;
}
.bm-address-card:hover {
    box-shadow: 0 6px 20px rgba(255,59,48,0.14);
    transform: translateY(-1px);
}
.bm-address-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.bm-address-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg,#FF3B30,#FF6D00);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(255,59,48,0.3);
}
.bm-address-label {
    font-size: 10px; font-weight: 700;
    color: #FF3B30; text-transform: uppercase;
    letter-spacing: 0.8px; margin-bottom: 2px;
}
.bm-address-text {
    font-size: 13px; color: #1A1A2E; line-height: 1.5;
}

/* ===== ABOUT US CARD ===== */
.bm-about-card {
    background: linear-gradient(135deg,#F0F8FF,#fff);
    border: 2px solid #B3D4FF;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 3px 12px rgba(0,122,255,0.08);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.bm-about-card::before {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg,#007AFF,#7C3AED);
    border-radius: 14px 0 0 14px;
}
.bm-about-card:hover {
    box-shadow: 0 6px 20px rgba(0,122,255,0.14);
    transform: translateY(-1px);
}
.bm-about-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.bm-about-icon {
    font-size: 16px;
}
.bm-about-title {
    font-size: 13px; font-weight: 800;
    color: #007AFF; text-transform: capitalize;
    letter-spacing: 0.3px;
}
.bm-about-text {
    font-size: 13px; color: #444; line-height: 1.65;
    margin: 0;
}
</style>

<style>
/* ===== SPECIAL OFFER CARD ===== */
.bm-special-offer-card {
    background: linear-gradient(135deg, #FF3B30, #FF6D00, #FFB300);
    border-radius: 16px;
    padding: 2px;
    margin-bottom: 10px;
    box-shadow: 0 6px 24px rgba(255,59,48,0.35);
    animation: offerCardPulse 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
@keyframes offerCardPulse {
    0%,100% { box-shadow: 0 6px 24px rgba(255,59,48,0.35); }
    50%      { box-shadow: 0 8px 32px rgba(255,59,48,0.6); }
}
.bm-offer-card-inner {
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.bm-offer-card-inner::before {
    content: '🔥';
    position: absolute;
    right: -10px; top: -10px;
    font-size: 60px;
    opacity: 0.06;
    pointer-events: none;
}
.bm-offer-card-icon {
    font-size: 32px;
    flex-shrink: 0;
    animation: fireShake 0.5s ease-in-out infinite alternate;
}
.bm-offer-card-body { flex: 1; }
.bm-offer-card-title {
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient(135deg,#FF3B30,#FF6D00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: capitalize;
    margin-bottom: 3px;
    line-height: 1.1;
}
.bm-offer-card-text {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    font-weight: 500;
}
.bm-offer-card-badge {
    background: linear-gradient(135deg,#FF3B30,#FFB300);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 1px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(255,59,48,0.4);
}
@media (max-width:768px) {
    .bm-special-offer-card { margin: 6px 12px !important; }
}
</style>

        {{-- SPECIAL OFFER CARD --}}
        @if(!empty($shop->today_offer))
        <div class="bm-special-offer-card mt-2" id="offerCard">
            <div class="bm-offer-card-inner">
                <div class="bm-offer-card-icon">🔥</div>
                <div class="bm-offer-card-body">
                    <div class="bm-offer-card-title">Special Offer Today!</div>
                    <div class="bm-offer-card-text">{{ $shop->today_offer }}</div>
                </div>
                <div class="bm-offer-card-badge">LIMITED</div>
            </div>
        </div>
        @endif

        {{-- ACTION BUTTONS --}}
        <div class="bm-actions">

            {{-- Call --}}
            @if($phone)
                <a href="tel:{{ $phone }}" class="bm-btn-call" title="{{ $phone }}">
                    <i class="las la-phone"></i>
                    <span class="btn-label">{{ $phone }}</span>
                </a>
            @endif

            {{-- Visit Store --}}
            <a href="{{ route('shop.visit', $shop->slug) }}" class="bm-btn-deal" title="Visit Store">
                <i class="las la-store"></i>
                <span class="btn-label">Visit Store</span>
            </a>

            {{-- WhatsApp --}}
            @if($phone)
                <a href="https://wa.me/{{ $whatsappNumber }}" target="_blank" class="bm-btn-whatsapp" title="WhatsApp">
                    <i class="lab la-whatsapp"></i>
                    <span class="btn-label">WhatsApp</span>
                </a>
            @endif

            {{-- Direction --}}
            @php
                $shopLat = optional($shop->user)->latitude ?? null;
                $shopLng = optional($shop->user)->longitude ?? null;
                $directionUrl = ($shopLat && $shopLng)
                    ? "https://www.google.com/maps/dir/?api=1&destination={$shopLat},{$shopLng}"
                    : "https://www.google.com/maps/search/" . urlencode($shop->address ?? $shop->name);
            @endphp
            <a href="javascript:void(0)" onclick="getDirections()" class="bm-btn-direction" title="Get Directions ({{ $shopLat ? 'GPS' : 'Address' }})">
                <i class="las la-directions"></i>
                <span class="btn-label">Direction</span>
            </a>
            <a href="javascript:void(0)" onclick="document.getElementById('enquiryShopId').value='{{ $shop->id }}';document.getElementById('enquiryShopName').textContent='Enquiry – {{ addslashes($shop->name) }}';document.getElementById('enquiryMsg').classList.add('d-none');$('#bmEnquiryModal').modal('show');" class="bm-btn" style="background:#e8650f;color:#fff;box-shadow:0 4px 14px rgba(232,101,15,0.35);padding:10px 18px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;">
                <i class="las la-envelope"></i>
                <span class="btn-label">Enquiry</span>
            </a>

        </div>

    </div>
</div>

<!------------------- BM Gallery Fullscreen Overlay --------------------->
<div id="bmGalleryOverlay" style="display:none; position:fixed; inset:0; z-index:999999;
     background:rgba(0,0,0,0.96); align-items:center; justify-content:center; flex-direction:column;"
     onclick="if(event.target===this)closeGallery()">

    {{-- Close Button --}}
    <button onclick="closeGallery()" style="
        position:fixed; top:16px; right:16px; z-index:1000001;
        width:44px; height:44px; border-radius:50%;
        background:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.35);
        color:#fff; font-size:20px; cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        transition:background 0.2s; line-height:1;"
        onmouseover="this.style.background='rgba(255,59,48,0.7)'"
        onmouseout="this.style.background='rgba(255,255,255,0.15)'">✕</button>

    {{-- Counter --}}
    <span id="galleryCounter" style="
        position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
        background:rgba(255,255,255,0.12); color:#fff; font-size:13px;
        font-weight:700; padding:5px 18px; border-radius:20px;
        letter-spacing:1px; z-index:1000001; pointer-events:none;
        backdrop-filter:blur(8px);">1 / {{ count($images) }}</span>

    {{-- Carousel --}}
    <div id="galleryCarousel" style="width:100%; height:100vh; display:flex; align-items:center; justify-content:center; position:relative;">
        <div class="carousel-inner" style="width:100%; height:100%; display:flex; align-items:center;">
            @foreach($images as $key => $img)
                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}"
                     style="display:none; text-align:center; width:100%; align-items:center; justify-content:center;">
                    <img src="{{ uploaded_asset($img) }}"
                         style="max-width:96vw; max-height:92vh; width:auto; height:auto;
                                object-fit:contain; display:block; margin:auto; border-radius:6px;
                                animation:imgZoomIn 0.22s ease;"
                         alt="{{ $shop->name }} - Photo {{ $key + 1 }}">
                </div>
            @endforeach
        </div>

        @if(count($images) > 1)
        <button id="prevBtn" onclick="showSlide(currentIndex-1)" style="
            position:absolute; left:16px; top:50%; transform:translateY(-50%);
            width:52px; height:52px; border-radius:50%;
            background:rgba(255,255,255,0.12); border:2px solid rgba(255,255,255,0.3);
            color:#fff; font-size:22px; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition:background 0.2s; z-index:10;"
            onmouseover="this.style.background='rgba(255,59,48,0.7)'"
            onmouseout="this.style.background='rgba(255,255,255,0.12)'">‹</button>
        <button id="nextBtn" onclick="showSlide(currentIndex+1)" style="
            position:absolute; right:16px; top:50%; transform:translateY(-50%);
            width:52px; height:52px; border-radius:50%;
            background:rgba(255,255,255,0.12); border:2px solid rgba(255,255,255,0.3);
            color:#fff; font-size:22px; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition:background 0.2s; z-index:10;"
            onmouseover="this.style.background='rgba(255,59,48,0.7)'"
            onmouseout="this.style.background='rgba(255,255,255,0.12)'">›</button>
        @endif
    </div>
</div>

<script>
// ===== GALLERY LIGHTBOX =====
let currentIndex = 0;
const totalImages = {{ count($images) }};

function getCarouselItems() {
    return document.querySelectorAll('#galleryCarousel .carousel-item');
}

function showSlide(index) {
    const items = getCarouselItems();
    if (!items.length) return;
    index = ((index % items.length) + items.length) % items.length;
    items.forEach(function(i) {
        i.classList.remove('active');
        i.style.display = 'none';
    });
    items[index].classList.add('active');
    items[index].style.display = 'flex';
    currentIndex = index;
    const counter = document.getElementById('galleryCounter');
    if (counter) counter.textContent = (index + 1) + ' / ' + totalImages;
}

window.showSlide = showSlide;

// ===== CUSTOM FULLSCREEN GALLERY (no Bootstrap modal — avoids gray backdrop bug) =====
window.openGalleryAt = function(index) {
    var overlay = document.getElementById('bmGalleryOverlay');
    if (!overlay) return;
    overlay.style.display = 'flex';
    document.body.style.overflow = 'hidden';
    showSlide(index);
};

window.closeGallery = function() {
    var overlay = document.getElementById('bmGalleryOverlay');
    if (overlay) {
        overlay.style.display = 'none';
        document.body.style.overflow = '';
    }
    // Remove any stale Bootstrap backdrops
    document.querySelectorAll('.modal-backdrop').forEach(function(b){ b.remove(); });
    document.body.classList.remove('modal-open');
    document.body.style.paddingRight = '';
};

// Desktop gallery clicks — assign correct index per image
document.addEventListener('DOMContentLoaded', function() {
    const galleryItems = document.querySelectorAll('.gallery-click');
    galleryItems.forEach(function(el, idx) {
        el.style.cursor = 'pointer';
        el.addEventListener('click', function() {
            window.openGalleryAt(idx);
        });
    });
});

// Prev / Next buttons
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
if (nextBtn) nextBtn.onclick = () => showSlide(currentIndex + 1);
if (prevBtn) prevBtn.onclick = () => showSlide(currentIndex - 1);

// Keyboard arrow navigation
document.addEventListener('keydown', function(e) {
    const modal = document.getElementById('galleryModal');
    if (!modal || !modal.classList.contains('show')) return;
    if (e.key === 'ArrowRight') showSlide(currentIndex + 1);
    if (e.key === 'ArrowLeft')  showSlide(currentIndex - 1);
    if (e.key === 'Escape') closeGallery();
});
</script>

<script>
// ===== RATE STARS HOVER + CLICK =====
var isLoggedIn = {{ Auth::check() ? 'true' : 'false' }};
var loginUrl   = '{{ route("user.login") }}';

function handleRateClick(rating) {
    if (!isLoggedIn) {
        // Show login prompt popup instead of redirecting directly
        showLoginPrompt('To rate this business, please log in first.');
        return;
    }
    // Pre-select the star in modal
    var ratingInput = document.getElementById('ratingValue');
    if (ratingInput) ratingInput.value = rating;
    var rmStars = document.querySelectorAll('#rmStars i');
    var hints   = ['','Terrible 😞','Poor 😕','Okay 😐','Good 😊','Excellent 🤩'];
    rmStars.forEach(function(s, j) {
        s.classList.remove('rm-active');
        s.classList.toggle('rm-filled', j < rating);
    });
    var hint = document.getElementById('rmHint');
    if (hint) { hint.textContent = hints[rating] || ''; hint.style.color='#FF3B30'; hint.style.fontWeight='700'; }
    // Open modal
    var rmEl = document.getElementById('reviewModal');
    if (rmEl) { var _rm = new bootstrap.Modal(rmEl); _rm.show(); }
}

const rateStars = document.querySelectorAll('#rateStars i');
var hintLabels = ['','Terrible','Poor','Okay','Good','Excellent'];
rateStars.forEach((star, i) => {
    star.addEventListener('mouseenter', () => {
        rateStars.forEach((s, j) => s.classList.toggle('hovered', j <= i));
        var hintEl = document.getElementById('rateHintText');
        if (hintEl) hintEl.textContent = hintLabels[i+1] || '';
    });
});
document.getElementById('rateStars')?.addEventListener('mouseleave', () => {
    rateStars.forEach(s => s.classList.remove('hovered'));
    var hintEl = document.getElementById('rateHintText');
    if (hintEl) hintEl.textContent = 'Click To Rate';
});
</script>
<!-- =============================== End Shop Overview =========================================== -->
    @php
        if(session()->has('pincode_details'))
        {
            $pin_details = session()->get('pincode_details');
            $pincode = $pin_details['pincode'];
            $city = $pin_details['city'];
            $latitude = (isset($pin_details['latitude']) && !empty($pin_details['latitude'])) ? $pin_details['latitude'] : '1.0000';
            $longitude = (isset($pin_details['longitude']) && !empty($pin_details['longitude'])) ? $pin_details['longitude'] : '1.0000';
        }
        else
        {
            $pincode = '';
            $city = "";
            $latitude = 1.0000;
            $longitude = 1.0000;
        }
        $distance_query = "(6371 * acos(cos(radians(" .$latitude. ")) * cos(radians(`latitude`)) * cos(radians(`longitude`) - radians(" .$longitude. ")) + sin(radians(" .$latitude. ")) * sin(radians(`latitude`))))";
    @endphp
    <!-- Keep the original tabs & social links (moved below overview for continuity) -->
    <section class="pt-3 mb-4 bg-white">
        <div class="container">
            <div class="border-bottom mt-3"></div>
            <div class="row align-items-center">
                <div class="col-lg-6 order-2 order-lg-0">
                    <ul class="list-inline mb-0 text-center text-lg-left">
                        <li class="list-inline-item ">
                            <a class="text-reset d-inline-block fw-600 fs-15 p-3 @if(!isset($type)) border-bottom border-primary border-width-2 @endif" href="{{ route('shop.visit', $shop->slug) }}">{{ translate('Store Home')}}</a>
                        </li>
                        <!--<li class="list-inline-item ">-->
                        <!--    <a class="text-reset d-inline-block fw-600 fs-15 p-3 @if(isset($type) && $type == 'top-selling') border-bottom border-primary border-width-2 @endif" href="{{ route('shop.visit.type', ['slug'=>$shop->slug, 'type'=>'top-selling']) }}">{{ translate('Top Selling')}}</a>-->
                        <!--</li>-->
                        <!--<li class="list-inline-item ">-->
                        <!--    <a class="text-reset d-inline-block fw-600 fs-15 p-3 @if(isset($type) && $type == 'all-products') border-bottom border-primary border-width-2 @endif" href="{{ route('shop.visit.type', ['slug'=>$shop->slug, 'type'=>'all-products']) }}">{{ translate('All Products')}}</a>-->
                        <!--</li>-->
                        <li class="list-inline-item">
                            <a class="text-reset d-inline-block fw-600 fs-15 p-3 @if(isset($type) && $type == 'images') border-bottom border-primary border-width-2 @endif" href="javascript:void(0)" id="images-tab" onclick="toggleImgPanel()">{{ translate('Images')}}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-6 order-1 order-lg-0">
                    <ul class="text-center text-lg-right mt-4 mt-lg-0 social colored list-inline mb-0">
                        @if ($shop->facebook != null)
                            <li class="list-inline-item">
                                <a href="{{ $shop->facebook }}" class="facebook" target="_blank">
                                    <i class="lab la-facebook-f"></i>
                                </a>
                            </li>
                        @endif
                        @if ($shop->instagram != null)
                            <li class="list-inline-item">
                                <a href="{{ $shop->instagram }}" class="instagram" target="_blank">
                                    <i class="lab la-instagram"></i>
                                </a>
                            </li>
                        @endif
                        @if ($shop->twitter != null)
                            <li class="list-inline-item">
                                <a href="{{ $shop->twitter }}" class="twitter" target="_blank">
                                    <i class="lab la-twitter"></i>
                                </a>
                            </li>
                        @endif
                        @if ($shop->google != null)
                            <li class="list-inline-item">
                                <a href="{{ $shop->google }}" class="google-plus" target="_blank">
                                    <i class="lab la-google"></i>
                                </a>
                            </li>
                        @endif
                        @if ($shop->youtube != null)
                            <li class="list-inline-item">
                                <a href="{{ $shop->youtube }}" class="youtube" target="_blank">
                                    <i class="lab la-youtube"></i>
                                </a>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </section>


    {{-- Images Tab Panel --}}
    <div id="shop-images-panel" style="display:none;position:relative;z-index:100;background:#fff;">
        <div class="container py-4">
            <div class="row gutters-5">
                @php $allImages = !empty($shop->sliders) ? explode(',', $shop->sliders) : []; @endphp
                @forelse($allImages as $img)
                    <div class="col-6 col-md-4 col-lg-3 mb-3">
                        <div class="bm-thumb gallery-click" style="border-radius:8px;overflow:hidden;">
                            <img class="lazyload w-100" style="height:180px;object-fit:cover;"
                                 src="{{ static_asset('assets/img/placeholder-rect.jpg') }}"
                                 data-src="{{ uploaded_asset($img) }}">
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center text-muted py-5">No Images Available</div>
                @endforelse
            </div>
        </div>
    </div>
    
    

    @php
    if (!isset($type)){
        $products = \App\Models\Product::where('user_id', optional($shop->user)->id ?? $shop->user_id)
            ->where('published', 1)
            ->where('approved', 1)
            ->orderBy('created_at', 'desc');
        $products = $products->select('*')->selectRaw("$distance_query AS distance")
            ->having("distance","<=",30000);
        $products = $products->paginate(24);
    }
    elseif ($type == 'top-selling'){
        $products = \App\Models\Product::where('user_id', optional($shop->user)->id ?? $shop->user_id)
            ->where('published', 1)
            ->where('approved', 1)
            ->orderBy('num_of_sale', 'desc');
        $products = $products->select('*')->selectRaw("$distance_query AS distance")
            ->having("distance","<=",30000);
        $products = $products->paginate(24);
    }
    elseif ($type == 'all-products'){
        $products = \App\Models\Product::where('user_id', optional($shop->user)->id ?? $shop->user_id)
            ->where('published', 1)
            ->where('approved', 1);
        $products = $products->select('*')->selectRaw("$distance_query AS distance")
            ->having("distance","<=",30000);
        $products = $products->paginate(24);
    }
@endphp


@if (!empty($products) && $products->isNotEmpty())
<section class="mb-4 pb-3">
    <div class="container">

        {{-- Heading --}}
        <div class="mb-4">
            <h3 class="h3 fw-600 border-bottom">
                <span class="border-bottom border-primary border-width-2 pb-3 d-inline-block" style="text-transform:capitalize; font-weight:800; color:var(--bm-text, #1A1A2E);">
                    @if (!isset($type))
                        {{ translate('New Arrival Products') }}
                    @elseif ($type == 'top-selling')
                        {{ translate('Top Selling') }}
                    @elseif ($type == 'all-products')
                        {{ translate('All Products') }}
                    @endif
                </span>
            </h3>
        </div>

        <div class="bg-white px-3">
            <div class="row row-cols-xl-4 row-cols-md-3 row-cols-sm-2 row-cols-1 gutters-16 border-top border-left">

                @foreach ($products as $key => $product)
                <div class="col text-center border-right border-bottom has-transition hov-shadow-out z-1 product-item"
                     data-index="{{ $key }}">
                    <div class="position-relative px-3 py-4">

                        {{-- Product Image --}}
                        <div class="position-relative mx-auto size-100px size-md-120px hov-container">
                            <a href="{{ route('product', $product->slug) }}"
                               class="d-flex mx-auto justify-content-center align-items-center size-100px size-md-120px border overflow-hidden hov-scale-img"
                               style="border: 1px solid #e5e5e5; border-radius: 50%; box-shadow: 0px 10px 20px rgba(0,0,0,0.06);">
                                <img src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                     data-src="{{ uploaded_asset($product->thumbnail_img) }}"
                                     alt="{{ $product->getTranslation('name') }}"
                                     class="img-fit lazyload has-transition"
                                     onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">
                            </a>

                            {{-- Discount Badge --}}
                            @if(discount_in_percentage($product) > 0)
                                <span class="badge-custom absolute-top-left mt-2 ml-2">
                                    {{ translate('OFF') }}
                                    <span class="box ml-1 mr-0">{{ discount_in_percentage($product) }}%</span>
                                </span>
                            @endif
                        </div>

                        {{-- Name --}}
                        <h2 class="fs-14 fw-700 text-dark text-truncate-2 h-40px mt-4 mb-2">
                            <a href="{{ route('product', $product->slug) }}" class="text-reset hov-text-primary">
                                {{ \Illuminate\Support\Str::limit($product->name, 35) }}
                            </a>
                        </h2>

                        {{-- Rating --}}
                        <div class="rating rating-mr-2 text-dark mb-3">
                            {{ renderStarRating($product->rating) }}
                        </div>

                        {{-- Price --}}
                        <div class="mb-2">
                            @if(home_base_price($product) != home_discounted_base_price($product))
                                <del class="fw-600 opacity-50 mr-1">{{ home_base_price($product) }}</del>
                            @endif
                            <span class="fw-700 text-primary">{{ home_discounted_base_price($product) }}</span>
                        </div>

                        {{-- Location + Distance Badge --}}
                        <div class="opacity-70 small mb-2 d-flex align-items-center justify-content-center flex-wrap gap-1">
                            <span><i class="las la-map-marker-alt"></i> {{ $product->city ?? '' }}@if($product->state ?? false), {{ $product->state }}@endif</span>
                            @if(isset($product->distance) && $product->distance > 0)
                                <span style="background:linear-gradient(135deg,#007AFF,#7C3AED);
                                             color:#fff; font-size:10px; font-weight:700;
                                             padding:2px 8px; border-radius:20px;
                                             box-shadow:0 2px 6px rgba(0,122,255,0.3);">
                                    📍 {{ number_format($product->distance, 1) }} km
                                </span>
                            @endif
                        </div>

                        {{-- Shop --}}
                        @php 
                            $slug = $product->shop->slug ?? ''; 
                            $shopName = $product->shop->name ?? ''; 
                        @endphp

                        @if($slug)
                        <div class="small text-muted mb-3">
                            <a class="text-reset" href="{{ route('shop.visit', $slug) }}">
                                <i class="la la-store la-flip-horizontal fs-18"></i>
                                {{ \Illuminate\Support\Str::limit($shopName, 15, '...') }}
                            </a>
                        </div>
                        @endif

                        {{-- Buttons --}}
                        @if(Auth::check())
                            <div class="button-row mt-2">
                                <button class="btn btn-primary btn-sm fw-600"
                                        onclick="getproduct({{ $product->id }})">
                                    {{ translate('Send enquiry') }}
                                </button>

                                <a href="{{ route('chat', $product->user_id) }}"
                                   class="btn btn-outline-primary btn-sm fw-600">
                                    {{ translate('Contact Seller') }}
                                </a>
                            </div>
                        @else
                            <div class="button-row mt-2">
                                <button class="btn btn-primary btn-sm fw-600"
                                        onclick="showCheckoutModal()">
                                    {{ translate('Send enquiry') }}
                                </button>

                                <a onclick="showCheckoutModal()"
                                   class="btn btn-outline-primary btn-sm fw-600">
                                    {{ translate('Contact Seller') }}
                                </a>
                            </div>
                        @endif

                    </div>
                </div>
                @endforeach

            </div>

            {{-- Pagination --}}
            <div class="aiz-pagination aiz-pagination-center mt-4">
                {{ $products->links() }}
            </div>
        </div>

    </div>
</section>
@endif


    <!-- ===== Reviews section (full design) ===== -->
    {{-- ============================================================
     CUSTOMER REVIEWS SECTION — Drop-in replacement
     Replace your existing reviews section with this block
     ============================================================ --}}

<style>
/* ── REVIEWS WRAPPER ── */
.cr-section {
    background: #fff;
    padding: 32px 0 40px;
    font-family: 'Segoe UI', sans-serif;
}

.cr-heading {
    font-size: 22px;
    font-weight: 800;
    color: var(--bm-text);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid transparent;
    background: linear-gradient(#fff,#fff) padding-box,
                linear-gradient(90deg,var(--bm-primary),var(--bm-yellow),var(--bm-blue)) border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: capitalize;
}
.cr-heading::after {
    content: '';
    flex: 1;
    height: 3px;
    background: linear-gradient(90deg,var(--bm-primary),var(--bm-yellow),var(--bm-blue));
    border-radius: 2px;
}

/* ── SUMMARY CARD ── */
.cr-summary-card {
    background: #FFF5F5;
    border: 1.5px solid #FFB3AE;
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cr-big-score {
    font-size: 52px;
    font-weight: 800;
    color: #FF3B30;
    line-height: 1;
    min-width: 70px;
    text-align: center;
}
.cr-summary-left {
    text-align: center;
    min-width: 80px;
}
.cr-summary-stars {
    color: #FFB300;
    font-size: 18px;
    letter-spacing: 2px;
    margin: 4px 0;
}
.cr-summary-count {
    font-size: 13px;
    color: #E05A4E;
}

/* ── RATING BARS ── */
.cr-bars {
    flex: 1;
    min-width: 200px;
}
.cr-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.cr-bar-label {
    font-size: 12px;
    color: #E05A4E;
    width: 26px;
    text-align: right;
    flex-shrink: 0;
}
.cr-bar-track {
    flex: 1;
    height: 8px;
    background: #FFB3AE;
    border-radius: 4px;
    overflow: hidden;
}
.cr-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,var(--bm-primary),var(--bm-yellow));
    border-radius: 4px;
    width: 0%;
    transition: width 0.8s ease;
}

/* ── REVIEW CARDS ── */
.cr-card {
    background: #fff;
    border: 1.5px solid #FFB3AE;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.cr-card:hover {
    box-shadow: 0 6px 20px rgba(232,101,15,0.12);
    transform: translateY(-2px);
}
.cr-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.cr-reviewer {
    font-weight: 700;
    font-size: 14px;
    color: #1A1A2E;
}
.cr-date {
    font-size: 12px;
    color: #E05A4E;
    margin-top: 2px;
}
.cr-card-stars {
    color: #FFB300;
    font-size: 15px;
    letter-spacing: 2px;
}
.cr-comment {
    font-size: 14px;
    color: #8B0000;
    line-height: 1.6;
    margin: 0;
}

/* ── WRITE REVIEW CARD ── */
.cr-write-card {
    background: linear-gradient(135deg, #FFF0F0, #FFF5F5);
    border: 1.5px solid #FFB3AE;
    border-radius: 14px;
    padding: 28px 24px;
    margin-top: 20px;
    text-align: center;
}
.cr-write-title {
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(135deg,var(--bm-primary),var(--bm-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 14px;
    font-family: "Segoe UI", sans-serif;
    text-transform: capitalize;
}

/* ── INTERACTIVE STARS ── */
.cr-star-input {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}
.cr-star-input i {
    font-size: 28px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}
.cr-star-input i:hover,
.cr-star-input i.active {
    color: #FFB300;
    transform: scale(1.2);
}

.cr-textarea {
    width: 100%;
    border: 1.5px solid #FFB3AE;
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 14px;
    color: #2D0A0A;
    font-family: 'Segoe UI', sans-serif;
    resize: none;
    background: #fff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 16px;
}
.cr-textarea:focus {
    border-color: #FF3B30;
    box-shadow: 0 0 0 3px rgba(232,101,15,0.12);
}
.cr-textarea::placeholder { color: #D4736A; }

.cr-submit-btn {
    background: #FF3B30;
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 11px 32px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(232,101,15,0.3);
}
.cr-submit-btn:hover {
    background: #E0321F;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232,101,15,0.4);
}
.cr-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ── NO REVIEWS ── */
.cr-empty {
    text-align: center;
    padding: 32px;
    color: #E05A4E;
    font-size: 14px;
}

/* ── RESPONSIVE ── */
@media (max-width: 576px) {
    .cr-summary-card { flex-direction: column; align-items: flex-start; gap: 16px; }
    .cr-big-score { font-size: 40px; }
    .cr-bars { width: 100%; }
    .cr-write-card { padding: 20px 16px; }
}
</style>

<!-- ======= CUSTOMER REVIEWS SECTION ======= -->
<section class="cr-section">
    <div class="container">

        <h3 class="cr-heading">{{ translate('Customer Reviews') }}</h3>

        @php
            $avgRating   = isset($shop->rating) ? (float)$shop->rating : 0;
            $totalReviews = $shop->totalReviews ?? 0;

            /* bar percentages per star */
            $starCounts = [5=>0, 4=>0, 3=>0, 2=>0, 1=>0];
            if(isset($shop->shopReviews) && count($shop->shopReviews) > 0){
                foreach($shop->shopReviews as $rv){
                    $s = (int)($rv->rating ?? 0);
                    if($s >= 1 && $s <= 5) $starCounts[$s]++;
                }
            }
        @endphp

        {{-- ── SUMMARY CARD ── --}}
        <div class="cr-summary-card">
            <div class="cr-summary-left">
                <div class="cr-big-score">{{ number_format($avgRating, 1) }}</div>
                <div class="cr-summary-stars">
                    @php
                        $full = floor($avgRating);
                        $half = ($avgRating - $full) >= 0.5;
                    @endphp
                    @for($i=0; $i<$full; $i++)★@endfor
                    @if($half)★@endif
                    @for($i=0; $i < 5-$full-($half?1:0); $i++)☆@endfor
                </div>
                <div class="cr-summary-count">{{ $totalReviews }} {{ $totalReviews == 1 ? 'Review' : 'Reviews' }}</div>
            </div>

            {{-- bars --}}
            <div class="cr-bars">
                @foreach([5,4,3,2,1] as $star)
                    @php
                        $pct = $totalReviews > 0 ? round(($starCounts[$star] / $totalReviews) * 100) : 0;
                    @endphp
                    <div class="cr-bar-row">
                        <span class="cr-bar-label">{{ $star }}★</span>
                        <div class="cr-bar-track">
                            <div class="cr-bar-fill" data-width="{{ $pct }}"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- ── REVIEW CARDS ── --}}
        @if(isset($shop->shopReviews) && count($shop->shopReviews) > 0)
            @foreach($shop->shopReviews as $review)
                <div class="cr-card">
                    <div class="cr-card-top">
                        <div>
                            <div class="cr-reviewer">{{ $review->user->name ?? 'Anonymous' }}</div>
                            <div class="cr-date">{{ $review->created_at->format('d M Y') }}</div>
                        </div>
                        <div class="cr-card-stars">
                            @for($i=1; $i<=5; $i++)
                                {{ $i <= (int)$review->rating ? '★' : '☆' }}
                            @endfor
                        </div>
                    </div>
                    <p class="cr-comment">{{ $review->comment ?? '' }}</p>
                </div>
            @endforeach
        @else
            <div class="cr-empty">
                <i class="las la-star" style="font-size:32px;color:#eeddd9;"></i>
                <p>No Reviews Yet. Be The First To Review!</p>
            </div>
        @endif

        
        {{-- ── WRITE REVIEW CARD ── --}}
        @php
            $userReview = null;
            if(Auth::check() && isset($shop->shopReviews)){
                foreach($shop->shopReviews as $rv){
                    if($rv->user_id == Auth::id()){
                        $userReview = $rv;
                        break;
                    }
                }
            }
        @endphp
        
        {{-- View All Reviews Button --}}
        <div style="text-align:center; margin-bottom:16px;">
            <button onclick="openReviewsPopup()" style="
                background:#fff; border:1.5px solid #FFB3AE; color:#FF3B30;
                border-radius:30px; padding:9px 24px; font-size:14px;
                font-weight:600; cursor:pointer; transition:all 0.2s;
            " onmouseover="this.style.background='#FFF5F5'" 
              onmouseout="this.style.background='#fff'">
                📋 View All Reviews ({{ $totalReviews }})
            </button>
        </div>
        
        <div class="cr-write-card">
            @if($userReview)
                <div class="cr-write-title">Your Review</div>
                <div class="cr-summary-stars" style="font-size:24px;">
                    @for($i=1; $i<=5; $i++)
                        {{ $i <= (int)$userReview->rating ? '★' : '☆' }}
                    @endfor
                </div>
                <p style="color:#5a3e3a;margin:10px 0 16px;">{{ $userReview->comment }}</p>
                <button class="cr-submit-btn" onclick="openReviewModal()">
                    <i class="las la-edit"></i> Update Review
                </button>
            @else
                <div class="cr-write-title">Write A Review</div>
                <div class="cr-star-input" id="crStarInput">
                    @for($r=1; $r<=5; $r++)
                        <i class="las la-star" data-val="{{ $r }}"></i>
                    @endfor
                </div>
                <textarea class="cr-textarea" id="crReviewText" rows="3"
                          placeholder="Share your experience..."></textarea>
                <input type="hidden" id="crRatingVal" value="0">
                <button class="cr-submit-btn" id="crSubmitBtn" onclick="crSubmitReview()">
                    Submit Review
                </button>
            @endif
        </div>

    </div>
</section>

<script>
/* ── Animate bars on load ── */
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.cr-bar-fill').forEach(function (bar) {
        var w = bar.getAttribute('data-width') || 0;
        setTimeout(function () { bar.style.width = w + '%'; }, 300);
    });
});

/* ── Interactive star input ── */
(function () {
    var stars      = document.querySelectorAll('#crStarInput i');
    var ratingInput = document.getElementById('crRatingVal');

    stars.forEach(function (star, idx) {
        /* hover */
        star.addEventListener('mouseenter', function () {
            stars.forEach(function (s, j) {
                s.style.color = j <= idx ? '#FFB300' : '#ddd';
            });
        });

        /* click */
        star.addEventListener('click', function () {
            var val = parseInt(star.getAttribute('data-val'));
            ratingInput.value = val;
            stars.forEach(function (s, j) {
                if (j < val) { s.classList.add('active'); }
                else         { s.classList.remove('active'); }
            });
        });
    });

    /* mouse leave — restore active state */
    document.getElementById('crStarInput').addEventListener('mouseleave', function () {
        var current = parseInt(ratingInput.value);
        stars.forEach(function (s, j) {
            s.style.color = j < current ? '#FFB300' : '#ddd';
        });
    });
})();

/* ── Submit review ── */
function crSubmitReview() {
    var btn        = document.getElementById('crSubmitBtn');
    var reviewText = document.getElementById('crReviewText').value.trim();
    var rating     = document.getElementById('crRatingVal').value;

    if (rating === '0' || rating === 0) {
        crShowToast('Please select a star rating.', 'error');
        return;
    }
    if (!reviewText) {
        crShowToast('Please write your review.', 'error');
        return;
    }

    btn.disabled    = true;
    btn.textContent = 'Submitting...';

    fetch('{{ route("reviews.submit") }}', {
        method : 'POST',
        headers: {
            'Content-Type'    : 'application/json',
            'Accept'          : 'application/json',
            'X-CSRF-TOKEN'    : document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({
            rating   : rating,
            comment  : reviewText,
            is_shop  : 1,
            shop_id  : {{ $shop->id }},
            product_id: '{{ isset($product) ? $product->id : "" }}',
            review_id : '{{ optional($userReview)->id ?? "" }}'
        })
    })
    .then(function (r) { return r.json(); })
    .then(function (data) {
        if (data.success) {
            crShowToast('Review submitted successfully! Thank you.', 'success');
            location.reload();
        } else {
            crShowToast(data.message || 'Something went wrong.', 'error');
            btn.disabled    = false;
            btn.textContent = 'Submit Review';
        }
    })
    .catch(function () {
        crShowToast('Network Error. Please Try Again.', 'error');
        btn.disabled    = false;
        btn.textContent = 'Submit Review';
    });
}
</script>

    <section class="map-section" style="display:none;">
        <div class="container">
            <div class="row">
                <div class="col-md-5 overflow-auto" style="max-height: 500px;">
                    @if (!empty($category_shops) && $category_shops->isNotEmpty())
                        <div class="px-2 py-1 fs-16 text-left text-black">{{translate('Near By Search Results')}}</div>
                        <ul class="list-group list-group-raw" id="shopList">
                            @foreach ($category_shops as $key => $shop)
                                <li class="list-group-item shop-item" data-index="{{ $key }}" data-lat="{{ optional($shop->user)->latitude ?? '' }}" data-lng="{{ optional($shop->user)->longitude ?? '' }}">
                                    <div class="d-flex search-product align-items-center cursor-pointer">
                                        <div class="mr-3">
                                            <img class="img-fit rounded shop-image" src="{{ uploaded_asset($shop->logo) }}" style="height: 75px;width: 75px;">
                                        </div>
                                        <div class="flex-grow-1 overflow--hidden">
                                            <div class="product-name shop-title text-truncate mb-5px">
                                                {{ \Illuminate\Support\Str::limit($shop->name, 30) }}
                                            </div>
                                            <div class="shop-rating d-flex align-items-center mb-1">
                                                @php
                                                    $averageRating = is_numeric($shop->averageRating) ? round((float)$shop->averageRating, 1) : 0.0;
                                                    $rating = floor($averageRating);
                                                    $halfStar = ($averageRating - $rating) >= 0.5;
                                                @endphp

                                                <span class="pr-2 text-muted small">
                                                    ({{ $averageRating }})
                                                </span>

                                                {{-- Filled stars --}}
                                                @for ($i = 0; $i < $rating; $i++)
                                                    <i class="las la-star" style="color: gold;"></i>
                                                @endfor

                                                {{-- Half star --}}
                                                @if ($halfStar)
                                                    <i class="las la-star-half-alt" style="color: gold;"></i>
                                                @endif

                                                {{-- Empty stars --}}
                                                @for ($i = 0; $i < (5 - $rating - ($halfStar ? 1 : 0)); $i++)
                                                    <i class="lar la-star" style="color: #ccc;"></i>
                                                @endfor

                                                {{-- Rating value and total reviews --}}
                                                <span class="ml-2 text-muted small">
                                                    {{ $shop->totalReviews > 0 ? $shop->totalReviews . ' reviews' : '' }}
                                                </span>
                                            </div>

                                            <div class="shop-category">
                                                <span>{{ $category_name }}</span>
                                            </div>

                                            <div class="opacity-60 shop-address">
                                                {{ $shop->address }}
                                            </div>

                                            @if ($shop->user && $shop->user->phone)
                                                <div class="shop-phone pt-1">
                                                    <i class="las la-phone"></i>
                                                    {{ $shop->user->phone }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>
        </div>
    </section>

     <!-- ===== BM Map Section ===== -->
<style>
.bm-map-section {
    margin: 0 0 24px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(255,59,48,0.1);
    border: 2px solid var(--bm-border, #FFB3AE);
    position: relative;
}
.bm-map-header {
    background: linear-gradient(135deg,#007AFF,#0055CC);
    color: #fff;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bm-map-loading {
    position: absolute;
    inset: 0;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    color: #888;
    z-index: 5;
    transition: opacity 0.5s;
}
.bm-map-loading .bm-spinner {
    width: 36px; height: 36px;
    border: 3px solid #FFB3AE;
    border-top-color: #FF3B30;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#map {
    height: 420px;
    width: 100%;
    display: block;
}
@media (max-width: 768px) {
    #map { height: 280px !important; }
    .bm-map-section { border-radius: 0; border-left: none; border-right: none; }
}
</style>
<section class="container mb-4 px-0 px-md-3">
    <div class="bm-map-section">
        <div class="bm-map-header">
            <i class="las la-map-marked-alt"></i>
            📍 Shop Location — {{ $shop->name }}
            @if($shop->user && $shop->user->latitude)
                <span style="margin-left:auto;font-size:11px;opacity:0.85;font-weight:500;">
                    GPS: {{ number_format($shop->user->latitude,4) }}, {{ number_format($shop->user->longitude,4) }}
                </span>
            @endif
        </div>
        <div style="position:relative;">
            <div class="bm-map-loading" id="mapLoading">
                <div class="bm-spinner"></div>
                <span>Loading Map...</span>
            </div>
            {{-- Primary: Google Maps embed iframe (works without billing for basic embed) --}}
            @php
                $shopLat = optional($shop->user)->latitude ?? null;
                $shopLng = optional($shop->user)->longitude ?? null;
                $mapQuery = ($shopLat && $shopLng)
                    ? $shopLat.','.$shopLng
                    : urlencode($shop->address ?? $shop->name);
                $mapSrc = 'https://maps.google.com/maps?q='.$mapQuery.'&z=15&output=embed&hl=en';
            @endphp
            <div id="map">
                <iframe src="{{ $mapSrc }}"
                    style="width:100%;height:100%;border:0;display:block;"
                    loading="lazy" allowfullscreen
                    referrerpolicy="no-referrer-when-downgrade"
                    onload="document.getElementById('mapLoading').style.display='none'">
                </iframe>
            </div>
        </div>
    </div>
</section>



<!-- Toast Notification -->
<div id="crToast" style="
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    min-width: 280px;
    max-width: 360px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    border-left: 5px solid #c9736a;
">
    <span id="crToastIcon" style="font-size:22px;">✅</span>
    <span id="crToastMsg" style="font-size:14px;font-weight:500;color:#1e1414;flex:1;"></span>
    <span onclick="crHideToast()" style="cursor:pointer;color:#aaa;font-size:18px;line-height:1;">✕</span>
</div>
<div style="text-align:center; margin-bottom:16px;">
    <button onclick="openReviewsPopup()" style="
        background:#fff; border:1.5px solid #FFB3AE; color:#FF3B30;
        border-radius:30px; padding:9px 24px; font-size:14px;
        font-weight:600; cursor:pointer;">
        📋 View All Reviews ({{ $totalReviews }})
    </button>
</div>

{{-- ============================================================
     GOOGLE STYLE REVIEWS POPUP
     @endsection కి ముందు paste చేయండి
     ============================================================ --}}

<!-- Reviews Popup Overlay -->
<div id="reviewsPopup" style="
    display:none; position:fixed; inset:0; z-index:99999;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
    animation:fadeIn 0.2s ease;
">
<div style="
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#fff; border-radius:20px; width:90%; max-width:680px;
    max-height:88vh; display:flex; flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
    overflow:hidden;
">

    <!-- Header -->
    <div style="padding:18px 22px 0; flex-shrink:0;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;">
            <div>
                <div style="font-size:13px; color:#FF3B30; font-weight:600; margin-bottom:2px;">{{ $shop->name }}</div>
                <div style="font-size:18px; font-weight:700; color:#1A1A2E;">Customer Reviews</div>
                <div style="font-size:13px; color:#E05A4E; margin-top:2px;">
                    <span style="font-size:22px; font-weight:800; color:#FF3B30;">{{ number_format($avgRating,1) }}</span>
                    &nbsp;<span style="color:#FFB300; font-size:16px;">
                        @for($i=1;$i<=5;$i++){{ $i<=(int)$avgRating?'★':'☆' }}@endfor
                    </span>
                    &nbsp;{{ $totalReviews }} reviews
                </div>
            </div>
            <button onclick="closeReviewsPopup()" style="
                width:36px; height:36px; border-radius:50%;
                border:1.5px solid #FFB3AE; background:#fff;
                font-size:18px; color:#666; cursor:pointer;
                display:flex; align-items:center; justify-content:center;
                transition:all 0.2s;
            " onmouseover="this.style.background='#FFF0F0';this.style.borderColor='#FF3B30'"
               onmouseout="this.style.background='#fff';this.style.borderColor='#FFB3AE'">✕</button>
        </div>

        <!-- Search Box -->
        <div style="position:relative; margin-bottom:12px;">
            <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#E05A4E;font-size:16px;">🔍</span>
            <input id="rvSearch" type="text" placeholder="Search Reviews..."
                oninput="filterReviews()"
                style="width:100%; padding:10px 14px 10px 36px;
                border:1.5px solid #FFB3AE; border-radius:30px;
                font-size:14px; outline:none; color:#1A1A2E;
                transition:border-color 0.2s;"
                onfocus="this.style.borderColor='#FF3B30'"
                onblur="this.style.borderColor='#FFB3AE'">
        </div>

        <!-- Star Filter Tabs -->
        <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;">
            <button class="rv-tab active-tab" data-star="all" onclick="setStarFilter('all',this)">
                All
            </button>
            <button class="rv-tab" data-star="5" onclick="setStarFilter('5',this)">5 ★</button>
            <button class="rv-tab" data-star="4" onclick="setStarFilter('4',this)">4 ★</button>
            <button class="rv-tab" data-star="3" onclick="setStarFilter('3',this)">3 ★</button>
            <button class="rv-tab" data-star="2" onclick="setStarFilter('2',this)">2 ★</button>
            <button class="rv-tab" data-star="1" onclick="setStarFilter('1',this)">1 ★</button>
        </div>

        <!-- Sort -->
        <div style="display:flex; gap:8px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1.5px solid #FFB3AE;">
            <button class="rv-sort active-sort" data-sort="newest" onclick="setSort('newest',this)">Newest</button>
            <button class="rv-sort" data-sort="highest" onclick="setSort('highest',this)">Highest</button>
            <button class="rv-sort" data-sort="lowest"  onclick="setSort('lowest',this)">Lowest</button>
        </div>
    </div>

    <!-- Reviews List -->
    <div id="rvList" style="overflow-y:auto; padding:14px 22px 20px; flex:1;">
        <!-- Injected by JS -->
    </div>

    <!-- No results -->
    <div id="rvEmpty" style="display:none; text-align:center; padding:40px; color:#E05A4E;">
        <div style="font-size:32px;">😕</div>
        <div style="font-size:14px; margin-top:8px;">No Reviews Found</div>
    </div>

</div>
</div>

<!-- Tab & Sort Styles -->
<style>
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translate(-50%,-45%);opacity:0} to{transform:translate(-50%,-50%);opacity:1} }

.rv-tab {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #FFB3AE;
    background: #fff;
    color: #E05A4E;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.rv-tab:hover { background:#FFF5F5; border-color:#FF3B30; color:#FF3B30; }
.rv-tab.active-tab { background:linear-gradient(135deg,#FF3B30,#FF6D00); border-color:#FF3B30; color:#fff; box-shadow:0 3px 10px rgba(255,59,48,0.3); }

.rv-sort {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid #FFB3AE;
    background: #fff;
    color: #E05A4E;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.rv-sort:hover { border-color:#FF3B30; color:#FF3B30; }
.rv-sort.active-sort { background:#FFF5F5; border-color:#FF3B30; color:#FF3B30; }

.rv-item {
    border-bottom: 1px solid #FFE8E8;
    padding: 14px 0;
    animation: fadeIn 0.3s ease;
}
.rv-item:last-child { border-bottom: none; }
</style>

<script>
// ── All reviews data from PHP ──
var allReviews = [
    @foreach($shop->shopReviews as $review)
    {
        name    : "{{ addslashes($review->user->name ?? 'Anonymous') }}",
        company : "{{ addslashes($review->user->shop->name ?? $review->user->company ?? '') }}",
        date    : "{{ $review->created_at->format('d M Y') }}",
        rating  : {{ (int)$review->rating }},
        comment : "{{ addslashes($review->comment ?? '') }}",
        initials: "{{ strtoupper(substr($review->user->name ?? 'A', 0, 1)) }}"
    },
    @endforeach
];

var currentStar = 'all';
var currentSort = 'newest';

function openReviewsPopup() {
    document.getElementById('reviewsPopup').style.display = 'block';
    document.body.style.overflow = 'hidden';
    renderReviews();
}

function closeReviewsPopup() {
    document.getElementById('reviewsPopup').style.display = 'none';
    document.body.style.overflow = '';
}

// Close on overlay click
document.getElementById('reviewsPopup').addEventListener('click', function(e){
    if(e.target === this) closeReviewsPopup();
});

function setStarFilter(star, el) {
    currentStar = star;
    document.querySelectorAll('.rv-tab').forEach(function(b){ b.classList.remove('active-tab'); });
    el.classList.add('active-tab');
    renderReviews();
}

function setSort(sort, el) {
    currentSort = sort;
    document.querySelectorAll('.rv-sort').forEach(function(b){ b.classList.remove('active-sort'); });
    el.classList.add('active-sort');
    renderReviews();
}

function filterReviews() { renderReviews(); }

function renderReviews() {
    var search = (document.getElementById('rvSearch').value || '').toLowerCase().trim();

    var filtered = allReviews.filter(function(r) {
        var starOk = currentStar === 'all' || r.rating == parseInt(currentStar);
        var searchOk = !search ||
            r.name.toLowerCase().includes(search) ||
            r.comment.toLowerCase().includes(search);
        return starOk && searchOk;
    });

    // Sort
    filtered.sort(function(a,b){
        if(currentSort === 'highest') return b.rating - a.rating;
        if(currentSort === 'lowest')  return a.rating - b.rating;
        return 0; // newest = original order
    });

    var list  = document.getElementById('rvList');
    var empty = document.getElementById('rvEmpty');

    if(filtered.length === 0) {
        list.innerHTML = '';
        empty.style.display = 'block';
        return;
    }

    empty.style.display = 'none';

    list.innerHTML = filtered.map(function(r) {
        var stars = '';
        for(var i=1;i<=5;i++) stars += i<=r.rating ? '★':'☆';

        // highlight search keyword
        var comment = r.comment;
        if(search && comment) {
            var re = new RegExp('(' + search.replace(/[.*+?^${}()|[\]\\]/g,'\\$&') + ')', 'gi');
            comment = comment.replace(re, '<mark style="background:#fff3cc;border-radius:3px;padding:0 2px;">$1</mark>');
        }

        return '<div class="rv-item">'+
            '<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">'+
                '<div style="width:38px;height:38px;border-radius:50%;background:#FFF5F5;'+
                     'border:1.5px solid #FFB3AE;display:flex;align-items:center;'+
                     'justify-content:center;font-weight:700;color:#FF3B30;font-size:15px;flex-shrink:0;">'+
                    r.initials+
                '</div>'+
                '<div style="flex:1;">'+
                    '<div style="font-weight:700;font-size:14px;color:#1A1A2E;">'+r.name+'</div>'+
                    (r.company ? '<div style="font-size:11px;color:#FF3B30;font-weight:600;">'+r.company+'</div>' : '')+
                    '<div style="font-size:11px;color:#E05A4E;">'+r.date+'</div>'+
                '</div>'+
                '<div style="color:#FFB300;font-size:15px;letter-spacing:2px;">'+stars+'</div>'+
            '</div>'+
            '<p style="font-size:13px;color:#8B0000;line-height:1.6;margin:0;">'+comment+'</p>'+
        '</div>';
    }).join('');
}

// Close on ESC
document.addEventListener('keydown', function(e){
    if(e.key === 'Escape') closeReviewsPopup();
});
</script>

<script>
// rateStars hover already handled above — no duplicate needed

// ── Copy Review Link ──
function copyReviewLink(){
    var link = '{{ isset($reviewLink) ? $reviewLink : "" }}';
    if(!link){ 
        alert('Review link not available'); 
        return; 
    }

    function showToast(){
        var existing = document.getElementById('jdCopyToast');
        if(existing) existing.remove();

        var toast = document.createElement('div');
        toast.id = 'jdCopyToast';
        toast.innerHTML = '<i class="fa-solid fa-circle-check" style="color:#25a244;font-size:18px;"></i> <span>Link Copied!</span>';
        toast.style.cssText = `
            position: fixed;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: #1a1a1a;
            color: #fff;
            padding: 12px 24px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 9999999;
            box-shadow: 0 8px 24px rgba(0,0,0,0.25);
            opacity: 0;
            transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
        `;
        document.body.appendChild(toast);

        setTimeout(function(){ 
            toast.style.opacity = '1'; 
            toast.style.transform = 'translateX(-50%) translateY(0)';
        }, 10);

        setTimeout(function(){ 
            toast.style.opacity = '0';
            toast.style.transform = 'translateX(-50%) translateY(20px)';
            setTimeout(function(){ toast.remove(); }, 300);
        }, 2500);
    }

    // ముందు close, తర్వాత copy + toast
    closeShareModal();

    setTimeout(function(){
        if(navigator.clipboard){
            navigator.clipboard.writeText(link).then(function(){
                showToast();
            }).catch(function(){
                // fallback
                var t = document.createElement('textarea');
                t.value = link;
                document.body.appendChild(t);
                t.select();
                document.execCommand('copy');
                document.body.removeChild(t);
                showToast();
            });
        } else {
            var t = document.createElement('textarea');
            t.value = link;
            document.body.appendChild(t);
            t.select();
            document.execCommand('copy');
            document.body.removeChild(t);
            showToast();
        }
    }, 300); // modal close animation తర్వాత
}

// ── Share dropdown toggle ──
function toggleShareMenu(e){
    e.stopPropagation();
    var modal = document.getElementById('jdShareModal');
    modal.style.display = 'flex';
}

function closeShareModal(){
    document.getElementById('jdShareModal').style.display = 'none';
}

document.getElementById('jdShareModal').addEventListener('click', function(e){
    if(e.target === this) closeShareModal();
});
</script>

{{-- ── CONTACT / CHAT POPUP (Guest Users) ── --}}
<div id="contactPopup" style="
    display:none; position:fixed; inset:0; z-index:999999;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
    align-items:center; justify-content:center;">
<div style="
    background:#fff; border-radius:20px; padding:32px 28px;
    width:90%; max-width:400px;
    box-shadow:0 20px 60px rgba(0,0,0,0.22); text-align:center;
    position:relative;
    animation:popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);">

    {{-- Phone Step --}}
    <button onclick="closeContactPopup()" style="
    position:absolute; top:14px; right:14px;
    width:32px; height:32px; border-radius:50%;
    border:1.5px solid #FFB3AE; background:#fff;
    font-size:16px; color:#888; cursor:pointer;
    display:flex; align-items:center; justify-content:center;">✕</button>
    <div id="cpPhoneStep">
        <div style="display:flex; align-items:center; gap:12px; background:#FFF5F5; border:1.5px solid #FFB3AE; border-radius:12px; padding:10px 14px; margin-bottom:18px; text-align:left;">
            <img src="{{ uploaded_asset($shop->logo) }}"
                 onerror="this.src='{{ asset('assets/img/placeholder.jpg') }}'"
                 style="width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid #FFB3AE; flex-shrink:0;">
            <div>
                <div style="font-weight:700; font-size:14px; color:#1A1A2E;">{{ $shop->name }}</div>
                <div style="font-size:11px; color:#FF3B30;">{{ $shop->address ?? '' }}</div>
            </div>
        </div>
        <div style="display:none;" id="cpIcon">📞</div>
        <div style="font-size:18px; font-weight:700; color:#1A1A2E; margin-bottom:6px;" id="cpTitle">Contact Seller</div>
        <div style="font-size:13px; color:#888; margin-bottom:20px;" id="cpSubtitle">Enter Your Mobile Number To Continue</div>

        <div id="cpPhoneWrap" style="display:flex; border:1.5px solid #FFB3AE; border-radius:12px; overflow:hidden; margin-bottom:6px; transition:border-color 0.2s;">
            <span style="background:#FFF5F5; color:#FF3B30; font-weight:700; font-size:14px; padding:12px 14px; border-right:1.5px solid #FFB3AE; white-space:nowrap;">🇮🇳 +91</span>
            <input id="cpPhoneInput" type="tel" maxlength="10" placeholder="10-digit mobile number"
                   oninput="this.value=this.value.replace(/\D/g,'')"
                   onkeyup="cpValidatePhone()"
                   onfocus="document.getElementById('cpPhoneWrap').style.borderColor='#FF3B30'"
                   onblur="document.getElementById('cpPhoneWrap').style.borderColor='#FFB3AE'"
                   style="flex:1; border:none; outline:none; padding:12px 14px; font-size:15px; color:#1A1A2E; background:#fff;">
        </div>
        <div id="cpPhoneError" style="display:none; color:#FF3B30; font-size:12px; margin-bottom:10px; text-align:left;">
            ⚠️ Please enter valid 10-digit mobile number
        </div>
        <div id="cpPhoneOk" style="display:none; color:#00C853; font-size:12px; margin-bottom:10px; text-align:left;">
            ✅ Looks good!
        </div>

        <div style="margin-bottom:16px; text-align:left;">
            <label style="font-size:12px; color:#888; margin-bottom:6px; display:block;" id="cpMsgLabel">Your Message</label>
            <textarea id="cpMessage" rows="3"
                placeholder="I Am Interested In Your Products. Please Contact Me."
                style="width:100%; border:1.5px solid #FFB3AE; border-radius:10px;
                padding:10px 14px; font-size:13px; color:#1A1A2E; resize:none;
                outline:none; font-family:inherit; transition:border-color 0.2s; box-sizing:border-box;"
                onfocus="this.style.borderColor='#FF3B30'"
                onblur="this.style.borderColor='#FFB3AE'"></textarea>
        </div>

        <button id="cpSubmitBtn" onclick="cpSubmit()" style="
            width:100%; background:#FF3B30; color:#fff; border:none;
            border-radius:40px; padding:13px; font-size:15px; font-weight:700;
            cursor:pointer; box-shadow:0 4px 16px rgba(232,101,15,0.3);
            transition:all 0.2s; margin-bottom:12px;">
            Send Enquiry
        </button>
        <button onclick="closeContactPopup()" style="
            background:none; border:none; color:#aaa;
            font-size:13px; cursor:pointer; width:100%;">← Go Back</button>
    </div>

    {{-- Success Step --}}
    <div id="cpSuccessStep" style="display:none; padding:20px 0;">
        <div style="font-size:56px; margin-bottom:12px;">🎉</div>
        <div style="font-size:20px; font-weight:700; color:#1A1A2E; margin-bottom:8px;" id="cpSuccessTitle">Message Sent!</div>
        <div style="font-size:14px; color:#888;" id="cpSuccessMsg">Seller Will Contact You Soon.</div>
    </div>
</div>
</div>

<script>
var cpMode = 'enquiry';

function openEnquiryPopup(){
    document.getElementById('enquiryShopId').value = '{{ $shop->id }}';
    document.getElementById('enquiryShopName').textContent = 'Enquiry \u2013 {{ addslashes($shop->name) }}';
    document.getElementById('enquiryMsg').classList.add('d-none');
    $('#bmEnquiryModal').modal('show');
}
}
function openContactPopup(mode){
    cpMode = mode || 'enquiry';
    if(cpMode === 'chat'){
        document.getElementById('cpIcon').textContent      = '💬';
        document.getElementById('cpTitle').textContent     = 'Chat With Seller';
        document.getElementById('cpSubtitle').textContent  = 'Enter your number to start chatting';
        document.getElementById('cpSubmitBtn').textContent = 'Send Message';
        document.getElementById('cpMessage').placeholder   = 'Hi, I want to know more about your products...';
    } else {
        document.getElementById('cpIcon').textContent      = '📞';
        document.getElementById('cpTitle').textContent     = 'Contact Seller';
        document.getElementById('cpSubtitle').textContent  = 'Enter your number to send enquiry';
        document.getElementById('cpSubmitBtn').textContent = 'Send Enquiry';
        document.getElementById('cpMessage').placeholder   = 'I Am Interested In Your Products. Please Contact Me.';
    }
    document.getElementById('contactPopup').style.display = 'flex';
    document.body.style.overflow = 'hidden';
    setTimeout(function(){ document.getElementById('cpPhoneInput').focus(); }, 300);
}

function closeContactPopup(){
    document.getElementById('contactPopup').style.display = 'none';
    document.body.style.overflow = '';
    document.getElementById('cpPhoneStep').style.display   = 'block';
    document.getElementById('cpSuccessStep').style.display = 'none';
    document.getElementById('cpPhoneInput').value          = '';
    document.getElementById('cpMessage').value             = '';
    document.getElementById('cpPhoneError').style.display  = 'none';
    document.getElementById('cpPhoneOk').style.display     = 'none';
    var btn = document.getElementById('cpSubmitBtn');
    btn.disabled    = false;
}

function cpValidatePhone(){
    var phone = document.getElementById('cpPhoneInput').value.trim();
    var errEl = document.getElementById('cpPhoneError');
    var okEl  = document.getElementById('cpPhoneOk');
    if(phone.length === 0){
        errEl.style.display = 'none';
        okEl.style.display  = 'none';
    } else if(phone.length === 10 && /^[6-9]\d{9}$/.test(phone)){
        errEl.style.display = 'none';
        okEl.style.display  = 'block';
    } else {
        errEl.style.display = 'block';
        okEl.style.display  = 'none';
    }
}

function cpSubmit(){
    var phone   = document.getElementById('cpPhoneInput').value.trim();
    var message = document.getElementById('cpMessage').value.trim();

    if(phone.length !== 10 || !/^[6-9]\d{9}$/.test(phone)){
        document.getElementById('cpPhoneError').style.display = 'block';
        document.getElementById('cpPhoneInput').focus();
        return;
    }

    if(!message){
        message = cpMode === 'chat'
            ? 'Hi, I want to know more about your products.'
            : 'I Am Interested In Your Products. Please Contact Me.';
    }

    var btn = document.getElementById('cpSubmitBtn');
    btn.disabled    = true;
    btn.textContent = 'Sending...';

    fetch('/guest-contact-seller', {
        method : 'POST',
        headers: {
            'Content-Type'    : 'application/json',
            'Accept'          : 'application/json',
            'X-CSRF-TOKEN'    : document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({
            phone      : phone,
            message    : message,
            shop_id    : {{ $shop->id }},
            seller_id  : {{ $shop->user_id }},
            product_id : {{ isset($product) ? $product->id : 0 }},
            type       : cpMode,
            category_id: {{ isset($shop->sub_cat_ids) && strlen($shop->sub_cat_ids) > 0 ? (int)explode(",", $shop->sub_cat_ids)[0] : 0 }}
        })
    })
    .then(function(r){ return r.json(); })
    .then(function(data){
        if(data.success){
            document.getElementById('cpPhoneStep').style.display   = 'none';
            document.getElementById('cpSuccessStep').style.display = 'block';
            document.getElementById('cpSuccessTitle').textContent  = data.title  || (cpMode === 'chat' ? 'Message Sent! 💬' : 'Enquiry Sent! 📞');
            document.getElementById('cpSuccessMsg').textContent    = data.message || ('Seller will contact you on +91 ' + phone);
            setTimeout(function(){ closeContactPopup(); }, 2500);
        } else {
            crShowToast(data.message || 'Failed. Please try again.', 'error');
            btn.disabled    = false;
            btn.textContent = cpMode === 'chat' ? 'Send Message' : 'Send Enquiry';
        }
    })
    .catch(function(){
        crShowToast('Network error. Please try again.', 'error');
        btn.disabled    = false;
        btn.textContent = cpMode === 'chat' ? 'Send Message' : 'Send Enquiry';
    });
}

var cpOverlay = document.getElementById('contactPopup');
if(cpOverlay){
    cpOverlay.addEventListener('click', function(e){
        if(e.target === this) closeContactPopup();
    });
}
document.addEventListener('keydown', function(e){
    if(e.key === 'Escape') closeContactPopup();
});
</script>


@include("frontend.partials.enquiry_modal")

@endsection

@section('style')
    <!-- Bootstrap Icons (if not already loaded globally) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        /* Overview image */
        .shop-overview-img {
            height: 420px;
            object-fit: cover;
        }

        /* Rating stars color */
        .bi-star-fill { color: var(--bm-yellow); }
        .bi-star-half { color: var(--bm-yellow); }
        .bi-star { color: #ddd; }

        /* Reviews card hover */
        .shop-reviews .border:hover {
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transform: translateY(-4px);
            transition: all 0.25s ease;
        }

        /* Slight spacing adjustments */
        .shop-overview .offer-badge img { max-height: 48px; }

        /* Small screens */
        @media (max-width: 767px) {
            .shop-overview-img { height: 260px; }
        }
    </style>
@endsection

@section('script')
<script>

    window.toggleManualLocation = function(){
        var box = document.getElementById('manualLocationBox');
        if(!box) return;
        box.style.display = box.style.display === 'none' ? 'block' : 'none';
        if(box.style.display === 'block') document.getElementById('manualCityInput').focus();
    };
    window.setManualLocation = function(){
        var city = document.getElementById('manualCityInput').value.trim();
        if(!city) return;
        document.getElementById('enquiryCity').value = city;
        document.getElementById('enquiryLocationText').textContent = city;
        document.getElementById('manualLocationBox').style.display = 'none';
        document.getElementById('cityDropdown').style.display = 'none';
    };
    window.detectEnquiryLocation = function(btn){
        if(btn){ btn.textContent = 'Detecting...'; btn.disabled = true; }
        if(!navigator.geolocation){ if(btn) btn.textContent = 'Not supported'; return; }
        navigator.geolocation.getCurrentPosition(function(pos){
            var lat = pos.coords.latitude, lng = pos.coords.longitude;
            document.getElementById('enquiryLat').value = lat;
            document.getElementById('enquiryLng').value = lng;
            fetch('https://nominatim.openstreetmap.org/reverse?format=json&lat='+lat+'&lon='+lng)
            .then(function(r){ return r.json(); })
            .then(function(d){
                var city = d.address.city || d.address.town || d.address.village || '';
                document.getElementById('enquiryCity').value = city;
                document.getElementById('enquiryDistrict').value = d.address.state_district || '';
                document.getElementById('enquiryState').value = d.address.state || '';
                document.getElementById('enquiryPincode').value = d.address.postcode || '';
                document.getElementById('enquiryLocationText').textContent = city || (lat.toFixed(4)+','+lng.toFixed(4));
                if(btn){ btn.textContent = 'Set'; btn.disabled = false; }
                document.getElementById('manualLocationBox').style.display = 'none';
            }).catch(function(){
                document.getElementById('enquiryLocationText').textContent = lat.toFixed(4)+','+lng.toFixed(4);
                if(btn){ btn.textContent = 'Set'; btn.disabled = false; }
            });
        }, function(){ if(btn){ btn.textContent = 'Allow'; btn.disabled = false; } });
    };
    window.enquiryCitySearch = function(){
        var q = document.getElementById('manualCityInput').value.trim();
        var dd = document.getElementById('cityDropdown');
        if(q.length < 2){ dd.style.display='none'; return; }
        $.get('/location-search', {filterPincode: q}, function(res){
            var html = res.html || '';
            var matches = [];
            var regex = /onclick="getShopListOnSearch\('([^']+?)\s*','([^']+?)'\)">([^<]+)/g;
            var m;
            while((m = regex.exec(html)) !== null && matches.length < 8){
                matches.push({city: m[1], pincode: m[2], label: m[3]});
            }
            if(!matches.length){ dd.style.display='none'; return; }
            dd.innerHTML = matches.map(function(item){
                return '<div onclick="window.selectEnquiryCity(this)" data-city="'+item.city+'" data-pincode="'+item.pincode+'" style="padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f0f0f0;">'+item.label+'</div>';
            }).join('');
            dd.style.display = 'block';
        });
    };
    window.selectEnquiryCity = function(el){
        var city = el.getAttribute('data-city');
        var pincode = el.getAttribute('data-pincode');
        document.getElementById('enquiryCity').value = city;
        document.getElementById('enquiryDistrict').value = city;
        document.getElementById('enquiryPincode').value = pincode;
        document.getElementById('enquiryLocationText').textContent = city + (pincode ? ' - '+pincode : '');
        document.getElementById('manualCityInput').value = city;
        document.getElementById('cityDropdown').style.display = 'none';
        document.getElementById('manualLocationBox').style.display = 'none';
    };
    window.bmSubmitEnquiry = function(){
        var shopId  = document.getElementById('enquiryShopId').value;
        var name    = document.getElementById('enquiryName').value.trim();
        var phone   = document.getElementById('enquiryPhone').value.trim();
        var message = document.getElementById('enquiryMessage').value.trim();
        var msgEl   = document.getElementById('enquiryMsg');
        if(!name||!phone||phone.length<10){
            msgEl.textContent='Please enter name and valid 10-digit phone.';
            msgEl.className='mt-2 text-center small text-danger';
            msgEl.classList.remove('d-none'); return;
        }
        $.ajax({
            url:'/search/enquiry', type:'POST',
            data:{_token:$('meta[name="csrf-token"]').attr('content'), shop_id:shopId, name:name, phone:phone, message:message,
                lat:$('#enquiryLat').val(), lng:$('#enquiryLng').val(),
                city:$('#enquiryCity').val(), district:$('#enquiryDistrict').val(),
                state:$('#enquiryState').val(), pincode:$('#enquiryPincode').val(),
                buyer_id: '{{ Auth::id() ?? 0 }}'},
            success:function(res){
                msgEl.textContent = res.message || 'Enquiry sent!';
                msgEl.className = 'mt-2 text-center small text-success';
                msgEl.classList.remove('d-none');
                setTimeout(function(){ $('#bmEnquiryModal').modal('hide'); }, 1800);
            },
            error:function(){
                msgEl.textContent='Something went wrong.';
                msgEl.className='mt-2 text-center small text-danger';
                msgEl.classList.remove('d-none');
            }
        });
    };
    window.bmEnquiry = function(shopId, shopName){
        document.getElementById('enquiryShopId').value = shopId;
        document.getElementById('enquiryShopName').textContent = 'Enquiry - ' + shopName;
        document.getElementById('enquiryMsg').classList.add('d-none');
        $('#bmEnquiryModal').modal('show');
    };
window.toggleImgPanel = function(){
    var p = document.getElementById('shop-images-panel');
    p.style.display = p.style.display === 'block' ? 'none' : 'block';
    if(p.style.display === 'block'){
        p.querySelectorAll('.gallery-click').forEach(function(el, idx){
            el.onclick = function(){ window.openGalleryAt(idx); };
        });
    }
};
</script>

<script>
    // Declare global variables safely
    window.shops = window.shops || [
        @foreach ($category_shops as $shop)
        {
            name: @json($shop->name),
            lat: {{ optional($shop->user)->latitude ?? 0 }},
            lng: {{ optional($shop->user)->longitude ?? 0 }},
            rating: "{{ $shop->rating ?? 'No rating' }}",
            img: "{{ uploaded_asset($shop->logo) }}",
            address: @json($shop->address),
            timing: @json($shop->shopTimes),
            reviews: @json($shop->reviews),
            totalReviews: {{ $shop->totalReviews }},
            averageRating: {{ $shop->averageRating }},
            phone: @json(optional($shop->user)->phone)
        },
        @endforeach
    ];


    // Global variables safely declared
    window.map = window.map || null;
    window.directionsService = window.directionsService || null;
    window.directionsRenderer = window.directionsRenderer || null;
    window.currentShop = window.currentShop || null;
    window.userLocation = window.userLocation || null;
    window.userAddress = window.userAddress || 'Your Current Location';
    window.lastSelectedItem = window.lastSelectedItem || null;

    // Shop lat/lng from DB (users table)
    var shopLatLng = {
        lat: {{ $shop->user->latitude ?? 17.3850 }},
        lng: {{ $shop->user->longitude ?? 78.4867 }}
    };

    // Expose initMap globally so Google Maps callback can find it
    window.initMap = function() {
        var mapEl = document.getElementById("map");
        if (!mapEl) { _hideMapLoader(); return; }

        // Always center map on SHOP location from DB (users table lat/lng)
        var centerLat = shopLatLng.lat || 17.3850;
        var centerLng = shopLatLng.lng || 78.4867;

        map = new google.maps.Map(mapEl, {
            center: { lat: centerLat, lng: centerLng },
            zoom: 15,
            mapTypeControl: false,
            streetViewControl: false,
            fullscreenControl: true,
            styles: [
                { featureType:"poi", elementType:"labels", stylers:[{visibility:"off"}] }
            ]
        });

        directionsService = new google.maps.DirectionsService();
        directionsRenderer = new google.maps.DirectionsRenderer({
            suppressMarkers: false,
            polylineOptions: { strokeColor: '#FF3B30', strokeWeight: 5 }
        });
        directionsRenderer.setMap(map);

        // 1. Shop marker (from users table lat/lng) — RED pin
        if (centerLat && centerLng) {
            var shopMarker = new google.maps.Marker({
                position: { lat: centerLat, lng: centerLng },
                map: map,
                title: "{{ $shop->name }}",
                animation: google.maps.Animation.DROP,
                icon: {
                    url: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
                    scaledSize: new google.maps.Size(40, 40)
                }
            });
            var shopInfo = new google.maps.InfoWindow({
                content: '<div style="padding:8px;font-family:Segoe UI,sans-serif;">' +
                         '<b style="color:#FF3B30;font-size:14px;">{{ addslashes($shop->name) }}</b><br>' +
                         '<span style="font-size:12px;color:#555;">{{ addslashes($shop->address ?? '') }}</span>' +
                         '</div>'
            });
            shopMarker.addListener('click', function() { shopInfo.open(map, shopMarker); });
            shopInfo.open(map, shopMarker); // auto-open on load
        }

        // 2. Nearby shops markers (BLUE pins)
        shops.forEach(function(shop, index) {
            if (!shop.lat || !shop.lng) return;
            var marker = new google.maps.Marker({
                position: { lat: shop.lat, lng: shop.lng },
                map: map,
                title: shop.name,
                icon: {
                    url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                    scaledSize: new google.maps.Size(32, 32)
                }
            });
            marker.addListener('click', function() {
                showCard(shop, index);
                map.panTo({ lat: shop.lat, lng: shop.lng });
            });
        });

        // 3. Try to get user GPS for direction — optional, no error if denied
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(pos) {
                userLocation = { lat: pos.coords.latitude, lng: pos.coords.longitude };
                // Blue user dot
                new google.maps.Marker({
                    position: userLocation,
                    map: map,
                    title: "You Are Here",
                    icon: {
                        url: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
                        scaledSize: new google.maps.Size(32, 32)
                    }
                });
            }, function() {
                // GPS denied — direction will use shop address fallback
            }, { timeout: 8000 });
        }
    }

    function showCard(shop, index = null) {
        currentShop = shop;

        const placeholder = 'https://plus.unsplash.com/premium_photo-1664474619075-644dd191935f?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8aW1hZ2V8ZW58MHx8MHx8fDA%3D';
        document.getElementById("card-img").src = shop.img || placeholder;
        document.getElementById("shop-top-title").textContent = shop.name;
        document.getElementById("card-title").textContent = shop.name;

        if (lastSelectedItem) lastSelectedItem.classList.remove("active");
        if (index !== null) {
            const item = document.querySelector(`.shop-item[data-index="${index}"]`);
            if (item) {
                item.classList.add("active");
                lastSelectedItem = item;
            }
        }

        const ratingEl = document.getElementById("card-rating");
        const rating = parseFloat(shop.averageRating);
        const reviews = shop.totalReviews || 0;

        if (isNaN(rating)) {
            ratingEl.innerHTML = "No rating";
        } else {
            let fullStars = Math.floor(rating);
            let halfStar = rating % 1 >= 0.5;
            let starsHtml = '';

            for (let i = 0; i < fullStars; i++) starsHtml += '<i class="las la-star" style="color: gold;"></i>';
            if (halfStar) starsHtml += '<i class="las la-star-half-alt" style="color: gold;"></i>';
            for (let i = 0; i < 5 - fullStars - (halfStar ? 1 : 0); i++) starsHtml += '<i class="lar la-star" style="color: #ccc;"></i>';

            ratingEl.innerHTML = starsHtml + ` <span style="font-size: 13px; color: #555;">(${rating}) - ${reviews} reviews</span>`;
        }

        document.getElementById("shop-card").style.display = "block";
        document.querySelectorAll(".shop-actions a").forEach(a => a.classList.remove("active"));
        document.getElementById("overview").classList.add("active");

        document.getElementById("shop-timing").style.display = "block";
        document.getElementById("shop-overview-address").style.display = "block";
        document.getElementById("phone-number").style.display = "block";

        let address = (shop?.address || '').trim();
        if (!address) address = userAddress;

        document.getElementById("shop-overview-address").innerHTML = `
            <div class="location-box-address">
                <i class="las la-map-marker-alt" id="location_icon"></i> 
                <h6>${address}</h6>
            </div>
        `;

        const timingEl = document.getElementById("shop-timing");
        const now = new Date();
        const currentDay = now.toLocaleDateString('en-US', { weekday: 'long' });
        const currentTime = now.getHours() * 60 + now.getMinutes();

        let isOpen = false;

        const todayTiming = Array.isArray(shop.timing)
            ? shop.timing.find(t => t.day.toLowerCase() === currentDay.toLowerCase())
            : null;

        if (todayTiming) {
            const toMinutes = timeStr => {
                const [hour, minute] = timeStr.split(':').map(Number);
                return hour * 60 + minute;
            };

            const ranges = [[toMinutes(todayTiming.first_open_time), toMinutes(todayTiming.first_close_time)]];
            if (todayTiming.second_open_time && todayTiming.second_close_time) {
                ranges.push([toMinutes(todayTiming.second_open_time), toMinutes(todayTiming.second_close_time)]);
            }

            isOpen = ranges.some(([start, end]) => currentTime >= start && currentTime <= end);
        }

        timingEl.innerHTML = `
            <div class="location-box-address" style="cursor: pointer;" onclick="toggleTimingList(this)">
                <i class="las la-clock" id="location_icon"></i>
                <h6>
                    <b>Hours</b> 
                    <span style="font-size: 14px; color: ${isOpen ? 'rgba(25,134,57,1.0)' : 'red'};">
                        ${isOpen ? 'Open' : 'Closed'}
                    </span>
                    <br>
                    <span class="toggle-text" style="font-size: 12px; color: #888;">(Click To View All)</span>
                </h6>
            </div>
            <div id="timing-list" style="display: none; margin-top: 10px; margin-left: 20px;">
                ${
                    Array.isArray(shop.timing) && shop.timing.length > 0
                        ? shop.timing.map(time => {
                            let line = `<strong>${time.day}</strong>: `;
                            line += `${formatTime(time.first_open_time)}–${formatTime(time.first_close_time)}`;
                            if (time.second_open_time && time.second_close_time) {
                                line += `, ${formatTime(time.second_open_time)}–${formatTime(time.second_close_time)}`;
                            }
                            return `<p>${line}</p>`;
                        }).join('')
                        : '<p>No Timing Available</p>'
                }
            </div>
        `;

        const phoneNumber = document.getElementById("phone-number");
        phoneNumber.innerHTML = `
            <div class="shop-user-phone d-flex pt-3">
                <i class="las la-phone" id="location_icon"></i> 
                <h6>${shop?.phone || ''}</h6>
            </div>
        `;
    }

    function toggleTimingList(headerEl) {
        const listEl = document.getElementById("timing-list");
        const toggleTextSpan = headerEl.querySelector(".toggle-text");

        if (listEl.style.display === "none") {
            listEl.style.display = "block";
            toggleTextSpan.textContent = "(Click To Hide)";
        } else {
            listEl.style.display = "none";
            toggleTextSpan.textContent = "(Click To View All)";
        }
    }

    function formatTime(timeStr) {
        if (!timeStr) return '';
        const [hour, minute] = timeStr.split(':');
        const date = new Date();
        date.setHours(hour, minute);
        return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }).replace('AM', 'am').replace('PM', 'pm');
    }

    window.getDirections = function () {
        // Primary: use shop lat/lng from users table
        var destLat = shopLatLng.lat;
        var destLng = shopLatLng.lng;

        if (destLat && destLng) {
            var origin = userLocation
                ? userLocation.lat + ',' + userLocation.lng
                : '';
            var url = 'https://www.google.com/maps/dir/?api=1' +
                      (origin ? '&origin=' + origin : '') +
                      '&destination=' + destLat + ',' + destLng +
                      '&travelmode=driving';
            window.open(url, '_blank');
        } else if (currentShop) {
            // Fallback: address search
            var dest = encodeURIComponent(currentShop.address || '{{ $shop->name }}');
            window.open('https://www.google.com/maps/dir/?api=1&destination=' + dest, '_blank');
        }
    };

    document.addEventListener("DOMContentLoaded", () => {
        document.querySelector(".la-directions")?.addEventListener("click", getDirections);

        document.querySelectorAll(".shop-item").forEach((item, index) => {
            item.setAttribute("data-index", index);
            item.addEventListener("click", () => {
                const shop = shops[index];
                if (shop && map) {
                    showCard(shop, index);
                    map.panTo({ lat: shop.lat, lng: shop.lng });
                }
            });
        });

        document.getElementById("overview")?.addEventListener("click", () => activateTab("overview"));
        document.getElementById("reviews")?.addEventListener("click", () => {
            setActiveTab("reviews");
            document.getElementById("review-section").style.display = "block";
            document.getElementById("shop-timing").style.display = "none";
            document.getElementById("shop-overview-address").style.display = "none";
            document.getElementById("phone-number").style.display = "none";
            document.getElementById("direction_section").style.display = "none"; 
            loadReviews(currentShop.reviews || []);
        });
    });

    function activateTab(tabId) {
        document.querySelectorAll(".shop-actions a").forEach(a => a.classList.remove("active"));
        document.getElementById(tabId)?.classList.add("active");

        const showOverview = tabId === "overview";
        document.getElementById("shop-timing").style.display = showOverview ? "block" : "none";
        document.getElementById("shop-overview-address").style.display = showOverview ? "block" : "none";
        document.getElementById("direction_section").style.display = showOverview ? "block" : "none";
        document.getElementById("review-section").style.display = "none";

        if (showOverview && currentShop) {
            let address = currentShop.address?.trim() || userAddress;
            document.getElementById("shop-overview-address").innerHTML = `
                <div class="location-box-address">
                    <i class="las la-map-marker-alt" id="location_icon"></i> 
                    <h6>${address}</h6>
                </div>
            `;
        }
    }

    function setActiveTab(id) {
        document.querySelectorAll(".shop-actions a").forEach(el => el.classList.remove("active"));
        document.getElementById(id)?.classList.add("active");
    }

    function loadReviews(reviews) {
        const container = document.getElementById("reviews-list");
        container.innerHTML = '';

        const totalReviews = reviews.length;
        if (totalReviews === 0) {
            container.innerHTML = '<p class="text-muted">No Reviews Available.</p>';
            return;
        }

        const totalReviewsElement = document.querySelector(".total-reviews");
        if (totalReviewsElement) totalReviewsElement.textContent = `Total Reviews: ${totalReviews}`;

        const ratingCounts = [0, 0, 0, 0, 0];
        reviews.forEach(review => {
            let rating = parseInt(review.rating || 0, 10);
            if (rating >= 1 && rating <= 5) ratingCounts[rating - 1]++;
        });

        for (let i = 0; i < 5; i++) {
            const progressBar = document.querySelectorAll(".rate-box .progress")[i];
            const countSpan = document.querySelectorAll(".rate-box .count")[i];
            if (progressBar) progressBar.style.width = `${(ratingCounts[i] / totalReviews) * 100}%`;
            if (countSpan) countSpan.textContent = ratingCounts[i];
        }

        const globalRating = reviews.reduce((sum, r) => sum + (r.rating || 0), 0) / totalReviews;
        document.querySelector(".global-value").textContent = `Average Rating: ${globalRating.toFixed(1)}`;

        reviews.forEach(review => {
            const item = document.createElement("div");
            item.classList.add("review-item", "mb-3", "border", "p-2", "rounded");
            item.innerHTML = `
                <strong>${review.user?.name || 'Anonymous'}</strong>
                <div class="rating">${'★'.repeat(review.rating || 0)}${'☆'.repeat(5 - (review.rating || 0))}</div>
                <p>${review.comment || 'No comment provided.'}</p>
            `;
            container.appendChild(item);
        });
    }

    window.openReviewModal = function(preRating) {
        @if(!Auth::check())
            if(typeof showLoginPrompt === 'function'){
                showLoginPrompt('Login To Write A Review.');
            } else {
                window.location.href = '{{ route("user.login") }}?redirect='+encodeURIComponent(window.location.href);
            }
            return;
        @endif

        @if(isset($userReview) && $userReview)
            var exR = {{ $userReview->rating ?? 0 }};
            var exC = @json($userReview->comment ?? '');
            var ri  = document.getElementById('ratingValue'); if(ri) ri.value = exR;
            var rmS = document.querySelectorAll('#rmStars i');
            rmS.forEach(function(s,j){ s.classList.toggle('rm-filled', j<exR); });
            var rvT = document.getElementById('reviewText'); if(rvT) rvT.value = exC;
            var rcc = document.getElementById('rmCharCount'); if(rcc) rcc.textContent=(exC?exC.length:0)+'/500';
            var hEl = document.getElementById('rmHint');
            if(hEl && exR){ var hts=['','Terrible 😞','Poor 😕','Okay 😐','Good 😊','Excellent 🤩']; hEl.textContent=hts[exR]||''; hEl.style.color='#FF3B30'; hEl.style.fontWeight='700'; }
        @endif

        if(preRating && preRating>0){
            var ri2=document.getElementById('ratingValue'); if(ri2) ri2.value=preRating;
            var rmS2=document.querySelectorAll('#rmStars i');
            rmS2.forEach(function(s,j){ s.classList.toggle('rm-filled', j<preRating); });
            var hts2=['','Terrible 😞','Poor 😕','Okay 😐','Good 😊','Excellent 🤩'];
            var h2=document.getElementById('rmHint');
            if(h2){ h2.textContent=hts2[preRating]||''; h2.style.color='#FF3B30'; h2.style.fontWeight='700'; }
        }

        var rmEl = document.getElementById('reviewModal');
        if(!rmEl){ console.error('reviewModal not found'); return; }
        try{ var ex=bootstrap.Modal.getInstance(rmEl); if(ex) ex.dispose(); }catch(e){}
        new bootstrap.Modal(rmEl, {backdrop:true, keyboard:true}).show();
    };

    @if(session('openReviewModal'))
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(openReviewModal, 1000);
        });
    @endif

</script>


<!-- ===== BM Review Modal — Bright New Design ===== -->
<style>
#reviewModal .modal-dialog {
    max-width: 480px;
    margin: auto;
}
#reviewModal .modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(255,59,48,0.18);
}
#rm-header {
    background: linear-gradient(135deg, #FF3B30, #FF6D00, #FFB300);
    padding: 28px 24px 22px;
    text-align: center;
    position: relative;
}
#rm-header .rm-shop-logo {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.7);
    display: block; margin: 0 auto 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
#rm-header h5 {
    color: #fff; font-size: 18px; font-weight: 800;
    margin: 0 0 4px; text-transform: capitalize;
}
#rm-header p {
    color: rgba(255,255,255,0.85); font-size: 12px; margin: 0;
}
#rm-close-btn {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.25); border: 1.5px solid rgba(255,255,255,0.4);
    color: #fff; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    line-height: 1;
}
#rm-close-btn:hover { background: rgba(255,255,255,0.4); }

/* Star rating interactive */
.rm-stars {
    display: flex; justify-content: center; gap: 8px;
    margin: 18px 0 6px;
}
.rm-stars i {
    font-size: 36px;
    color: #e0e0e0;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.rm-stars i:hover,
.rm-stars i.rm-active { color: #FFB300; transform: scale(1.25); }
.rm-stars i.rm-filled { color: #FFB300; }

.rm-hint {
    text-align: center;
    font-size: 12px;
    color: #aaa;
    margin-bottom: 16px;
    min-height: 18px;
    transition: all 0.2s;
}

.rm-textarea {
    width: 100%;
    border: 2px solid #FFB3AE;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    color: #1A1A2E;
    resize: none;
    outline: none;
    font-family: 'Segoe UI', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #FFFAFA;
    line-height: 1.6;
}
.rm-textarea:focus {
    border-color: #FF3B30;
    box-shadow: 0 0 0 4px rgba(255,59,48,0.1);
}
.rm-textarea::placeholder { color: #ccc; }

.rm-char-count {
    text-align: right;
    font-size: 11px;
    color: #bbb;
    margin-top: 4px;
}

.rm-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #FF3B30, #FF6D00);
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 18px rgba(255,59,48,0.35);
    letter-spacing: 0.4px;
    margin-top: 4px;
}
.rm-submit-btn:hover {
    background: linear-gradient(135deg, #FF6D00, #FF3B30);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,59,48,0.45);
}
.rm-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.rm-cancel-link {
    display: block; text-align: center;
    color: #aaa; font-size: 13px;
    margin-top: 10px; cursor: pointer;
    transition: color 0.2s;
    border: none; background: none; width: 100%;
}
.rm-cancel-link:hover { color: #FF3B30; }

/* Star label words */
.rm-star-labels { display:flex; justify-content:center; gap:4px; margin-bottom:4px; }
.rm-star-label { font-size:11px; color:#aaa; width:36px; text-align:center; }
</style>

<div class="modal fade" id="reviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            {{-- Gradient Header --}}
            <div id="rm-header">
                <img src="{{ $shop->logo ? uploaded_asset($shop->logo) : static_asset('assets/img/placeholder.jpg') }}"
                     class="rm-shop-logo" alt="{{ $shop->name }}">
                <h5>Rate & Review</h5>
                <p>{{ Str::limit($shop->name, 40) }}</p>
                <button id="rm-close-btn" data-bs-dismiss="modal">✕</button>
            </div>

            <div class="modal-body" style="padding: 22px 24px 20px; background:#fff;">

                {{-- Interactive Stars --}}
                <div class="rm-stars" id="rmStars">
                    @for($r = 1; $r <= 5; $r++)
                        <i class="las la-star" data-val="{{ $r }}"></i>
                    @endfor
                </div>
                <div class="rm-star-labels">
                    <span class="rm-star-label">Terrible</span>
                    <span class="rm-star-label">Poor</span>
                    <span class="rm-star-label">Okay</span>
                    <span class="rm-star-label">Good</span>
                    <span class="rm-star-label">Excellent</span>
                </div>
                <div class="rm-hint" id="rmHint">Tap a star to rate</div>
                <input type="hidden" id="ratingValue" value="0">

                {{-- Review Text --}}
                <textarea class="rm-textarea" id="reviewText" rows="4"
                    maxlength="500"
                    placeholder="Share Your Experience At This Place..."
                    oninput="document.getElementById('rmCharCount').textContent = this.value.length + '/500'"></textarea>
                <div class="rm-char-count" id="rmCharCount">0/500</div>

                <input type="hidden" id="product_id" value="{{ isset($product) ? $product->id : '' }}">

                {{-- Submit --}}
                <button class="rm-submit-btn" id="submitReview">
                    ⭐ Post Review
                </button>
                <button class="rm-cancel-link" data-bs-dismiss="modal">← Go Back</button>
            </div>
        </div>
    </div>
</div>

<script>
// ===== BM Review Modal Stars — deferred safely =====
document.addEventListener('DOMContentLoaded', function(){
    var rmStarsEl = document.querySelectorAll('#rmStars i');
    var hints     = ['','Terrible 😞','Poor 😕','Okay 😐','Good 😊','Excellent 🤩'];

    function getRVal(){ return (document.getElementById('ratingValue')||{value:'0'}).value||'0'; }
    function setRVal(v){ var e=document.getElementById('ratingValue'); if(e) e.value=v; }

    rmStarsEl.forEach(function(star, idx){
        star.addEventListener('mouseenter', function(){
            rmStarsEl.forEach(function(s,j){ s.classList.toggle('rm-active', j<=idx); });
        });
        star.addEventListener('mouseleave', function(){
            var cur = parseInt(getRVal())||0;
            rmStarsEl.forEach(function(s,j){
                s.classList.remove('rm-active');
                s.classList.toggle('rm-filled', j<cur);
            });
        });
        star.addEventListener('click', function(){
            var val = parseInt(star.getAttribute('data-val'));
            setRVal(val);
            rmStarsEl.forEach(function(s,j){
                s.classList.remove('rm-active');
                s.classList.toggle('rm-filled', j<val);
            });
            var hint = document.getElementById('rmHint');
            if(hint){ hint.textContent=hints[val]||''; hint.style.color='#FF3B30'; hint.style.fontWeight='700'; }
        });
    });
});
</script>



<style>
    .custom-review-btn {
        background-color: black;
        color: #555;
        border: 1px solid #ccc;
        border-radius: 999px;
        padding: 6px 16px;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: 0.2s;
    }
    
    .custom-review-btn i {
        color: #007bff;
        font-size: 16px;
    }
    
    .custom-review-btn:hover {
        border-color: #999;
    }

    .star-rating {
        font-size: 24px;
        color: #ddd;
        cursor: pointer;
    }

    .star-rating i {
        transition: color 0.2s;
    }

    .star-rating i.active,
    .star-rating i:hover {
        color: #ffc107;
    }
    
    #reviewModal .btn-close {
    width: 36px;
    height: 36px;
    background-size: 16px;
    opacity: 1 !important;
    border: 2px solid #ddd !important;
    border-radius: 50% !important;
    padding: 10px;
    filter: none !important;
    background-color: #fff !important;
}

#reviewModal .btn-close:hover {
    border-color: #c9736a !important;
    background-color: #fdf0ec !important;
}
</style>

<script>
    // Star rating in review modal (.star-rating) — now handled by rm-stars in new modal
    // Keep for backward compatibility but scoped to modal only
    document.addEventListener('DOMContentLoaded', function(){
        var stars = document.querySelectorAll('#reviewModal .star-rating i');
        if(!stars.length) return;
        var ratingInput = document.getElementById('ratingValue');
        stars.forEach(function(star, index){
            star.addEventListener('click', function(){
                var rating = index+1;
                if(ratingInput) ratingInput.value = rating;
                stars.forEach(function(s,i){ s.classList.toggle('active', i<rating); });
            });
            star.addEventListener('mouseenter', function(){
                stars.forEach(function(s,i){ s.style.color = i<=index?'#FFB300':'#ddd'; });
            });
        });
        var starWrap = document.querySelector('#reviewModal .star-rating');
        if(starWrap) starWrap.addEventListener('mouseleave', function(){
            var cur = parseInt(ratingInput?ratingInput.value:0);
            stars.forEach(function(s,i){ s.style.color = i<cur?'#FFB300':'#ddd'; });
        });
    });

    // Submit review — reads ratingValue directly from DOM each time (no scope issue)
    document.addEventListener('DOMContentLoaded', function(){
        var sbtn = document.getElementById('submitReview');
        if(!sbtn) return;
        sbtn.addEventListener('click', function(){
            var btn        = this;
            var rating     = (document.getElementById('ratingValue') || {value:'0'}).value || '0';
            var reviewText = ((document.getElementById('reviewText') || {}).value || '').trim();
            var productId  = (document.getElementById('product_id') || {value:''}).value || '';
            var csrfMeta   = document.querySelector('meta[name="csrf-token"]');

            if(rating === '0' || !rating){
                crShowToast('Please Select A Star Rating.', 'error');
                var sw = document.getElementById('rmStars');
                if(sw){ sw.style.animation='none'; sw.offsetHeight; sw.style.animation='starShake 0.4s ease'; }
                return;
            }
            if(!reviewText){
                crShowToast('Please Write Your Review.', 'error');
                var ta = document.getElementById('reviewText'); if(ta) ta.focus();
                return;
            }
            if(!csrfMeta){ crShowToast('Page error. Please refresh.', 'error'); return; }

            btn.disabled = true;
            btn.innerHTML = '⏳ Submitting...';

            fetch('{{ route("reviews.submit") }}', {
                method : 'POST',
                headers: { 'Content-Type':'application/json','Accept':'application/json',
                    'X-CSRF-TOKEN':csrfMeta.getAttribute('content'),'X-Requested-With':'XMLHttpRequest' },
                body: JSON.stringify({ product_id:productId, rating:parseInt(rating), comment:reviewText,
                    is_shop:1, shop_id:{{ $shop->id }}, review_id:'{{ optional($userReview)->id ?? "" }}' })
            })
            .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
            .then(function(data){
                if(data.success){
                    btn.innerHTML = '✅ Posted!';
                    btn.style.background = 'linear-gradient(135deg,#00C853,#009624)';
                    crShowToast('Review Submitted! Thank You 🎉', 'success');
                    try{ bootstrap.Modal.getInstance(document.getElementById('reviewModal'))?.hide(); }catch(e){}
                    setTimeout(function(){ window.location.reload(); }, 1800);
                } else {
                    crShowToast(data.message || 'Something went wrong.', 'error');
                    btn.disabled=false; btn.innerHTML='⭐ Post Review'; btn.style.background='';
                }
            })
            .catch(function(err){
                console.error('Review error:',err);
                crShowToast('Network error. Please try again.', 'error');
                btn.disabled=false; btn.innerHTML='⭐ Post Review'; btn.style.background='';
            });
        });
    });
    
    // Check if we should open the review modal automatically
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('open_review') === 'true') {
        // Check if user is logged in
        @if(!Auth::check())
            // Redirect to login with return URL
            window.location.href = '{{ route("user.login") }}?redirect=' + encodeURIComponent(window.location.href);
        @else
            // Open the review modal
            setTimeout(function() {
                var _rm = new bootstrap.Modal(document.getElementById('reviewModal')); _rm.show();
            }, 1000);
        @endif
    }
</script>
<script>
            function crShowToast(msg, type) {
            var toast = document.getElementById('crToast');
            var icon  = document.getElementById('crToastIcon');
            var text  = document.getElementById('crToastMsg');
        
            text.textContent = msg;
        
            if(type === 'success') {
                toast.style.borderLeftColor = '#00C853';
                icon.textContent = '✅';
            } else if(type === 'error') {
                toast.style.borderLeftColor = '#c9736a';
                icon.textContent = '❌';
            } else {
                toast.style.borderLeftColor = '#FFB300';
                icon.textContent = 'ℹ️';
            }
        
            toast.style.transform = 'translateX(0)';
            clearTimeout(window._crToastTimer);
            window._crToastTimer = setTimeout(crHideToast, 3500);
        }
        
        function crHideToast() {
            document.getElementById('crToast').style.transform = 'translateX(120%)';
        }
</script>
<script>
// Spinner hide on map ready
function _hideMapLoader(){
    var loader = document.getElementById('mapLoading');
    if(loader){ loader.style.opacity='0'; setTimeout(function(){ loader.style.display='none'; },500); }
}
setTimeout(_hideMapLoader, 8000);
</script>
@endsection