@extends('layouts.portal.app')

@section('title', 'ETL Jobs — InsightsReady')

@push('styles')
    <link rel="stylesheet" href="{{ asset('portal-assets/portal.css') }}" />
    <style>
        /* ---------- Header bar ---------- */
        .hbar{display:flex;align-items:center;gap:.75rem}
        .hbar .right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

        /* ---------- KPI row ---------- */
        .kpi-row{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
        @media (max-width:980px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
        @media (max-width:640px){.kpi-row{grid-template-columns:1fr}}
        .kpi{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px}
        .kpi h4{margin:0 0 6px;font-size:12px;color:var(--ink-700);font-weight:700;letter-spacing:.02em}
        .kpi .val{font:800 22px/1.1 Inter,system-ui}
        .kpi .trend{font-size:12px;color:var(--ink-700)}

        /* ---------- Filters ---------- */
        .filters{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
        .search{position:relative}
        .search input[type="search"]{width:100%}
        .chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border);
            border-radius:999px;padding:.35rem .6rem;background:#fff;font-weight:700;font-size:12px}
        .chip--muted{background:#f9fafb;border-color:#e5e7eb;color:#374151}

        /* ---------- Modern table ---------- */
        .tablewrap{margin-top:12px}
        .table{width:100%;border-collapse:separate;border-spacing:0 8px}
        .table thead th{position:sticky;top:0;background:transparent;padding:0 12px 6px;
            color:var(--ink-700);font-weight:800;text-align:left}
        .tr{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
        .table td{padding:14px}
        .table tr:hover .tr{box-shadow:var(--shadow)}

        /* cells layout */
        .jobid{display:flex;align-items:center;gap:10px;font-weight:800}
        .tags{display:flex;gap:6px;flex-wrap:wrap}
        .tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);
            background:#fff;font-weight:700;font-size:12px;color:var(--ink-800)}
        .tag--type{background:#f8fafc}
        .tag--sched{background:#f6f7fb}
        .meta{color:var(--ink-700);font-size:13px}

        /* Status pill + dot */
        .status{display:inline-flex;align-items:center;gap:8px}
        .dot{width:10px;height:10px;border-radius:999px;background:#cbd5e1}
        .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);
            background:#f6f7fb;font-weight:800;font-size:12px;color:#475569}
        .dot--run{background:#10b981}.pill--run{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
        .dot--fail{background:#ef4444}.pill--fail{background:#fff2f2;border-color:#fecaca;color:#991b1b}
        .dot--queue{background:#f59e0b}.pill--queue{background:#fff8da;border-color:#fde68a;color:#92400e}

        /* Mini progress for last run duration */
        .progress{width:160px;max-width:100%;height:8px;background:#edf2f7;border-radius:999px;overflow:hidden}
        .progress span{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#10b981)}

        /* Actions: buttons + kebab */
        .actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}
        .btn--sm{padding:8px 10px;border-radius:10px;font-size:13px;font-weight:700}
        .btn--ghost{background:#fff;border:1px solid var(--border)}
        .kebab{position:relative}
        .kebab summary{list-style:none}
        .kebab summary::-webkit-details-marker{display:none}
        .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;
            border:1px solid var(--border);background:#fff;color:var(--ink-700);cursor:pointer}
        .icon-btn:hover{box-shadow:var(--shadow)}
        .kebab[open] .icon-btn{box-shadow:var(--shadow)}
        .menu{position:absolute;top:115%;right:0;min-width:200px;background:#fff;border:1px solid var(--border);
            border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:20;display:grid;gap:4px}
        .menu .mi{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-weight:700;color:var(--ink-800);text-decoration:none}
        .menu .mi:hover{background:#f6faf9;color:var(--brand-700)}
        .menu hr{border:0;border-top:1px solid var(--border);margin:6px 0}
        .menu .danger{color:#9b1c1c}.menu .danger:hover{background:#fff2f2;color:#7f1d1d}

        /* ---------- Responsive: stack rows on mobile ---------- */
        @media (max-width:860px){
            .hide-md{display:none}
            .table td{padding:12px}
            .row-grid{display:grid;grid-template-columns:1fr;gap:8px}
            .actions{justify-content:flex-start}
        }

        .table .jobcell .tr{
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
        }

        /* On hover, keep rows clean (no inner shadow either) */
        .table tr:hover .jobcell .tr{
            box-shadow: none;
        }
    </style>
@endpush

@section('content')
    <main class="container page">

        <!-- Page header -->
        <section class="hbar">
            <h1>ETL Jobs</h1>
        </section>

        <!-- KPIs -->
        <section class="panel" style="margin-top:12px">
            <div class="kpi-row">
                <div class="kpi"><h4>Total jobs</h4><div class="val">42</div><div class="trend">+3 this week</div></div>
                <div class="kpi"><h4>Running</h4><div class="val">5</div><div class="trend">2 started recently</div></div>
                <div class="kpi"><h4>Failed (24h)</h4><div class="val">4</div><div class="trend">Check logs & retries</div></div>
                <div class="kpi"><h4>Avg duration</h4><div class="val">54s</div><div class="trend">last 20 runs</div></div>
            </div>

            <!-- Job list -->
            <div class="tablewrap">
                <table class="table">
                    <thead>
                    <tr>
                        <th>Job</th>
                        <th class="hide-md">Schedule</th>
                        <th class="hide-md">Last Execution</th>
                        <th class="hide-md">Latest Run</th>
                        <th>Status</th>
                        <th style="text-align:right">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @php
                        $jobs = $jobs ?? [
                          ['id'=>'setup-dwh-table-orders-schema-1','type'=>'Setup','schedule'=>'manual','ms'=>3,'run_at'=>'2025-05-21 11:05:50','status'=>'idle','prog'=>10],
                          ['id'=>'setup-dwh-table-customers-schema-1','type'=>'Setup','schedule'=>'manual','ms'=>7,'run_at'=>'2025-05-21 11:05:50','status'=>'idle','prog'=>20],
                          ['id'=>'sync-orders','type'=>'Sync','schedule'=>'hourly','ms'=>462,'run_at'=>'2025-07-24 12:15:26','status'=>'failed','prog'=>60],
                          ['id'=>'sync-products','type'=>'Sync','schedule'=>'daily','ms'=>388,'run_at'=>'2025-07-29 11:08:23','status'=>'running','prog'=>72],
                        ];
                        $statusPill = function($s){
                          return match($s){
                            'running' => ['dot'=>'dot dot--run','pill'=>'pill pill--run','label'=>'Running'],
                            'failed'  => ['dot'=>'dot dot--fail','pill'=>'pill pill--fail','label'=>'Failed'],
                            'queued'  => ['dot'=>'dot dot--queue','pill'=>'pill pill--queue','label'=>'Queued'],
                            default   => ['dot'=>'dot','pill'=>'pill','label'=>ucfirst($s)]
                          };
                        };
                    @endphp

                    @foreach($jobs as $j)
                        @php $sp = $statusPill($j['status']); @endphp
                        <tr>
                            <td class="jobcell">
                                <div class="tr row-grid">
                                    <div class="jobid">
                                        <i class="fa-regular fa-square-check" style="color:var(--ink-400)"></i>
                                        <div>
                                            <div>{{ $j['id'] }}</div>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td class="hide-md">
                                <div class="meta">Avg: {{ $j['ms'] }} ms</div>
                                <div class="progress" aria-label="duration vs avg">
                                    <span style="width: {{ $j['prog'] }}%"></span>
                                </div>
                            </td>

                            <td class="hide-md"><div class="meta">{{ $j['ms'] }} ms</div></td>
                            <td class="hide-md"><div class="meta">{{ $j['run_at'] }}</div></td>

                            <td>
                                <div class="status">
                                    <span class="{{ $sp['dot'] }}"></span>
                                    <span class="{{ $sp['pill'] }}">{{ $sp['label'] }}</span>
                                </div>
                            </td>

                            <td>
                                <div class="actions">
                                    <details class="kebab">
                                        <summary class="icon-btn" aria-label="Open dataset actions">
                                            <!-- inline SVG (no icon font dependency) -->
                                            <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                                                <circle cx="5"  cy="12" r="2"></circle>
                                                <circle cx="12" cy="12" r="2"></circle>
                                                <circle cx="19" cy="12" r="2"></circle>
                                            </svg>
                                        </summary>
                                        <div class="menu" role="menu">
                                            <a class="mi" href="#"><i class="fa-solid fa-play"></i> Run now</a>
                                            <a class="mi" href="#"><i class="fa-regular fa-file-lines"></i> View logs</a>
                                            <a class="mi" href="#"><i class="fa-solid fa-gear"></i> Settings</a>
                                            <hr>
                                            <a class="mi" href="#"><i class="fa-regular fa-clock"></i> Schedule</a>
                                            <a class="mi danger" href="#"><i class="fa-solid fa-trash"></i> Delete</a>
                                        </div>
                                    </details>
                                </div>
                            </td>
                        </tr>
                    @endforeach

                    @if(empty($jobs))
                        <tr>
                            <td colspan="6">
                                <div class="card" style="text-align:center">
                                    No jobs yet. Click <strong>New Job</strong> to create your first pipeline.
                                </div>
                            </td>
                        </tr>
                    @endif
                    </tbody>
                </table>
            </div>
        </section>

    </main>
@endsection

@push('scripts')
@endpush