@extends('layouts.app')
@section('title', 'Bulk Signature History')

@section('content')
<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">
    {{-- Header Section --}}
    <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">Bulk Signature History</h2>
            <p class="text-sm text-gray-500">Track and manage your high-volume document requests.</p>
        </div>
        <a href="/bulk-signature-request" 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 transition-all">
            <i class="bi bi-plus-lg mr-1"></i> Create Bulk Request
        </a>
    </div>

    {{-- Table Section --}}
    <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">Batch ID</th>
                        <th class="py-4 px-6 font-bold text-xs uppercase text-gray-500">Recipients / Progress</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($batches as $batch)
                    <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02] transition-colors">
                        <td class="py-5 px-6">
                            <h5 class="font-mono font-bold text-sm text-gray-800 dark:text-white">
                                {{-- substr($batch->bulk_guid, 0, 8) }}...{{ substr($batch->bulk_guid, -4) --}}
                                {{ $batch->bulk_guid }}
                            </h5>
                            <p class="text-[10px] text-gray-400 mt-0.5">
                                Sent on: {{ date('M d, Y', strtotime($batch->created_at)) }}
                            </p>
                        </td>
                        
                        <td class="py-5 px-6">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-bold text-gray-800 dark:text-white">
                                    {{ $batch->signed_count }} <span class="text-gray-400 font-normal text-xs">/ {{ $batch->total_count }} Signed</span>
                                </div>
                                {{-- Optional: Mini Progress Bar --}}
                                <div class="w-24 h-1.5 bg-gray-100 dark:bg-meta-4 rounded-full overflow-hidden">
                                    <div class="h-full bg-primary" style="width: {{ ($batch->signed_count / max($batch->total_count, 1)) * 100 }}%"></div>
                                </div>
                            </div>
                        </td>

                        <td class="py-5 px-6">
                            @php
                                $isCompleted = ($batch->signed_count == $batch->total_count);
                            @endphp
                            <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold border 
                                {{ $isCompleted ? 'bg-success-50 text-success-700 border-success-100' : 'bg-primary-50 text-primary border-primary-100' }}">
                                <span class="h-1.5 w-1.5 rounded-full {{ $isCompleted ? 'bg-success' : 'bg-primary' }}"></span>
                                {{ $isCompleted ? 'Completed' : 'Active' }}
                            </span>
                        </td>

                        <td class="py-5 px-6 text-right">
                            <a href="{{ route('bulk.show', $batch->bulk_guid) }}" 
                               class="bg-white dark:bg-meta-4 border border-stroke dark:border-strokedark px-4 py-2 rounded-lg text-xs font-bold text-primary hover:bg-primary hover:text-white transition-all shadow-sm">
                                <i class="bi bi-gear-fill mr-1"></i> Manage
                            </a>
                        </td>
                    </tr>
                    @endforeach

                    @if($batches->isEmpty())
                    <tr>
                        <td colspan="4" class="py-20 text-center">
                            <div class="text-gray-300 text-6xl mb-4"><i class="bi bi-layers"></i></div>
                            <p class="text-gray-500 font-medium">No bulk requests found.</p>
                            <p class="text-xs text-gray-400 mt-1">Send a document to multiple recipients at once via CSV upload.</p>
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection