@extends('adminlte::page')

@section('title', 'Reports — Retailer Visit')

@section('content_header')
<div class="d-flex justify-content-between align-items-center">
    <div>
        <h1 class="m-0">Retailer Visit Report</h1>
        <ol class="breadcrumb mt-1 p-0 bg-transparent">
            <li class="breadcrumb-item"><a href="{{ url('admin') }}">Home</a></li>
            <li class="breadcrumb-item active">Reports</li>
        </ol>
    </div>
    <div>
        <a href="{{ route('admin.reports.export.xlsx', request()->query()) }}"
           class="btn btn-sm btn-success mr-1">
            <i class="fas fa-file-excel mr-1"></i>Excel
        </a>
        <a href="{{ route('admin.reports.export.pdf', request()->query()) }}"
           class="btn btn-sm btn-danger">
            <i class="fas fa-file-pdf mr-1"></i>PDF
        </a>
    </div>
</div>
@endsection

@section('content')

{{-- Filter bar --}}
<form method="GET" action="{{ route('admin.reports.index') }}" class="card card-body mb-3 py-2">
    <div class="form-row align-items-end">
        <div class="form-group col-md-3 mb-2">
            <label class="small mb-1">From</label>
            <input type="date" name="from" value="{{ $from }}" class="form-control form-control-sm">
        </div>
        <div class="form-group col-md-3 mb-2">
            <label class="small mb-1">To</label>
            <input type="date" name="to" value="{{ $to }}" class="form-control form-control-sm">
        </div>
        <div class="form-group col-md-3 mb-2">
            <label class="small mb-1">Enumerator</label>
            <select name="submitted_by" class="form-control form-control-sm">
                <option value="">All enumerators</option>
                @foreach ($enumerators as $e)
                <option value="{{ $e }}" @selected($submittedBy === $e)>{{ $e }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-auto mb-2 d-flex align-items-end">
            <button type="submit" class="btn btn-sm btn-primary mr-1">
                <i class="fas fa-filter mr-1"></i>Apply
            </button>
            <a href="{{ route('admin.reports.index') }}" class="btn btn-sm btn-default">Reset</a>
        </div>
    </div>
</form>

@if ($report->total === 0)
<div class="alert alert-warning">No submissions found for the selected period.</div>
@else

{{-- ── Headline stat cards ──────────────────────────────────────────────── --}}
<div class="row">
    <div class="col-md-3 col-sm-6">
        <div class="info-box">
            <span class="info-box-icon bg-info"><i class="fas fa-list-ol"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total submissions</span>
                <span class="info-box-number">{{ $report->total }}</span>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="info-box">
            <span class="info-box-icon bg-success"><i class="fas fa-check-circle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Open &amp; scored</span>
                <span class="info-box-number">{{ $report->scored }}</span>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="info-box">
            <span class="info-box-icon bg-warning"><i class="fas fa-exclamation-circle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Not scored</span>
                <span class="info-box-number">{{ $report->notScored }}</span>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="info-box">
            <span class="info-box-icon bg-primary"><i class="fas fa-percent"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Coverage</span>
                <span class="info-box-number">{{ $report->coveragePct }}%</span>
            </div>
        </div>
    </div>
</div>

<div class="row">

    {{-- ── Status breakdown ──────────────────────────────────────────────── --}}
    <div class="col-md-5">
        <div class="card card-outline card-secondary">
            <div class="card-header"><h3 class="card-title">Shop status</h3></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    @foreach ($report->statusBreakdown as $status => $count)
                    <tr>
                        <td>{{ $status }}</td>
                        <td class="text-right font-weight-bold">{{ $count }}</td>
                        <td class="text-right text-muted small">
                            {{ $report->total > 0 ? round($count / $report->total * 100, 1) : 0 }}%
                        </td>
                    </tr>
                    @endforeach
                </table>
            </div>
        </div>
    </div>

    {{-- ── Shop size ───────────────────────────────────────────────────────── --}}
    <div class="col-md-4">
        <div class="card card-outline card-secondary">
            <div class="card-header"><h3 class="card-title">Shop size (scored only)</h3></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    @forelse ($report->sizeBreakdown as $size => $count)
                    <tr>
                        <td>{{ $size }}</td>
                        <td class="text-right font-weight-bold">{{ $count }}</td>
                        <td class="text-right text-muted small">
                            {{ $report->scored > 0 ? round($count / $report->scored * 100, 1) : 0 }}%
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="3" class="text-muted text-center py-2">—</td></tr>
                    @endforelse
                </table>
            </div>
        </div>
    </div>

    {{-- ── Key metrics ────────────────────────────────────────────────────── --}}
    <div class="col-md-3">
        <div class="card card-outline card-secondary">
            <div class="card-header"><h3 class="card-title">Scored metrics</h3></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <tr>
                        <td>Road-visible</td>
                        <td class="text-right font-weight-bold">{{ $report->visibleFromRoad }} / {{ $report->scored }}</td>
                    </tr>
                    <tr>
                        <td>High footfall</td>
                        <td class="text-right font-weight-bold">{{ $report->highFootfall }} / {{ $report->scored }}</td>
                    </tr>
                    <tr>
                        <td>Avg customers (10 min)</td>
                        <td class="text-right font-weight-bold">{{ $report->avgCustomers }}</td>
                    </tr>
                    <tr>
                        <td>Has anchor product</td>
                        <td class="text-right font-weight-bold">{{ $report->hasAnchor }} / {{ $report->scored }}</td>
                    </tr>
                    <tr>
                        <td>Owner at counter</td>
                        <td class="text-right font-weight-bold">{{ $report->ownerAtCounter }} / {{ $report->scored }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {{-- ── Anchor types ────────────────────────────────────────────────────── --}}
    <div class="col-md-6">
        <div class="card card-outline card-secondary">
            <div class="card-header"><h3 class="card-title">Anchor types observed</h3></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    @forelse ($report->anchorTypes as $type => $count)
                    <tr>
                        <td>{{ $type }}</td>
                        <td class="text-right font-weight-bold">{{ $count }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="2" class="text-muted text-center py-2">None recorded</td></tr>
                    @endforelse
                </table>
            </div>
        </div>
    </div>

    {{-- ── Digital payment ─────────────────────────────────────────────────── --}}
    <div class="col-md-6">
        <div class="card card-outline card-secondary">
            <div class="card-header"><h3 class="card-title">Digital payment stickers</h3></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    @forelse ($report->digitalPayment as $method => $count)
                    <tr>
                        <td>{{ $method }}</td>
                        <td class="text-right font-weight-bold">{{ $count }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="2" class="text-muted text-center py-2">None recorded</td></tr>
                    @endforelse
                </table>
            </div>
        </div>
    </div>
</div>

@endif {{-- total > 0 --}}
@endsection