@extends('layouts.app')
@section('title', 'Manage Bulk Batch')

@section('content')
<div class="mx-auto max-w-screen-2xl p-4 md:p-6 bg-gray-50 dark:bg-boxdark-2 min-h-screen">
    
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h2 class="text-xl font-bold text-black dark:text-white">Batch: {{ $batch->bulk_guid }}</h2>
            <!-- Added ?? fallback to prevent Undefined Variable crash -->
            <p class="text-sm text-gray-500">Status: <span class="font-bold text-primary">{{ $display_status ?? $batch->status }}</span></p>
        </div>
        <a href="{{ route('bulk.list') }}" class="text-sm font-bold text-primary underline">Back to History</a>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white p-5 border rounded shadow-sm">
            <p class="text-gray-400 text-xs font-bold uppercase">Signatures Collected</p>
            <p class="text-2xl font-bold text-success">{{ $signed_count }} / {{ $batch->total_count }}</p>
        </div>
        <div class="bg-white p-5 border rounded shadow-sm">
            <p class="text-gray-400 text-xs font-bold uppercase">Creation Progress</p>
            <p class="text-2xl font-bold">{{ $batch->status }}</p>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white border rounded shadow-sm overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr class="text-left">
                    <th class="p-4 text-xs font-bold text-gray-500 uppercase">Recipient / Package</th>
                    <th class="p-4 text-xs font-bold text-gray-500 uppercase">Status</th>
                    <th class="p-4 text-xs font-bold text-gray-500 uppercase">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($packages as $pkg)
                <tr class="border-t border-gray-100">
                    <td class="p-4">
                        <div class="text-sm font-bold text-black dark:text-white">{{ $pkg->recipient_email ?? 'N/A' }}</div>
                        <div class="text-[10px] text-gray-400 font-mono">{{ $pkg->package_guid }}</div>
                    </td>
                    <td class="p-4">
                        <span class="px-2 py-1 rounded-full text-[10px] font-bold 
                            {{ $pkg->package_status == 'Completed' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                            {{ strtoupper($pkg->package_status) }}
                        </span>
                    </td>
                    <td class="p-4">
                        @if($pkg->email_template_guid)
                            <a href="{{ url('/sign/' . $pkg->email_template_guid) }}" target="_blank" class="bg-brand-500 text-white px-3 py-1.5 rounded text-xs font-bold shadow-sm inline-flex items-center gap-1">
                                <i class="bi bi-pencil-square"></i> Open Signing Page
                            </a>
                        @else
                            <span class="text-gray-400 text-xs italic">Processing Link...</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection