@extends('seller.layouts.app')
@section('panel_content')
<style>
:root {
    --primary: #3c6bff;
    --primary-light: #eef2ff;
    --success: #27ae60;
    --success-light: #d4f5e9;
    --warning: #d97706;
    --warning-light: #fff3cd;
    --danger: #e74c3c;
    --danger-light: #fde8e8;
    --orange: #e8650f;
    --orange-light: #fff0e8;
    --wa: #25D366;
    --wa-light: #e8f8f0;
    --text: #1a1a2e;
    --text-muted: #888;
    --border: #f0f0f0;
    --bg: #f5f7fb;
    --card: #fff;
    --radius: 14px;
}
* { box-sizing: border-box; }
body { background: var(--bg); }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px; }
@media(max-width:768px){ .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:480px){ .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    border: 1px solid var(--border);
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.07); }
.stat-num { font-size: 26px; font-weight: 800; line-height: 1; }
.stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }

/* Header */
.page-header {
    background: var(--card);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.page-title { font-size: 16px; font-weight: 800; color: var(--text); margin: 0; }

/* Filter tabs */
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.ftab {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: #f0f2f5;
    color: #555;
    transition: all .2s;
}
.ftab:hover { background: #e0e0e0; }
.ftab.active { background: var(--orange); color: #fff; }

/* Cards */
.inq-card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow .2s, transform .15s;
    position: relative;
}
.inq-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.08); transform: translateY(-1px); }
.inq-card.is-new { border-left: 4px solid var(--primary); }
.inq-card.is-closed { border-left: 4px solid var(--success); opacity: .9; }
.inq-card.is-quoted { border-left: 4px solid var(--warning); }

