@extends('crm.layouts.app')

@section('title', 'E-Consents')

@section('content')
<!-- Page Header -->
<div class="sm:flex sm:items-center sm:justify-between">
    <div class="min-w-0 flex-1">
        <h1 class="text-2xl font-semibold text-gray-900">E-Consents</h1>
        <p class="mt-2 text-sm text-gray-700">Manage digital consent forms and signatures for your appointments.</p>
    </div>
</div>

<!-- Statistics Cards -->
<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
    <div class="overflow-hidden rounded-lg bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5">
        <div class="px-4 py-5 sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500">Total Consents</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $totalConsents }}</dd>
        </div>
    </div>
    <div class="overflow-hidden rounded-lg bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5">
        <div class="px-4 py-5 sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500">This Month</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $thisMonthConsents }}</dd>
        </div>
    </div>
    <div class="overflow-hidden rounded-lg bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5">
        <div class="px-4 py-5 sm:p-6">
            <dt class="truncate text-sm font-medium text-gray-500">Pending</dt>
            <dd class="mt-1 text-3xl font-semibold tracking-tight text-yellow-600">{{ $pendingConsents }}</dd>
        </div>
    </div>
</div>

{{-- Finding one record fast is the whole point of keeping them here. --}}
<form method="GET" action="{{ route('crm.consents.index') }}"
      class="mt-8 flex flex-wrap items-end gap-3 rounded-lg bg-white p-4 shadow-xs inset-ring-1 inset-ring-gray-900/5">
    <div class="min-w-56 flex-1">
        <label for="search" class="block text-sm font-medium text-gray-900">Client</label>
        <input type="search" name="search" id="search" value="{{ $search }}"
               placeholder="Name or email"
               class="mt-1 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm">
    </div>
    <div>
        <label for="from" class="block text-sm font-medium text-gray-900">Signed from</label>
        <input type="date" name="from" id="from" value="{{ $from }}"
               class="mt-1 block rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm">
    </div>
    <div>
        <label for="to" class="block text-sm font-medium text-gray-900">to</label>
        <input type="date" name="to" id="to" value="{{ $to }}"
               class="mt-1 block rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm">
    </div>
    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
        Search
    </button>
    @if($search !== '' || $from || $to)
        <a href="{{ route('crm.consents.index') }}" class="px-2 py-2 text-sm font-semibold text-gray-600 hover:text-gray-900">
            Clear
        </a>
    @endif
</form>

@if($consents->count() > 0)
    <!-- Consents Table -->
    <div class="mt-8 overflow-hidden bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-lg">
        <table class="min-w-full divide-y divide-gray-300">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Client</th>
                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Appointment</th>
                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Artist</th>
                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Signed At</th>
                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">IP Address</th>
                    <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                        <span class="sr-only">Actions</span>
                    </th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 bg-white">
                @foreach ($consents as $consent)
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="whitespace-nowrap py-4 pl-4 pr-3 sm:pl-6">
                        <div class="flex items-center">
                            <div class="h-10 w-10 flex-shrink-0">
                                <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center ring-1 ring-inset ring-indigo-700/10">
                                    <span class="text-sm font-medium text-indigo-700">
                                        {{ substr($consent->appointment->client->name, 0, 1) }}
                                    </span>
                                </div>
                            </div>
                            <div class="ml-4">
                                <div class="font-medium text-gray-900">
                                    {{ $consent->appointment->client->name }}
                                </div>
                                <div class="text-sm text-gray-500">
                                    {{ $consent->appointment->client->email }}
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                        <div class="text-gray-900">{{ $consent->appointment->scheduled_at->format('M d, Y') }}</div>
                        <div class="text-gray-500">{{ $consent->appointment->scheduled_at->format('g:i A') }}</div>
                    </td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                        {{ $consent->appointment->user->name }}
                    </td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                        <div class="flex items-center">
                            <svg class="mr-1.5 size-4 flex-shrink-0 text-green-500" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                            </svg>
                            <span class="text-gray-900">{{ $consent->signed_at->format('M d, Y g:i A') }}</span>
                        </div>
                    </td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                        {{ $consent->ip_address ?? 'N/A' }}
                    </td>
                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ route('crm.appointments.show', $consent->appointment) }}" class="inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                                <svg class="size-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
                                    <path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 0 1 0-1.186A10.004 10.004 0 0 1 10 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0 1 10 17c-4.257 0-7.893-2.66-9.336-6.41ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" clip-rule="evenodd" />
                                </svg>
                                View
                            </a>
                            @if(Storage::disk('public')->exists($consent->path))
                                <a href="{{ route('crm.consent.download', $consent->appointment) }}" class="inline-flex items-center rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                                    <svg class="size-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z" />
                                        <path d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z" />
                                    </svg>
                                    PDF
                                </a>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    @if($consents->hasPages())
        <nav class="mt-8 flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
            <div class="-mt-px flex w-0 flex-1">
                @if($consents->onFirstPage())
                    <span class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-300">
                        <svg viewBox="0 0 20 20" fill="currentColor" class="mr-3 size-5 text-gray-300">
                            <path d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                        Previous
                    </span>
                @else
                    <a href="{{ $consents->previousPageUrl() }}" class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
                        <svg viewBox="0 0 20 20" fill="currentColor" class="mr-3 size-5 text-gray-400">
                            <path d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                        Previous
                    </a>
                @endif
            </div>
            <div class="hidden md:-mt-px md:flex">
                @foreach($consents->getUrlRange(1, $consents->lastPage()) as $page => $url)
                    @if($page == $consents->currentPage())
                        <span class="inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600">{{ $page }}</span>
                    @else
                        <a href="{{ $url }}" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">{{ $page }}</a>
                    @endif
                @endforeach
            </div>
            <div class="-mt-px flex w-0 flex-1 justify-end">
                @if($consents->hasMorePages())
                    <a href="{{ $consents->nextPageUrl() }}" class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
                        Next
                        <svg viewBox="0 0 20 20" fill="currentColor" class="ml-3 size-5 text-gray-400">
                            <path d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </a>
                @else
                    <span class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-300">
                        Next
                        <svg viewBox="0 0 20 20" fill="currentColor" class="ml-3 size-5 text-gray-300">
                            <path d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </span>
                @endif
            </div>
        </nav>
    @endif
@else
    <!-- Empty State -->
    <div class="mt-16 text-center">
        <svg class="mx-auto size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
        </svg>
        @if($search !== '' || $from || $to)
            <h3 class="mt-2 text-sm font-semibold text-gray-900">No consent forms match that search</h3>
            <p class="mt-1 text-sm text-gray-500">Try a different name, or widen the date range.</p>
            <div class="mt-6">
                <a href="{{ route('crm.consents.index') }}" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                    Show all consent forms
                </a>
            </div>
        @else
            <h3 class="mt-2 text-sm font-semibold text-gray-900">No consent forms</h3>
            <p class="mt-1 text-sm text-gray-500">Get started by sending consent forms to clients for their appointments.</p>
            <div class="mt-6">
                <a href="{{ route('crm.appointments.index') }}" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="mr-1.5 -ml-0.5 size-5">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z" clip-rule="evenodd" />
                    </svg>
                    View Appointments
                </a>
            </div>
        @endif
    </div>
@endif
@endsection