@extends('admin_navbar')
@section('content')
<style>
    .card{background:#fff;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.08);padding:20px;animation:fadeIn .6s ease}
    @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
    .btn{background:linear-gradient(135deg,#2563eb,#1e40af);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;transition:all .3s ease;font-weight:800}
    .btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(37,99,235,.35)}
    .alert{background:#ecfdf5;color:#065f46;padding:12px;border-radius:8px;margin-top:12px}

    table{width:100%;border-collapse:collapse;margin-top:15px}
    th{background:#f1f5f9;text-align:left;padding:12px;font-size:13px;color:#334155}
    td{padding:12px;border-bottom:1px solid #e5e7eb;font-size:13px;vertical-align:middle}
    tr:hover{background:#f8fafc;transition:background .2s ease}

    .badge{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:900}
    .active{background:#dcfce7;color:#166534}
    .inactive{background:#fee2e2;color:#991b1b}

    .actions{white-space:nowrap}
    .actions a,.actions button{
        margin-right:8px;font-size:13px;color:#2563eb;background:none;border:none;cursor:pointer;font-weight:900;
        text-decoration:none;
    }
    .actions a:hover,.actions button:hover{text-decoration:underline}

    .pillbtn{
        display:inline-flex;align-items:center;justify-content:center;
        padding:7px 10px;border-radius:999px;border:1px solid #e5e7eb;
        background:#fff;color:#0f172a;font-weight:900;font-size:12px;
        text-decoration:none;margin-right:8px;transition:all .2s ease;
    }
    .pillbtn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(0,0,0,.06)}
    .pillbtn.primary{background:#eef2ff;color:#3730a3}
    .pillbtn.danger{background:#fff1f2;color:#9f1239}

    .img{
        width:48px;height:48px;border-radius:10px;object-fit:cover;
        border:1px solid #e5e7eb;background:#f8fafc;
        transition:transform .25s ease, box-shadow .25s ease;
    }
    .img:hover{transform:scale(1.08);box-shadow:0 10px 18px rgba(0,0,0,.12)}
    .muted{color:#64748b;font-size:12px}
</style>

<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row"></div>

        <div class="card">
            <div class="top">
                <div>
                    <h2 style="margin:0;">Main Tests</h2>
                    <div class="muted" style="margin-top:4px;">
                        Manage main tests (profiles/panels). Price is on <b>Test Type</b>. Each main test can have multiple <b>Sub Tests / Parameters</b>.
                    </div>
                </div>
                <a class="btn" href="{{ route('lab-tests.create') }}">+ Add Main Test</a>
            </div>

            @if(session('success'))
                <div class="alert">{{ session('success') }}</div>
            @endif

            <table>
                <thead>
                <tr>
                    <th style="width:70px;">Image</th>
                    <th>Main Test</th>
                    <th>Code</th>
                    <th>Type</th>
                    <th>Category</th>
                    <th>Reporting</th>
                    <th>Status</th>
                    <th style="width:280px;">Actions</th>
                </tr>
                </thead>

                <tbody>
                @forelse($tests as $t)
                    <tr>
                        <td>
                            @if($t->test_case_image)
                                <img class="img" src="{{ asset('storage/' . $t->test_case_image) }}" alt="test image">
                            @else
                                <div class="img" style="display:flex;align-items:center;justify-content:center;color:#94a3b8;font-weight:900;">
                                    N/A
                                </div>
                            @endif
                        </td>

                        <td>
                            <div style="font-weight:900;color:#0f172a;">{{ $t->test_name }}</div>
                            <div class="muted">
                                {{ \Illuminate\Support\Str::limit($t->description ?? '', 60) }}
                            </div>
                        </td>

                        <td style="font-weight:900;">{{ $t->test_code }}</td>
                        <td>{{ $t->testType?->name ?? '-' }}</td>
                        <td>{{ $t->testCategory?->name ?? '-' }}</td>
                        <td>{{ $t->reporting_time ?? '-' }}</td>

                        <td>
                            @if($t->is_active)
                                <span class="badge active">Active</span>
                            @else
                                <span class="badge inactive">Inactive</span>
                            @endif
                        </td>

                        <td class="actions">
                            {{-- ✅ Sub Tests / Parameters --}}
                            <a class="pillbtn primary"
                               href="{{ route('lab-tests.sub-tests.index', $t) }}"
                               title="Manage parameters / sub tests for this main test">
                                🧪 Sub Tests
                            </a>

                            <a class="pillbtn" href="{{ route('lab-tests.edit', $t) }}">✏️ Edit</a>

                            <form action="{{ route('lab-tests.destroy', $t) }}" method="POST" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button class="pillbtn danger" onclick="return confirm('Delete this main test? This may also delete its sub tests if you configured cascade.')" type="submit">
                                    🗑 Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8">No tests found.</td></tr>
                @endforelse
                </tbody>
            </table>

            <div style="margin-top:12px;">
                {{ $tests->links() }}
            </div>
        </div>

    </div>
</div>
@endsection