ladill-hosting/resources/views/hosting/panel/ssl.blade.php

<x-hosting-panel-layout :account="$account">
    <x-slot name="title">SSL Certificates - {{ $account->username }}</x-slot>
    <x-slot name="header">SSL Certificates</x-slot>

    <div class="space-y-6">
        @if(session('success'))
            <div class="rounded-lg bg-emerald-50 border border-emerald-200 p-4">
                <p class="text-sm text-emerald-800">{{ session('success') }}</p>
            </div>
        @endif

        @if(session('error'))
            <div class="rounded-lg bg-red-50 border border-red-200 p-4">
                <p class="text-sm text-red-800">{{ session('error') }}</p>
            </div>
        @endif

        <div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-200">
                <h3 class="text-base font-semibold text-slate-900">Your Domains</h3>
                <p class="mt-1 text-sm text-slate-500">Manage SSL certificates for your domains using Let's Encrypt.</p>
            </div>
            @if($account->sites->count())
                <table class="min-w-full divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Domain</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">SSL Status</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200">
                        @foreach($account->sites as $site)
                            <tr class="hover:bg-slate-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        @include('components.icons.domain-globe', ['class' => 'h-5 w-5 text-slate-400'])
                                        <span class="text-sm font-medium text-slate-900">{{ $site->domain }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @if($site->ssl_enabled || $site->ssl_status === 'issued')
                                        <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-800">
                                            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
                                            SSL Active
                                        </span>
                                    @elseif($site->ssl_status === 'provisioning')
                                        <div>
                                            <span class="inline-flex items-center gap-1.5 rounded-full bg-amber-100 px-2.5 py-1 text-xs font-medium text-amber-800">
                                                Provisioning…
                                            </span>
                                            <p class="mt-1 text-xs text-slate-500">Waiting for DNS / Let's Encrypt</p>
                                        </div>
                                    @elseif($site->ssl_status === 'failed')
                                        <div>
                                            <span class="inline-flex items-center gap-1.5 rounded-full bg-red-100 px-2.5 py-1 text-xs font-medium text-red-800">
                                                SSL Failed
                                            </span>
                                            @if($site->ssl_error)
                                                <p class="mt-1 max-w-xs text-xs text-slate-500 truncate" title="{{ $site->ssl_error }}">{{ \Illuminate\Support\Str::limit($site->ssl_error, 80) }}</p>
                                            @endif
                                        </div>
                                    @else
                                        <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">
                                            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                                            No SSL
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right">
                                    @if($site->ssl_enabled || $site->ssl_status === 'issued')
                                        <span class="text-xs text-slate-500">Auto-renews</span>
                                    @else
                                        <form action="{{ route('hosting.panel.ssl.request', [$account, $site]) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="btn-primary btn-primary-sm">
                                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
                                                {{ $site->ssl_status === 'failed' ? 'Retry SSL' : 'Issue SSL' }}
                                            </button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="px-6 py-12 text-center">
                    @include('components.icons.domain-globe', ['class' => 'mx-auto h-12 w-12 text-slate-300'])
                    <p class="mt-4 text-sm text-slate-500">No domains configured. Add a domain first to enable SSL.</p>
                    <a href="{{ route('hosting.panel.domains', $account) }}" class="mt-4 btn-primary">
                        Add Domain
                    </a>
                </div>
            @endif
        </div>

        <div class="rounded-xl border border-blue-200 bg-blue-50 p-6">
            <h3 class="text-base font-semibold text-blue-900 mb-2">About Let's Encrypt SSL</h3>
            <ul class="space-y-2 text-sm text-blue-800">
                <li class="flex items-start gap-2">
                    <svg class="h-5 w-5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                    <span>Free SSL certificates from Let's Encrypt</span>
                </li>
                <li class="flex items-start gap-2">
                    <svg class="h-5 w-5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                    <span>Certificates auto-renew every 90 days</span>
                </li>
                <li class="flex items-start gap-2">
                    <svg class="h-5 w-5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                    <span>Your domain must point to this server before issuing SSL</span>
                </li>
            </ul>
        </div>
    </div>
</x-hosting-panel-layout>