<x-app-layout>
    <x-slot name="header">Gestión de Servicios</x-slot>

    @if(session('success'))
        <div style="margin-bottom:20px; padding:14px 20px; background:rgba(0,200,100,0.07); border:1px solid rgba(0,200,100,0.25); border-radius:10px; font-size:13px; font-family:'Space Mono',monospace; color:#4ade80;">
            {{ session('success') }}
        </div>
    @endif

    <div class="card">
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border);">
            <span style="font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted);">Servicios Registrados</span>
            <a href="{{ route('admin.servicios.create') }}" class="table-btn" style="border-color:rgba(0,245,255,0.25); color:var(--cyan);">
                <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
                    <path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
                Nuevo Servicio
            </a>
        </div>

        <table class="data-table">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Descripción</th>
                    <th>Precio</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($servicios as $servicio)
                <tr>
                    <td style="font-weight:600;">{{ $servicio->nombre }}</td>
                    <td style="color:var(--muted); font-size:13px;">{{ $servicio->descripcion }}</td>
                    <td>
                        <span style="font-family:'Space Mono',monospace; font-size:13px; color:var(--cyan);">
                            S/ {{ number_format($servicio->precio, 2) }}
                        </span>
                    </td>
                    <td>
                        <div style="display:flex; gap:8px; align-items:center;">
                            <a href="{{ route('admin.servicios.edit', $servicio) }}" class="table-btn">
                                <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
                                    <path d="M9.5 2.5l2 2L4 12H2v-2L9.5 2.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
                                </svg>
                                Editar
                            </a>
                            <form action="{{ route('admin.servicios.destroy', $servicio) }}" method="POST" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="table-btn" style="border-color:rgba(255,60,60,0.2); color:rgba(255,100,100,0.6);" onclick="return confirm('¿Eliminar este servicio?')">
                                    <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
                                        <path d="M2 4h10M5 4V3a1 1 0 011-1h2a1 1 0 011 1v1M6 7v3M8 7v3M3 4l1 8h6l1-8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    Eliminar
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</x-app-layout>