<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Session Report #{{ $session->id }}</title>
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: DejaVu Sans, sans-serif; font-size: 11px; color: #1a1a2e; background: #fff; }

    /* ── Header ── */
    .report-header {
        background-color: #007870;
        padding: 18px 28px 16px;
        margin-bottom: 18px;
    }
    .header-top { width: 100%; border-collapse: collapse; background-color: #007870; }
    .header-logo-cell { width: 72px; vertical-align: middle; padding-right: 16px; background-color: #007870; }
    .header-logo { width: 60px; height: 60px; border-radius: 6px; background: #fff; padding: 4px; display: block; }
    .header-text-cell { vertical-align: middle; background-color: #007870; }
    .app-name { font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: #b2dfdb; margin-bottom: 3px; }
    .report-title { font-size: 20px; font-weight: 700; line-height: 1.15; color: #ffffff; }
    .report-sub { font-size: 10px; color: #cceeec; margin-top: 4px; }
    .header-meta-cell { vertical-align: bottom; text-align: right; background-color: #007870; }
    .meta-generated { font-size: 8px; color: #b2dfdb; }
    .meta-session { font-size: 9px; color: #cceeec; margin-top: 3px; }

    /* ── Sections ── */
    .section { margin: 0 20px 16px; }
    .section-title {
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #fff;
        padding: 6px 12px;
        border-radius: 6px 6px 0 0;
        margin-bottom: 0;
    }
    .section-title-teal   { background: #007870; }
    .section-title-blue   { background: #1a73e8; }
    .section-title-amber  { background: #d97706; }
    .section-title-dark   { background: #1a1a2e; }
    .section-body {
        border: 1px solid #e5e7eb;
        border-radius: 0 0 8px 8px;
        padding: 14px;
        background: #fff;
    }


    /* ── Info Grid ── */
    .info-grid { width: 100%; border-collapse: collapse; }
    .info-grid td { padding: 7px 10px; vertical-align: top; width: 50%; }
    .info-grid tr:nth-child(odd) td { background: #f8f9fb; }
    .info-grid .field-label { font-size: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8896a8; }
    .info-grid .field-value { font-size: 11px; font-weight: 700; color: #1a1a2e; margin-top: 2px; }
    .info-grid .field-value.mono { font-family: 'Courier New', monospace; }

    /* ── Data Tables ── */
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table th {
        background: #f0f2f5;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #6b7a8d;
        padding: 7px 10px;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
    }
    .data-table td { padding: 8px 10px; border-bottom: 1px solid #f0f2f5; font-size: 10.5px; vertical-align: top; }
    .data-table tr:last-child td { border-bottom: none; }
    .data-table .mono { font-family: 'Courier New', monospace; font-weight: 700; }
    .oee-good { color: #16a34a; font-weight: 700; }
    .oee-mid  { color: #d97706; font-weight: 700; }
    .oee-bad  { color: #dc2626; font-weight: 700; }

    /* ── Timeline ── */
    .tl-row { display: block; margin-bottom: 8px; }
    .tl-table { width: 100%; border-collapse: collapse; }
    .tl-table td { padding: 8px 10px; vertical-align: top; }
    .tl-num {
        width: 28px; text-align: center;
        font-weight: 800; font-size: 11px;
        color: #fff;
        border-radius: 50%;
        width: 24px; height: 24px;
        line-height: 24px;
        display: inline-block;
    }
    .tl-num-start   { background: #007870; }
    .tl-num-product { background: #1a73e8; }
    .tl-num-pause   { background: #d97706; }
    .tl-num-resume  { background: #16a34a; }
    .tl-num-stop    { background: #dc2626; }

    .tl-card { padding: 8px 12px; border-radius: 6px; border-left: 3px solid; }
    .tl-card-start   { background: #f0fdfb; border-left-color: #007870; }
    .tl-card-product { background: #eff6ff; border-left-color: #1a73e8; }
    .tl-card-pause   { background: #fffbeb; border-left-color: #d97706; }
    .tl-card-resume  { background: #f0fdf4; border-left-color: #16a34a; }
    .tl-card-stop    { background: #fef2f2; border-left-color: #dc2626; }

    .tl-badge {
        display: inline-block;
        font-size: 7.5px; font-weight: 700;
        letter-spacing: 1.5px; text-transform: uppercase;
        padding: 2px 7px; border-radius: 20px; margin-bottom: 3px;
    }
    .tl-badge-start   { background: #d1faf5; color: #007870; }
    .tl-badge-product { background: #dbeafe; color: #1a73e8; }
    .tl-badge-pause   { background: #fef3c7; color: #d97706; }
    .tl-badge-resume  { background: #dcfce7; color: #16a34a; }
    .tl-badge-stop    { background: #fee2e2; color: #dc2626; }

    .tl-title { font-weight: 700; font-size: 10.5px; color: #1a1a2e; }
    .tl-sub   { font-size: 9.5px; color: #6b7a8d; margin-top: 1px; }
    .tl-time  { font-size: 8.5px; color: #8896a8; font-family: 'Courier New', monospace; margin-top: 2px; }

    /* ── Footer ── */
    .report-footer {
        margin: 20px 20px 0;
        padding-top: 10px;
        border-top: 1px solid #e5e7eb;
        font-size: 8px;
        color: #8896a8;
        display: flex;
        justify-content: space-between;
    }
</style>
</head>
<body>

{{-- ── HEADER ── --}}
@php $logoData = base64_encode(file_get_contents(public_path('logo/logo.png'))); @endphp
<div class="report-header">
    <table class="header-top">
        <tr>
            <td class="header-logo-cell">
                <img src="data:image/png;base64,{{ $logoData }}" class="header-logo" alt="Logo">
            </td>
            <td class="header-text-cell">
                <div class="app-name">Golden Ark</div>
                <div class="report-title">GA Production Shift Report</div>
                <div class="report-sub">{{ $session->operator->name ?? '—' }}</div>
            </td>
            <td class="header-meta-cell">
                <div class="meta-generated">Generated: {{ now()->format('d M Y, h:i:s A') }}</div>
                <div class="meta-session">Shift #{{ $session->id }}</div>
            </td>
        </tr>
    </table>
</div>

{{-- ── SESSION INFORMATION ── --}}
<div class="section">
    <div class="section-title section-title-teal">Shift Information</div>
    <div class="section-body" style="padding:0;">
        <table class="info-grid">
            <tr>
                <td>
                    <div class="field-label">Current Product</div>
                    <div class="field-value">{{ $session->product_name }}</div>
                </td>
                <td>
                    <div class="field-label">Incharge Name</div>
                    <div class="field-value">{{ $session->incharge_name }}</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="field-label">Operator</div>
                    <div class="field-value">{{ $session->operator->name ?? '—' }}</div>
                </td>
                <td>
                    <div class="field-label">{{ str_starts_with($session->product_name, 'Preform') ? 'Bottle Number' : 'Case Number' }}</div>
                    <div class="field-value">
                        @if($session->case_number_history && str_contains($session->case_number_history, '+'))
                            {{ $session->case_number_history }} = {{ $session->case_number }}
                        @else
                            {{ $session->case_number ?? '—' }}
                        @endif
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="field-label">Start Time</div>
                    <div class="field-value mono">{{ $session->start_time ? $session->start_time->format('d M Y, h:i:s A') : '—' }}</div>
                </td>
                <td>
                    <div class="field-label">Stop Time</div>
                    <div class="field-value mono">{{ $session->stop_time ? $session->stop_time->format('d M Y, h:i:s A') : '—' }}</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="field-label">Total Duration</div>
                    <div class="field-value mono">{{ $session->total_duration > 0 ? gmdate('H:i:s', $session->total_duration) : '—' }}</div>
                </td>
                <td>
                    <div class="field-label">Actual Run Time</div>
                    <div class="field-value mono" style="color:#16a34a;">{{ $session->total_duration > 0 ? gmdate('H:i:s', $session->total_duration - $session->total_pause_duration) : '—' }}</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="field-label">Total Pause Time</div>
                    <div class="field-value mono" style="color:#d97706;">{{ $session->total_pause_duration > 0 ? gmdate('H:i:s', $session->total_pause_duration) : '00:00:00' }}</div>
                </td>
                <td>
                    @if($session->stop_reason)
                    <div class="field-label">Stop Reason</div>
                    <div class="field-value" style="color:#dc2626;">{{ $session->stop_reason }}</div>
                    @endif
                </td>
            </tr>
        </table>
    </div>
</div>

{{-- ── PRODUCT SEGMENTS ── --}}
@if($session->segments->count() > 0)
<div class="section">
    <div class="section-title section-title-blue">Product Segments ({{ $session->segments->count() }})</div>
    <div class="section-body" style="padding:0;">
        <table class="data-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Product</th>
                    <th>{{ str_starts_with($session->product_name, 'Preform') ? 'Bottles' : 'Cases' }}</th>
                    <th>Rate</th>
                    <th>Run Time</th>
                    <th>OEE</th>
                    <th>Period</th>
                </tr>
            </thead>
            <tbody>
                @foreach($session->segments as $i => $segment)
                    @php $segOee = $segmentOees[$segment->id] ?? 0; @endphp
                    <tr>
                        <td class="mono">{{ $i + 1 }}</td>
                        <td style="font-weight:600;">{{ $segment->product_name }}</td>
                        <td class="mono">
                            {{ $segment->case_number ?? 0 }}
                            @if($segment->case_number_history && str_contains($segment->case_number_history, '+'))
                                <br><span style="font-size:9px; color:#8896a8;">({{ $segment->case_number_history }})</span>
                            @endif
                        </td>
                        <td class="mono">{{ $segment->filling_rate }}/hr</td>
                        <td class="mono">{{ gmdate('H:i:s', $segment->run_seconds) }}</td>
                        <td class="{{ $segOee >= 100 ? 'oee-good' : ($segOee >= 60 ? 'oee-mid' : 'oee-bad') }} mono">
                            {{ $segOee }}%
                        </td>
                        <td style="font-size:9.5px; color:#6b7a8d;">
                            {{ $segment->started_at->format('h:i:s A') }}
                            @if($segment->ended_at)
                                – {{ $segment->ended_at->format('h:i:s A') }}
                            @else
                                – Active
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- ── PAUSE HISTORY ── --}}
@if($session->pauses->count() > 0)
<div class="section">
    <div class="section-title section-title-amber">Pause History ({{ $session->pauses->count() }} times)</div>
    <div class="section-body" style="padding:0;">
        <table class="data-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Reason</th>
                    <th>Paused At</th>
                    <th>Resumed At</th>
                    <th>Duration</th>
                </tr>
            </thead>
            <tbody>
                @foreach($session->pauses as $i => $pause)
                    <tr>
                        <td class="mono">{{ $i + 1 }}</td>
                        <td style="font-weight:600; color:#92400e;">{{ $pause->pause_reason }}</td>
                        <td class="mono" style="font-size:9.5px;">{{ $pause->pause_time ? $pause->pause_time->format('h:i:s A') : '—' }}</td>
                        <td class="mono" style="font-size:9.5px;">{{ $pause->resume_time ? $pause->resume_time->format('h:i:s A') : '—' }}</td>
                        <td class="mono" style="color:#d97706;">{{ $pause->duration > 0 ? gmdate('H:i:s', $pause->duration) : 'Active' }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- ── ACTIVITY TIMELINE ── --}}
<div class="section">
    <div class="section-title section-title-dark">Activity Timeline ({{ count($timeline) }} events)</div>
    <div class="section-body">
        <table style="width:100%; border-collapse:collapse;">
            @foreach($timeline as $i => $event)
                @php
                    $typeClass = match($event['type']) {
                        'start'          => 'start',
                        'product_change' => 'product',
                        'pause'          => 'pause',
                        'resume'         => 'resume',
                        'stop'           => 'stop',
                        default          => 'start',
                    };
                    $badgeLabel = match($event['type']) {
                        'start'          => 'Shift Started',
                        'product_change' => 'Product Changed',
                        'pause'          => 'Paused',
                        'resume'         => 'Resumed',
                        'stop'           => 'Shift Stopped',
                        default          => '',
                    };
                @endphp
                <tr>
                    <td style="width:32px; vertical-align:top; padding:4px 8px 4px 0;">
                        <span class="tl-num tl-num-{{ $typeClass }}">{{ $i + 1 }}</span>
                    </td>
                    <td style="padding:0 0 8px 0;">
                        <div class="tl-card tl-card-{{ $typeClass }}">
                            <span class="tl-badge tl-badge-{{ $typeClass }}">{{ $badgeLabel }}</span>
                            @php
                                $evRun   = $event['run_seconds'] ?? 0;
                                $evCases = $event['case_number'] ?? 0;
                                $evDur   = $event['duration'] ?? 0;
                            @endphp

                            {{-- Title row --}}
                            @if($event['type'] === 'start' || $event['type'] === 'product_change')
                                <div class="tl-title">{{ $event['product'] }}</div>
                                <div class="tl-sub">Rate: {{ $event['filling_rate'] }}/hr</div>
                            @elseif($event['type'] === 'pause')
                                <div class="tl-title">{{ $event['reason'] }}</div>
                            @elseif($event['type'] === 'resume')
                                <div class="tl-title">Machine Resumed</div>
                            @elseif($event['type'] === 'stop')
                                <div class="tl-title">{{ $event['reason'] ?? 'Shift ended' }}</div>
                            @endif

                            {{-- Stats row for run events --}}
                            @if(in_array($event['type'], ['start','product_change','resume']) && ($evRun > 0 || $evCases > 0))
                                @php $evProduct = $event['product'] ?? $session->product_name; @endphp
                                <div class="tl-sub">{{ $evRun > 0 ? 'Duration: '.gmdate('H:i:s', $evRun) : '' }}{{ ($evRun > 0 && $evCases > 0) ? ' · ' : '' }}{{ $evCases > 0 ? $evCases.' '.(str_starts_with($evProduct, 'Preform') ? 'Bottles' : 'Cases') : '' }}</div>
                            @endif

                            {{-- Duration row for pause events --}}
                            @if($event['type'] === 'pause' && $evDur > 0)
                                <div class="tl-sub">Duration: {{ gmdate('H:i:s', $evDur) }}</div>
                            @endif
                            <div class="tl-time">{{ $event['time']->format('d M Y, h:i:s A') }}</div>
                        </div>
                    </td>
                </tr>
            @endforeach
        </table>
    </div>
</div>

{{-- ── FOOTER ── --}}
<div class="report-footer">
    <span>Golden Ark &nbsp;·&nbsp; GA Production Shift Report &nbsp;·&nbsp; Shift #{{ $session->id }}</span>
    <span>Generated on {{ now()->format('d M Y, h:i A') }}</span>
</div>

</body>
</html>
