@extends('layouts.tenant-domain.base')

@section('content')
<div style="padding:1.25rem 0 2rem;">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
        <div>
            <div style="font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;color:#64748b;">Tenant Theme Preview</div>
            <h1 style="margin:0.35rem 0 0;font-size:2rem;font-weight:800;color:#111827;">Process Page Preview</h1>
            <p style="margin:0.45rem 0 0;color:#6b7280;">Project/{{ $project->name }}/{{ $activeTheme->name }}</p>
        </div>
        <div style="display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;">
            <a href="{{ route('themes.customize') }}" style="background:#fff;color:#111827;border:1px solid #e5e7eb;padding:0.72rem 1rem;border-radius:12px;text-decoration:none;font-weight:600;">Back To Customize</a>
            <span style="background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;padding:0.72rem 1rem;border-radius:12px;font-weight:600;">Preview Only - DB update nahi hui</span>
        </div>
    </div>

    <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1rem;">
        <div style="background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:1rem 1.1rem;box-shadow:0 12px 30px rgba(15,23,42,0.05);">
            <div style="font-size:0.8rem;color:#64748b;">Active Processes</div>
            <div style="margin-top:0.4rem;font-size:1.8rem;font-weight:800;color:#111827;">24</div>
        </div>
        <div style="background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:1rem 1.1rem;box-shadow:0 12px 30px rgba(15,23,42,0.05);">
            <div style="font-size:0.8rem;color:#64748b;">Pending Review</div>
            <div style="margin-top:0.4rem;font-size:1.8rem;font-weight:800;color:#111827;">7</div>
        </div>
        <div style="background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:1rem 1.1rem;box-shadow:0 12px 30px rgba(15,23,42,0.05);">
            <div style="font-size:0.8rem;color:#64748b;">Theme</div>
            <div style="margin-top:0.4rem;font-size:1.15rem;font-weight:800;color:#111827;">{{ $activeTheme->slug }}</div>
        </div>
    </div>

    <div style="background:#fff;border:1px solid #e5e7eb;border-radius:26px;padding:1rem 1rem 1.2rem;box-shadow:0 20px 45px rgba(15,23,42,0.06);overflow:hidden;">
        <div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:0.35rem 0 1rem;">
            <div>
                <h2 style="margin:0;font-size:1.1rem;font-weight:800;color:#111827;">Process Datatable Demo</h2>
                <p style="margin:0.35rem 0 0;color:#64748b;">Yahan aap active production theme (default/pmis/wmc) ka real process listing shell dekh sakte ho.</p>
            </div>
            <div style="display:flex;gap:0.65rem;flex-wrap:wrap;">
                <input type="text" value="Search process..." readonly style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:0.72rem 0.9rem;color:#94a3b8;min-width:220px;">
                <button type="button" style="background:#111827;color:#fff;border:none;border-radius:12px;padding:0.72rem 1rem;font-weight:700;cursor:default;">New Process</button>
            </div>
        </div>

        <div style="overflow:auto;border:1px solid #eef2f7;border-radius:18px;">
            <table style="width:100%;border-collapse:collapse;min-width:840px;">
                <thead>
                    <tr style="background:#f8fafc;">
                        <th style="text-align:left;padding:0.9rem 1rem;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:#64748b;border-bottom:1px solid #e5e7eb;">Process ID</th>
                        <th style="text-align:left;padding:0.9rem 1rem;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:#64748b;border-bottom:1px solid #e5e7eb;">Process</th>
                        <th style="text-align:left;padding:0.9rem 1rem;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:#64748b;border-bottom:1px solid #e5e7eb;">Owner</th>
                        <th style="text-align:left;padding:0.9rem 1rem;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:#64748b;border-bottom:1px solid #e5e7eb;">Status</th>
                        <th style="text-align:left;padding:0.9rem 1rem;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:#64748b;border-bottom:1px solid #e5e7eb;">Updated</th>
                        <th style="text-align:left;padding:0.9rem 1rem;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:#64748b;border-bottom:1px solid #e5e7eb;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($processRows as $row)
                        @php
                            $statusPalette = match($row['status']) {
                                'Approved' => ['bg' => '#dcfce7', 'color' => '#166534'],
                                'Pending' => ['bg' => '#fef3c7', 'color' => '#92400e'],
                                'Needs Review' => ['bg' => '#fee2e2', 'color' => '#b91c1c'],
                                default => ['bg' => '#dbeafe', 'color' => '#1d4ed8'],
                            };
                        @endphp
                        <tr>
                            <td style="padding:1rem;border-bottom:1px solid #eef2f7;font-weight:700;color:#111827;">{{ $row['id'] }}</td>
                            <td style="padding:1rem;border-bottom:1px solid #eef2f7;color:#111827;">{{ $row['process'] }}</td>
                            <td style="padding:1rem;border-bottom:1px solid #eef2f7;color:#475569;">{{ $row['owner'] }}</td>
                            <td style="padding:1rem;border-bottom:1px solid #eef2f7;">
                                <span style="display:inline-flex;padding:0.3rem 0.7rem;border-radius:999px;background:{{ $statusPalette['bg'] }};color:{{ $statusPalette['color'] }};font-size:0.78rem;font-weight:700;">{{ $row['status'] }}</span>
                            </td>
                            <td style="padding:1rem;border-bottom:1px solid #eef2f7;color:#475569;">{{ $row['updated_at'] }}</td>
                            <td style="padding:1rem;border-bottom:1px solid #eef2f7;">
                                <button type="button" style="background:#f8fafc;border:1px solid #e2e8f0;color:#111827;border-radius:10px;padding:0.5rem 0.8rem;font-weight:600;cursor:default;">Open</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection