@extends('backEnd.layouts.master')
@section('title', 'Customers in Map')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
<style>
.cm-map-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
#customerMap { height: 420px; width: 100%; z-index: 1; }
.cm-stat-card {
    border-radius: 4px;
    color: #fff;
    padding: 18px 20px;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cm-stat-card .label { font-size: 12px; font-weight: 700; letter-spacing: .04em; opacity: .95; }
.cm-stat-card .value { font-size: 28px; font-weight: 800; line-height: 1; margin-top: 6px; }
.cm-stat-card .icon { font-size: 34px; opacity: .85; }
.cm-stat-blue   { background: #2563eb; }
.cm-stat-green  { background: #16a34a; }
.cm-stat-teal   { background: #0d9488; }
.cm-stat-yellow { background: #ca8a04; }
.cm-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}
.cm-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
.cm-table thead th {
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
    padding: 12px 14px;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}
.cm-table tbody td {
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 14px;
    vertical-align: middle;
}
.cm-table tbody tr:nth-child(even) { background: #f9fafb; }
.cm-loc-name { font-weight: 600; color: #111827; }
.cm-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
.cm-badge-blue   { background: #dbeafe; color: #1d4ed8; }
.cm-badge-red    { background: #fee2e2; color: #b91c1c; }
.cm-badge-green  { background: #dcfce7; color: #15803d; }
.cm-search-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 12px 14px;
}
.cm-search-wrap .form-control:focus {
    box-shadow: none;
    border-color: #16a34a;
}
.cm-search-meta { font-size: 12px; color: #6b7280; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-0">Customers in Map</h4>
            <small class="text-muted">Customer Management — location wise customer overview</small>
        </div>
        <a href="{{ route('admin.customers.index') }}" class="btn btn-success btn-sm">
            <i class="fas fa-users me-1"></i> My Customers
        </a>
    </div>

    <div class="cm-search-wrap mb-3 d-flex flex-wrap align-items-center gap-2">
        <div class="input-group input-group-sm" style="max-width:420px; flex:1 1 260px">
            <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
            <input type="text" id="cmLocationSearch" class="form-control"
                   placeholder="Search district, upazila or location..."
                   autocomplete="off">
            <button type="button" class="btn btn-outline-secondary d-none" id="cmSearchClear">Clear</button>
        </div>
        <span class="cm-search-meta" id="cmSearchMeta">
            Showing {{ number_format($totalLocations) }} location{{ $totalLocations === 1 ? '' : 's' }}
        </span>
    </div>

    <div class="cm-map-wrap mb-3">
        <div id="customerMap"></div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-3 col-sm-6">
            <div class="cm-stat-card cm-stat-blue">
                <div>
                    <div class="label">TOTAL LOCATIONS</div>
                    <div class="value" id="cmStatLocations">{{ number_format($totalLocations) }}</div>
                </div>
                <i class="fas fa-map-marker-alt icon"></i>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="cm-stat-card cm-stat-green">
                <div>
                    <div class="label">TOTAL CUSTOMERS</div>
                    <div class="value" id="cmStatCustomers">{{ number_format($totalCustomers) }}</div>
                </div>
                <i class="fas fa-users icon"></i>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="cm-stat-card cm-stat-teal">
                <div>
                    <div class="label">AVG SCORE</div>
                    <div class="value" id="cmStatScore">{{ $avgScore }}%</div>
                </div>
                <i class="fas fa-star icon"></i>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="cm-stat-card cm-stat-yellow">
                <div>
                    <div class="label">TOTAL SUCCESS</div>
                    <div class="value" id="cmStatSuccess">{{ number_format($totalSuccess) }}</div>
                </div>
                <i class="fas fa-check-circle icon"></i>
            </div>
        </div>
    </div>

    <div class="cm-panel">
        <div class="px-3 py-2 border-bottom bg-light">
            <h6 class="mb-0 fw-bold">Location wise Customer Details</h6>
        </div>
        <div class="table-responsive">
            <table class="cm-table">
                <thead>
                    <tr>
                        <th>Location</th>
                        <th class="text-center">Customer Count</th>
                        <th class="text-center">Average Score</th>
                        <th class="text-center">Total Success</th>
                        <th class="text-center">Total Cancel</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody id="cmLocationRows">
                    @forelse($rows as $row)
                    <tr data-search="{{ strtolower($row['location'] . ' ' . $row['district'] . ' ' . ($row['upazila'] ?? '')) }}"
                        data-lat="{{ $row['lat'] }}"
                        data-lng="{{ $row['lng'] }}"
                        data-customers="{{ $row['customer_count'] }}"
                        data-success="{{ $row['total_success'] }}"
                        data-cancel="{{ $row['total_cancel'] }}">
                        <td class="cm-loc-name">{{ $row['location'] }}</td>
                        <td class="text-center">
                            <span class="cm-badge cm-badge-blue">{{ number_format($row['customer_count']) }}</span>
                        </td>
                        <td class="text-center">
                            <span class="cm-badge cm-badge-red">{{ $row['avg_score'] }}%</span>
                        </td>
                        <td class="text-center">
                            <span class="cm-badge cm-badge-green">{{ number_format($row['total_success']) }}</span>
                        </td>
                        <td class="text-center">
                            <span class="cm-badge cm-badge-red">{{ number_format($row['total_cancel']) }}</span>
                        </td>
                        <td class="text-end">
                            <a href="{{ route('admin.customers.index', array_filter(['district' => $row['district'], 'upazila' => $row['upazila'] ?: null])) }}"
                               class="btn btn-sm btn-info text-white py-0 px-2">
                                <i class="fas fa-eye me-1"></i> View Details
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr id="cmEmptyRow">
                        <td colspan="6" class="text-center py-5 text-muted">
                            No location data yet. Run <strong>Convert Customers</strong> from My Customers page.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<script>
(function () {
    const allRows = @json($rows);
    const allPoints = @json($mapPoints);

    const searchInput = document.getElementById('cmLocationSearch');
    const clearBtn = document.getElementById('cmSearchClear');
    const searchMeta = document.getElementById('cmSearchMeta');
    const tbody = document.getElementById('cmLocationRows');
    const statLocations = document.getElementById('cmStatLocations');
    const statCustomers = document.getElementById('cmStatCustomers');
    const statScore = document.getElementById('cmStatScore');
    const statSuccess = document.getElementById('cmStatSuccess');

    const map = L.map('customerMap', { scrollWheelZoom: true }).setView([23.6850, 90.3563], 7);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    const markerLayer = L.layerGroup().addTo(map);

    function formatNumber(n) {
        return Number(n || 0).toLocaleString('en-US');
    }

    function rowMatches(row, query) {
        if (!query) return true;

        const haystack = [
            row.location,
            row.district,
            row.upazila,
        ].join(' ').toLowerCase();

        return haystack.includes(query);
    }

    function computeScore(rows) {
        let success = 0;
        let cancel = 0;

        rows.forEach(function (row) {
            success += Number(row.total_success || 0);
            cancel += Number(row.total_cancel || 0);
        });

        const total = success + cancel;

        return total > 0 ? Math.round((success / total) * 100) : 0;
    }

    function renderMarkers(points) {
        markerLayer.clearLayers();

        if (!points.length) {
            map.setView([23.6850, 90.3563], 7);
            return;
        }

        const bounds = [];

        points.forEach(function (p) {
            const lat = parseFloat(p.lat);
            const lng = parseFloat(p.lng);
            if (!lat || !lng) return;

            const marker = L.marker([lat, lng]).addTo(markerLayer);
            marker.bindPopup(
                '<strong>' + p.location + '</strong><br>' +
                'Customers: ' + formatNumber(p.customer_count) + '<br>' +
                'Score: ' + p.avg_score + '%<br>' +
                'Success: ' + formatNumber(p.total_success) + ' | Cancel: ' + formatNumber(p.total_cancel)
            );

            bounds.push([lat, lng]);
        });

        if (bounds.length === 1) {
            map.setView(bounds[0], 11);
        } else if (bounds.length > 1) {
            map.fitBounds(bounds, { padding: [30, 30] });
        }
    }

    function applyFilter() {
        const query = (searchInput?.value || '').trim().toLowerCase();
        const filtered = allRows.filter(function (row) {
            return rowMatches(row, query);
        });

        if (tbody) {
            tbody.querySelectorAll('tr[data-search]').forEach(function (tr) {
                const match = !query || (tr.getAttribute('data-search') || '').includes(query);
                tr.classList.toggle('d-none', !match);
            });
        }

        const filteredPoints = allPoints.filter(function (p) {
            return rowMatches(p, query);
        });

        renderMarkers(filteredPoints);

        const filteredCustomers = filtered.reduce(function (sum, row) {
            return sum + Number(row.customer_count || 0);
        }, 0);
        const filteredSuccess = filtered.reduce(function (sum, row) {
            return sum + Number(row.total_success || 0);
        }, 0);

        if (statLocations) statLocations.textContent = formatNumber(filtered.length);
        if (statCustomers) statCustomers.textContent = formatNumber(filteredCustomers);
        if (statScore) statScore.textContent = computeScore(filtered) + '%';
        if (statSuccess) statSuccess.textContent = formatNumber(filteredSuccess);

        if (searchMeta) {
            if (query) {
                searchMeta.textContent = 'Showing ' + formatNumber(filtered.length) + ' of ' + formatNumber(allRows.length) + ' locations';
            } else {
                searchMeta.textContent = 'Showing ' + formatNumber(allRows.length) + ' location' + (allRows.length === 1 ? '' : 's');
            }
        }

        if (clearBtn) {
            clearBtn.classList.toggle('d-none', !query);
        }
    }

    renderMarkers(allPoints);

    if (searchInput) {
        searchInput.addEventListener('input', applyFilter);
    }

    if (clearBtn) {
        clearBtn.addEventListener('click', function () {
            searchInput.value = '';
            applyFilter();
            searchInput.focus();
        });
    }
})();
</script>
@endpush