@extends('layouts.admin')
@section('title', 'Dispute #' . $dispute->id)

@push('styles')
<style>
    .dr-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
    @media (max-width:900px) { .dr-grid { grid-template-columns:1fr; } }
    .dr-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.25rem; }
    .dr-card h3 { font-size:0.95rem; font-weight:700; margin:0 0 0.65rem; display:flex; align-items:center; gap:0.5rem; }
    .dr-card .meta { color:var(--text-muted,#9CA3AF); font-size:0.78rem; margin-bottom:0.6rem; }
    .dr-card .body { font-size:0.88rem; color:var(--text-primary); white-space:pre-wrap; line-height:1.55; }
    .dr-evidence { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0.5rem; margin-top:0.85rem; }
    .dr-evidence a { display:block; padding:0.55rem 0.75rem; border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text-primary); font-size:0.8rem; background:var(--bg-secondary); }
    .dr-evidence a:hover { border-color:var(--accent); }
    .dr-info-row { display:flex; justify-content:space-between; padding:0.45rem 0; border-bottom:1px solid var(--border); font-size:0.85rem; }
    .dr-info-row:last-child { border-bottom:none; }
    .dr-info-row .lbl { color:var(--text-muted,#9CA3AF); font-size:0.78rem; }
    .dr-status-pill { padding:3px 10px; border-radius:999px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
    .dr-status-open { background:rgba(255,176,32,0.14); color:#FFB020; }
    .dr-status-investigating { background:rgba(16,191,255,0.14); color:#10BFFF; }
    .dr-status-resolved { background:rgba(0,212,170,0.14); color:#00D4AA; }
    .dr-resolve-card { background:linear-gradient(180deg, rgba(255,71,87,0.05), var(--bg-card)); border:1px solid rgba(255,71,87,0.3); border-radius:12px; padding:1.25rem; margin-top:1rem; }
    .dr-form-row { margin-bottom:0.85rem; }
    .dr-form-row label { display:block; font-size:0.78rem; font-weight:600; color:var(--text-secondary,#6b7280); margin-bottom:0.3rem; }
    .dr-form-row input, .dr-form-row select, .dr-form-row textarea { width:100%; padding:0.55rem 0.75rem; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); color:var(--text-primary); font-size:0.88rem; font-family:inherit; }
    .dr-form-row textarea { min-height:84px; resize:vertical; }
    .dr-radio-card { display:block; padding:0.7rem 0.9rem; border:1px solid var(--border); border-radius:8px; margin-bottom:0.4rem; cursor:pointer; }
    .dr-radio-card:hover { border-color:var(--accent); }
    .dr-radio-card input { margin-right:0.5rem; }
    .dr-radio-card .name { font-weight:600; font-size:0.88rem; }
    .dr-radio-card .desc { font-size:0.75rem; color:var(--text-muted,#9CA3AF); margin-top:0.2rem; }
    .dr-btn { padding:0.6rem 1.2rem; border-radius:8px; font-weight:600; font-size:0.88rem; cursor:pointer; border:1px solid var(--border); }
    .dr-btn-primary { background:#DC2626; color:#fff; border-color:#DC2626; }
    .dr-btn-secondary { background:var(--bg-secondary); color:var(--text-primary); }
    .dr-resolved-banner { background:rgba(0,212,170,0.08); border:1px solid rgba(0,212,170,0.3); color:#00D4AA; padding:1rem 1.25rem; border-radius:10px; margin-bottom:1.25rem; }
</style>
@endpush

@section('content')
<a href="{{ route('admin.escrow.disputes') }}" style="color:var(--text-secondary,#6b7280);text-decoration:none;font-size:0.85rem;display:inline-flex;align-items:center;gap:0.35rem;margin-bottom:1rem;">
    <i class="fas fa-arrow-left"></i> Back to disputes
</a>

@if(session('success'))
    <div class="dr-resolved-banner">{{ session('success') }}</div>
@endif
@if($errors->any())
    <div style="background:rgba(255,71,87,0.08);border:1px solid rgba(255,71,87,0.3);color:#FF4757;padding:1rem;border-radius:10px;margin-bottom:1rem;">{{ $errors->first() }}</div>
@endif

<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.25rem;">
    <div>
        <h1 style="font-size:1.5rem;font-weight:700;margin:0;">Dispute #{{ $dispute->id }}</h1>
        <div style="color:var(--text-muted,#9CA3AF);font-size:0.85rem;margin-top:0.25rem;">
            On <strong>{{ optional($tx)->title ?? '—' }}</strong>
            · ₦{{ number_format(optional($tx)->amount ?? 0, 2) }}
            · opened by {{ optional($dispute->initiator)->name ?? 'unknown' }}
            · {{ $dispute->created_at->diffForHumans() }}
        </div>
    </div>
    <span class="dr-status-pill dr-status-{{ $dispute->status }}">{{ str_replace('_', ' ', $dispute->status) }}</span>
</div>

@if($dispute->status === 'resolved' || $dispute->status === 'rejected' || $dispute->status === 'closed')
    <div class="dr-resolved-banner">
        <strong>Resolved {{ optional($dispute->resolved_at)->diffForHumans() }}</strong>
        @if($dispute->resolver) by {{ $dispute->resolver->name }}@endif.
        @if($dispute->resolution)<div style="margin-top:0.4rem;color:var(--text-primary);">{{ $dispute->resolution }}</div>@endif
    </div>
@endif

<div class="dr-grid">
    {{-- Buyer side --}}
    <div class="dr-card">
        <h3><i class="fas fa-user"></i> Buyer
            @if($tx && $tx->buyer)
                <span class="meta" style="margin-left:0.5rem;font-weight:400;">{{ $tx->buyer->name }} · {{ $tx->buyer->email }}</span>
            @endif
        </h3>
        @if($buyerWallet)
            <div class="dr-info-row"><span class="lbl">Wallet balance</span><span>₦{{ number_format($buyerWallet->balance, 2) }}</span></div>
            <div class="dr-info-row"><span class="lbl">Held in escrow</span><span>₦{{ number_format($buyerWallet->escrow_balance, 2) }}</span></div>
        @endif
        @if($dispute->initiator && $dispute->initiator->id === optional($tx)->buyer_id)
            <div style="margin-top:0.75rem;padding:0.75rem;background:rgba(16,191,255,0.06);border-radius:8px;">
                <div style="font-size:0.72rem;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:0.3rem;">Buyer's claim</div>
                <div class="body">{{ $dispute->description }}</div>
            </div>
        @endif
    </div>

    {{-- Seller side --}}
    <div class="dr-card">
        <h3><i class="fas fa-user-tag"></i> Seller
            @if($tx && $tx->seller)
                <span class="meta" style="margin-left:0.5rem;font-weight:400;">{{ $tx->seller->name }} · {{ $tx->seller->email }}</span>
            @endif
        </h3>
        @if($sellerWallet)
            <div class="dr-info-row"><span class="lbl">Wallet balance</span><span>₦{{ number_format($sellerWallet->balance, 2) }}</span></div>
            <div class="dr-info-row"><span class="lbl">Held in escrow</span><span>₦{{ number_format($sellerWallet->escrow_balance, 2) }}</span></div>
        @endif
        @if($dispute->initiator && $dispute->initiator->id === optional($tx)->seller_id)
            <div style="margin-top:0.75rem;padding:0.75rem;background:rgba(255,176,32,0.06);border-radius:8px;">
                <div style="font-size:0.72rem;text-transform:uppercase;color:#FFB020;font-weight:700;margin-bottom:0.3rem;">Seller's claim</div>
                <div class="body">{{ $dispute->description }}</div>
            </div>
        @endif
    </div>
</div>

<div class="dr-card" style="margin-bottom:1rem;">
    <h3><i class="fas fa-receipt"></i> Transaction</h3>
    @if($tx)
        <div class="dr-info-row"><span class="lbl">ID</span><span>#{{ $tx->id }}</span></div>
        <div class="dr-info-row"><span class="lbl">Amount</span><span>₦{{ number_format($tx->amount, 2) }}</span></div>
        <div class="dr-info-row"><span class="lbl">Status</span><span style="text-transform:capitalize;">{{ $tx->status }}</span></div>
        <div class="dr-info-row"><span class="lbl">Created</span><span>{{ $tx->created_at->format('M d, Y H:i') }}</span></div>
        @if($tx->description)
            <div style="margin-top:0.85rem;padding-top:0.85rem;border-top:1px solid var(--border);font-size:0.85rem;color:var(--text-secondary,#6b7280);">{{ $tx->description }}</div>
        @endif
    @endif
</div>

@if($evidenceFiles->isNotEmpty())
<div class="dr-card" style="margin-bottom:1rem;">
    <h3><i class="fas fa-paperclip"></i> Evidence Files <span class="meta" style="font-weight:400;font-size:0.75rem;margin-left:0.4rem;">{{ $evidenceFiles->count() }}</span></h3>
    <div class="dr-evidence">
        @foreach($evidenceFiles as $f)
            <a href="{{ $f->file_url }}" target="_blank" rel="noopener">
                <i class="fas fa-file"></i>
                {{ \Illuminate\Support\Str::limit($f->content ?? 'attachment', 32) }}
                <div class="meta" style="margin-top:0.2rem;">
                    by {{ optional($f->sender)->name ?? '—' }} · {{ $f->created_at->diffForHumans() }}
                </div>
            </a>
        @endforeach
    </div>
</div>
@endif

@if($dispute->status === 'open' && auth()->user()->role === 'super_admin')
<div class="dr-resolve-card">
    <h3 style="font-size:1rem;font-weight:700;margin:0 0 0.85rem;display:flex;align-items:center;gap:0.5rem;color:#DC2626;">
        <i class="fas fa-gavel"></i> Resolve this dispute
    </h3>
    <p style="font-size:0.82rem;color:var(--text-secondary,#6b7280);margin:0 0 1rem;">
        Choose how funds should move and document the decision. Both parties will be notified.
    </p>

    <form method="POST" action="{{ route('admin.escrow.disputes.resolve', $dispute->id) }}"
          data-confirm="This action will move funds and lock the dispute as resolved. Confirm the outcome and refund amount before clicking."
          data-confirm-type="danger"
          data-confirm-title="Resolve dispute?"
          data-confirm-button="Resolve & move funds">
        @csrf

        <div class="dr-form-row">
            <label>Outcome</label>
            <label class="dr-radio-card">
                <input type="radio" name="outcome" value="refund_full" checked>
                <span class="name">Refund full to buyer</span>
                <div class="desc">Releases all locked funds back to the buyer. Seller gets nothing.</div>
            </label>
            <label class="dr-radio-card">
                <input type="radio" name="outcome" value="refund_partial" id="outcomePartial">
                <span class="name">Partial refund</span>
                <div class="desc">Buyer gets a specific amount back; the rest goes to the seller.</div>
            </label>
            <label class="dr-radio-card">
                <input type="radio" name="outcome" value="release_seller">
                <span class="name">Release to seller</span>
                <div class="desc">Seller wins. Full release minus seller's fee share.</div>
            </label>
            <label class="dr-radio-card">
                <input type="radio" name="outcome" value="no_money_movement">
                <span class="name">No money movement</span>
                <div class="desc">Mediated outcome — leave funds as they are.</div>
            </label>
        </div>

        <div class="dr-form-row" id="refundAmountRow" style="display:none;">
            <label>Refund amount (NGN)</label>
            <input type="number" step="0.01" min="0" name="refund_amount" placeholder="e.g. 5000.00">
        </div>

        <div class="dr-form-row">
            <label>Resolution status</label>
            <select name="status" required>
                <option value="resolved">Resolved (decision made)</option>
                <option value="rejected">Rejected (no merit)</option>
                <option value="closed">Closed (other reason)</option>
            </select>
        </div>

        <div class="dr-form-row">
            <label>Resolution explanation (visible to both parties)</label>
            <textarea name="resolution" required maxlength="5000" placeholder="Explain the decision in plain language. Reference evidence where useful."></textarea>
        </div>

        <div class="dr-form-row">
            <label>Internal admin notes (private)</label>
            <textarea name="admin_notes" maxlength="5000" placeholder="Anything that shouldn't be public — fraud signals, pattern observations, follow-up actions."></textarea>
        </div>

        <button type="submit" class="dr-btn dr-btn-primary"><i class="fas fa-gavel"></i> Resolve &amp; settle</button>
        <a href="{{ route('admin.escrow.disputes') }}" class="dr-btn dr-btn-secondary" style="text-decoration:none;display:inline-block;margin-left:0.5rem;">Cancel</a>
    </form>
</div>

<script>
    // Show the refund amount field only when "Partial refund" is selected.
    document.querySelectorAll('input[name="outcome"]').forEach(function(r) {
        r.addEventListener('change', function() {
            document.getElementById('refundAmountRow').style.display = (r.value === 'refund_partial' && r.checked) ? 'block' : 'none';
        });
    });
</script>
@endif
@endsection