@extends('layouts.app')
@section('title', 'Public Signing Links')

@section('content')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10 bg-gray-50 dark:bg-boxdark-2 min-h-screen">
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">Public Signing Links</h2>
            <p class="text-sm text-gray-500">Manage your QR codes and public URLs.</p>
        </div>
        <a href="{{ route('public_links.create') }}" class="inline-flex items-center justify-center rounded-lg bg-brand-500 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-opacity-90">
            <i class="bi bi-plus-lg mr-1"></i> Create New Link
        </a>
    </div>

    <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke dark:border-strokedark shadow-sm overflow-hidden">
        <div class="max-w-full overflow-x-auto">
            <table class="w-full table-auto">
                <thead>
                    <tr class="bg-gray-50 dark:bg-meta-4 text-left border-b border-stroke dark:border-strokedark">
                        <th class="py-4 px-6 font-bold text-xs uppercase text-gray-500">Link Name</th>
                        <th class="py-4 px-6 font-bold text-xs uppercase text-gray-500">Documents</th>
                        <th class="py-4 px-6 font-bold text-xs uppercase text-gray-500">Submissions</th>
                        <th class="py-4 px-6 font-bold text-xs uppercase text-gray-500">Status</th>
                        <th class="py-4 px-6 font-bold text-xs uppercase text-gray-500 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-stroke dark:divide-strokedark">
                    @foreach($links as $link)
                    <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02] transition-colors">
                        <td class="py-5 px-6">
                            <h5 class="font-bold text-gray-800 dark:text-white">{{ $link->link_name }}</h5>
                            <p class="text-[10px] text-gray-400 mt-0.5">Created: {{ date('M d, Y', strtotime($link->created_at)) }}</p>
                        </td>
                        <td class="py-5 px-6">
                            <div class="flex items-center gap-2">
                                <div class="flex flex-wrap gap-1">
                                    @foreach(explode(', ', $link->combined_titles) as $title)
                                        <span class="inline-flex items-center gap-1 bg-gray-50 dark:bg-meta-4 px-2 py-0.5 rounded border border-stroke dark:border-strokedark text-[10px] font-bold text-gray-600 dark:text-gray-300">
                                            <i class="bi bi-file-earmark-pdf text-danger"></i>
                                            {{ trim($title) }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        </td>
                        <td class="py-5 px-6">
                            <div class="text-sm font-bold text-gray-800 dark:text-white">
                                {{ $link->submission_count }} <span class="text-gray-400 font-normal text-xs">/ {{ $link->submission_limit ?: '∞' }}</span>
                            </div>
                        </td>
                        <td class="py-5 px-6">
                            <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold border 
                                {{ $link->status == 'Active' ? 'bg-success-50 text-success-700 border-success-100' : 'bg-danger-50 text-danger-700 border-danger-100' }}">
                                <span class="h-1.5 w-1.5 rounded-full {{ $link->status == 'Active' ? 'bg-success' : 'bg-danger' }}"></span>
                                {{ $link->status }}
                            </span>
                        </td>
                        <td class="py-5 px-6 text-right">
                            <div class="inline-flex items-center gap-2">
                                <a href="{{ route('public_links.edit', $link->link_guid) }}" 
                                   class="bg-white dark:bg-meta-4 border border-stroke dark:border-strokedark px-3 py-2 rounded-lg text-xs font-bold text-gray-700 dark:text-gray-300 hover:text-primary transition-all shadow-sm">
                                    <i class="bi bi-pencil"></i> Edit
                                </a>
                                <a href="{{ route('public_links.show', $link->link_guid) }}" 
                                   class="bg-white dark:bg-meta-4 border border-stroke dark:border-strokedark px-3 py-2 rounded-lg text-xs font-bold text-primary transition-all shadow-sm">
                                    <i class="bi bi-eye"></i> View Details
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforeach

                    @if($links->isEmpty())
                    <tr>
                        <td colspan="5" class="py-20 text-center">
                            <div class="text-gray-300 text-6xl mb-4"><i class="bi bi-link-45deg"></i></div>
                            <p class="text-gray-500 font-medium">No public signing links created yet.</p>
                            <p class="text-xs text-gray-400 mt-1">Generate a link to start collecting signatures from anyone.</p>
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection