@extends('layouts.app')

@section('title', 'Sourcing Channel Report')
@section('page-title', 'Sourcing Channel Report')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h5 class="mb-0 fw-semibold">Sourcing Channel Report</h5>
        <div class="text-muted small">Lead volume breakdown by sourcing channel</div>
    </div>
</div>

{{-- Summary cards --}}
<div class="row g-3 mb-4">
    <div class="col-sm-4">
        <div class="card border-0 shadow-sm text-center py-3">
            <div class="fs-3 fw-bold text-primary">{{ $totals['properties'] }}</div>
            <div class="text-muted small">Total Properties</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card border-0 shadow-sm text-center py-3">
            <div class="fs-3 fw-bold text-success">{{ $totals['clients'] }}</div>
            <div class="text-muted small">Total Clients</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card border-0 shadow-sm text-center py-3">
            <div class="fs-3 fw-bold text-warning">{{ $totals['leads'] }}</div>
            <div class="text-muted small">Active Leads (CRM)</div>
        </div>
    </div>
</div>

{{-- Bar chart --}}
@if($channels->isNotEmpty())
<div class="card border-0 shadow-sm mb-4 p-4">
    <h6 class="fw-semibold mb-3">Volume per Channel</h6>
    @php $maxVal = max($channels->max('properties_count'), $channels->max('clients_count'), $channels->max('leads_count'), 1); @endphp
    @foreach($channels as $channel)
    <div class="mb-3">
        <div class="d-flex justify-content-between small mb-1">
            <span class="fw-medium {{ $channel->is_active ? '' : 'text-muted' }}">
                {{ $channel->name }}
                @unless($channel->is_active)
                    <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1" style="font-size:0.65rem">Inactive</span>
                @endunless
            </span>
            <span class="text-muted">{{ $channel->leads_count }} leads</span>
        </div>
        <div class="d-flex flex-column gap-1">
            @if($channel->properties_count > 0)
            <div class="rounded" style="height:6px;width:{{ round(($channel->properties_count / $maxVal) * 100) }}%;background:#0d6efd;min-width:2px"
                 title="{{ $channel->properties_count }} properties"></div>
            @endif
            @if($channel->clients_count > 0)
            <div class="rounded" style="height:6px;width:{{ round(($channel->clients_count / $maxVal) * 100) }}%;background:#198754;min-width:2px"
                 title="{{ $channel->clients_count }} clients"></div>
            @endif
            @if($channel->leads_count > 0)
            <div class="rounded" style="height:6px;width:{{ round(($channel->leads_count / $maxVal) * 100) }}%;background:#fd7e14;min-width:2px"
                 title="{{ $channel->leads_count }} leads"></div>
            @endif
            @if($channel->properties_count === 0 && $channel->clients_count === 0 && $channel->leads_count === 0)
            <div class="rounded bg-light" style="height:6px;width:100%"></div>
            @endif
        </div>
    </div>
    @endforeach
    <div class="d-flex gap-3 mt-2">
        <div class="d-flex align-items-center gap-1 small text-muted">
            <div style="width:12px;height:12px;background:#0d6efd;border-radius:2px"></div> Properties
        </div>
        <div class="d-flex align-items-center gap-1 small text-muted">
            <div style="width:12px;height:12px;background:#198754;border-radius:2px"></div> Clients
        </div>
        <div class="d-flex align-items-center gap-1 small text-muted">
            <div style="width:12px;height:12px;background:#fd7e14;border-radius:2px"></div> Leads
        </div>
    </div>
</div>
@endif

{{-- Data table --}}
<div class="card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>Channel</th>
                    <th class="text-center">Properties</th>
                    <th class="text-center">Clients</th>
                    <th class="text-center">Active Leads</th>
                    <th class="text-center">Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($channels as $channel)
                <tr>
                    <td class="fw-medium">{{ $channel->name }}</td>
                    <td class="text-center">{{ $channel->properties_count }}</td>
                    <td class="text-center">{{ $channel->clients_count }}</td>
                    <td class="text-center fw-semibold">{{ $channel->leads_count }}</td>
                    <td class="text-center">
                        @if($channel->is_active)
                            <span class="badge bg-success bg-opacity-10 text-success">Active</span>
                        @else
                            <span class="badge bg-secondary bg-opacity-10 text-secondary">Inactive</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-4 text-muted">No data available.</td>
                </tr>
                @endforelse
            </tbody>
            @if($channels->isNotEmpty())
            <tfoot class="table-light">
                <tr>
                    <td class="fw-semibold">Total</td>
                    <td class="text-center fw-semibold">{{ $totals['properties'] }}</td>
                    <td class="text-center fw-semibold">{{ $totals['clients'] }}</td>
                    <td class="text-center fw-semibold">{{ $totals['leads'] }}</td>
                    <td></td>
                </tr>
            </tfoot>
            @endif
        </table>
    </div>
</div>
@endsection