@extends('layouts.app')

@section('title','Email Reports')
@section('page_title','Email Reports')

@section('content')

<form method="GET" action="{{ route('email.reports') }}"
      style="background:#fff;padding:15px;border-radius:8px;margin-bottom:20px;display:flex;gap:10px;align-items:end;">

    <div>
        <label>From Date</label>
        <input type="date" name="from_date" value="{{ request('from_date') }}"
               style="padding:10px;border:1px solid #ccc;border-radius:6px;">
    </div>

    <div>
        <label>To Date</label>
        <input type="date" name="to_date" value="{{ request('to_date') }}"
               style="padding:10px;border:1px solid #ccc;border-radius:6px;">
    </div>

    <button type="submit"
            style="background:#2563eb;color:white;padding:10px 15px;border:0;border-radius:6px;">
        Filter
    </button>

    <a href="{{ route('email.reports') }}"
       style="background:#6b7280;color:white;padding:10px 15px;border-radius:6px;text-decoration:none;">
        Reset
    </a>

</form>

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:25px;">

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #2563eb;">
        <h3 style="font-size:14px;color:#6b7280;margin-bottom:8px;">Total Sent</h3>
        <p style="font-size:30px;font-weight:bold;color:#111827;">{{ $totalSent }}</p>
    </div>

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #16a34a;">
        <h3 style="font-size:14px;color:#6b7280;margin-bottom:8px;">Total Opened</h3>
        <p style="font-size:30px;font-weight:bold;color:#111827;">{{ $totalOpened }}</p>
    </div>

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #f59e0b;">
        <h3 style="font-size:14px;color:#6b7280;margin-bottom:8px;">Total Clicks</h3>
        <p style="font-size:30px;font-weight:bold;color:#111827;">{{ $totalClicks }}</p>
    </div>

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #dc2626;">
        <h3 style="font-size:14px;color:#6b7280;margin-bottom:8px;">Failed Emails</h3>
        <p style="font-size:30px;font-weight:bold;color:#111827;">{{ $totalFailed }}</p>
    </div>

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #7c3aed;">
        <h3 style="font-size:14px;color:#6b7280;margin-bottom:8px;">Open Rate</h3>
        <p style="font-size:30px;font-weight:bold;color:#111827;">{{ $openRate }}%</p>
    </div>

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #0f766e;">
        <h3 style="font-size:14px;color:#6b7280;margin-bottom:8px;">Click Rate</h3>
        <p style="font-size:30px;font-weight:bold;color:#111827;">{{ $clickRate }}%</p>
    </div>

</div>

<div style="background:#fff;padding:24px;border-radius:10px;">

    <h3 style="font-size:18px;font-weight:bold;margin-bottom:15px;">
        Report Summary
    </h3>

    <table style="width:100%;border-collapse:collapse;">
        <tr>
            <td style="padding:12px;border:1px solid #ddd;">Total Sent Emails</td>
            <td style="padding:12px;border:1px solid #ddd;">{{ $totalSent }}</td>
        </tr>

        <tr>
            <td style="padding:12px;border:1px solid #ddd;">Opened Emails</td>
            <td style="padding:12px;border:1px solid #ddd;">{{ $totalOpened }}</td>
        </tr>

        <tr>
            <td style="padding:12px;border:1px solid #ddd;">Total Link Clicks</td>
            <td style="padding:12px;border:1px solid #ddd;">{{ $totalClicks }}</td>
        </tr>

        <tr>
            <td style="padding:12px;border:1px solid #ddd;">Failed Emails</td>
            <td style="padding:12px;border:1px solid #ddd;">{{ $totalFailed }}</td>
        </tr>

        <tr>
            <td style="padding:12px;border:1px solid #ddd;">Open Rate</td>
            <td style="padding:12px;border:1px solid #ddd;">{{ $openRate }}%</td>
        </tr>

        <tr>
            <td style="padding:12px;border:1px solid #ddd;">Click Rate</td>
            <td style="padding:12px;border:1px solid #ddd;">{{ $clickRate }}%</td>
        </tr>
    </table>

</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px;">

    <div style="background:#fff;padding:24px;border-radius:10px;">
        <h3 style="font-size:18px;font-weight:bold;margin-bottom:15px;">
            Recent Emails
        </h3>

        @forelse($recentEmails as $email)
            <div style="border-bottom:1px solid #e5e7eb;padding:10px 0;">
                <b>{{ $email->subject ?? '-' }}</b><br>
                <small>{{ $email->to_email ?? '-' }} | {{ $email->sent_at ?? $email->created_at }}</small>
            </div>
        @empty
            <p style="color:#6b7280;">No recent emails.</p>
        @endforelse
    </div>

    <div style="background:#fff;padding:24px;border-radius:10px;">
        <h3 style="font-size:18px;font-weight:bold;margin-bottom:15px;">
            Recent Clicks
        </h3>

        @forelse($recentClicks as $click)
            <div style="border-bottom:1px solid #e5e7eb;padding:10px 0;">
                <a href="{{ $click->clicked_url }}" target="_blank">
                    {{ $click->clicked_url }}
                </a><br>
                <small>{{ $click->created_at }}</small>
            </div>
        @empty
            <p style="color:#6b7280;">No recent clicks.</p>
        @endforelse
    </div>

</div>

<div style="background:#fff;padding:24px;border-radius:10px;margin-top:25px;">

    <h3 style="font-size:18px;font-weight:bold;margin-bottom:15px;">
        Top Clicked Links
    </h3>

    <table style="width:100%;border-collapse:collapse;">
        <thead>
            <tr style="background:#f3f4f6;">
                <th style="padding:12px;text-align:left;border:1px solid #ddd;">
                    URL
                </th>

                <th style="padding:12px;text-align:left;border:1px solid #ddd;">
                    Clicks
                </th>
            </tr>
        </thead>

        <tbody>

        @forelse($topLinks as $link)

            <tr>
                <td style="padding:12px;border:1px solid #ddd;">
                    <a href="{{ $link->clicked_url }}"
                       target="_blank">
                        {{ $link->clicked_url }}
                    </a>
                </td>

                <td style="padding:12px;border:1px solid #ddd;">
                    {{ $link->total_clicks }}
                </td>
            </tr>

        @empty

            <tr>
                <td colspan="2"
                    style="padding:15px;text-align:center;color:#6b7280;">
                    No link click data available.
                </td>
            </tr>

        @endforelse

        </tbody>
    </table>

</div>

@endsection