@extends('admin.layouts.default')
@section('page_title', 'Transactions Report' . config('default.page_title_delimiter') . config('default.app_name'))
@section('content')
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-6 md:py-8">

    <div class="mb-8 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div class="flex items-center gap-3">
            <div class="p-2.5 bg-primary-50 dark:bg-primary-500/10 rounded-xl text-primary-600 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
            </div>
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-secondary-900 dark:text-white tracking-tight"> Transactions Report</h1>
                <div class="flex items-center gap-2 mt-1">
                    <span class="inline-flex px-2 py-0.5 rounded-md bg-secondary-100 dark:bg-secondary-800 text-[11px] font-medium text-secondary-500">
                        {{ $transactions->count() }} total movements found
                    </span>
                </div>
            </div>
        </div>
        
        <div>
            <button type="button" onclick="submitFormWithAction('export')" class="inline-flex items-center gap-2  h-11 px-4 rounded-xl transition-all cursor-pointer w-full bg-secondary-900 hover:bg-secondary-800 dark:bg-white dark:hover:bg-secondary-100 text-white dark:text-secondary-900 font-bold text-xs h-11 rounded-xl transition-all cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                Export Excel / CSV
            </button>
        </div>
    </div>

    <div class="mb-6 p-5 bg-white dark:bg-secondary-900 border border-secondary-200 dark:border-secondary-800 rounded-3xl shadow-sm">
        <form id="reportForm" action="{{ request()->url() }}" method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4 items-end">
            <input type="hidden" name="action" id="formAction" value="view">

            <div>
                <label for="card_id" class="block text-xs font-bold text-secondary-400 uppercase tracking-wider mb-2">Filter by Card</label>
                <select name="card_id" id="card_id" class="w-full bg-secondary-50/50 dark:bg-secondary-800/50 border border-secondary-200 dark:border-secondary-700 rounded-xl px-4 h-11 text-xs font-bold outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500">
                    <option value="">-- All Cards --</option>
                    @foreach($cards as $card)
                        <option value="{{ $card->id }}" {{ request('card_id') == $card->id ? 'selected' : '' }}>
                            @if($card->title && str_contains($card->title, '{'))
                                {{ json_decode($card->title)->en ?? json_decode($card->title)->ar ?? $card->name }}
                            @else
                                {{ $card->name ?? $card->title }}
                            @endif
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="partner_id" class="block text-xs font-bold text-secondary-400 uppercase tracking-wider mb-2">Filter by Partner</label>
                <select name="partner_id" id="partner_id" class="w-full bg-secondary-50/50 dark:bg-secondary-800/50 border border-secondary-200 dark:border-secondary-700 rounded-xl px-4 h-11 text-xs font-bold outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500">
                    <option value="">-- All Partners --</option>
                    @foreach($partners as $partner)
                        <option value="{{ $partner->id }}" {{ request('partner_id') == $partner->id ? 'selected' : '' }}>
                            {{ $partner->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="member_id" class="block text-xs font-bold text-secondary-400 uppercase tracking-wider mb-2">Filter by Customer</label>
                <select name="member_id" id="member_id" class="w-full bg-secondary-50/50 dark:bg-secondary-800/50 border border-secondary-200 dark:border-secondary-700 rounded-xl px-4 h-11 text-xs font-bold outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500">
                    <option value="">-- All Customers --</option>
                    @foreach($members as $member)
                        <option value="{{ $member->id }}" {{ request('member_id') == $member->id ? 'selected' : '' }}>
                            {{ $member->name ?? 'Unnamed' }} ({{ $member->email }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="from_date" class="block text-xs font-bold text-secondary-400 uppercase tracking-wider mb-2">From Date</label>
                <input type="date" name="from_date" id="from_date" value="{{ request('from_date') }}" class="w-full bg-secondary-50/50 dark:bg-secondary-800/50 border border-secondary-200 dark:border-secondary-700 rounded-xl px-4 h-11 text-xs font-bold outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500">
            </div>

            <div>
                <label for="to_date" class="block text-xs font-bold text-secondary-400 uppercase tracking-wider mb-2">To Date</label>
                <input type="date" name="to_date" id="to_date" value="{{ request('to_date') }}" class="w-full bg-secondary-50/50 dark:bg-secondary-800/50 border border-secondary-200 dark:border-secondary-700 rounded-xl px-4 h-11 text-xs font-bold outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500">
            </div>

            <div class="flex gap-2">
                <button type="button" onclick="submitFormWithAction('view')" class="w-full bg-secondary-900 hover:bg-secondary-800 dark:bg-white dark:hover:bg-secondary-100 text-white dark:text-secondary-900 font-bold text-xs h-11 rounded-xl transition-all cursor-pointer">
                    Apply
                </button>
                <a href="{{ request()->url() }}" class="w-full flex items-center justify-center border border-secondary-200 dark:border-secondary-700 hover:bg-secondary-50 dark:hover:bg-secondary-800/50 text-secondary-700 dark:text-white font-bold text-xs h-11 rounded-xl transition-all cursor-pointer">
                    Reset
                </a>
            </div>
        </form>
    </div>

    <div class="bg-white dark:bg-secondary-900 border border-secondary-200 dark:border-secondary-800 rounded-3xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto text-secondary-900 dark:text-white">
            <table class="w-full text-sm text-left">
                <thead class="bg-secondary-50/30 dark:bg-secondary-800/20 text-[11px] text-secondary-400 uppercase font-bold tracking-wider border-b border-secondary-100 dark:border-secondary-800">
                    <tr class="h-16">
                        <th class="px-6 w-20">Transaction ID</th>
                        <th class="px-4">Customer</th>
                        <th class="px-4">Card</th>
                        <th class="px-4">Partner Name</th>
                        <th class="px-4">Event Type</th>
                        <th class="px-4">Purchase Amount</th>
                        <th class="px-4 text-center">Points Impact</th>
                        <th class="px-6 text-right">Date & Time</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($transactions as $trans)
                    <tr class="h-20 hover:bg-secondary-50/30 dark:hover:bg-secondary-800/30 transition-colors border-b border-secondary-100/50 dark:border-secondary-800/50 last:border-0">
                        <td class="px-6 font-medium text-secondary-400">
                            <span class="font-mono text-xs">#{{ substr($trans->id, 0, 8) }}...</span>
                        </td>
                        
                        <td class="px-4">
                            <div class="flex flex-col">
                                <span class="text-secondary-900 dark:text-white font-bold text-sm">{{ $trans->member_name ?? 'System Guest' }}</span>
                                <span class="text-secondary-400 text-xs font-mono">{{ $trans->member_email ?? 'N/A' }}</span>
                            </div>
                        </td>
                        
                        <td class="px-4">
                            <div class="flex flex-col gap-1">
                                <span class="text-secondary-900 dark:text-white font-semibold text-sm">
                                    @if($trans->card_title && str_contains($trans->card_title, '{'))
                                        {{ json_decode($trans->card_title)->en ?? json_decode($trans->card_title)->ar ?? $trans->card_raw_name }}
                                    @elseif($trans->card_raw_name)
                                        {{ $trans->card_raw_name }}
                                    @else
                                        <span class="text-rose-500 dark:text-rose-400 font-medium italic text-xs">Deleted Card</span>
                                    @endif
                                </span>
                                <span class="text-secondary-400 font-mono text-[10px] bg-secondary-100 dark:bg-secondary-800 px-1.5 py-0.5 rounded-md w-fit">ID: {{ substr($trans->card_id, 0, 8) }}...</span>
                            </div>
                        </td>
                        
                        <td class="px-4">
                            <span class="text-secondary-900 dark:text-white font-bold text-sm">{{ $trans->partner_name ?? 'System Admin' }}</span>
                        </td>
                        
                        <td class="px-4">
                            @if($trans->event == 'card_activation')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-500/20 uppercase tracking-wider">
                                    Activation
                                </span>
                            @elseif($trans->event == 'purchase')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-500/20 uppercase tracking-wider">
                                    Purchase
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-100 dark:border-amber-500/20 uppercase tracking-wider">
                                    {{ $trans->event }}
                                </span>
                            @endif
                        </td>
                        
                        <td class="px-4 font-bold text-secondary-900 dark:text-white">
                            {{ number_format($trans->purchase_amount ?? 0) }} EGP
                        </td>
                        
                        <td class="px-4 text-center">
                            @if($trans->points > 0)
                                <span class="text-emerald-600 dark:text-emerald-400 font-bold text-sm text-center block">+{{ $trans->points }} pts</span>
                            @elseif($trans->points_used > 0)
                                <span class="text-rose-500 dark:text-rose-400 font-bold text-sm text-center block">-{{ $trans->points_used }} pts</span>
                            @else
                                <span class="text-secondary-400 dark:text-secondary-500 text-sm text-center block">0</span>
                            @endif
                        </td>
                        
                        <td class="px-6 text-right text-secondary-500 dark:text-secondary-400 font-medium text-xs">
                            {{ \Carbon\Carbon::parse($trans->created_at)->format('Y-m-d h:i A') }}
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="py-24 text-center text-secondary-300 dark:text-secondary-600 italic">No transactions found matching your criteria.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
function submitFormWithAction(actionType) {
    document.getElementById('formAction').value = actionType;
    const form = document.getElementById('reportForm');
    
    if (actionType === 'export') {
        form.submit();
        // ارجاع القيمة الافتراضية بعد الارسال مباشرة حتى لا يعلق الزر على وضع الـ export في المرات القادمة
        setTimeout(() => {
            document.getElementById('formAction').value = 'view';
        }, 500);
    } else {
        form.submit();
    }
}
</script>
@endsection