@extends('layouts.app')

@section('title', $pageTitle ?? 'My Transactions')

@push('styles')
<style>
    .page-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .page-title-row h1 {
        font-size: 1.5rem;
        font-weight: 700;
    }

    /* Filter Bar */
    .filter-bar {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

    .filter-bar .form-select,
    .filter-bar .form-input {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        padding: 0.5rem 0.75rem;
        font-family: inherit;
        font-size: 0.85rem;
        outline: none;
        transition: border-color var(--transition);
    }

    .filter-bar .form-select:focus,
    .filter-bar .form-input:focus {
        border-color: var(--accent);
    }

    .filter-bar .form-select option {
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .search-wrapper {
        position: relative;
        flex: 1;
        min-width: 200px;
    }

    .search-wrapper i {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .search-wrapper .form-input {
        padding-left: 2.25rem;
        width: 100%;
    }

    /* Table */
    .table-container {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow-x: auto;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table th {
        text-align: left;
        padding: 0.75rem 1.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
    }

    .data-table td {
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
        border-bottom: 1px solid var(--border);
        color: var(--text-secondary);
    }

    .data-table tbody tr:hover {
        background: var(--bg-hover);
    }

    .data-table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.02);
    }

    .data-table tbody tr:nth-child(even):hover {
        background: var(--bg-hover);
    }

    .transaction-id {
        font-family: 'Courier New', monospace;
        font-weight: 600;
        color: var(--accent);
        font-size: 0.8rem;
    }

    .role-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .role-buyer { background: rgba(16, 191, 255, 0.15); color: #10BFFF; }
    .role-seller { background: rgba(0, 212, 170, 0.15); color: #00d4aa; }

    .badge-status {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.625rem;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .badge-pending { background: rgba(255, 165, 2, 0.15); color: #ffa502; }
    .badge-active { background: rgba(16, 191, 255, 0.15); color: #10BFFF; }
    .badge-completed { background: rgba(0, 212, 170, 0.15); color: #00d4aa; }
    .badge-disputed { background: rgba(255, 71, 87, 0.15); color: #ff4757; }
    .badge-cancelled { background: rgba(99, 110, 114, 0.15); color: #636e72; }
    .badge-funded { background: rgba(16, 191, 255, 0.15); color: #10BFFF; }
    .badge-delivered { background: rgba(0, 212, 170, 0.15); color: #00d4aa; }

    .action-btn {
        background: var(--bg-hover);
        border: 1px solid var(--border);
        color: var(--text-secondary);
        padding: 0.375rem 0.75rem;
        border-radius: var(--radius-sm);
        font-size: 0.8rem;
        cursor: pointer;
        transition: all var(--transition);
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-family: inherit;
        text-decoration: none;
    }

    .action-btn:hover {
        background: var(--accent-light);
        color: var(--accent);
        border-color: var(--accent);
    }

    .empty-state {
        text-align: center;
        padding: 2.5rem 1.5rem;
        color: var(--text-muted);
    }

    .empty-state i {
        font-size: 2rem;
        margin-bottom: 0.75rem;
        color: var(--accent);
        opacity: 0.5;
    }

    .empty-state h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
    }

    .empty-state p {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    /* Pagination */
    .pagination-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.25rem 1.5rem;
        gap: 0.25rem;
    }

    .pagination-wrapper .page-link {
        padding: 0.375rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-card);
        color: var(--text-secondary);
        font-size: 0.85rem;
        text-decoration: none;
        transition: all var(--transition);
    }

    .pagination-wrapper .page-link:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .pagination-wrapper .page-item.active .page-link {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

    .pagination-wrapper .page-item.disabled .page-link {
        opacity: 0.4;
        pointer-events: none;
    }

    /* Status Tabs */
    .status-tabs {
        display: flex;
        gap: 0.25rem;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid var(--border);
        overflow-x: auto;
    }

    .status-tab {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-secondary);
        text-decoration: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        white-space: nowrap;
        transition: all var(--transition);
    }

    .status-tab:hover {
        color: var(--accent);
    }

    .status-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
        font-weight: 600;
    }

    .tab-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 0.375rem;
        border-radius: 10px;
        font-size: 0.7rem;
        font-weight: 600;
        background: var(--bg-secondary);
        color: var(--text-muted);
    }

    .status-tab.active .tab-badge {
        background: var(--accent-light);
        color: var(--accent);
    }

    @media (max-width: 768px) {
        .page-title-row { flex-direction: column; gap: 1rem; align-items: flex-start; }
        .filter-bar { flex-direction: column; }
        .search-wrapper { width: 100%; }
        .data-table th, .data-table td { padding: 0.625rem 0.75rem; font-size: 0.8rem; }
        .status-tabs { gap: 0; }
        .status-tab { padding: 0.625rem 0.75rem; font-size: 0.8rem; }
    }
</style>
@endpush

@section('content')
    {{-- Page Title --}}
    <div class="page-title-row">
        <h1><i class="fas fa-exchange-alt"></i> {{ $pageTitle ?? 'My Transactions' }}</h1>
        <a href="{{ route('escrow.transactions.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Create New
        </a>
    </div>

    {{-- Status Tabs --}}
    @php $currentStatus = $currentStatus ?? request('status'); @endphp
    <div class="status-tabs">
        <a href="{{ route('escrow.transactions.index') }}" class="status-tab {{ !$currentStatus ? 'active' : '' }}">
            All
            <span class="tab-badge">{{ $statusCounts['all'] ?? 0 }}</span>
        </a>
        <a href="{{ route('escrow.transactions.index', ['status' => 'active']) }}" class="status-tab {{ $currentStatus === 'active' ? 'active' : '' }}">
            Active
            <span class="tab-badge">{{ $statusCounts['active'] ?? 0 }}</span>
        </a>
        <a href="{{ route('escrow.transactions.index', ['status' => 'pending']) }}" class="status-tab {{ $currentStatus === 'pending' ? 'active' : '' }}">
            Pending
            <span class="tab-badge">{{ $statusCounts['pending'] ?? 0 }}</span>
        </a>
        <a href="{{ route('escrow.transactions.index', ['status' => 'completed']) }}" class="status-tab {{ $currentStatus === 'completed' ? 'active' : '' }}">
            Completed
            <span class="tab-badge">{{ $statusCounts['completed'] ?? 0 }}</span>
        </a>
        <a href="{{ route('escrow.transactions.index', ['status' => 'disputed']) }}" class="status-tab {{ $currentStatus === 'disputed' ? 'active' : '' }}">
            Disputed
            <span class="tab-badge">{{ $statusCounts['disputed'] ?? 0 }}</span>
        </a>
        <a href="{{ route('escrow.transactions.index', ['status' => 'cancelled']) }}" class="status-tab {{ $currentStatus === 'cancelled' ? 'active' : '' }}">
            Cancelled
            <span class="tab-badge">{{ $statusCounts['cancelled'] ?? 0 }}</span>
        </a>
    </div>

    {{-- Filter Bar --}}
    <form method="GET" action="{{ route('escrow.transactions.index') }}" class="filter-bar">
        <select name="status" class="form-select" onchange="this.form.submit()">
            <option value="">All Statuses</option>
            <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
            <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
            <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completed</option>
            <option value="disputed" {{ request('status') === 'disputed' ? 'selected' : '' }}>Disputed</option>
            <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
        </select>

        <div class="search-wrapper">
            <i class="fas fa-search"></i>
            <input type="text" name="search" class="form-input" placeholder="Search by title, ID, or counterparty..." value="{{ request('search') }}">
        </div>

        <input type="date" name="date_from" class="form-input" value="{{ request('date_from') }}" placeholder="From">
        <input type="date" name="date_to" class="form-input" value="{{ request('date_to') }}" placeholder="To">

        <button type="submit" class="btn btn-sm btn-secondary">
            <i class="fas fa-filter"></i> Filter
        </button>
    </form>

    {{-- Transactions Table --}}
    <div class="table-container">
        @if(isset($transactions) && $transactions->count())
            <table class="data-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Role</th>
                        <th>Counterparty</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($transactions as $txn)
                        <tr>
                            <td><span class="transaction-id">ESC-{{ str_pad($txn->id, 5, '0', STR_PAD_LEFT) }}</span></td>
                            <td>{{ Str::limit($txn->title, 35) }}</td>
                            <td>
                                <span class="role-badge role-{{ $txn->buyer_id === auth()->id() ? 'buyer' : 'seller' }}">
                                    {{ $txn->buyer_id === auth()->id() ? 'Buyer' : 'Seller' }}
                                </span>
                            </td>
                            <td>{{ $txn->getCounterparty(auth()->id())?->name ?? 'N/A' }}</td>
                            <td>{{ $currency ?? '₦' }}{{ number_format($txn->amount, 2) }}</td>
                            <td>
                                <span class="badge-status badge-{{ $txn->status }}">
                                    {{ ucfirst($txn->status) }}
                                </span>
                            </td>
                            <td>{{ $txn->created_at->format('M d, Y') }}</td>
                            <td>
                                <a href="{{ route('escrow.transactions.show', $txn->id) }}" class="action-btn">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @include('partials.table-pagination', ['paginator' => $transactions, 'label' => 'transactions'])
        @else
            <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <h3>No transactions found</h3>
                <p>{{ request()->hasAny(['status', 'search', 'date_from', 'date_to']) ? 'Try adjusting your filters.' : 'Create your first escrow transaction to get started.' }}</p>
                @unless(request()->hasAny(['status', 'search', 'date_from', 'date_to']))
                    <a href="{{ route('escrow.transactions.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Create Escrow
                    </a>
                @endunless
            </div>
        @endif
    </div>
@endsection