@extends('layouts.app')

@section('title', 'Transactions')

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

    {{-- Header Section --}}
    <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">Transactions</h1>
            <p class="text-sm text-gray-500 mt-1">Monitor and manage all user transactions</p>
        </div>
        
        <div class="flex flex-wrap items-center gap-3">
            <a href="{{ route('admin.transactions.index') }}"
                class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-all duration-200 shadow-sm">
                <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"/>
                </svg>
                Refresh Data
            </a>
        </div>
    </div>

    {{-- Filters Section --}}
    <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-[240px]">
                <label class="block text-xs font-medium text-gray-700 mb-1.5">Search Transaction</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                    <input type="text" 
                        name="search" 
                        value="{{ request('search') }}"
                        placeholder="Search Trx ID, Target, or Code..."
                        class="w-full pl-10 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand/20 focus:border-brand transition-colors">
                </div>
            </div>

            <div class="w-full sm:w-auto min-w-[140px]">
                <label class="block text-xs font-medium text-gray-700 mb-1.5">Trx Status</label>
                <select name="trx_status" 
                    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 transition-colors bg-white">
                    <option value="">All Status</option>
                    <option value="Sukses" @selected(request('trx_status')=='Sukses')>Sukses</option>
                    <option value="Pending" @selected(request('trx_status')=='Pending')>Pending</option>
                    <option value="Gagal" @selected(request('trx_status')=='Gagal')>Gagal</option>
                </select>
            </div>

            <div class="w-full sm:w-auto min-w-[140px]">
                <label class="block text-xs font-medium text-gray-700 mb-1.5">Sort By Price</label>
                <select name="sort" 
                    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 transition-colors bg-white">
                    <option value="">Default</option>
                    <option value="price_asc" @selected(request('sort')=='price_asc')>Price: Low to High</option>
                    <option value="price_desc" @selected(request('sort')=='price_desc')>Price: High to Low</option>
                </select>
            </div>

            <div class="flex gap-2">
                <button type="submit"
                    class="px-5 py-2.5 text-sm font-medium bg-brand text-white rounded-lg hover:bg-brand/90 focus:ring-4 focus:ring-brand/20 transition-all">
                    Apply Filters
                </button>

                @if(request()->hasAny(['search', 'trx_status', 'sort']))
                    <a href="{{ route('admin.transactions.index') }}"
                        class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-all">
                        Reset
                    </a>
                @endif
            </div>
        </form>
    </div>

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

    {{-- Table Section --}}
    <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.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">#</th>
                        <th class="px-4 py-3.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Trx ID</th>
                        <th class="px-4 py-3.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">User</th>
                        <th class="px-4 py-3.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Product</th>
                        <th class="px-4 py-3.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Target</th>
                        <th class="px-4 py-3.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Total Price</th>
                        <th class="px-4 py-3.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
                        <th class="px-4 py-3.5 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Action</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($transactions as $index => $transaction)
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $transactions->firstItem() + $index }}
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <span class="text-sm font-bold text-gray-900">{{ $transaction->trx_id }}</span>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">
                                {{ $transaction->user->name }}
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">
                                {{ $transaction->code_product }}
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ $transaction->target_id }}
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <span class="text-sm font-semibold text-gray-900">
                                    Rp {{ number_format($transaction->total_price, 0, ',', '.') }}
                                </span>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium
                                    {{ $transaction->trx_status === 'Sukses' ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20' : 
                                       ($transaction->trx_status === 'Pending' ? 'bg-amber-50 text-amber-700 ring-1 ring-amber-600/20' : 
                                       'bg-red-50 text-red-700 ring-1 ring-red-600/20') }}">
                                    <span class="w-1.5 h-1.5 rounded-full mr-1.5 
                                        {{ $transaction->trx_status === 'Sukses' ? 'bg-emerald-500' : 
                                           ($transaction->trx_status === 'Pending' ? 'bg-amber-500' : 'bg-red-500') }}"></span>
                                    {{ ucfirst($transaction->trx_status) }}
                                </span>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-right">
                                <div class="flex items-center justify-end gap-2">
                                    {{-- View Button --}}
                                    <button type="button" 
                                        data-modal-target="view-modal-{{ $transaction->id }}" 
                                        data-modal-toggle="view-modal-{{ $transaction->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>

                                    {{-- Edit Button --}}
                                    <a href="{{ route('admin.transactions.edit', $transaction) }}"
                                        class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 rounded-lg hover:bg-blue-100 transition-all">
                                        Edit
                                    </a>

                                    {{-- Delete Button --}}
                                    <button type="button"
                                        onclick="openDeleteModal('delete-modal-{{ $transaction->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>

                                {{-- Include View Modal --}}
                                @include('pages.admin.transactions.view')

                                {{-- Delete Modal --}}
                                <div id="delete-modal-{{ $transaction->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-{{ $transaction->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 Transaction</h3>
                                                        <div class="mt-2 text-sm text-gray-600 text-wrap">
                                                            Are you sure you want to delete transaction <span class="font-bold text-gray-900">#{{ $transaction->trx_id }}</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.transactions.destroy', $transaction) }}" 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-{{ $transaction->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="8" class="px-4 py-12 text-center">
                                <div class="flex flex-col items-center justify-center">
                                    <svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                                    <p class="text-gray-500 text-sm font-medium">No transactions found</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

@endsection
