File: /home/posscale/public_html/printmanager/resources/views/tenant/settings/list.blade.php
<x-app-layout>
<x-slot name="header">
<h1 class="mb-0 uppercase text-3xl">
{{ __('Manage Connections') }}
</h1>
</x-slot>
<div class="py-12">
<div class="">
@if(session()->has('message'))
<div class="alert alert-success text-white p-4 bg-green-900 font-semibold text-l mb-8">
{{ session()->get('message') }}
</div>
@endif
<div class="card mb-lg ">
<div class="card-header flex">
<h3 class="card-title w-80 uppercase">
<i class="fas fa-cog"></i>
Manage Connections
</h3>
<div class="flex w-full items-center justify-end gap-2">
<a href="{{ route('settings.create') }}" class="btn-primary inline-flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">Add New</a>
</div>
</div>
<div class="card-body ">
<table class="table">
<thead>
<tr class="uppercase text-sm font-medium text-gray-900 text-slate-700 font-semibold">
<th class="text-center">Status</th>
<th class="text-left">Type</th>
<th class="text-left">Email</th>
<th class="text-left">Connection Created On</th>
<th class="text-left">Last Sync on </th>
<th class="text-right">Action</th>
</tr>
</thead>
<tbody >
@forelse($connections as $connection)
@php
$data = json_decode($connection->data);
@endphp
<tr class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8">
<td class="text-center border-slate-100 p-4 ">
<span class="rounded-md w-3 h-3 inline-block bg-{{$connection->connection_status?'green':'red'}}-600"></span>
</td>
<td class="py-4">{{ $connection->type }}
@if( $connection->type == 'SMTP') ({{$data->type_for_monitoring}}) @endif
@if( $connection->type == 'FTP') ({{$data->ftp_protocol}}) @endif
</td>
@if( $connection->type == 'SMTP')
<td class="py-4">{{ $data->user_name }}</td>
@endif
@if( $connection->type == 'FTP')
<td class="py-4">
{{ $data->ftp_user_name }}
<br>
@if(isset($data->error))
<p class="text-red-600 p-y-2 mt-2 ">{{ $data->error??'' }}</p>
@endif
</td>
@endif
<td class="py-4">{{ $connection->last_connection_date?date('Y-m-d', strtotime($connection->last_connection_date)):'-' }}</td>
<td class="py-4">{{ $connection->last_sync_date?date('Y-m-d', strtotime($connection->last_sync_date)):'-' }}</td>
<td class="py-4 w-80 text-white text-right">
<a href="{{ route('settings.edit', $connection->id)}}" class="text-[#ffffff] border rounded border-[#ffffff] inline-block mr-2 font-medium p-2 hover:bg-[#3b82f6] hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 inline-block mr-1">
<path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
</svg>
EDIT
</a>
<a x-data href="javascript:void(0);" class="text-[#ffffff] border rounded border-[#ffffff] inline-block mr-2 font-medium p-2 hover:bg-[#3b82f6] hover:text-white" @click="$dispatch('open-delete', { url: '{{route('settings.destroy', $connection->id)}}' })">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z" clip-rule="evenodd" />
</svg>
DELETE
</a>
</td>
</tr>
@empty
<tr>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500" colspan="4">No Connection found</td>
</tr>
@endforelse
</tbody>
</table>
<div class="flex uppercase mt-5 gap-4 text-slate-600 text-sm justify-end">
<div> <span class="rounded-md w-3 h-3 inline-block bg-green-600 mr-2"></span>Connected</div>
<div> <span class="rounded-md w-3 h-3 inline-block bg-red-600 mr-2"></span>Error in Connection</div>
</div>
{{ $connections->links() }}
</div>
</div>
<div x-data="{ open: false, url:'' }">
<div @open-delete.window="url=$event.detail.url;open=true;" @keydown.escape.window="open = false" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" x-show="open" style="display: none" x-cloak>
<!-- Modal -->
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white p-6 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full" @click.away="open = false" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0">
<!-- Modal header -->
<div class="flex items-start justify-between">
<div class="text-left">
<h3 class="text-lg leading-6 font-medium text-black">Are you sure, Want to delete the connection?</h3>
</div>
<span class="cursor-pointer text-black text-xl" @click="open = false">✕</span>
</div>
<div class="mt-0 mb-10">
<p class="text-sm text-red-700">
After deleting connection, You will not able to restore it.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center justify-start gap-2 mt-10">
<button type="button" class="w-full btn btn-primary uppercase sm:w-auto" @click="open = false">
Cancel
</button>
<form x-bind:action="url" method="POST">
@csrf
@method('DELETE')
<button type="submit" class="w-full btn btn-error uppercase">
Delete
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>