@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h3 class="mb-0">Dashboard</h3>
        <small class="text-muted">Analytics with server-side filters</small>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <form class="row g-2">
            <div class="col-md-3">
                <label class="form-label">State (multi)</label>
                <select name="states[]" class="form-select" multiple size="4">
                    @foreach($filterOptions['states'] as $state)
                        <option value="{{ $state }}" @selected(in_array($state, $filters['states'] ?? []))>{{ $state }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">City (multi)</label>
                <select name="cities[]" class="form-select" multiple size="4">
                    @foreach($filterOptions['cities'] as $city)
                        <option value="{{ $city }}" @selected(in_array($city, $filters['cities'] ?? []))>{{ $city }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Tag</label>
                <select name="tags[]" class="form-select" multiple size="4">
                    @foreach($filterOptions['tags'] as $tag)
                        <option value="{{ $tag }}" @selected(in_array($tag, $filters['tags'] ?? []))>{{ $tag }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2"><label class="form-label">Company</label><input class="form-control" name="company" value="{{ $filters['company'] ?? '' }}"></div>
            <div class="col-md-2"><label class="form-label">Designation</label><input class="form-control" name="designation" value="{{ $filters['designation'] ?? '' }}"></div>
            <div class="col-md-2"><label class="form-label">Source</label><input class="form-control" name="source" value="{{ $filters['source'] ?? '' }}"></div>
            <div class="col-md-2"><label class="form-label">Date From</label><input type="date" class="form-control" name="date_from" value="{{ $filters['date_from'] ?? '' }}"></div>
            <div class="col-md-2"><label class="form-label">Date To</label><input type="date" class="form-control" name="date_to" value="{{ $filters['date_to'] ?? '' }}"></div>
            <div class="col-md-2 d-flex align-items-end"><button class="btn btn-primary w-100">Apply Filters</button></div>
        </form>
    </div>
</div>

<div class="row g-3 mb-3">
    @foreach([
        'Total Customers' => $widgets['total_customers'],
        'States' => $widgets['states_count'],
        'Cities' => $widgets['cities_count'],
        'Companies' => $widgets['companies_count'],
        'Designations' => $widgets['designations_count'],
    ] as $label => $value)
        <div class="col-md-2">
            <div class="card"><div class="card-body"><div class="text-muted small">{{ $label }}</div><div class="fs-4 fw-bold">{{ $value }}</div></div></div>
        </div>
    @endforeach
</div>

<div class="row g-3">
    <div class="col-lg-6">
        <div class="card"><div class="card-body"><h6>State Distribution</h6><canvas id="stateChart" height="130"></canvas></div></div>
    </div>
    <div class="col-lg-6">
        <div class="card"><div class="card-body"><h6>Tag Distribution</h6><canvas id="tagChart" height="130"></canvas></div></div>
    </div>
    <div class="col-lg-6">
        <div class="card"><div class="card-body"><h6>Top Cities</h6>
            <div class="table-responsive"><table class="table table-sm"><thead><tr><th>City</th><th class="text-end">Count</th></tr></thead><tbody>
                @forelse($cities as $row)<tr><td>{{ $row->city }}</td><td class="text-end">{{ $row->total }}</td></tr>@empty <tr><td colspan="2">No data</td></tr>@endforelse
            </tbody></table></div></div></div>
    </div>
    <div class="col-lg-6">
        <div class="card"><div class="card-body"><h6>Top Sources</h6>
            <div class="table-responsive"><table class="table table-sm"><thead><tr><th>Source</th><th class="text-end">Count</th></tr></thead><tbody>
                @forelse($sources as $row)<tr><td>{{ $row->source }}</td><td class="text-end">{{ $row->total }}</td></tr>@empty <tr><td colspan="2">No data</td></tr>@endforelse
            </tbody></table></div></div></div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById('stateChart'), {
    type: 'bar',
    data: {
        labels: @json($states->pluck('state')),
        datasets: [{ label: 'Customers', data: @json($states->pluck('total')), backgroundColor: '#1d4ed8' }]
    },
    options: { responsive: true, plugins: { legend: { display: false } } }
});
new Chart(document.getElementById('tagChart'), {
    type: 'doughnut',
    data: {
        labels: @json($tags->pluck('primary_tag')),
        datasets: [{ data: @json($tags->pluck('total')), backgroundColor: ['#1d4ed8','#0ea5e9','#10b981','#f59e0b','#ef4444','#8b5cf6','#14b8a6','#64748b'] }]
    }
});
</script>
@endpush