@extends('layouts.app')

@section('title', 'Topups')

@section('content')
<div class="space-y-6">

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Topups</h1>
            <p class="text-sm text-gray-500 mt-1">Manage user topup transactions</p>
        </div>
    </div>

    {{-- Filters --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <form method="GET" class="flex flex-wrap items-end gap-4">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs font-medium text-gray-700 mb-1.5">Search</label>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search Topup ID or User..."
                    class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand/20 focus:border-brand">
            </div>

            <div class="min-w-[160px]">
                <label class="block text-xs font-medium text-gray-700 mb-1.5">Status</label>
                <select name="status"
                    class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg bg-white focus:ring-2 focus:ring-brand/20">
                    <option value="">All</option>
                    <option value="Pending" @selected(request('status')=='Pending')>Pending</option>
                    <option value="Paid" @selected(request('status')=='Paid')>Paid</option>
                    <option value="Failed" @selected(request('status')=='Failed')>Failed</option>
                    <option value="Cancelled" @selected(request('status')=='Cancelled')>Cancelled</option>
                </select>
            </div>

            <div class="min-w-[160px]">
                <label class="block text-xs font-medium text-gray-700 mb-1.5">Provider</label>
                <select name="provider"
                    class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg bg-white focus:ring-2 focus:ring-brand/20">
                    <option value="">All</option>
                    <option value="tripay" @selected(request('provider')=='tripay')>Tripay</option>
                    <option value="duitku" @selected(request('provider')=='duitku')>Duitku</option>
                    <option value="paydisini" @selected(request('provider')=='paydisini')>Paydisini</option>
                    <option value="internal" @selected(request('provider')=='internal')>Internal</option>
                </select>
            </div>

            <div class="flex gap-2">
                <button class="px-5 py-2.5 text-sm font-medium bg-brand text-white rounded-lg">Apply</button>
                @if(request()->hasAny(['search','status','provider']))
                    <a href="{{ route('admin.topups.index') }}"
                        class="px-5 py-2.5 text-sm bg-gray-100 rounded-lg">Reset</a>
                @endif
            </div>
        </form>
    </div>

    @include('pages.admin.partials.messages')

    {{-- Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-xs text-gray-600">#</th>
                        <th class="px-4 py-3 text-xs text-gray-600">Topup ID</th>
                        <th class="px-4 py-3 text-xs text-gray-600">User</th>
                        <th class="px-4 py-3 text-xs text-gray-600">Method</th>
                        <th class="px-4 py-3 text-xs text-gray-600">Amount</th>
                        <th class="px-4 py-3 text-xs text-gray-600">Status</th>
                        <th class="px-4 py-3 text-xs text-right text-gray-600">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($topups as $index => $topup)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm text-gray-500">{{ $topups->firstItem()+$index }}</td>
                            <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $topup->topup_id }}</td>
                            <td class="px-4 py-3 text-sm text-gray-700">{{ $topup->user->name }}</td>
                            <td class="px-4 py-3 text-sm text-gray-700">{{ $topup->paymentMethod->name }}</td>
                            <td class="px-4 py-3 text-sm text-gray-900 font-semibold">
                                Rp {{ number_format($topup->total_amount) }}
                            </td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-1 text-xs rounded-full
                                    {{ $topup->status=='Paid' ? 'bg-emerald-100 text-emerald-700' : 
                                       ($topup->status=='Pending' ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700') }}">
                                    {{ ucfirst($topup->status) }}
                                </span>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-right">
                                <div class="flex items-center justify-end gap-2">

                                  <button type="button" 
                                          data-modal-target="view-modal-{{ $topup->id }}" 
                                          data-modal-toggle="view-modal-{{ $topup->id }}"
                                          class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-emerald-700 bg-emerald-50 rounded-lg hover:bg-emerald-100 transition-all">
                                          View
                                      </button>
                                  @include('pages.admin.topups.view')

                                    {{-- Delete Button --}}
                                    <button type="button"
                                        onclick="openDeleteModal('delete-modal-{{ $topup->id }}')"
                                        class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-red-700 bg-red-50 rounded-lg hover:bg-red-100 transition-all">
                                        Delete
                                    </button>
                                </div>
                                <div id="delete-modal-{{ $topup->id }}" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-modal="true" role="dialog">
                                    <div class="flex items-center justify-center min-h-screen px-4 text-center sm:block sm:p-0">
                                        <div class="fixed inset-0 bg-gray-900/75 transition-opacity" onclick="closeDeleteModal('delete-modal-{{ $topup->id }}')"></div>
                                        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
                                        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full z-50 relative">
                                            <div class="bg-white px-6 pt-6 pb-4">
                                                <div class="sm:flex sm:items-start">
                                                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                                                        <svg class="h-6 w-6 text-red-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>
                                                    </div>
                                                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
                                                        <h3 class="text-lg font-semibold text-gray-900">Delete Topup</h3>
                                                        <div class="mt-2 text-sm text-gray-600 text-wrap">
                                                            Are you sure you want to delete topup <span class="font-bold text-gray-900">#{{ $topup->tupupid }}</span>? 
                                                            All associated data will be permanently removed.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="bg-gray-50 px-6 py-4 sm:flex sm:flex-row-reverse gap-3">
                                                <form method="POST" action="{{ route('admin.topups.destroy', $topup) }}" class="w-full sm:w-auto">
                                                    @csrf @method('DELETE')
                                                    <button type="submit" class="w-full inline-flex justify-center rounded-lg px-4 py-2.5 bg-red-600 text-sm font-medium text-white hover:bg-red-700 transition-all sm:w-auto">Yes, Delete</button>
                                                </form>
                                                <button type="button" onclick="closeDeleteModal('delete-modal-{{ $topup->id }}')" class="mt-3 w-full inline-flex justify-center rounded-lg border border-gray-300 px-4 py-2.5 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all sm:mt-0 sm:w-auto">Cancel</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-10 text-center text-gray-500">
                                No topups found
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($topups->hasPages())
            <div class="border-t px-4 py-3 bg-gray-50">
                {{ $topups->links('vendor.pagination.tailwind') }}
            </div>
        @endif
    </div>

</div>
@endsection