@extends('layouts.admin')
@section('title', 'Services')
@section('page-title', 'Services')

@section('content')

@if(session('success'))
<div style="background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:10px;padding:12px 16px;margin-bottom:20px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#86efac;">
    ✓ {{ session('success') }}
</div>
@endif

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
    <div style="font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace;">{{ $packages->count() }} PACKAGES</div>
    <a href="{{ route('admin.services.create') }}"
       style="display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ef4444,#b91c1c);border:none;color:white;padding:10px 20px;border-radius:10px;font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:2px;text-decoration:none;box-shadow:0 4px 16px rgba(239,68,68,0.25);transition:opacity 0.2s;"
       onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        NEW SERVICE
    </a>
</div>

<div class="glass-card">
    <div class="section-header">
        <div class="section-title">All Services</div>
        <span style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);">DRAG TO REORDER COMING SOON</span>
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Tier</th>
                <th>Name</th>
                <th>Slug</th>
                <th>Price</th>
                <th>Type</th>
                <th>Status</th>
                <th style="text-align:right;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($packages as $pkg)
            <tr>
                <td>
                    <span style="font-family:'JetBrains Mono',monospace;font-size:11px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);color:#ef4444;padding:2px 8px;border-radius:6px;">T{{ $pkg->tier }}</span>
                </td>
                <td style="font-weight:600;color:var(--text);">{{ $pkg->name }}</td>
                <td style="color:var(--muted);font-size:11px;" class="mono">{{ $pkg->slug }}</td>
                <td>
                    @if($pkg->price > 0)
                        <span class="mono" style="color:#86efac;font-weight:600;">${{ number_format($pkg->price, 2) }}</span>
                    @else
                        <span style="color:var(--muted);font-size:11px;font-family:'JetBrains Mono',monospace;">CUSTOM</span>
                    @endif
                </td>
                <td>
                    @if($pkg->is_custom)
                        <span style="background:rgba(99,102,241,0.12);color:#a5b4fc;border:1px solid rgba(99,102,241,0.2);padding:2px 8px;border-radius:12px;font-size:10px;font-family:'JetBrains Mono',monospace;">CUSTOM</span>
                    @else
                        <span style="background:rgba(100,116,139,0.12);color:#94a3b8;border:1px solid rgba(100,116,139,0.2);padding:2px 8px;border-radius:12px;font-size:10px;font-family:'JetBrains Mono',monospace;">STANDARD</span>
                    @endif
                </td>
                <td>
                    <form action="{{ route('admin.services.toggle', $pkg) }}" method="POST" style="display:inline;">
                        @csrf @method('PATCH')
                        <button type="submit" style="background:none;border:none;cursor:pointer;padding:0;">
                            @if($pkg->is_active)
                                <span class="badge badge-paid"><span class="badge-dot"></span>ACTIVE</span>
                            @else
                                <span style="background:rgba(100,116,139,0.12);color:#64748b;border:1px solid rgba(100,116,139,0.2);padding:3px 10px;border-radius:20px;font-size:10px;font-family:'JetBrains Mono',monospace;display:inline-flex;align-items:center;gap:5px;">
                                    <span style="width:5px;height:5px;border-radius:50%;background:#475569;display:inline-block;"></span>INACTIVE
                                </span>
                            @endif
                        </button>
                    </form>
                </td>
                <td style="text-align:right;">
                    <div style="display:inline-flex;align-items:center;gap:12px;">
                        <a href="{{ route('admin.services.edit', $pkg) }}" style="color:#93c5fd;font-size:11px;font-family:'JetBrains Mono',monospace;text-decoration:none;transition:opacity 0.15s;" onmouseover="this.style.opacity='0.6'" onmouseout="this.style.opacity='1'">EDIT</a>
                        <form action="{{ route('admin.services.destroy', $pkg) }}" method="POST" style="display:inline;" onsubmit="return confirm('Delete {{ addslashes($pkg->name) }}? This cannot be undone.')">
                            @csrf @method('DELETE')
                            <button type="submit" style="background:none;border:none;cursor:pointer;color:#f87171;font-size:11px;font-family:'JetBrains Mono',monospace;padding:0;transition:opacity 0.15s;" onmouseover="this.style.opacity='0.6'" onmouseout="this.style.opacity='1'">DELETE</button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" style="padding:48px;text-align:center;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;">NO SERVICES YET</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection
