@extends('layouts.main')

@section('title')
    {{ __('credits.credit_purchases') }}
@endsection

@section('page_title')
    {{ __('credits.credit_purchases') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('dashboard'), 'label' => __('credit_packages.dashboard')],
        ['url' => route('admin.credits.dashboard'), 'label' => __('credits.title')],
        ['url' => '', 'label' => __('credits.credit_purchases')],
    ];
@endphp

@section('content')
    <div class="w-full space-y-6">
        <!-- Header Section -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 sm:p-6 shadow-front-box-shadow-glow">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-3 sm:space-x-4">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
                        <i class="fas fa-shopping-cart text-white text-lg sm:text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-xl sm:text-2xl font-semibold text-gray-700">{{ __('credits.credit_purchases') }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('credits.credit_purchases_description') }}</p>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 w-full sm:w-auto">
                    <a href="{{ route('admin.credits.dashboard') }}" class="btn btn-outline-secondary shadow-lg hover:shadow-xl w-full sm:w-auto justify-center">
                        <i class="fas fa-arrow-left mr-2"></i>
                        <span class="hidden sm:inline whitespace-nowrap">{{ __('credits.back_to_dashboard') }}</span>
                        <span class="sm:hidden">{{ __('credits.back') }}</span>
                    </a>
                    <a href="{{ route('admin.credits.users') }}" class="btn btn-primary shadow-lg hover:shadow-xl w-full sm:w-auto justify-center">
                        <i class="fas fa-users mr-2"></i>
                        <span class="hidden sm:inline whitespace-nowrap">{{ __('credits.manage_users_action') }}</span>
                        <span class="sm:hidden">{{ __('credits.users') }}</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Filters Card -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow">
            <div class="md:p-6 p-4">
                <div class="flex items-center space-x-3 pb-4 border-b border-white/30">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fas fa-filter text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700">{{ __('credits.filters_search') }}</h3>
                        <p class="text-sm text-gray-600">{{ __('credits.filter_search_purchases') }}</p>
                    </div>
                </div>
                
                <form method="GET" action="{{ route('admin.credits.purchases') }}" class="space-y-6 mt-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                        <div class="space-y-2">
                            <label class="form-label">
                                <i class="fas fa-search mr-2"></i>
                                {{ __('credits.search') }}
                            </label>
                            <input type="text" 
                                   class="form-control !mt-0" 
                                   name="search" 
                                   value="{{ request('search') }}" 
                                   placeholder="{{ __('credits.search_placeholder') }}">
                        </div>
                        
                        <div class="space-y-2">
                            <label class="form-label">
                                <i class="fas fa-flag mr-2"></i>
                                {{ __('credits.status') }}
                            </label>
                            <select class="form-control !mt-0" name="status">
                                <option value="">{{ __('credits.all_status') }}</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>{{ __('credits.pending') }}</option>
                                <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>{{ __('credits.completed') }}</option>
                                <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>{{ __('credits.failed') }}</option>
                            </select>
                        </div>
                        
                        <div class="space-y-2">
                            <label class="form-label">
                                <i class="fas fa-calendar mr-2"></i>
                                {{ __('credits.date_from') }}
                            </label>
                            <input type="date" 
                                   class="form-control !mt-0" 
                                   name="date_from" 
                                   value="{{ request('date_from') }}">
                        </div>
                        
                        <div class="space-y-2">
                            <label class="form-label">
                                <i class="fas fa-calendar mr-2"></i>
                                {{ __('credits.date_to') }}
                            </label>
                            <input type="date" 
                                   class="form-control !mt-0" 
                                   name="date_to" 
                                   value="{{ request('date_to') }}">
                        </div>
                        
                        <div class="flex items-end space-x-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search mr-2"></i>{{ __('credits.filter') }}
                            </button>
                            <a href="{{ route('admin.credits.purchases') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-refresh mr-2"></i>{{ __('credits.clear') }}
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Purchases Table -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow">
            <div class="p-0">
                <!-- Custom Controls (DataTables-like) -->
                <div id="purchasesAdminControlsTop" class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm p-4" style="display:none;">
                    <div class="flex items-center gap-4">
                        <label class="flex items-center gap-2 text-sm text-gray-600 flex-wrap">
                            <span>{{ __('credits.show') }}</span>
                            <select id="purchasesAdminLength" class="events-length-select border border-gray-300 rounded-lg px-3 py-1.5 mx-2 text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20 bg-fl-gray-extra-light/50 backdrop-blur-sm min-w-[70px]">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="-1">{{ __('credits.all') }}</option>
                            </select>
                            <span>{{ __('credits.entries') }}</span>
                        </label>
                    </div>
                    <div class="flex items-center gap-4">
                        <label class="flex items-center gap-2 text-sm text-gray-600 flex-wrap">
                            <span>{{ __('credits.search') }}:</span>
                            <input id="purchasesAdminSearch" type="text" class="events-search-input border border-gray-300 rounded-lg px-4 py-2 text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20 bg-fl-gray-extra-light/50 backdrop-blur-sm" placeholder="{{ __('credits.search_placeholder_table') }}" />
                        </label>
                    </div>
                </div>

                <!-- Desktop Table View -->
                <div class="overflow-x-auto">
                    <table class="table min-w-full bg-gray-50" id="purchasesTable">
                        <thead>
                            <tr class="bg-fl-gray-extra-light/30 backdrop-blur-sm">
                                <th class="min-w-[100px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('credits.id') }}</th>
                                <th class="min-w-[150px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('credits.date') }}</th>
                                <th class="min-w-[200px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('credits.user') }}</th>
                                <th class="min-w-[150px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('credits.package') }}</th>
                                <th class="min-w-[120px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('credits.credits') }}</th>
                                <th class="min-w-[120px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('credits.amount') }}</th>   
                                <th class="min-w-[200px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('credits.payment_id') }}</th>
                                <th class="min-w-[120px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('credits.status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($purchases as $purchase)
                                <tr class="group border-b border-white/30 hover:bg-fl-gray-extra-light/40 backdrop-blur-sm transition-all duration-200">
                                    <td class="px-4 py-3">
                                        <span class="text-sm font-medium text-gray-700">#{{ $purchase->id }}</span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="flex items-center space-x-2">
                                            <div class="min-w-8 h-8 bg-blue-100/80 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
                                                <i class="fas fa-clock text-blue-600"></i>
                                            </div>
                                            <div class="text-sm text-gray-600 whitespace-nowrap">
                                                {{ $purchase->purchased_at ? $purchase->purchased_at->format('d M Y, h:i A') : '-' }}
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="flex items-center space-x-2">
                                            <div class="w-8 h-8 bg-primary/10 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
                                                <i class="fas fa-user text-primary text-xs"></i>
                                            </div>
                                            <span class="text-sm font-medium text-gray-700">{{ $purchase->user->name }}</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="text-sm text-gray-600">{{ $purchase->package->title ?? 'N/A' }}</span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="flex items-center space-x-2">
                                            <div class="w-8 h-8 bg-green-100/80 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
                                                <i class="fas fa-coins text-green-600"></i>
                                            </div>
                                            <span class="text-sm font-medium text-gray-700">{{ number_format($purchase->credits_purchased) }}</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="flex items-center space-x-2">
                                            <div class="w-8 h-8 bg-blue-100/80 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
                                                <i class="fas fa-rupee-sign text-blue-600"></i>
                                            </div>
                                            <span class="text-sm font-medium text-gray-700">₹{{ number_format($purchase->amount_paid, 2) }}</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="flex items-center space-x-2">
                                            <code class="text-xs bg-gray-100/80 backdrop-blur-sm px-2 py-1 rounded flex-1 border border-white/50">{{ Str::limit($purchase->payment_intent_id, 20) }}</code>
                                            <button type="button" 
                                                    class="copy-payment-id-btn text-gray-500 hover:text-primary transition-colors duration-200 h-8 min-w-8 flex items-center justify-center rounded-24 border border-white/50 hover:bg-fl-gray-extra-light/60 backdrop-blur-sm" 
                                                    data-payment-id="{{ $purchase->payment_intent_id }}"
                                                    data-tooltip="{{ __('credits.copy_payment_id') }}"
                                                    data-tooltip-placement="top"
                                                    >
                                                <i class="fas fa-copy text-sm"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        @if($purchase->status === 'completed')
                                            <span class="badge bg-light-success flex items-center w-fit space-x-1">
                                                <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                                                <span>{{ __('credits.completed') }}</span>
                                            </span>
                                        @elseif($purchase->status === 'pending')
                                            <span class="badge bg-light-warning flex items-center w-fit space-x-1">
                                                <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                                                <span>{{ __('credits.pending') }}</span>
                                            </span>
                                        @else
                                            <span class="badge bg-light-danger flex items-center w-fit space-x-1">
                                                <div class="w-2 h-2 bg-red-500 rounded-full"></div>
                                                <span>{{ __('credits.failed') }}</span>
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center !py-20 px-4">
                                        <div class="flex flex-col items-center space-y-4">
                                            <div class="w-16 h-16 bg-fl-gray-extra-light/50 backdrop-blur-sm rounded-full flex items-center justify-center border border-gray-300">
                                                <i class="fas fa-inbox text-gray-400 text-2xl"></i>
                                            </div>
                                            <div>
                                                <h3 class="text-lg font-medium text-gray-700">{{ __('credits.no_data_found') }}</h3>
                                                <p class="text-gray-500">{{ __('credits.no_matching_records') }}</p>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Bottom Controls (info + pagination) -->
                <div id="purchasesAdminControlsBottom" class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm px-4 py-3 border-t border-gray-200 bg-fl-gray-extra-light/20 backdrop-blur-sm" style="display:none;">
                    <div id="purchasesAdminInfo" class="text-sm text-gray-600"></div>
                    <div id="purchasesAdminPagination" class="flex items-center gap-1"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom_styles')
