@extends('admin.layout')

@push('styles')
    <style>
        @media print {
            aside, header, #invoice-toolbar, #invoice-toolbar-top {
                display: none !important;
            }
            main {
                margin: 0 !important;
                padding: 0 !important;
            }
            body {
                background-color: white !important;
                color: black !important;
            }
            .invoice-wrapper {
                box-shadow: none !important;
                border: none !important;
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 !important;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Invoice Page Navigation -->
    <div class="flex items-center justify-between mb-8 no-print" id="invoice-toolbar-top">
        <a href="{{ route('admin.clients') }}" class="px-4 py-2 border border-slate-200 dark:border-slate-800 rounded-xl bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800/80 text-xs font-bold transition-all focus:outline-none flex items-center gap-1.5 shadow-sm">
            <i class="bi bi-arrow-left"></i> Back to Clients
        </a>
        <button onclick="window.print()" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 rounded-xl text-xs font-bold transition-all focus:outline-none flex items-center gap-1.5 shadow-sm">
            <i class="bi bi-printer"></i> Print Receipt
        </button>
    </div>

    <!-- Invoice Card Container -->
    <div class="max-w-2xl mx-auto bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl shadow-xl overflow-hidden invoice-wrapper animate-slide-up">
        <!-- Accent Top Bar -->
        <div class="h-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

        <!-- Header -->
        <div class="bg-gradient-to-br from-indigo-600 to-purple-700 p-8 text-center text-white relative">
            <div class="absolute top-4 right-6 text-xs font-extrabold bg-white/20 px-3 py-1 rounded-full uppercase tracking-wider">Receipt</div>
            <h1 class="text-2xl font-black tracking-wide uppercase">Payment Invoice</h1>
            <p class="text-indigo-100 text-sm mt-1">Manual Wallet Credit Transaction Receipt</p>
        </div>

        <!-- Body -->
        <div class="p-8">
            <!-- Grid Meta -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 pb-6 border-b border-slate-100 dark:border-slate-800 mb-8 text-sm">
                <div>
                    <span class="block text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-1">Billed To</span>
                    <strong class="text-base text-slate-800 dark:text-slate-100 font-bold block">{{ $recharge->apiClient?->name ?? 'Client' }}</strong>
                    @if ($recharge->apiClient?->email)
                        <span class="text-slate-500 dark:text-slate-400 flex items-center gap-1 mt-1">
                            <i class="bi bi-envelope text-xs"></i> {{ $recharge->apiClient->email }}
                        </span>
                    @else
                        <span class="text-amber-500 font-medium text-xs mt-1 block"><i class="bi bi-exclamation-triangle"></i> No email registered for this client.</span>
                    @endif
                </div>
                <div class="sm:text-right">
                    <span class="block text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-1">Receipt details</span>
                    <div class="text-slate-600 dark:text-slate-400">Ref ID: <strong class="text-slate-850 dark:text-slate-200">#REC-{{ $recharge->id }}</strong></div>
                    <div class="text-slate-600 dark:text-slate-400 mt-1">Date: <strong class="text-slate-850 dark:text-slate-200">{{ $recharge->created_at->format('M d, Y H:i') }}</strong></div>
                    <div class="text-slate-600 dark:text-slate-400 mt-1">Method: <strong class="text-slate-850 dark:text-slate-200">Offline Bank Deposit</strong></div>
                </div>
            </div>

            <!-- Breakdown Table -->
            <table class="w-full text-left border-collapse mb-8 text-sm">
                <thead>
                    <tr class="border-b border-slate-200 dark:border-slate-800">
                        <th class="pb-3 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Item Description</th>
                        <th class="pb-3 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider text-right">Amount (INR)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800/40">
                    <tr>
                        <td class="py-4 pr-4">
                            <strong class="font-bold text-slate-800 dark:text-slate-100 block">Manual Wallet Credit Recharge</strong>
                            <span class="text-xs text-slate-450 dark:text-slate-505 mt-1 block">Credited to API Client Account #{{ $recharge->api_client_id }}</span>
                        </td>
                        <td class="py-4 text-right font-black text-slate-800 dark:text-slate-100 text-base">₹{{ number_format($recharge->amount, 2) }}</td>
                    </tr>
                </tbody>
            </table>

            <!-- Balance Panels -->
            <div class="bg-slate-50 dark:bg-slate-950 border border-slate-150 dark:border-slate-800/60 p-5 rounded-2xl mb-4">
                <div class="flex justify-between items-center mb-2 text-xs text-slate-500 dark:text-slate-450">
                    <span>Previous Wallet Balance</span>
                    <span class="font-semibold">₹{{ number_format($recharge->previous_balance, 2) }}</span>
                </div>
                <div class="flex justify-between items-center mb-3 text-xs text-slate-500 dark:text-slate-450">
                    <span>Amount Credited</span>
                    <span class="font-bold text-emerald-600 dark:text-emerald-500">+ ₹{{ number_format($recharge->amount, 2) }}</span>
                </div>
                <div class="h-px bg-dashed border-t border-dashed border-slate-200 dark:border-slate-800 my-3"></div>
                <div class="flex justify-between items-center text-sm font-bold text-slate-800 dark:text-slate-100">
                    <span>New Wallet Balance</span>
                    <span class="text-indigo-600 dark:text-indigo-400 text-lg font-black">₹{{ number_format($recharge->new_balance, 2) }}</span>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="bg-slate-50 dark:bg-slate-950 p-6 text-center text-xs text-slate-450 dark:text-slate-505 border-t border-slate-100 dark:border-slate-800">
            <p>This document serves as an official transaction receipt for manual wallet recharges.</p>
            <p class="mt-1">For any queries regarding this credit, please contact support.</p>
            <p class="mt-4 font-bold text-indigo-500">Document Verification Hub</p>
        </div>
    </div>

    <!-- Action Toolbar at the bottom -->
    <div class="flex justify-center mt-8 gap-4 no-print" id="invoice-toolbar">
        @if ($recharge->apiClient?->email)
            <button id="send-invoice-btn" onclick="sendInvoiceMail({{ $recharge->id }})" class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl shadow-lg shadow-indigo-500/20 hover:opacity-95 active:scale-98 transition-all font-bold text-sm focus:outline-none flex items-center gap-2">
                <i class="bi bi-envelope-at text-base"></i> Send Invoice Email
            </button>
        @else
            <button disabled class="px-6 py-3 bg-slate-200 dark:bg-slate-800 text-slate-400 dark:text-slate-650 rounded-2xl font-bold text-sm cursor-not-allowed flex items-center gap-2">
                <i class="bi bi-envelope-slash text-base"></i> Email Unavailable
            </button>
        @endif
    </div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        function sendInvoiceMail(rechargeId) {
            const $btn = $('#send-invoice-btn');
            const originalHtml = $btn.html();

            // Set loading
            $btn.prop('disabled', true);
            $btn.html('<span class="inline-block animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent mr-1"></span> Sending...');

            $.ajax({
                url: `/admin/recharges/${rechargeId}/send-invoice`,
                method: 'POST',
                success: function(response) {
                    if (response.success) {
                        $btn.removeClass('bg-gradient-to-r from-indigo-600 to-purple-600')
                            .addClass('bg-emerald-500')
                            .html('<i class="bi bi-check-lg text-base"></i> Email Sent!');
                        
                        showToast('success', response.message);

                        setTimeout(() => {
                            $btn.removeClass('bg-emerald-500')
                                .addClass('bg-gradient-to-r from-indigo-600 to-purple-600')
                                .html(originalHtml)
                                .prop('disabled', false);
                        }, 3000);
                    } else {
                        showToast('error', response.message || 'Failed to send invoice email.');
                        $btn.html(originalHtml).prop('disabled', false);
                    }
                },
                error: function(xhr) {
                    let errMsg = 'Failed to send invoice email.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errMsg = xhr.responseJSON.message;
                    }
                    showToast('error', errMsg);
                    $btn.html(originalHtml).prop('disabled', false);
                }
            });
        }

        function showToast(type, message) {
            let container = document.getElementById('toast-container');
            if (!container) {
                container = document.createElement('div');
                container.id = 'toast-container';
                container.className = 'fixed bottom-5 right-5 z-[9999] flex flex-col gap-2.5 max-w-sm w-full';
                document.body.appendChild(container);
            }

            const toast = document.createElement('div');
            const bgClass = type === 'success' ? 'bg-emerald-50 dark:bg-emerald-950/90 border-emerald-500 text-emerald-700 dark:text-emerald-300' : 'bg-rose-50 dark:bg-rose-950/90 border-rose-500 text-rose-700 dark:text-rose-300';
            const iconClass = type === 'success' ? 'bi-check-circle-fill text-emerald-500' : 'bi-exclamation-triangle-fill text-rose-500';
            
            toast.className = `flex items-center gap-3 p-4 rounded-2xl border-l-4 shadow-xl backdrop-blur-md animate-fade-in ${bgClass}`;
            toast.innerHTML = `
                <i class="bi ${iconClass} text-lg shrink-0"></i>
                <div class="text-xs font-bold">${message}</div>
            `;

            container.appendChild(toast);

            setTimeout(() => {
                toast.classList.add('opacity-0', 'transition-opacity', 'duration-500');
                setTimeout(() => toast.remove(), 500);
            }, 4000);
        }
    </script>
@endpush