@extends('layouts.admin')

@section('admin-content')
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
    <h2 style="font-size: 1.5rem; font-weight: 800;">Gestión de Servicios</h2>
    <a href="{{ route('admin.services.create') }}" class="btn btn-primary btn-sm">
        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        Nuevo Servicio
    </a>
</div>

@if($services->isEmpty())
    <p style="color: var(--text-muted); text-align: center; padding: 2rem;">No hay servicios creados en este momento.</p>
@else
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Imagen</th>
                    <th>Nombre</th>
                    <th>Descripción</th>
                    <th>Precio</th>
                    <th>Estado</th>
                    <th style="text-align: right;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($services as $service)
                    <tr>
                        <td>
                            <img src="{{ $service->image_url }}" alt="{{ $service->name }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: #f1f5f9;">
                        </td>
                        <td><strong>{{ $service->name }}</strong></td>
                        <td>
                            <div style="max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem;" title="{{ $service->description }}">
                                {{ $service->description ?? 'Sin descripción' }}
                            </div>
                        </td>
                        <td style="font-weight: 600; color: var(--primary-color);">
                            {{ $service->price ? '$' . number_format($service->price, 2) : 'A convenir' }}
                        </td>
                        <td>
                            @if($service->is_active)
                                <span class="badge badge-info">Activo</span>
                            @else
                                <span class="badge badge-warning" style="background-color: var(--color-error); color: white;">Inactivo</span>
                            @endif
                        </td>
                        <td style="text-align: right;">
                            <div style="display: inline-flex; gap: 0.5rem; justify-content: flex-end;">
                                <a href="{{ route('admin.services.edit', $service) }}" class="btn btn-outline btn-sm" title="Editar">
                                    Editar
                                </a>
                                <form action="{{ route('admin.services.destroy', $service) }}" method="POST" onsubmit="return confirm('¿Estás seguro de eliminar este servicio? Esta acción no se puede deshacer.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" title="Eliminar">
                                        Eliminar
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif
@endsection