@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-walking mr-2" style="color:#8b5cf6"></i>Tour Analytics</h3>
                    <p class="text-muted mb-0" style="font-size:13px">Wishlists, interest patterns & lead source ROI</p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li><a href="/admin/reports/overview" class="bc-link">Reports</a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">Tour Analytics</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- Inventory summary --}}
    <div class="container-fluid mb-3">
        <div class="row">
            @foreach([
                ['Total Inventory', $inventory['total'],     '#64748b','fa-home'],
                ['Available',       $inventory['available'], '#22c55e','fa-check-circle'],
                ['Booked/Sold',     $inventory['booked'],    '#ef4444','fa-lock'],
                ['Sell-Through',    $inventory['pct_sold'].'%', '#c9a96e','fa-percentage'],
            ] as [$label,$val,$color,$icon])
            <div class="col-md-3 col-sm-6 mb-3">
                <div class="card shadow-sm" style="border-left:4px solid {{ $color }}">
                    <div class="card-body py-3">
                        <div style="font-size:11px;text-transform:uppercase;color:#94a3b8">{{ $label }}</div>
                        <div style="font-size:24px;font-weight:800;color:{{ $color }}">{{ $val }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">

            {{-- Most wishlisted --}}
            <div class="col-lg-5 mb-3">
                <div class="card shadow-sm h-100" style="border-top:3px solid #ef4444">
                    <div class="card-header"><h6 class="mb-0">❤️ Most Wishlisted Units</h6></div>
                    <div class="card-body p-0">
                        @forelse($mostWishlisted as $i => $p)
                        @php
                            $price   = $p->offer_price ?: $p->actual_price;
                            $isAvail = strtolower($p->status) === 'available';
                        @endphp
                        <div style="display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #f1f5f9">
                            <div style="font-size:16px;width:28px;text-align:center;font-weight:800;color:#{{ ['c9a96e','94a3b8','cd7f32'][$i] ?? '64748b' }}">{{ $i+1 }}</div>
                            <div style="flex:1">
                                <div style="font-weight:700">Unit {{ $p->plot_number }}</div>
                                <div style="font-size:11px;color:#94a3b8">{{ $p->plot_type }} • {{ $currency }}{{ number_format($price,0) }}</div>
                            </div>
                            <div style="text-align:right">
                                <div style="font-weight:800;color:#ef4444">{{ $p->wishlist_count }} ❤️</div>
                                <span class="badge badge-{{ $isAvail?'success':'danger' }}" style="font-size:10px">{{ $p->status }}</span>
                            </div>
                        </div>
                        @empty
                        <div class="text-center py-4 text-muted">No wishlist data yet.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Lead source ROI --}}
            <div class="col-lg-7 mb-3">
                <div class="card shadow-sm h-100" style="border-top:3px solid #3b82f6">
                    <div class="card-header"><h6 class="mb-0">🎯 Lead Source ROI</h6></div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" style="font-size:13px">
                                <thead style="background:#f8f9fa">
                                    <tr><th>Source</th><th>Total Leads</th><th>Converted</th><th>Conv. Rate</th><th>Quality</th></tr>
                                </thead>
                                <tbody>
                                    @forelse($leadSources as $s)
                                    @php
                                        $quality = match(true) {
                                            $s->conversion_rate >= 30 => ['Excellent','success'],
                                            $s->conversion_rate >= 15 => ['Good','primary'],
                                            $s->conversion_rate >= 5  => ['Average','warning'],
                                            default                   => ['Low','danger'],
                                        };
                                    @endphp
                                    <tr>
                                        <td>
                                            <span style="font-size:16px">{{ $s->source_config['icon'] }}</span>
                                            <span style="font-weight:600;margin-left:6px">{{ $s->source_config['label'] }}</span>
                                        </td>
                                        <td>{{ $s->total }}</td>
                                        <td style="color:#22c55e;font-weight:700">{{ $s->converted }}</td>
                                        <td>
                                            <div style="display:flex;align-items:center;gap:6px">
                                                <div style="flex:1;height:6px;background:#f1f5f9;border-radius:3px;min-width:60px">
                                                    <div style="height:6px;background:#3b82f6;border-radius:3px;width:{{ min($s->conversion_rate,100) }}%"></div>
                                                </div>
                                                <span style="font-weight:700;min-width:35px">{{ $s->conversion_rate }}%</span>
                                            </div>
                                        </td>
                                        <td><span class="badge badge-{{ $quality[1] }}">{{ $quality[0] }}</span></td>
                                    </tr>
                                    @empty
                                    <tr><td colspan="5" class="text-center py-4 text-muted">No lead source data.</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Popular plot types --}}
            <div class="col-lg-5 mb-3">
                <div class="card shadow-sm" style="border-top:3px solid #c9a96e">
                    <div class="card-header"><h6 class="mb-0">🏠 Popular Plot Types</h6></div>
                    <div class="card-body"><canvas id="typeChart" height="200"></canvas></div>
                </div>
            </div>

            {{-- Lead source chart --}}
            <div class="col-lg-7 mb-3">
                <div class="card shadow-sm" style="border-top:3px solid #8b5cf6">
                    <div class="card-header"><h6 class="mb-0">📊 Lead Volume by Source</h6></div>
                    <div class="card-body"><canvas id="sourceChart" height="180"></canvas></div>
                </div>
            </div>

        </div>
    </div>

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

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
const ptypes = @json($popularTypes);
new Chart(document.getElementById('typeChart'), {
    type: 'doughnut',
    data: {
        labels: ptypes.map(t=>t.plot_type),
        datasets: [{ data: ptypes.map(t=>t.bookings), backgroundColor:['#c9a96e','#3b82f6','#22c55e','#8b5cf6','#f59e0b','#ef4444'] }]
    },
    options: { responsive:true, plugins:{ legend:{ position:'bottom', labels:{ font:{size:11} } } } }
});

const sources = @json($leadSources);
new Chart(document.getElementById('sourceChart'), {
    type: 'bar',
    data: {
        labels: sources.map(s=>s.source_config.label),
        datasets: [
            { label:'Total',     data: sources.map(s=>s.total),     backgroundColor:'#3b82f655', borderColor:'#3b82f6', borderWidth:2, borderRadius:4 },
            { label:'Converted', data: sources.map(s=>s.converted), backgroundColor:'#22c55e88', borderColor:'#22c55e', borderWidth:2, borderRadius:4 },
        ]
    },
    options: { responsive:true, plugins:{ legend:{ position:'bottom' } }, scales:{ y:{ ticks:{ stepSize:1 } } } }
});
</script>

@include('Partials.footer')