<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Session Report #{{ $session->id }}</title>
<style>
    body { margin:0; padding:0; background:#f0f2f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
    .wrapper { max-width:600px; margin:32px auto; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.08); }

    /* Header */
    .header { background:linear-gradient(135deg,#007870,#00a396); padding:32px 36px 28px; color:#fff; }
    .header .brand { font-size:10px; letter-spacing:3px; text-transform:uppercase; opacity:.75; margin-bottom:6px; }
    .header h1 { margin:0; font-size:22px; font-weight:800; line-height:1.1; }
    .header .sub { margin:6px 0 0; font-size:13px; opacity:.8; }

    /* Summary band */
    .summary { display:flex; background:#f8f9fb; border-bottom:1px solid #e5e7eb; }
    .summary-item { flex:1; text-align:center; padding:18px 10px; border-right:1px solid #e5e7eb; }
    .summary-item:last-child { border-right:none; }
    .summary-item .sv { font-size:18px; font-weight:800; line-height:1; }
    .summary-item .sl { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#8896a8; margin-top:4px; }

    /* Body */
    .body { padding:28px 36px; }
    .greeting { font-size:15px; color:#1a1a2e; margin-bottom:18px; }
    .greeting strong { color:#007870; }

    /* Info table */
    .info-table { width:100%; border-collapse:collapse; margin-bottom:22px; }
    .info-table tr { border-bottom:1px solid #f0f2f5; }
    .info-table tr:last-child { border-bottom:none; }
    .info-table td { padding:9px 12px; font-size:13px; vertical-align:top; }
    .info-table .lbl { width:42%; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#8896a8; }
    .info-table .val { font-weight:600; color:#1a1a2e; }
    .info-table .val.mono { font-family:'Courier New',monospace; font-size:12px; }

    /* Section label */
    .section-label {
        font-size:9px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
        color:#fff; background:#1a1a2e; padding:5px 12px; border-radius:6px;
        margin:20px 0 10px; display:inline-block;
    }

    /* Timeline list */
    .tl-list { list-style:none; margin:0; padding:0; }
    .tl-list li { display:flex; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px solid #f0f2f5; }
    .tl-list li:last-child { border-bottom:none; }
    .tl-num { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; margin-top:1px; }
    .tl-start   { background:#007870; }
    .tl-product { background:#1a73e8; }
    .tl-pause   { background:#d97706; }
    .tl-resume  { background:#16a34a; }
    .tl-stop    { background:#dc2626; }
    .tl-content .tl-event { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:2px; }
    .tl-content .tl-event-start   { color:#007870; }
    .tl-content .tl-event-product { color:#1a73e8; }
    .tl-content .tl-event-pause   { color:#d97706; }
    .tl-content .tl-event-resume  { color:#16a34a; }
    .tl-content .tl-event-stop    { color:#dc2626; }
    .tl-content .tl-main { font-size:13px; font-weight:600; color:#1a1a2e; }
    .tl-content .tl-detail { font-size:11px; color:#6b7a8d; margin-top:1px; }
    .tl-content .tl-time { font-size:10px; color:#8896a8; font-family:'Courier New',monospace; margin-top:2px; }

    /* Attachment note */
    .attachment-note {
        background:linear-gradient(135deg,#eff6ff,#dbeafe);
        border:1px solid rgba(26,115,232,.15);
        border-radius:10px;
        padding:14px 18px;
        display:flex;
        align-items:center;
        gap:14px;
        margin-top:22px;
    }
    .attachment-note .icon { font-size:28px; }
    .attachment-note .text .title { font-size:13px; font-weight:700; color:#1a73e8; }
    .attachment-note .text .sub { font-size:11px; color:#6b7a8d; margin-top:2px; }

    /* Footer */
    .footer { background:#f8f9fb; padding:18px 36px; border-top:1px solid #e5e7eb; text-align:center; }
    .footer p { margin:0; font-size:11px; color:#8896a8; line-height:1.6; }
</style>
</head>
<body>
<div class="wrapper">

    {{-- Header --}}
    <div class="header">
        <div class="brand">Machine Performance System</div>
        <h1>Session Report &nbsp;#{{ $session->id }}</h1>
        <div class="sub">{{ $session->product_name }} &nbsp;·&nbsp; {{ $session->operator->name ?? '—' }}</div>
    </div>

    {{-- Summary Band --}}
    <div class="summary">
        <div class="summary-item">
            <div class="sv" style="color:#007870;">{{ $session->case_number ?? 0 }}</div>
            <div class="sl">{{ str_starts_with($session->product_name, 'Preform') ? 'Total Bottles' : 'Total Cases' }}</div>
        </div>
        <div class="summary-item">
            <div class="sv" style="color:#780045;">{{ $oee }}%</div>
            <div class="sl">OEE</div>
        </div>
        <div class="summary-item">
            <div class="sv" style="color:#16a34a; font-size:15px;">
                {{ $session->total_duration > 0 ? gmdate('H:i:s', $session->total_duration - $session->total_pause_duration) : '—' }}
            </div>
            <div class="sl">Run Time</div>
        </div>
        <div class="summary-item">
            <div class="sv" style="color:#d97706; font-size:15px;">
                {{ $session->total_pause_duration > 0 ? gmdate('H:i:s', $session->total_pause_duration) : '00:00:00' }}
            </div>
            <div class="sl">Pause Time</div>
        </div>
    </div>

    {{-- Body --}}
    <div class="body">
        <p class="greeting">
            Hello <strong>{{ $session->operator->name ?? 'Operator' }}</strong>,<br>
            Here is the full production shift report. The complete PDF report is attached to this email.
        </p>

        {{-- Session Info --}}
        <div class="section-label">Shift Information</div>
        <table class="info-table">
            <tr>
                <td class="lbl">Operator</td>
                <td class="val">{{ $session->operator->name ?? '—' }}</td>
                <td class="lbl">Incharge</td>
                <td class="val">{{ $session->incharge_name }}</td>
            </tr>
            <tr>
                <td class="lbl">Product</td>
                <td class="val">{{ $session->product_name }}</td>
                <td class="lbl">{{ str_starts_with($session->product_name, 'Preform') ? 'Bottles' : 'Cases' }}</td>
                <td class="val">
                    @if($session->case_number_history && str_contains($session->case_number_history, '+'))
                        {{ $session->case_number_history }} = {{ $session->case_number }}
                    @else
                        {{ $session->case_number ?? '—' }}
                    @endif
                </td>
            </tr>
            <tr>
                <td class="lbl">Start Time</td>
                <td class="val mono">{{ $session->start_time ? $session->start_time->format('d M Y, h:i:s A') : '—' }}</td>
                <td class="lbl">Stop Time</td>
                <td class="val mono">{{ $session->stop_time ? $session->stop_time->format('d M Y, h:i:s A') : '—' }}</td>
            </tr>
            <tr>
                <td class="lbl">Total Duration</td>
                <td class="val mono">{{ $session->total_duration > 0 ? gmdate('H:i:s', $session->total_duration) : '—' }}</td>
                <td class="lbl">Stop Reason</td>
                <td class="val" style="color:#dc2626;">{{ $session->stop_reason ?? '—' }}</td>
            </tr>
        </table>

        {{-- Activity Timeline --}}
        <div class="section-label">Activity Timeline</div>
        <ul class="tl-list">
            @foreach($timeline as $i => $event)
                @php
                    $typeKey = match($event['type']) {
                        'start'          => 'start',
                        'product_change' => 'product',
                        'pause'          => 'pause',
                        'resume'         => 'resume',
                        'stop'           => 'stop',
                        default          => 'start',
                    };
                    $label = match($event['type']) {
                        'start'          => 'Shift Started',
                        'product_change' => 'Product Changed',
                        'pause'          => 'Paused',
                        'resume'         => 'Resumed',
                        'stop'           => 'Shift Stopped',
                        default          => '',
                    };
                @endphp
                <li>
                    <div class="tl-num tl-{{ $typeKey }}">{{ $i + 1 }}</div>
                    <div class="tl-content">
                        <div class="tl-event tl-event-{{ $typeKey }}">{{ $label }}</div>
                        @if(in_array($event['type'], ['start', 'product_change']))
                            <div class="tl-main">{{ $event['product'] }}</div>
                            <div class="tl-detail">Rate: {{ $event['filling_rate'] }}/hr</div>
                        @elseif($event['type'] === 'pause')
                            <div class="tl-main">{{ $event['reason'] }}</div>
                        @elseif($event['type'] === 'resume')
                            <div class="tl-main">Machine Resumed</div>
                            @if(($event['duration'] ?? 0) > 0)
                                <div class="tl-detail">Paused for: {{ gmdate('H:i:s', $event['duration']) }}</div>
                            @endif
                        @elseif($event['type'] === 'stop')
                            <div class="tl-main">{{ $event['reason'] ?? 'Shift ended' }}</div>
                        @endif
                        <div class="tl-time">{{ $event['time']->format('d M Y, h:i:s A') }}</div>
                    </div>
                </li>
            @endforeach
        </ul>

        {{-- Attachment note --}}
        <div class="attachment-note">
            <div class="icon">📎</div>
            <div class="text">
                <div class="title">PDF Report Attached</div>
                <div class="sub">The full shift report (shift-report-{{ $session->id }}.pdf) is attached to this email for printing or archiving.</div>
            </div>
        </div>
    </div>

    {{-- Footer --}}
    <div class="footer">
        <p>
            This email was sent from <strong>Machine Performance System</strong>.<br>
            Generated on {{ now()->format('d M Y, h:i A') }}
        </p>
    </div>

</div>
</body>
</html>