<style>
    /* Table horizontal scroll only */
    .table-responsive.overflow-x-auto {
        overflow-x: auto !important;
        overflow-y: visible;
        max-width: 100%;
    }
    
    /* Ensure table is wider than container */
    .table-responsive.overflow-x-auto table {
        min-width: 800px;
    }
    
    /* Custom scrollbar for table */
    .table-responsive.overflow-x-auto::-webkit-scrollbar {
        height: 8px;
    }
    
    .table-responsive.overflow-x-auto::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }
    
    .table-responsive.overflow-x-auto::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }
    
    .table-responsive.overflow-x-auto::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
    
    /* Match DataTables styling for custom controls */
    .events-search-input:focus {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 0 0.2rem rgb(var(--twc-primary) / 0.15);
    }
    
    .events-length-select:focus {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 0 0.2rem rgb(var(--twc-primary) / 0.15);
    }
    
    /* Mobile responsive */
    @media (max-width: 768px) {
        .table-responsive.overflow-x-auto {
            -webkit-overflow-scrolling: touch;
        }
    }
</style>
@endpush

@push('custom_scripts')
<script>
    $(document).ready(function() {
        try {
            // Ensure table structure is unified
            const $mainTable = $('#purchasesTable');
            $mainTable.css({ 'display': 'table', 'width': '100%', 'border-collapse': 'collapse' });
            $mainTable.find('thead').css({ 'display': 'table-header-group', 'visibility': 'visible', 'opacity': '1' });
            $mainTable.find('tbody').css({ 'display': 'table-row-group', 'visibility': 'visible', 'opacity': '1' });

            // Initialize custom controls
            initPlainTableControls('#purchasesTable', {
                lengthSelector: '#purchasesAdminLength',
                searchInput: '#purchasesAdminSearch',
                infoLabel: '#purchasesAdminInfo',
                paginationContainer: '#purchasesAdminPagination',
                controlsTop: '#purchasesAdminControlsTop',
                controlsBottom: '#purchasesAdminControlsBottom'
            });
        } catch (e) {
            console.error('Table init error:', e);
        }

        // Initialize custom tooltips
        initCustomTooltips();
        
        // Copy Payment ID functionality
        $(document).on('click', '.copy-payment-id-btn', function() {
            const paymentId = $(this).data('payment-id');
            const button = $(this);
            const originalIcon = button.find('i').attr('class');
            
            // Copy to clipboard
            navigator.clipboard.writeText(paymentId).then(function() {
                // Show success feedback
                button.find('i').removeClass('fa-copy').addClass('fa-check text-green-600');
                button.removeClass('text-gray-500 hover:text-primary').addClass('text-green-600');
                
                // Show tooltip
                button.attr('title', @json(__('credits.copied')));
                
                // Reset after 2 seconds
                setTimeout(function() {
                    button.find('i').removeClass('fa-check text-green-600').addClass('fa-copy');
                    button.removeClass('text-green-600').addClass('text-gray-500 hover:text-primary');
                    button.attr('title', @json(__('credits.copy_payment_id')));
                }, 2000);
                
                // Show success message
                showCopySuccessMessage(paymentId);
            }).catch(function(err) {
                console.error('Failed to copy: ', err);
                // Fallback for older browsers
                fallbackCopyTextToClipboard(paymentId, button);
            });
        });
        
        // Fallback copy function for older browsers
        function fallbackCopyTextToClipboard(text, button) {
            const textArea = document.createElement("textarea");
            textArea.value = text;
            textArea.style.top = "0";
            textArea.style.left = "0";
            textArea.style.position = "fixed";
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            
            try {
                const successful = document.execCommand('copy');
                if (successful) {
                    // Show success feedback
                    button.find('i').removeClass('fa-copy').addClass('fa-check text-green-600');
                    button.removeClass('text-gray-500 hover:text-primary').addClass('text-green-600');
                    button.attr('title', @json(__('credits.copied')));
                    
                    setTimeout(function() {
                        button.find('i').removeClass('fa-check text-green-600').addClass('fa-copy');
                        button.removeClass('text-green-600').addClass('text-gray-500 hover:text-primary');
                        button.attr('title', @json(__('credits.copy_payment_id')));
                    }, 2000);
                    
                    showCopySuccessMessage(text);
                }
            } catch (err) {
                console.error('Fallback: Oops, unable to copy', err);
                showCopyErrorMessage();
            }
            
            document.body.removeChild(textArea);
        }
        
        // Show success message
        function showCopySuccessMessage(paymentId) {
            const successHtml = `
                <div class="fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2">
                    <i class="fas fa-check-circle text-green-600"></i>
                    <span class="text-sm font-medium">@json(__('credits.payment_id_copied'))</span>
                </div>
            `;
            
            $('body').append(successHtml);
            
            setTimeout(function() {
                $('.fixed.top-4.right-4').fadeOut(300, function() {
                    $(this).remove();
                });
            }, 3000);
        }
        
        // Show error message
        function showCopyErrorMessage() {
            const errorHtml = `
                <div class="fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2">
                    <i class="fas fa-exclamation-circle text-red-600"></i>
                    <span class="text-sm font-medium">@json(__('credits.failed_to_copy'))</span>
                </div>
            `;
            
            $('body').append(errorHtml);
            
            setTimeout(function() {
                $('.fixed.top-4.right-4').fadeOut(300, function() {
                    $(this).remove();
                });
            }, 3000);
        }
    });
</script>
@endpush