<x-mb-layout pageTitle="Leads">
    @push('styles')
        <link href="{{ asset('assets/mb/css/creatives.css') }}?v={{ filemtime(public_path('assets/mb/css/creatives.css')) }}" rel="stylesheet">
        <link href="{{ asset('assets/mb/css/prompt-landing-pages.css') }}?v={{ filemtime(public_path('assets/mb/css/prompt-landing-pages.css')) }}" rel="stylesheet">
    @endpush

    @php
        $isViews = $tab === 'views';
        $isDownloads = $tab === 'downloads';
        $tabUrl = fn (string $name) => route('prompt-landing-pages.leads.index', array_merge(
            ['page' => $page],
            request()->except(['page', 'tab']),
            ['tab' => $name],
        ));
        $heading = $isDownloads ? 'Downloads' : ($isViews ? 'Page views' : 'Leads');
        $noun = $isDownloads ? 'download clicks' : ($isViews ? 'page views' : 'leads');
    @endphp

    <div class="mb-page">
        <div class="mb-page-inner">
            <div class="mb-page-head">
                <div>
                    <a class="mb-back" href="{{ route('landing-pages.index', ['tab' => 'prompt']) }}"><i class="bi bi-arrow-left"></i>All landing pages</a>
                    <h1 class="mb-page-title">{{ $heading }}</h1>
                    <p class="mb-page-sub">{{ $page->displayTitle() }} · {{ $page->displayWebsite() }}</p>
                </div>
                <div class="mb-page-head-actions">
                    <a href="{{ route('prompt-landing-pages.show', $page) }}" class="mb-btn-ghost">Open page</a>
                </div>
            </div>

            <div class="mb-lead-tabs" role="tablist">
                <a href="{{ $tabUrl('leads') }}" class="mb-lead-tab @if (! $isViews && ! $isDownloads) is-active @endif" role="tab" aria-selected="{{ $isViews || $isDownloads ? 'false' : 'true' }}">Leads{{ $tabCounts['leads'] > 0 ? ' ('.$tabCounts['leads'].')' : '' }}</a>
                <a href="{{ $tabUrl('views') }}" class="mb-lead-tab @if ($isViews) is-active @endif" role="tab" aria-selected="{{ $isViews ? 'true' : 'false' }}">Page views{{ $tabCounts['views'] > 0 ? ' ('.$tabCounts['views'].')' : '' }}</a>
                @if ($page->isAppDownload())
                    <a href="{{ $tabUrl('downloads') }}" class="mb-lead-tab @if ($isDownloads) is-active @endif" role="tab" aria-selected="{{ $isDownloads ? 'true' : 'false' }}">Downloads{{ ($tabCounts['downloads'] ?? 0) > 0 ? ' ('.$tabCounts['downloads'].')' : '' }}</a>
                @endif
            </div>

            <div class="mb-stats">
                <div class="mb-stat">
                    <span class="mb-stat-icon is-all"><i class="bi bi-collection"></i></span>
                    <span><span class="mb-stat-num">{{ $stats['all'] }}</span><span class="mb-stat-label d-block">Total</span></span>
                </div>
                <div class="mb-stat">
                    <span class="mb-stat-icon is-ok"><i class="bi bi-check2-circle"></i></span>
                    <span><span class="mb-stat-num">{{ $stats['today'] }}</span><span class="mb-stat-label d-block">Today</span></span>
                </div>
                <div class="mb-stat">
                    <span class="mb-stat-icon is-run"><i class="bi bi-hourglass-split"></i></span>
                    <span><span class="mb-stat-num">{{ $stats['week'] }}</span><span class="mb-stat-label d-block">Last 7 days</span></span>
                </div>
                <div class="mb-stat">
                    <span class="mb-stat-icon is-err"><i class="bi bi-calendar3"></i></span>
                    <span><span class="mb-stat-num">{{ $stats['month'] }}</span><span class="mb-stat-label d-block">This month</span></span>
                </div>
            </div>

            <div class="mb-card">
                <form class="mb-toolbar" method="GET" action="{{ route('prompt-landing-pages.leads.index', $page) }}">
                    <input type="hidden" name="tab" value="{{ $tab }}">
                    <select class="mb-select" name="per_page" aria-label="Rows per page" onchange="this.form.submit()">
                        <option value="10" @selected($leads->perPage() === 10)>10 / page</option>
                        <option value="25" @selected($leads->perPage() === 25)>25 / page</option>
                        <option value="50" @selected($leads->perPage() === 50)>50 / page</option>
                    </select>
                    <div class="mb-toolbar-end">
                        <label class="mb-search">
                            <i class="bi bi-search"></i>
                            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search {{ $noun }}…" aria-label="Search {{ $noun }}">
                        </label>
                        <button type="submit" class="mb-btn-ghost"><i class="bi bi-search"></i>Search</button>
                    </div>
                </form>

                @if ($leads->isEmpty())
                    <div class="mb-empty">
                        <div class="mb-empty-icon"><i class="bi bi-inbox"></i></div>
                        @if ($stats['all'] === 0)
                            @if ($isDownloads)
                                <div class="mb-empty-title">No download clicks yet.</div>
                                <div>Clicks on the public download buttons will show up here.</div>
                            @elseif ($isViews)
                                <div class="mb-empty-title">No page views yet.</div>
                                <div>Visits from the public landing page will show up here, including tracking parameters.</div>
                            @else
                                <div class="mb-empty-title">No leads captured yet.</div>
                                <div>Submissions from the public landing page will show up here.</div>
                            @endif
                        @else
                            <div class="mb-empty-title">No {{ $noun }} match your filters</div>
                            <div>Try a different search term.</div>
                        @endif
                    </div>
                @else
                    @php
                        $sortLink = fn (string $col) => route('prompt-landing-pages.leads.index', array_merge(
                            ['page' => $page],
                            request()->except('page'),
                            [
                                'sort' => $col,
                                'dir' => $sort === $col && $dir === 'desc' ? 'asc' : 'desc',
                            ],
                        ));
                    @endphp
                    <div class="mb-table-wrap">
                        <table class="mb-table">
                            <thead>
                                <tr>
                                    <th class="is-sortable @if ($sort === 'id') is-sorted @endif"><a href="{{ $sortLink('id') }}" class="text-reset text-decoration-none">#<i class="bi bi-arrow-down-up"></i></a></th>
                                    <th class="is-sortable @if ($sort === 'created') is-sorted @endif"><a href="{{ $sortLink('created') }}" class="text-reset text-decoration-none">{{ $isDownloads ? 'Clicked' : ($isViews ? 'Viewed' : 'Received') }}<i class="bi bi-arrow-down-up"></i></a></th>
                                    @if ($isDownloads)
                                        <th>Destination</th>
                                    @else
                                        @foreach ($fields as $field)
                                            <th>{{ $field }}</th>
                                        @endforeach
                                    @endif
                                    <th>Tracking</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($leads as $row)
                                    <tr>
                                        <td class="mb-td-id" data-label="#">{{ $row->id }}</td>
                                        <td data-label="{{ $isDownloads ? 'Clicked' : ($isViews ? 'Viewed' : 'Received') }}">{{ $row->created_at?->timezone(config('app.timezone'))->format('Y-m-d H:i') }}</td>
                                        @if ($isDownloads)
                                            <td data-label="Destination">{{ $row->destination_url !== '' ? $row->destination_url : '—' }}</td>
                                            <td data-label="Tracking">{{ $row->visit?->queryParamsSummary() }}</td>
                                        @else
                                            @foreach ($fields as $field)
                                                <td data-label="{{ $field }}">{{ $row->payloadField($field) }}</td>
                                            @endforeach
                                            <td data-label="Tracking">{{ $row->queryParamsSummary() }}</td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="mb-table-foot">
                        <span>Showing <strong>{{ $leads->firstItem() }}–{{ $leads->lastItem() }}</strong> of <strong>{{ $leads->total() }}</strong></span>
                        <div class="mb-pager">{{ $leads->onEachSide(1)->links() }}</div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-mb-layout>
