@extends('layouts.public') 

@section('title', 'Application Status')

@section('content')
<style>
    .pipeline-step .icon {
        transition: all 0.3s ease;
    }
    .pipeline-step.completed .icon {
        background: linear-gradient(135deg, #10B981 0%, #059669 100%);
        color: white;
        box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    }
    .pipeline-step.in_progress .icon {
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        color: white;
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
        animation: gentle-pulse 2.5s ease-in-out infinite;
    }
    .pipeline-step.pending .icon {
        background-color: #F3F4F6;
        color: #9CA3AF;
        border: 2px dashed #D1D5DB;
    }
    @keyframes gentle-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    .pipeline-connector {
        transition: all 0.5s ease;
    }
    .pipeline-connector.active {
        background: linear-gradient(90deg, #10B981 0%, #10B981 100%);
    }
    .pipeline-connector.inactive {
        background: #E5E7EB;
    }
    .status-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    }
    /* Payment Modal Styles */
    .payment-overlay {
        backdrop-filter: blur(4px);
    }
</style>

<div class="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 py-12 md:py-20">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header Section -->
        <div class="mb-10">
            <a href="{{ route('candidate.track') }}" class="inline-flex items-center text-slate-600 hover:text-blue-600 font-medium transition-colors group">
                <svg class="w-5 h-5 mr-2 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                Back to search
            </a>
        </div>

        <!-- Candidate Info Card -->
        <div class="status-card rounded-2xl p-6 md:p-8 shadow-sm border border-slate-200 mb-8 relative overflow-hidden">
            <!-- Payment Status Badge -->
            <div class="absolute top-0 right-0 p-4">
                @if($candidate->has_paid_registration_fee)
                    <div class="flex items-center bg-green-100 text-green-800 text-sm font-semibold px-4 py-1.5 rounded-full border border-green-200 shadow-sm">
                        <svg class="w-4 h-4 mr-1.5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        Verified
                    </div>
                @else
                    <div class="flex items-center bg-amber-100 text-amber-800 text-sm font-semibold px-4 py-1.5 rounded-full border border-amber-200 shadow-sm animate-pulse">
                        <svg class="w-4 h-4 mr-1.5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                        Payment Pending
                    </div>
                @endif
            </div>

            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mt-6 md:mt-0">
                <div>
                    <p class="text-sm font-medium text-slate-500 uppercase tracking-wide mb-1">Application Status</p>
                    <h1 class="text-2xl md:text-3xl font-bold text-slate-800">{{ $candidate->first_name }} {{ $candidate->last_name }}</h1>
                    <p class="text-slate-500 mt-1">Candidate ID: <span class="font-semibold text-slate-700">{{ $candidate->majira_id }}</span></p>
                </div>
                <div class="flex-shrink-0">
                    <div class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white text-2xl md:text-3xl font-bold shadow-lg">
                        {{ strtoupper(substr($candidate->first_name, 0, 1)) }}{{ strtoupper(substr($candidate->last_name, 0, 1)) }}
                    </div>
                </div>
            </div>
        </div>

        @if($candidate->has_paid_registration_fee)
            <!-- Account Access Banner (PROMINENT & TOGGLABLE) -->
            <div class="bg-blue-50 border border-blue-200 rounded-2xl p-5 mb-8 shadow-sm">
                <div class="flex flex-col md:flex-row items-center justify-between gap-6">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white flex-shrink-0 shadow-md">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-bold text-blue-900 text-lg">Account Access</h3>
                            <p class="text-blue-700 text-sm">Need to log in? Click below to reset your password and regain access to your account.</p>
                        </div>
                    </div>
                    <div class="flex flex-wrap justify-center md:justify-end gap-3">
                        <button id="toggle-details-btn" class="hidden bg-white border-2 border-blue-600 text-blue-600 hover:bg-blue-50 px-5 py-2.5 rounded-xl font-bold transition flex items-center gap-2">
                            <span id="toggle-text">Show Details</span>
                            <svg id="toggle-icon" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                        </button>
                        <button id="resend-creds-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-xl font-bold transition shadow-md hover:shadow-lg flex items-center gap-2">
                            <span>Reset & Send to Phone</span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                        </button>
                    </div>
                </div>

                <!-- Hidden Details Area -->
                <div id="login-details-area" class="mt-5 pt-5 border-t border-blue-100 hidden">
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="bg-white p-3 rounded-lg border border-blue-100">
                            <p class="text-xs text-slate-500 uppercase font-semibold">Login Email</p>
                            <p class="text-slate-800 font-medium">{{ $candidate->email }}</p>
                        </div>
                        <div class="bg-white p-3 rounded-lg border border-blue-100">
                            <p class="text-xs text-slate-500 uppercase font-semibold">New Password</p>
                            <p class="text-slate-800 font-bold tracking-wider">{{ $candidate->national_id }}</p>
                            <p class="text-[10px] text-blue-600">(Your National ID)</p>
                        </div>
                    </div>
                    <div class="mt-4 flex items-center justify-center">
                         <span id="resend-msg" class="text-xs font-bold text-blue-700 hidden"></span>
                    </div>
                </div>
            </div>
        @endif

        @if(!$candidate->has_paid_registration_fee)
            <!-- Payment Prompt -->
            <div class="bg-white rounded-2xl p-6 md:p-10 shadow-sm border border-slate-200 mb-8 text-center">
                <div class="max-w-2xl mx-auto">
                    <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                    </div>
                    <h2 class="text-2xl font-bold text-slate-800 mb-2">Complete Your Application</h2>
                    <p class="text-slate-600 mb-8">To view detailed tracking information and proceed with your application, please complete the registration fee payment of <span class="font-bold text-slate-900">KES {{ config('mpesa.registration_fee', 1000) }}</span>.</p>

                    <div class="grid md:grid-cols-2 gap-6 text-left">
                        <!-- Option 1: Automatic Payment -->
                        <div class="bg-slate-50 p-6 rounded-xl border border-slate-200 col-span-2 md:col-span-2" id="stk-section">
                            <h3 class="font-semibold text-slate-800 mb-4 flex items-center">
                                <span class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs mr-2">1</span>
                                M-Pesa Express (STK Push)
                            </h3>
                            <p class="text-sm text-slate-600 mb-4">We'll send a payment prompt directly to your phone.</p>
                            <form id="stk-push-form" class="space-y-3">
                                @csrf
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">M-Pesa Phone Number</label>
                                    <input type="tel" name="phone_number" value="{{ $candidate->phone }}" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="07...">
                                </div>
                                <button type="submit" class="w-full py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg transition-colors flex items-center justify-center">
                                    <span class="btn-text">Send Payment Request</span>
                                    <svg class="w-4 h-4 ml-2 animate-spin hidden btn-spinner" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                    </svg>
                                </button>
                                <div id="stk-message" class="text-xs mt-2 hidden"></div>
                            </form>
                        </div>

                        <!-- Option 2: Manual Paybill (Hidden by default) -->
                        <div class="bg-slate-50 p-6 rounded-xl border border-slate-200 col-span-2 md:col-span-2 hidden" id="manual-paybill-section">
                            <h3 class="font-semibold text-slate-800 mb-4 flex items-center">
                                <span class="w-6 h-6 bg-slate-600 text-white rounded-full flex items-center justify-center text-xs mr-2">2</span>
                                Manual Paybill
                            </h3>
                            <div class="space-y-3 text-sm text-slate-600">
                                <p>1. Go to M-Pesa Menu > Lipa na M-Pesa > Paybill</p>
                                <p>2. Enter Business No: <span class="font-bold text-slate-900">{{ config('mpesa.short_code') }}</span></p>
                                <p>3. Enter Account No: <span class="font-bold text-slate-900">{{ $candidate->majira_id }}</span></p>
                                <p>4. Enter Amount: <span class="font-bold text-slate-900">{{ config('mpesa.registration_fee', 1000) }}</span></p>
                                <p>5. Enter PIN and Send</p>
                            </div>
                            <div class="mt-4 pt-4 border-t border-slate-200 text-center">
                                <p class="text-xs text-slate-500">Wait for the confirmation SMS. Your status will update automatically.</p>
                                <button onclick="window.location.reload()" class="mt-2 text-blue-600 text-sm font-medium hover:underline">I have paid, refresh status</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Blur Content for Non-Paying Users -->
            <div class="filter blur-sm opacity-50 pointer-events-none select-none">
                <div class="bg-white rounded-2xl p-6 md:p-10 shadow-sm border border-slate-200">
                    <div class="flex items-center justify-center gap-3 mb-10">
                        <h2 class="text-xl md:text-2xl font-bold text-slate-800">Your Journey</h2>
                    </div>
                     <!-- Placeholder Pipeline -->
                     <div class="flex justify-between items-center px-10">
                         <div class="w-16 h-16 bg-slate-200 rounded-full"></div>
                         <div class="h-1 bg-slate-200 flex-1 mx-4"></div>
                         <div class="w-16 h-16 bg-slate-200 rounded-full"></div>
                         <div class="h-1 bg-slate-200 flex-1 mx-4"></div>
                         <div class="w-16 h-16 bg-slate-200 rounded-full"></div>
                     </div>
                </div>
            </div>

        @else

            <!-- Journey Pipeline (Visible Only After Payment) -->
            <div class="bg-white rounded-2xl p-6 md:p-10 shadow-sm border border-slate-200">
                <div class="flex items-center justify-center gap-3 mb-10">
                    <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </div>
                    <h2 class="text-xl md:text-2xl font-bold text-slate-800">Your Journey</h2>
                </div>

                @if(!empty($pipeline) && $pipeline[0]['status'] !== 'pending')
                    <!-- Desktop Pipeline -->
                    <div class="hidden md:block">
                        <div class="relative flex justify-between items-start">
                            @foreach($pipeline as $index => $stage)
                                @php
                                    $isCompleted = $stage['status'] === 'completed';
                                    $isInProgress = $stage['status'] === 'in_progress';
                                    $isPending = $stage['status'] === 'pending';
                                @endphp
                                
                                <div class="pipeline-step relative z-10 flex flex-col items-center text-center {{ $stage['status'] }}" style="flex: 1;">
                                    <!-- Connector Line -->
                                    @if(!$loop->first)
                                        <div class="absolute top-8 right-1/2 w-full h-1 pipeline-connector {{ $isCompleted || $isInProgress ? 'active' : 'inactive' }}" style="transform: translateY(-50%);"></div>
                                    @endif
                                    
                                    <!-- Icon -->
                                    <div class="icon w-16 h-16 rounded-full flex items-center justify-center relative">
                                        @if($isCompleted)
                                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                            </svg>
                                        @elseif($isInProgress)
                                            <svg class="w-7 h-7 animate-spin" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                        @else
                                            <span class="text-lg font-semibold">{{ $loop->iteration }}</span>
                                        @endif
                                    </div>
                                    
                                    <!-- Label -->
                                    <div class="mt-4 max-w-[120px]">
                                        <h3 class="text-sm font-semibold {{ $isPending ? 'text-slate-400' : 'text-slate-700' }}">{{ $stage['name'] }}</h3>
                                        @if($isInProgress)
                                            <p class="text-xs text-blue-600 font-medium mt-1">{{ $stage['description'] }}</p>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Mobile Pipeline -->
                    <div class="md:hidden space-y-0">
                        @foreach($pipeline as $index => $stage)
                            @php
                                $isCompleted = $stage['status'] === 'completed';
                                $isInProgress = $stage['status'] === 'in_progress';
                                $isPending = $stage['status'] === 'pending';
                            @endphp
                            
                            <div class="pipeline-step relative flex items-start {{ $stage['status'] }}">
                                <!-- Vertical Line -->
                                @if(!$loop->last)
                                    <div class="absolute left-7 top-14 w-0.5 h-12 pipeline-connector {{ $isCompleted ? 'active' : 'inactive' }}"></div>
                                @endif
                                
                                <!-- Icon -->
                                <div class="icon w-14 h-14 rounded-full flex-shrink-0 flex items-center justify-center mr-4">
                                    @if($isCompleted)
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                        </svg>
                                    @elseif($isInProgress)
                                        <svg class="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                    @else
                                        <span class="text-base font-semibold">{{ $loop->iteration }}</span>
                                    @endif
                                </div>
                                
                                <!-- Content -->
                                <div class="pt-3 pb-8">
                                    <h3 class="text-base font-semibold {{ $isPending ? 'text-slate-400' : 'text-slate-700' }}">{{ $stage['name'] }}</h3>
                                    @if($isInProgress)
                                        <p class="text-sm text-blue-600 font-medium mt-1">{{ $stage['description'] }}</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>

                @else
                    <!-- Empty State -->
                    <div class="text-center py-12">
                        <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-slate-100 flex items-center justify-center">
                            <svg class="w-10 h-10 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-slate-700 mb-2">No applications yet</h3>
                        <p class="text-slate-500 max-w-sm mx-auto">Once an application is submitted, you'll be able to track its progress right here.</p>
                    </div>
                @endif
            </div>

            <!-- Footer Action -->
            <div class="mt-8 text-center">
                <a href="{{ route('candidate.login') }}" class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition-colors shadow-sm hover:shadow group">
                    Log in to your dashboard
                    <svg class="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>
        @endif

    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle Details Logic
        const toggleBtn = document.getElementById('toggle-details-btn');
        const detailsArea = document.getElementById('login-details-area');
        const toggleText = document.getElementById('toggle-text');
        
        if (toggleBtn) {
            toggleBtn.addEventListener('click', function() {
                const isHidden = detailsArea.classList.contains('hidden');
                if (isHidden) {
                    detailsArea.classList.remove('hidden');
                    toggleText.textContent = 'Hide Details';
                } else {
                    detailsArea.classList.add('hidden');
                    toggleText.textContent = 'Show Details';
                }
            });
        }

        const stkForm = document.getElementById('stk-push-form');
        if (stkForm) {
            stkForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const btn = this.querySelector('button');
                const btnText = this.querySelector('.btn-text');
                const btnSpinner = this.querySelector('.btn-spinner');
                const messageDiv = document.getElementById('stk-message');
                const phoneNumber = this.querySelector('input[name="phone_number"]').value;

                // Reset UI
                messageDiv.classList.add('hidden');
                messageDiv.className = 'text-xs mt-2 hidden';
                btn.disabled = true;
                btnText.textContent = 'Sending...';
                btnSpinner.classList.remove('hidden');

                // Send Request
                fetch('{{ route("public.payment.initiate") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ 
                        phone_number: phoneNumber,
                        candidate_id: {{ $candidate->id }}
                    })
                })
                .then(response => response.json())
                .then(data => {
                    messageDiv.classList.remove('hidden');
                    if (data.success) {
                        messageDiv.textContent = data.message;
                        messageDiv.classList.add('text-green-600');
                        btnText.textContent = 'Check Phone';
                        // Start polling for status (optional but good UX)
                        startPolling(data.checkout_request_id);
                    } else {
                        throw new Error(data.message || 'Payment initiation failed');
                    }
                })
                .catch(error => {
                    messageDiv.classList.remove('hidden');
                    messageDiv.textContent = error.message;
                    messageDiv.classList.add('text-red-600');
                    btn.disabled = false;
                    btnText.textContent = 'Retry Payment';
                    
                    // Show manual payment option on failure
                    document.getElementById('manual-paybill-section').classList.remove('hidden');
                })
                .finally(() => {
                    btnSpinner.classList.add('hidden');
                });
            });
        }
        
        let pollingInterval;
        function startPolling(checkoutRequestId) {
            let attempts = 0;
            const maxAttempts = 60; // 2 minutes approx

            pollingInterval = setInterval(() => {
                attempts++;
                if (attempts >= maxAttempts) {
                    clearInterval(pollingInterval);
                    return;
                }

                fetch('{{ route("public.payment.check-status") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ checkout_request_id: checkoutRequestId })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.status === 'completed') {
                        clearInterval(pollingInterval);
                        window.location.reload(); // Refresh to show verified status
                    }
                })
                .catch(console.error);
            }, 2000);
        }

        // Send to Phone Logic
        const resendBtn = document.getElementById('resend-creds-btn');
        if (resendBtn) {
            resendBtn.addEventListener('click', function() {
                const msgSpan = document.getElementById('resend-msg');
                this.disabled = true;
                const originalText = this.innerHTML;
                this.innerHTML = '<span>Sending...</span>';
                
                fetch('{{ route("candidate.resend-creds") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ candidate_id: {{ $candidate->id }} })
                })
                .then(response => response.json())
                .then(data => {
                    msgSpan.textContent = data.message;
                    msgSpan.classList.remove('hidden');
                    msgSpan.classList.add(data.success ? 'text-green-600' : 'text-red-600');
                    
                    if (data.success) {
                        this.innerHTML = '<span>Sent to Phone!</span>';
                        
                        // Reveal the Show Details button
                        if (toggleBtn) {
                            toggleBtn.classList.remove('hidden');
                        }

                        setTimeout(() => {
                            this.disabled = false;
                            this.innerHTML = originalText;
                            msgSpan.classList.add('hidden');
                        }, 30000); // 30s cooldown
                    } else {
                        this.disabled = false;
                        this.innerHTML = originalText;
                    }
                })
                .catch(error => {
                    msgSpan.textContent = 'Failed to send.';
                    msgSpan.classList.remove('hidden');
                    msgSpan.classList.add('text-red-600');
                    this.disabled = false;
                    this.innerHTML = originalText;
                });
            });
        }
    });
</script>
@endsection