@extends('layouts.app')

@section('title', 'Disputes')

@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;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .page-title-row h1 i { color: var(--accent); }

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

    .filter-bar .form-select {
        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;
    }

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

    .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); }

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

    .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-open { background: rgba(255, 165, 2, 0.15); color: #ffa502; }
    .badge-under_review { background: rgba(16, 191, 255, 0.15); color: #10BFFF; }
    .badge-resolved { background: rgba(0, 212, 170, 0.15); color: #00d4aa; }
    .badge-closed { background: rgba(99, 110, 114, 0.15); color: #636e72; }

    .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(--success); opacity: 0.5; }
    .empty-state h3 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--text-primary); }
    .empty-state p { font-size: 0.85rem; }

    .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;
    }

    .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; }

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

@section('content')
    <div class="page-title-row">
        <h1><i class="fas fa-gavel"></i> Disputes</h1>
    </div>

    <form method="GET" action="{{ route('escrow.disputes.index') }}" class="filter-bar">
        <select name="status" class="form-select" onchange="this.form.submit()">
            <option value="">All Statuses</option>
            <option value="open" {{ request('status') === 'open' ? 'selected' : '' }}>Open</option>
            <option value="under_review" {{ request('status') === 'under_review' ? 'selected' : '' }}>Under Review</option>
            <option value="resolved" {{ request('status') === 'resolved' ? 'selected' : '' }}>Resolved</option>
            <option value="closed" {{ request('status') === 'closed' ? 'selected' : '' }}>Closed</option>
        </select>
    </form>

    <div class="table-container">
        @if(isset($disputes) && $disputes->count())
            <table class="data-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Transaction</th>
                        <th>Reason</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($disputes as $dispute)
                        <tr>
                            <td><span class="dispute-id">DSP-{{ str_pad($dispute->id, 5, '0', STR_PAD_LEFT) }}</span></td>
                            <td>
                                <a href="{{ route('escrow.transactions.show', $dispute->escrow_transaction_id) }}" style="color: var(--accent);">
                                    ESC-{{ str_pad($dispute->escrow_transaction_id, 5, '0', STR_PAD_LEFT) }}
                                </a>
                            </td>
                            <td>{{ Str::limit($dispute->reason, 50) }}</td>
                            <td>
                                <span class="badge-status badge-{{ $dispute->status }}">
                                    {{ ucfirst(str_replace('_', ' ', $dispute->status)) }}
                                </span>
                            </td>
                            <td>{{ $dispute->created_at->format('M d, Y') }}</td>
                            <td>
                                <a href="{{ route('escrow.disputes.chat', $dispute->id) }}" class="action-btn" style="margin-right: 0.35rem;">
                                    <i class="fas fa-comments"></i> Chat
                                </a>
                                <a href="{{ route('escrow.transactions.show', $dispute->escrow_transaction_id) }}" class="action-btn">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @include('partials.table-pagination', ['paginator' => $disputes, 'label' => 'disputes'])
        @else
            <div class="empty-state">
                <i class="fas fa-check-circle"></i>
                <h3>No disputes</h3>
                <p>{{ request('status') ? 'No disputes match your filter.' : 'Great news! You have no disputes.' }}</p>
            </div>
        @endif
    </div>
@endsection