.card-header-row {
    padding: 16px 18px 12px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.avatar {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800;
    flex-shrink: 0;
    position: relative;
}
.avatar.unread { background: var(--primary-light); color: var(--primary); }
.avatar.read { background: #f5f5f5; color: #aaa; }
.unread-dot {
    position: absolute; top: -2px; right: -2px;
    width: 11px; height: 11px;
    background: var(--primary); border-radius: 50%;
    border: 2px solid #fff;
}

.buyer-name { font-weight: 700; font-size: 15px; color: var(--text); }
.buyer-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.b-new { background: #e9ecef; color: #495057; }
.b-called { background: #d1ecf1; color: #0c5460; }
.b-quoted { background: var(--warning-light); color: var(--warning); }
.b-interested { background: var(--success-light); color: #155724; }
.b-followup { background: #ede7f6; color: #6f42c1; }
.b-not_interested { background: var(--danger-light); color: #721c24; }
.b-completed { background: var(--success-light); color: #0d6e3f; }
.b-hot { background: #ffe0e0; color: #c0392b; }
.b-warm { background: #fff0e0; color: #d35400; }
.b-cold { background: #e0f0ff; color: #2980b9; }

/* Pills */
.cat-pill { background: var(--primary-light); color: var(--primary); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.dist-pill { background: #e8f4fd; color: #1e90ff; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.score-pill { padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; }

/* Quote card */
.quote-section {
    margin: 0 18px 14px;
    background: linear-gradient(135deg, #fff8e7, #fff3cd);
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: 12px;
    padding: 14px 16px;
}
.quote-amount { font-size: 28px; font-weight: 800; color: var(--text); }
.quote-accepted-badge {
    background: var(--success-light);
    color: #0d6e3f;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin-top: 8px;
}

/* Actions row */
.actions-row {
    padding: 12px 18px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.btn-action {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 13px;
    border-radius: 9px;
    font-size: 12px; font-weight: 600;
    border: none; cursor: pointer;
    text-decoration: none;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
}
.btn-action:hover { opacity: .85; transform: translateY(-1px); text-decoration: none; }
.btn-call { background: #e8faf1; color: #27ae60; border: 1px solid #a3e4bc; }
.btn-wa { background: var(--wa-light); color: var(--wa); border: 1px solid #a3dfc0; }
.btn-chat { background: var(--primary-light); color: var(--primary); border: 1px solid #c0d0ff; }
.btn-dir { background: var(--orange-light); color: var(--orange); border: 1px solid #ffd0b0; }
.btn-quote { background: var(--warning-light); color: var(--warning); border: 1px solid #fde68a; }
.btn-note { background: var(--primary-light); color: var(--primary); border: 1px solid #c0d0ff; }
.btn-tpl { background: var(--wa-light); color: var(--wa); border: 1px solid #a3dfc0; }
.btn-priority { background: #ffe0e0; color: #c0392b; border: 1px solid #ffb3b3; }
.btn-close-inq { background: #f5f5f5; color: #555; border: 1px solid #ddd; }

/* Status select */
.status-select {
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: 6px 10px;
    font-size: 12px; font-weight: 600;
    color: var(--text);
    cursor: pointer; outline: none;
    background: #fff;
    transition: border-color .2s;
}
.status-select:focus { border-color: var(--primary); }

/* Notes preview */
.note-preview {
    font-size: 11px; color: var(--primary);
    background: var(--primary-light);
    padding: 4px 10px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer; max-width: 200px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Closed overlay */
.closed-banner {
    margin: 0 18px 14px;
    background: var(--success-light);
    border: 1px solid rgba(39,174,96,0.25);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; color: #0d6e3f; font-size: 13px;
}

/* Nearby */
.nearby-section {
    margin: 0 18px 14px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 14px;
}
.nearby-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #efefef;
}
.nearby-item:last-child { border-bottom: none; }

/* Search input */
.search-inp {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
    width: 220px;
}
.search-inp:focus { border-color: var(--primary); }

/* Modal */
.bm-modal {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    align-items: center; justify-content: center;
}
.bm-modal.show { display: flex; }
.bm-modal-box {
    background: #fff;
    border-radius: 20px;
    padding: 26px;
    width: 90%; max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: slideUp .25s ease;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.bm-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.bm-close { background: none; border: none; font-size: 22px; cursor: pointer; color: #aaa; line-height: 1; }
.bm-input {
    width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
    padding: 11px 14px; font-size: 13px; outline: none; transition: border-color .2s;
    font-family: inherit;
}
.bm-input:focus { border-color: var(--primary); }
.bm-btn {
    width: 100%; padding: 13px; border-radius: 12px; border: none;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s;
    margin-top: 14px;
}
.bm-btn:hover { opacity: .88; }
.bm-btn-primary { background: var(--primary); color: #fff; }
.bm-btn-wa { background: var(--wa); color: #fff; }
.bm-btn-orange { background: var(--orange); color: #fff; }

/* Toast */
.bm-toast {
    display: none; position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%);
    padding: 12px 22px; border-radius: 12px;
    font-size: 13px; font-weight: 600; color: #fff;
    z-index: 99999; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    min-width: 200px; text-align: center;
}

/* Priority badge */
.priority-badge { font-size: 14px; cursor: pointer; }

/* Lead score */
.lead-score {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    font-size: 12px; font-weight: 800;
}

@media(max-width:576px) {
    .btn-action { padding: 6px 10px; font-size: 11px; }
    .search-inp { width: 160px; }
}
</style>

@php
    $total      = $inquiries->count();
    $newCount   = $inquiries->where('IsRead',0)->count();
    $quotedCount= $inquiries->whereNotNull('quoted_amount')->count();
    $interested = $inquiries->where('lead_status','interested')->count();
    $called     = $inquiries->where('lead_status','called')->count();
    $completed  = $inquiries->where('lead_status','completed')->count();
    $closed     = $inquiries->where('is_closed',1)->count();
    $convRate   = $total > 0 ? round(($completed/$total)*100) : 0;
@endphp

{{-- Stats --}}
<div class="stat-grid">
    <div class="stat-card">
        <div class="stat-num" style="color:var(--primary)">{{ $total }}</div>
        <div class="stat-label">Total</div>
    </div>
    <div class="stat-card">
        <div class="stat-num" style="color:var(--danger)">{{ $newCount }}</div>
        <div class="stat-label">Unread</div>
    </div>
    <div class="stat-card">
        <div class="stat-num" style="color:#1e90ff">{{ $called }}</div>
        <div class="stat-label">Called</div>
    </div>
    <div class="stat-card">
        <div class="stat-num" style="color:var(--warning)">{{ $quotedCount }}</div>
        <div class="stat-label">Quoted</div>
    </div>
    <div class="stat-card">
        <div class="stat-num" style="color:var(--success)">{{ $interested }}</div>
        <div class="stat-label">Interested</div>
    </div>
    <div class="stat-card">
        <div class="stat-num" style="color:#0d6e3f">{{ $convRate }}%</div>
        <div class="stat-label">Conv%</div>
    </div>
</div>

{{-- Header --}}
<div class="page-header">
    <h5 class="page-title">📋 Customer Inquiries</h5>
    <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
        <input type="text" id="searchInput" class="search-inp" placeholder="🔍 Search name / phone..." oninput="filterCards()">
        <select id="filterStatus" class="status-select" onchange="filterCards()">
            <option value="">All Status</option>
            <option value="new">🆕 New</option>
            <option value="called">📞 Called</option>
            <option value="quoted">💰 Quoted</option>
            <option value="interested">✅ Interested</option>
            <option value="followup">🔄 Follow Up</option>
            <option value="not_interested">❌ Not Interested</option>
            <option value="completed">🎉 Completed</option>
            <option value="closed">🔒 Closed</option>
        </select>
    </div>
</div>

{{-- Filter Tabs --}}
<div class="filter-tabs">
    <button class="ftab active" onclick="setTab(this,'')">📋 All ({{ $total }})</button>
    <button class="ftab" onclick="setTab(this,'new')">🆕 New ({{ $inquiries->whereIn('lead_status',['new',null,''])->where('is_closed',0)->count() }})</button>
    <button class="ftab" onclick="setTab(this,'called')">📞 Called ({{ $called }})</button>
    <button class="ftab" onclick="setTab(this,'quoted')">💰 Quoted ({{ $quotedCount }})</button>
    <button class="ftab" onclick="setTab(this,'interested')">✅ Interested ({{ $interested }})</button>
    <button class="ftab" onclick="setTab(this,'completed')">🎉 Done ({{ $completed }})</button>
    <button class="ftab" onclick="setTab(this,'closed')">🔒 Closed ({{ $closed }})</button>
</div>

@if($inquiries->count() > 0)
@php $sellerLat = Auth::user()->latitude ?? 0; $sellerLng = Auth::user()->longitude ?? 0; @endphp
<div id="cardsContainer">
@foreach($inquiries->sortByDesc('created_at') as $key => $inq)
@php
    $isNew    = $inq->IsRead == 0;
    $isClosed = $inq->is_closed ?? false;
    $status   = $inq->lead_status ?? 'new';
    $dist     = null;
    if($inq->latitude && $inq->longitude && $sellerLat && $sellerLng) {
        $dLat = deg2rad($inq->latitude - $sellerLat);
        $dLon = deg2rad($inq->longitude - $sellerLng);
        $a    = sin($dLat/2)*sin($dLat/2) + cos(deg2rad($sellerLat))*cos(deg2rad($inq->latitude))*sin($dLon/2)*sin($dLon/2);
        $dist = round(6371 * 2 * atan2(sqrt($a), sqrt(1-$a)), 1);
    }
    $phone      = $inq->buyer_phone ?? '';
    $cleanPhone = preg_replace('/\D/','',$phone);
    $mapsUrl    = ($inq->latitude && $inq->longitude)
        ? 'https://www.google.com/maps/dir/?api=1&destination='.$inq->latitude.','.$inq->longitude
        : null;
    $hasQuote   = !empty($inq->quoted_amount);
    $quoteAccepted = ($inq->quote_status ?? '') == 'accepted';
    $note = \DB::table('inquiry_notes')->where('inquiry_id',$inq->id)->where('seller_id',Auth::id())->value('note') ?? '';

    // Lead score
    $score = 10;
    if($status=='interested') $score=60;
    elseif($status=='quoted') $score=45;
    elseif($status=='called') $score=25;
    if($hasQuote) $score+=20;
    $score = min(100,$score);
    $scoreColor = $score>=70 ? '#27ae60' : ($score>=40 ? '#d97706' : '#6c757d');

    // Nearby sellers
    $nearbySellers = collect();
    if($inq->category_id) {
        $cid = $inq->category_id;
        $buyLat = $inq->latitude ?? 0; $buyLng = $inq->longitude ?? 0;
        $nearbySellers = \App\Models\Shop::with('user')
            ->where('user_id','!=',Auth::id())
            ->where(function($q) use ($cid){
                $q->where('sub_cat_ids',$cid)
                  ->orWhere('sub_cat_ids','LIKE',$cid.',%')
                  ->orWhere('sub_cat_ids','LIKE','%,'.$cid)
                  ->orWhere('sub_cat_ids','LIKE','%,'.$cid.',%');
            })
            ->limit(8)->get()
            ->map(function($s) use ($buyLat,$buyLng){
                $d = ($buyLat&&$buyLng&&$s->user&&$s->user->latitude) ? round((float)getDistance($s->user->latitude,$s->user->longitude,$buyLat,$buyLng),1) : null;
                $s->cd = $d; return $s;
            })->sortBy(fn($s)=>$s->cd??99999)->take(3);
    }
@endphp

<div class="inq-card {{ $isNew&&!$isClosed?'is-new':'' }} {{ $isClosed?'is-closed':'' }} {{ $hasQuote&&!$isClosed?'is-quoted':'' }}"
     data-status="{{ $isClosed?'closed':$status }}"
     data-search="{{ strtolower(($inq->buyer_name??'').' '.($phone??'')) }}">

    {{-- Header --}}
    <div class="card-header-row">
        <div class="avatar {{ $isNew?'unread':'read' }}">
            {{ strtoupper(substr($inq->buyer_name??'?',0,1)) }}
            @if($isNew&&!$isClosed)<div class="unread-dot"></div>@endif
        </div>
        <div style="flex:1;min-width:0">
            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px">
                <span class="buyer-name">{{ $inq->buyer_name ?: 'Guest' }}</span>
                <span class="badge b-{{ $isClosed?'completed':$status }}">
                    @if($isClosed) 🎉 Completed
                    @elseif($status=='new') 🆕 New
                    @elseif($status=='called') 📞 Called
                    @elseif($status=='quoted') 💰 Quoted
                    @elseif($status=='interested') ✅ Interested
                    @elseif($status=='followup') 🔄 Follow Up
                    @elseif($status=='not_interested') ❌ Not Int.
                    @elseif($status=='completed') 🎉 Completed
                    @else 🆕 New @endif
                </span>
            </div>
            <div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px">
                @if($inq->category)
                <span class="cat-pill">{{ $inq->category->name }}</span>
                @endif
                @if($inq->product_name)
                <span style="font-size:11px;color:var(--text-muted)">{{ Str::limit($inq->product_name,30) }}</span>
                @endif
            </div>
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
                @if($phone)<span style="font-size:12px;color:var(--text-muted)">📞 {{ $phone }}</span>@endif
                @if($inq->city)<span style="font-size:12px;color:var(--text-muted)">📍 {{ $inq->city }}</span>@endif
                @if($dist!==null)<span class="dist-pill">{{ $dist }} km</span>@endif
                <span style="font-size:11px;color:#bbb">{{ $inq->created_at->diffForHumans() }}</span>
            </div>
            {{-- Note preview --}}
            @if($note)
            <div style="margin-top:6px">
                <span class="note-preview" onclick="openNoteModal({{ $inq->id }},'{{ addslashes($note) }}')">
                    📝 {{ Str::limit($note,40) }}
                </span>
            </div>
            @endif
        </div>
        {{-- Priority --}}
        <div style="display:flex;flex-direction:column;align-items:center;gap:4px">
            <span class="priority-badge" onclick="cyclePriority(this,{{ $inq->id }})" data-val="none" title="Set Priority">⬜</span>
        </div>
    </div>

    {{-- Quote Section --}}
    @if($hasQuote)
    <div class="quote-section">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
            <span style="font-weight:700;color:var(--warning);font-size:13px">💰 Quote Sent</span>
            @if($inq->quote_note)<span style="font-size:11px;color:#92400e">{{ Str::limit($inq->quote_note,30) }}</span>@endif
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <span class="quote-amount">₹{{ number_format($inq->quoted_amount) }}</span>
            @if($quoteAccepted)
                <span class="quote-accepted-badge">✅ Quote Accepted!</span>
            @else
                <span style="font-size:11px;color:var(--warning);background:var(--warning-light);padding:4px 10px;border-radius:8px;font-weight:600">⏳ Awaiting</span>
            @endif
        </div>
    </div>
    @endif

    {{-- Closed Banner --}}
    @if($isClosed)
    <div class="closed-banner">
        <span style="font-size:24px">🎉</span>
        <div>
            <div>Requirement Completed!</div>
            <div style="font-size:11px;font-weight:400;color:#27ae60;margin-top:2px">This enquiry has been closed by the customer</div>
        </div>
    </div>
    @endif



    {{-- Actions --}}
    <div class="actions-row">
        @if(!$isClosed)
        {{-- Status --}}
        <select class="status-select" data-id="{{ $inq->id }}" onchange="updateStatus(this)">
            <option value="new"            {{ $status=='new'?'selected':'' }}>🆕 New</option>
            <option value="called"         {{ $status=='called'?'selected':'' }}>📞 Called</option>
            <option value="quoted"         {{ $status=='quoted'?'selected':'' }}>💰 Quoted</option>
            <option value="interested"     {{ $status=='interested'?'selected':'' }}>✅ Interested</option>
            <option value="followup"       {{ $status=='followup'?'selected':'' }}>🔄 Follow Up</option>
            <option value="not_interested" {{ $status=='not_interested'?'selected':'' }}>❌ Not Int.</option>
            <option value="completed"      {{ $status=='completed'?'selected':'' }}>🎉 Completed</option>
        </select>
        <div style="display:flex;gap:6px;flex-wrap:wrap;flex:1">
            @if($phone)
            <a href="tel:{{ $phone }}" class="btn-action btn-call">📞 Call</a>
            <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode('Hello '.($inq->buyer_name??'there').', regarding your enquiry on BestMart.') }}" target="_blank" class="btn-action btn-wa">💬 WA</a>
            @endif
            @if($inq->buyer_id)
            <a href="{{ route('seller.conversations.index') }}?start_with={{ $inq->buyer_id }}" class="btn-action btn-chat">💬 Chat</a>
            @endif
            @if($mapsUrl)
            <a href="{{ $mapsUrl }}" target="_blank" class="btn-action btn-dir">🗺️ Dir</a>
            @endif
            <button class="btn-action btn-quote" onclick="openQuoteModal({{ $inq->id }},'{{ addslashes($inq->buyer_name??'') }}','{{ $phone }}','{{ $inq->subCategoryInfo->subCategoryName??($inq->product_name??'') }}','{{ $inq->quoted_amount??'' }}')">
                💰 Quote
            </button>
            <button class="btn-action btn-note" onclick="openNoteModal({{ $inq->id }},'{{ addslashes($note) }}')">
                📝 Note{{ $note?'✓':'' }}
            </button>
            <button class="btn-action btn-tpl" onclick="openTemplatesModal('{{ $cleanPhone }}','{{ addslashes($inq->buyer_name??'') }}')">
                ⚡ Templates
            </button>
        </div>
        @else
        <span style="color:#0d6e3f;font-weight:600;font-size:13px">🔒 Enquiry Closed</span>
        @endif
    </div>
</div>
@endforeach
</div>
@else
<div style="text-align:center;padding:80px 20px;background:#fff;border-radius:var(--radius);border:1px solid var(--border)">
    <div style="font-size:56px;margin-bottom:16px">📭</div>
    <h5 style="color:#888;font-weight:700">No inquiries yet</h5>
    <p style="color:#aaa;font-size:13px">When customers send enquiries, they will appear here.</p>
</div>
@endif

{{-- Quote Modal --}}
<div class="bm-modal" id="quoteModal">
    <div class="bm-modal-box" style="max-width:500px">
        <div class="bm-modal-title">
            <span>💰 Send Quotation</span>
            <button class="bm-close" onclick="closeModal('quoteModal')">×</button>
        </div>
        <div id="quoteCustomerInfo" style="background:#f8f9fa;border-radius:10px;padding:12px;margin-bottom:14px;font-size:13px"></div>
        <div id="quoteItems"></div>
        <button onclick="addQuoteItem()" style="width:100%;padding:9px;border-radius:9px;border:1.5px dashed var(--primary);background:none;color:var(--primary);font-weight:600;font-size:13px;cursor:pointer;margin-bottom:12px">+ Add Item</button>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px">
            <div>
                <label style="font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:4px">GST %</label>
                <input type="number" id="quoteGst" class="bm-input" value="0" oninput="calcTotal()" style="padding:9px 12px">
            </div>
            <div>
                <label style="font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:4px">Total</label>
                <div id="quoteTotal" style="font-size:22px;font-weight:800;color:var(--text);padding:6px 0">₹0</div>
            </div>
        </div>
        <textarea id="quoteNote" class="bm-input" rows="2" placeholder="Note (optional)..." style="margin-bottom:12px"></textarea>
        <button class="bm-btn bm-btn-wa" onclick="sendQuoteWA()">💬 Send via WhatsApp</button>
    </div>
</div>

{{-- Note Modal --}}
<div class="bm-modal" id="noteModal">
    <div class="bm-modal-box">
        <div class="bm-modal-title">
            <span>📝 Private Note</span>
            <button class="bm-close" onclick="closeModal('noteModal')">×</button>
        </div>
        <p style="font-size:12px;color:#888;margin-bottom:12px">Only visible to you</p>
        <textarea id="noteText" class="bm-input" rows="5" placeholder="Add notes about this lead...&#10;(e.g. Budget 5000, prefers morning calls)"></textarea>
        <button class="bm-btn bm-btn-primary" onclick="saveNote()">Save Note</button>
    </div>
</div>

{{-- Templates Modal --}}
<div class="bm-modal" id="templatesModal">
    <div class="bm-modal-box">
        <div class="bm-modal-title">
            <span>⚡ Quick Reply Templates</span>
            <button class="bm-close" onclick="closeModal('templatesModal')">×</button>
        </div>
        <div id="templatesList"></div>
    </div>
</div>

{{-- Toast --}}
<div class="bm-toast" id="toast"></div>

@endsection
@section('script')
<script>
// ── State ──
var currentInquiryId = null;
var currentPhone = '';
var currentBuyerName = '';
var quoteItemCount = 0;

// ── Filter ──
function setTab(el, status) {
    document.querySelectorAll('.ftab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
    document.getElementById('filterStatus').value = status;
    filterCards();
}
function filterCards() {
    var status = document.getElementById('filterStatus').value;
    var search = document.getElementById('searchInput').value.toLowerCase();
    document.querySelectorAll('.inq-card').forEach(function(c) {
        var ms = !status || c.getAttribute('data-status') === status;
        var mq = !search || (c.getAttribute('data-search')||'').includes(search);
        c.style.display = (ms && mq) ? '' : 'none';
    });
}

// ── Status Update ──
function updateStatus(el) {
    var id = el.getAttribute('data-id');
    $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url: '/seller/inquiry-status/' + id,
        type: 'POST',
        data: {status: el.value},
        success: function(r) {
            if(r.success) showToast('✅ Status updated!', 'success');
            else showToast('❌ Failed', 'error');
        },
        error: function(){ showToast('❌ Update failed', 'error'); }
    });
}

// ── Modal helpers ──
function closeModal(id) { document.getElementById(id).classList.remove('show'); }
document.querySelectorAll('.bm-modal').forEach(function(m) {
    m.addEventListener('click', function(e) { if(e.target === this) this.classList.remove('show'); });
});

// ── Quote Modal ──
function openQuoteModal(inquiryId, buyerName, phone, service, existingAmt) {
    currentInquiryId = inquiryId;
    currentPhone     = phone;
    currentBuyerName = buyerName;
    document.getElementById('quoteCustomerInfo').innerHTML = '👤 <strong>' + buyerName + '</strong> &nbsp; 📞 ' + phone;
    document.getElementById('quoteNote').value = '';
    document.getElementById('quoteGst').value = '0';
    quoteItemCount = 0;
    document.getElementById('quoteItems').innerHTML = '';
    addQuoteItem(service || '', existingAmt || '');
    calcTotal();
    document.getElementById('quoteModal').classList.add('show');
}

function addQuoteItem(service, price) {
    quoteItemCount++;
    var i = quoteItemCount;
    var html = '<div id="qitem'+i+'" style="background:#f8f9fa;border-radius:10px;padding:12px;margin-bottom:10px">' +
        '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">' +
        '<span style="font-size:12px;font-weight:700;color:var(--primary)">Item '+i+'</span>' +
        (i>1?'<button onclick="removeQuoteItem('+i+')" style="border:none;background:none;color:#e74c3c;cursor:pointer;font-size:18px">×</button>':'') +
        '</div>' +
        '<input class="bm-input" placeholder="Service / Product name..." value="'+(service||'')+'" style="margin-bottom:8px;padding:9px 12px" id="qsvc'+i+'">' +
        '<div style="display:grid;grid-template-columns:1fr 2fr;gap:8px">' +
        '<input class="bm-input" type="number" placeholder="Qty" value="1" id="qqty'+i+'" oninput="calcTotal()" style="padding:9px 12px">' +
        '<input class="bm-input" type="number" placeholder="Price (₹)" value="'+(price||'')+'" id="qprice'+i+'" oninput="calcTotal()" style="padding:9px 12px">' +
        '</div></div>';
    document.getElementById('quoteItems').insertAdjacentHTML('beforeend', html);
    calcTotal();
}

function removeQuoteItem(i) {
    var el = document.getElementById('qitem'+i);
    if(el) { el.remove(); calcTotal(); }
}

function calcTotal() {
    var subtotal = 0;
    for(var i=1; i<=quoteItemCount; i++) {
        var qEl = document.getElementById('qqty'+i);
        var pEl = document.getElementById('qprice'+i);
        if(qEl && pEl) {
            subtotal += (parseFloat(qEl.value)||1) * (parseFloat(pEl.value)||0);
        }
    }
    var gst = parseFloat(document.getElementById('quoteGst').value)||0;
    var total = subtotal + subtotal*gst/100;
    document.getElementById('quoteTotal').textContent = '₹' + Math.round(total).toLocaleString();
    return {subtotal, gst, total: Math.round(total)};
}

function sendQuoteWA() {
    var t = calcTotal();
    var note = document.getElementById('quoteNote').value;
    var items = '';
    for(var i=1; i<=quoteItemCount; i++) {
        var svcEl = document.getElementById('qsvc'+i);
        var qtyEl = document.getElementById('qqty'+i);
        var prcEl = document.getElementById('qprice'+i);
        if(svcEl && prcEl && parseFloat(prcEl.value) > 0) {
            var qty = parseFloat(qtyEl.value)||1;
            var prc = parseFloat(prcEl.value)||0;
            items += '  - ' + svcEl.value + ' x' + qty + ' = ₹' + Math.round(qty*prc) + '\n';
        }
    }
    var msg = 'Dear ' + currentBuyerName + ',\n\nThank you for your enquiry!\n\nQUOTATION\n================\n' + items;
    if(t.gst > 0) msg += 'GST (' + t.gst + '%): ₹' + Math.round(t.subtotal*t.gst/100) + '\n';
    msg += '----------------\nTotal: ₹' + t.total + '\n';
    if(note) msg += '\nNote: ' + note + '\n';
    msg += '================\nbestmart.in';

    // Save to DB
    var firstPrice = 0;
    for(var j=1;j<=quoteItemCount;j++){var pEl=document.getElementById('qprice'+j);if(pEl&&parseFloat(pEl.value)>0){firstPrice=t.total;break;}}
    $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url: '/api/v2/inquiry-add-quote',
        type: 'POST',
        data: {enquiry_id: currentInquiryId, amount: t.total, note: note},
        success: function(r){ if(r.success) showToast('✅ Quote saved!', 'success'); }
    });

    var cp = currentPhone.replace(/\D/g,'');
    if(!cp.startsWith('91')) cp = '91' + cp;
    window.open('https://wa.me/' + cp + '?text=' + encodeURIComponent(msg), '_blank');
    closeModal('quoteModal');
}

// ── Note Modal ──
function openNoteModal(inquiryId, existingNote) {
    currentInquiryId = inquiryId;
    document.getElementById('noteText').value = existingNote || '';
    document.getElementById('noteModal').classList.add('show');
}

function saveNote() {
    var note = document.getElementById('noteText').value;
    $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url: '/api/v2/inquiry-save-note',
        type: 'POST',
        data: {inquiry_id: currentInquiryId, seller_id: {{ Auth::id() }}, note: note},
        success: function(r) {
            if(r.success) {
                showToast('✅ Note saved!', 'success');
                closeModal('noteModal');
                setTimeout(()=>location.reload(), 800);
            }
        },
        error: function(){ showToast('❌ Failed', 'error'); }
    });
}

// ── Templates Modal ──
var templates = [
    {title: 'Greeting', msg: 'Hi! Thank you for your enquiry on BestMart. I will get back to you shortly.'},
    {title: 'Quote Ready', msg: 'Hi! Your quotation is ready. Please check the quote I sent. Let me know if you have any questions.'},
    {title: 'Follow Up', msg: 'Hi! Just following up on your enquiry. Are you still interested? I can offer you a special discount.'},
    {title: 'Appointment', msg: 'Hi! Can we schedule a call to discuss your requirements in detail?'},
    {title: 'Thank You', msg: 'Thank you for choosing our services! We look forward to serving you. - BestMart.in'},
];

function openTemplatesModal(phone, buyerName) {
    currentPhone = phone;
    currentBuyerName = buyerName;
    var html = '';
    templates.forEach(function(t) {
        html += '<div style="display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #f0f0f0;border-radius:10px;margin-bottom:8px;cursor:pointer" onclick="sendTemplate(\'' + encodeURIComponent(t.msg) + '\')">' +
            '<div style="width:40px;height:40px;background:var(--wa-light);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px">💬</div>' +
            '<div style="flex:1;min-width:0"><div style="font-weight:600;font-size:13px">' + t.title + '</div>' +
            '<div style="font-size:11px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + t.msg + '</div></div>' +
            '<span style="color:var(--wa);font-size:18px">→</span>' +
            '</div>';
    });
    document.getElementById('templatesList').innerHTML = html;
    document.getElementById('templatesModal').classList.add('show');
}

function sendTemplate(encodedMsg) {
    var msg = decodeURIComponent(encodedMsg);
    var cp = currentPhone.replace(/\D/g,'');
    if(!cp.startsWith('91')) cp = '91' + cp;
    window.open('https://wa.me/' + cp + '?text=' + encodeURIComponent(msg), '_blank');
    closeModal('templatesModal');
}

// ── Priority ──
var priorityStates = ['none','hot','warm','cold'];
var priorityEmojis = {none:'⬜',hot:'🔥',warm:'🌡️',cold:'❄️'};

function cyclePriority(el, inquiryId) {
    var cur = el.getAttribute('data-val');
    var idx = priorityStates.indexOf(cur);
    var next = priorityStates[(idx+1) % priorityStates.length];
    el.setAttribute('data-val', next);
    el.textContent = priorityEmojis[next];
    showToast('Priority: ' + next, 'success');
}

// ── Toast ──
function showToast(msg, type) {
    var t = document.getElementById('toast');
    t.textContent = msg;
    t.style.background = type === 'success' ? '#27ae60' : '#e74c3c';
    t.style.display = 'block';
    setTimeout(function(){ t.style.display = 'none'; }, 3000);
}
</script>
@endsection