@if (isset($services))
    <div class="row">
        <div class="col-12">
            <div class="">
                <table class="table table-bordered table-hover w-100">
                    <thead>
                        <tr>
                            <th>Nombre de la empresa</th>
                            <th>Estado</th>
                            <th></th>
                            <th>Opciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- Actions --}}
                        @forelse($services as $service)
                            <tr data-widget="expandable-table" aria-expanded="false" class="row-loading">
                                <td>{{ $service->service_name }}</td>
                                <td>
                                    @isset($service->status->status)
                                        @if ($service->status->id == 1)
                                            <span class="badge bg-success">{{ $service->status->status }}</span>
                                        @elseif($service->status->id == 3 || $service->status->id == 4)
                                            <span class="badge bg-danger">{{ $service->status->status }}</span>
                                        @elseif($service->status->id == 2)
                                            <span class="badge bg-warning">{{ $service->status->status }}</span>
                                        @else
                                            <span class="badge bg-secondary">{{ $service->status->status }}</span>
                                        @endif
                                    @endisset
                                </td>
                                <td><a href="" class="showServiceDetails"
                                        data-service-id="{{ $service->id }}">Ver
                                        más datos</a></td>
                                <td>
                                    @if ($service->status->id == 1)
                                        <a href="" class="cancelSuscription"
                                            data-service-id="{{ $service->id }}"><span class="badge bg-danger">Cancelar
                                                Suscripción</span></a>
                                        <form id="cancelService_{{ $service->id }}"
                                            action="{{ route('cancelServiceByUser') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="idService" value="{{ $service->id }}">
                                        </form>
                                    @endif
                                    @if ($service->status->id == 3)
                                        {{-- <a href="{{ Route('showRenewSub', $service->slug) }}"
                                            class="renewSuscription"><span class="badge bg-success">Renovar
                                                Suscripción</span></a> --}}
                                        <a href="" class="renewSuscription badge bg-success text-decoration-none"
                                            data-url-basic="{{ Route('showRenewSub', ['serviceSlug' => $service->slug, 'slug' => 'basic']) }}"
                                            data-url-premium="{{ Route('showRenewSub', ['serviceSlug' => $service->slug, 'slug' => 'premium']) }}"
                                            data-url-ultimate="{{ Route('showRenewSub', ['serviceSlug' => $service->slug, 'slug' => 'ultimate']) }}">
                                            Renovar Suscripción
                                        </a>
                                    @endif
                                    <a href="{{ Route('showService', $service->slug) }}"
                                        class="badge bg-secondary text-decoration-none" target="_BLANK">Ver mi
                                        empresa</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="bg-secondary" colspan="3" align="center">Sin servicios disponibles,
                                    cree uno nuevo
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Show service --}}
    <div class="modal fade" id="showServiceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        role="dialog" aria-labelledby="notLinkedModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-info" id="showServiceModalTitle">Detalles del servicio</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="showServicePartial">
                    {{-- Here a partial --}}
                </div>
                <div class="modal-footer">
                    @if ($service->draft == false || $service->status->id == 1)
                        <a href="{{ Route('changeSubData') }}" type="button" class="btn btn-warning">Modificar
                            datos</a>
                    @endif
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar detalles</button>
                </div>
            </div>
        </div>
    </div>
@else
    <div id="promotion" class="alert alert-info d-flex justify-content-between align-items-center" role="alert">
        <div>
            <i class="bi bi-megaphone-fill me-2"></i>
            ¿Quieres promocionar tu empresa con nosotros?
        </div>
        <a href="{{ Route('showSuscriptions') }}" class="btn custom-bg-color btn-sm">Suscríbete con nosotros</a>
    </div>
@endif