@extends('layouts.app')

@section('title', $transaction->title ?? 'Transaction Details')

@push('styles')
<style>
    /* ===== Transaction Detail Page ===== */
    .txn-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .txn-header-left h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.375rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .txn-header-left .txn-meta {
        font-size: 0.85rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 1rem;
    }

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

    .badge-status {
        display: inline-flex;
        align-items: center;
        padding: 0.3rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        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; }

    .txn-actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    /* Two Column Layout */
    .txn-grid {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 1.5rem;
        align-items: start;
    }

    .card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .card-title {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-primary);
    }

    .card-title i {
        color: var(--accent);
    }

    /* Detail Rows */
    .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 0.625rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.85rem;
    }

    .detail-row:last-child {
        border-bottom: none;
    }

    .detail-label {
        color: var(--text-muted);
    }

    .detail-value {
        color: var(--text-primary);
        font-weight: 500;
        text-align: right;
    }

    .detail-value.amount {
        font-size: 1rem;
        font-weight: 700;
    }

    /* Party Card */
    .party-card {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        margin-bottom: 0.75rem;
    }

    .party-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.9rem;
    }

    .party-avatar.buyer {
        background: var(--accent-light);
        color: var(--accent);
    }

    .party-avatar.seller {
        background: var(--success-light);
        color: var(--success);
    }

    .party-info {
        flex: 1;
    }

    .party-role {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }

    .party-name {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .party-email {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    /* Milestones */
    .milestone-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        margin-bottom: 0.75rem;
    }

    .milestone-status-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
    }

    .milestone-status-icon.pending {
        background: var(--warning-light);
        color: var(--warning);
    }

    .milestone-status-icon.completed {
        background: var(--success-light);
        color: var(--success);
    }

    .milestone-status-icon.active {
        background: var(--accent-light);
        color: var(--accent);
    }

    .milestone-info {
        flex: 1;
    }

    .milestone-title {
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .milestone-amount {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .milestone-progress {
        width: 100%;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
        margin-top: 0.5rem;
        overflow: hidden;
    }

    .milestone-progress-fill {
        height: 100%;
        background: var(--accent);
        border-radius: 2px;
        transition: width 0.3s ease;
    }

    /* Activity Timeline */
    .timeline {
        position: relative;
        padding-left: 1.5rem;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--border);
    }

    .timeline-item {
        position: relative;
        padding-bottom: 1.25rem;
        padding-left: 1.25rem;
    }

    .timeline-item:last-child {
        padding-bottom: 0;
    }

    .timeline-dot {
        position: absolute;
        left: -1.5rem;
        top: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--bg-card);
        border: 3px solid var(--accent);
    }

    .timeline-dot.success {
        border-color: var(--success);
    }

    .timeline-dot.warning {
        border-color: var(--warning);
    }

    .timeline-dot.danger {
        border-color: var(--danger);
    }

    .timeline-content {
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

    .timeline-content strong {
        color: var(--text-primary);
    }

    .timeline-date {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    /* Chat Section */
    .chat-container {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .chat-header {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border);
        font-weight: 600;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .chat-header i {
        color: var(--accent);
    }

    .chat-messages {
        max-height: 400px;
        overflow-y: auto;
        padding: 1.25rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .chat-bubble {
        max-width: 75%;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-md);
        font-size: 0.85rem;
        line-height: 1.5;
        position: relative;
    }

    .chat-bubble.sent {
        background: var(--accent);
        color: #fff;
        align-self: flex-end;
        border-bottom-right-radius: 4px;
    }

    .chat-bubble.received {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        color: var(--text-primary);
        align-self: flex-start;
        border-bottom-left-radius: 4px;
    }

    .chat-bubble.system {
        background: var(--warning-light);
        color: var(--warning);
        align-self: center;
        text-align: center;
        font-size: 0.8rem;
        max-width: 90%;
        border-radius: 20px;
    }

    .chat-bubble-meta {
        font-size: 0.7rem;
        margin-top: 0.375rem;
        opacity: 0.7;
    }

    .chat-bubble.sent .chat-bubble-meta {
        text-align: right;
    }

    .chat-form {
        display: flex;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--border);
        background: var(--bg-secondary);
    }

    .chat-form input {
        flex: 1;
        padding: 0.625rem 1rem;
        background: var(--bg-primary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.85rem;
        outline: none;
    }

    .chat-form input:focus {
        border-color: var(--accent);
    }

    @media (max-width: 1024px) {
        .txn-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
        .txn-header { flex-direction: column; }
        .txn-actions { width: 100%; }
        .txn-actions .btn { flex: 1; justify-content: center; }
        .chat-bubble { max-width: 90%; }
    }
</style>
@endpush

@section('content')
    {{-- Header --}}
    <div class="txn-header">
        <div class="txn-header-left">
            <h1>
                {{ $transaction->title }}
                <span class="badge-status badge-{{ $transaction->status }}">{{ ucfirst($transaction->status) }}</span>
            </h1>
            <div class="txn-meta">
                <span class="txn-id">ESC-{{ str_pad($transaction->id, 5, '0', STR_PAD_LEFT) }}</span>
                <span><i class="fas fa-calendar"></i> {{ $transaction->created_at->format('M d, Y \a\t h:i A') }}</span>
            </div>
        </div>

        <div class="txn-actions">
            {{-- Action buttons based on status --}}
            @if($transaction->status === 'pending')
                @if($transaction->isCounterparty(auth()->user()))
                    <form method="POST" action="{{ route('escrow.transactions.accept', $transaction->id) }}" style="display:inline;">
                        @csrf
                        <button type="submit" class="btn btn-success"><i class="fas fa-check"></i> Accept</button>
                    </form>
                    <form method="POST" action="{{ route('escrow.transactions.reject', $transaction->id) }}" style="display:inline;">
                        @csrf
                        <button type="submit" class="btn btn-danger"><i class="fas fa-times"></i> Reject</button>
                    </form>
                @endif
            @elseif(in_array($transaction->status, ['active', 'funded']))
                @if($transaction->isSeller(auth()->user()))
                    <form method="POST" action="{{ route('escrow.transactions.deliver', $transaction->id) }}" style="display:inline;">
                        @csrf
                        <button type="submit" class="btn btn-success"><i class="fas fa-truck"></i> Mark Delivered</button>
                    </form>
                @endif
                <button type="button" class="btn btn-danger" onclick="document.getElementById('disputeModal').style.display='flex'">
                    <i class="fas fa-gavel"></i> Open Dispute
                </button>
            @elseif($transaction->status === 'delivered')
                @if($transaction->isBuyer(auth()->user()))
                    <form method="POST" action="{{ route('escrow.transactions.confirm', $transaction->id) }}" style="display:inline;">
                        @csrf
                        <button type="submit" class="btn btn-success"><i class="fas fa-check-double"></i> Confirm Receipt</button>
                    </form>
                    <button type="button" class="btn btn-danger" onclick="document.getElementById('disputeModal').style.display='flex'">
                        <i class="fas fa-gavel"></i> Open Dispute
                    </button>
                @endif
            @elseif($transaction->status === 'disputed')
                @php $activeDispute = $transaction->disputes->first(); @endphp
                @if($activeDispute)
                    <a href="{{ route('escrow.disputes.chat', $activeDispute->id) }}" class="btn btn-secondary">
                        <i class="fas fa-gavel"></i> View Dispute
                    </a>
                @endif
            @elseif($transaction->status === 'completed')
                <a href="#" class="btn btn-primary" onclick="document.getElementById('reviewModal').style.display='flex'">
                    <i class="fas fa-star"></i> Leave Review
                </a>
            @endif
        </div>
    </div>

    {{-- Two-Column Grid --}}
    <div class="txn-grid">
        {{-- Left Column --}}
        <div>
            {{-- Transaction Details Card --}}
            <div class="card">
                <h3 class="card-title"><i class="fas fa-file-invoice"></i> Transaction Details</h3>
                <div class="detail-row">
                    <span class="detail-label">Type</span>
                    <span class="detail-value">{{ ucfirst(str_replace('_', ' ', $transaction->type)) }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Amount</span>
                    <span class="detail-value amount">{{ $currency ?? '₦' }}{{ number_format($transaction->amount, 2) }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Escrow Fee</span>
                    <span class="detail-value">{{ $currency ?? '₦' }}{{ number_format($transaction->fee, 2) }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">VAT</span>
                    <span class="detail-value">{{ $currency ?? '₦' }}{{ number_format($transaction->vat, 2) }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Total</span>
                    <span class="detail-value amount">{{ $currency ?? '₦' }}{{ number_format($transaction->total, 2) }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Delivery Deadline</span>
                    <span class="detail-value">{{ $transaction->delivery_deadline?->format('M d, Y') ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Inspection Period</span>
                    <span class="detail-value">{{ $transaction->inspection_period_days ? $transaction->inspection_period_days . ' days' : 'N/A' }}</span>
                </div>
                @if(! empty($transaction->notes))
                    <div class="detail-row" style="flex-direction: column; gap: 0.5rem;">
                        <span class="detail-label">Notes</span>
                        <span class="detail-value" style="text-align: left; font-weight: 400; color: var(--text-secondary);">{{ $transaction->notes }}</span>
                    </div>
                @endif
            </div>

            {{-- Milestones (if milestone-based) --}}
            @if(isset($milestones) && $milestones->count())
                <div class="card">
                    <h3 class="card-title"><i class="fas fa-tasks"></i> Milestones</h3>
                    @foreach($milestones as $milestone)
                        <div class="milestone-item">
                            <div class="milestone-status-icon {{ $milestone->status }}">
                                @if($milestone->status === 'completed')
                                    <i class="fas fa-check"></i>
                                @elseif($milestone->status === 'active')
                                    <i class="fas fa-play"></i>
                                @else
                                    <i class="fas fa-clock"></i>
                                @endif
                            </div>
                            <div class="milestone-info">
                                <div class="milestone-title">{{ $milestone->title }}</div>
                                <div class="milestone-amount">{{ $currency ?? '₦' }}{{ number_format($milestone->amount, 2) }}</div>
                                <div class="milestone-progress">
                                    <div class="milestone-progress-fill" style="width: {{ $milestone->progress ?? 0 }}%;"></div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            {{-- Review Prompt (shown on completed transactions when user hasn't reviewed yet) --}}
            @if($transaction->status === 'completed' && !$transaction->hasBeenReviewedBy(auth()->id()))
                <div class="review-prompt" style="background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(0,212,170,0.1)); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;">
                    <div>
                        <h4 style="font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem;">
                            <i class="fas fa-star" style="color: #ffa502;"></i> Rate Your Experience
                        </h4>
                        <p style="font-size: 0.85rem; color: var(--text-secondary); margin: 0;">
                            How was your experience with {{ $transaction->getCounterparty(auth()->id())?->name ?? 'the other party' }}? Your review helps build trust on Tenseal.
                        </p>
                    </div>
                    <button onclick="document.getElementById('reviewModal').style.display='flex'" class="btn btn-primary" style="white-space: nowrap;">
                        <i class="fas fa-star"></i> Leave Review
                    </button>
                </div>
            @endif

            {{-- Already reviewed indicator --}}
            @if($transaction->status === 'completed' && $transaction->hasBeenReviewedBy(auth()->id()))
                <div style="background: rgba(0,212,170,0.1); border: 1px solid rgba(0,212,170,0.3); border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--text-secondary);">
                    <i class="fas fa-check-circle" style="color: #00d4aa;"></i> You've reviewed this transaction. Thank you for your feedback!
                </div>
            @endif

            {{-- Chat / Messages --}}
            <div class="chat-container">
                <div class="chat-header">
                    <i class="fas fa-comments"></i> Messages
                </div>
                <div class="chat-messages" id="chatMessages">
                    @forelse($messages ?? [] as $message)
                        @if($message->type === 'system')
                            <div class="chat-bubble system">
                                <i class="fas fa-info-circle"></i> {{ $message->content }}
                                <div class="chat-bubble-meta">{{ $message->created_at->format('M d, h:i A') }}</div>
                            </div>
                        @elseif($message->sender_id === auth()->id())
                            <div class="chat-bubble sent">
                                {{ $message->content }}
                                <div class="chat-bubble-meta">{{ $message->created_at->format('h:i A') }}</div>
                            </div>
                        @else
                            <div class="chat-bubble received">
                                <strong style="font-size: 0.75rem; color: var(--accent);">{{ $message->sender->name ?? 'User' }}</strong><br>
                                {{ $message->content }}
                                <div class="chat-bubble-meta">{{ $message->created_at->format('h:i A') }}</div>
                            </div>
                        @endif
                    @empty
                        <div style="text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.85rem;">
                            <i class="fas fa-comments" style="font-size: 1.5rem; margin-bottom: 0.5rem; display: block; opacity: 0.5;"></i>
                            No messages yet. Start the conversation!
                        </div>
                    @endforelse
                </div>

                <form class="chat-form" method="POST" action="{{ route('escrow.messages.store', $transaction->id) }}">
                    @csrf
                    <input type="text" name="message" placeholder="Type a message..." required autocomplete="off">
                    <button type="button" class="btn btn-secondary" onclick="document.getElementById('fileInput').click()">
                        <i class="fas fa-paperclip"></i>
                    </button>
                    <input type="file" id="fileInput" name="attachment" style="display: none;" accept="image/*,.pdf,.doc,.docx">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </div>

        {{-- Right Column --}}
        <div>
            {{-- Parties Card --}}
            <div class="card">
                <h3 class="card-title"><i class="fas fa-users"></i> Parties</h3>

                <div class="party-card">
                    <div class="party-avatar buyer">
                        {{ strtoupper(substr($transaction->buyer->name ?? 'B', 0, 2)) }}
                    </div>
                    <div class="party-info">
                        <div class="party-role">Buyer</div>
                        <div class="party-name">{{ $transaction->buyer->name ?? 'N/A' }}</div>
                        <div class="party-email">{{ $transaction->buyer->email ?? '' }}</div>
                    </div>
                </div>

                <div class="party-card">
                    <div class="party-avatar seller">
                        {{ strtoupper(substr($transaction->seller->name ?? 'S', 0, 2)) }}
                    </div>
                    <div class="party-info">
                        <div class="party-role">Seller</div>
                        <div class="party-name">{{ $transaction->seller->name ?? 'N/A' }}</div>
                        <div class="party-email">{{ $transaction->seller->email ?? '' }}</div>
                    </div>
                </div>
            </div>

            {{-- Activity Timeline --}}
            <div class="card">
                <h3 class="card-title"><i class="fas fa-stream"></i> Activity</h3>
                <div class="timeline">
                    @forelse($activities ?? [] as $activity)
                        <div class="timeline-item">
                            <div class="timeline-dot {{ $activity->dot_color ?? '' }}"></div>
                            <div class="timeline-content">
                                <strong>{{ $activity->title }}</strong><br>
                                {{ $activity->description }}
                            </div>
                            <div class="timeline-date">{{ $activity->created_at->format('M d, Y h:i A') }}</div>
                        </div>
                    @empty
                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <strong>Transaction Created</strong><br>
                                Escrow transaction was initiated.
                            </div>
                            <div class="timeline-date">{{ $transaction->created_at->format('M d, Y h:i A') }}</div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- Dispute Modal --}}
    @if(in_array($transaction->status, ['active', 'funded', 'delivered', 'inspection']))
    <div id="disputeModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(5px);">
        <div style="background: var(--bg-card); width: 95%; max-width: 480px; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow);">
            <div style="padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
                <h3 style="font-size: 1.1rem; font-weight: 600;"><i class="fas fa-gavel" style="color: var(--danger);"></i> Open Dispute</h3>
                <button onclick="document.getElementById('disputeModal').style.display='none'" style="background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem;"><i class="fas fa-times"></i></button>
            </div>
            <form method="POST" action="{{ route('escrow.disputes.store') }}" style="padding: 1.5rem;">
                @csrf
                <input type="hidden" name="escrow_transaction_id" value="{{ $transaction->id }}">
                <div style="margin-bottom: 1.25rem;">
                    <label style="display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem;">Reason for Dispute</label>
                    <textarea name="reason" rows="4" required style="width: 100%; padding: 0.75rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; resize: vertical; outline: none;" placeholder="Describe the issue in detail..."></textarea>
                </div>
                <button type="submit" class="btn btn-danger" style="width: 100%;"><i class="fas fa-gavel"></i> Submit Dispute</button>
            </form>
        </div>
    </div>
    @endif

    {{-- Review Modal --}}
    <div id="reviewModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(5px);">
        <div style="background: var(--bg-card); width: 95%; max-width: 480px; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow);">
            <div style="padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
                <h3 style="font-size: 1.1rem; font-weight: 600;">Leave a Review</h3>
                <button onclick="document.getElementById('reviewModal').style.display='none'" style="background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem;"><i class="fas fa-times"></i></button>
            </div>
            <form method="POST" action="{{ route('escrow.transactions.review', $transaction->id ?? 0) }}" style="padding: 1.5rem;">
                @csrf
                <div style="margin-bottom: 1.25rem;">
                    <label style="display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem;">Rating</label>
                    <div id="starRating" style="display: flex; gap: 0.5rem; font-size: 1.5rem; cursor: pointer;">
                        @for($i = 1; $i <= 5; $i++)
                            <i class="far fa-star" data-rating="{{ $i }}" onclick="setRating({{ $i }})" style="color: var(--warning); transition: all 0.2s;"></i>
                        @endfor
                    </div>
                    <input type="hidden" name="rating" id="ratingInput" value="0">
                </div>
                <div style="margin-bottom: 1.25rem;">
                    <label style="display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem;">Comment (Optional)</label>
                    <textarea name="comment" rows="3" style="width: 100%; padding: 0.75rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; resize: vertical; outline: none;" placeholder="Share your experience..."></textarea>
                </div>
                <button type="submit" class="btn btn-primary" style="width: 100%;"><i class="fas fa-star"></i> Submit Review</button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // Auto-scroll chat to bottom
    const chatMessages = document.getElementById('chatMessages');
    if (chatMessages) {
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    // Star rating
    function setRating(rating) {
        document.getElementById('ratingInput').value = rating;
        document.querySelectorAll('#starRating i').forEach(star => {
            const starRating = parseInt(star.dataset.rating);
            star.classList.remove('fas', 'far');
            star.classList.add(starRating <= rating ? 'fas' : 'far');
        });
    }
</script>
@endpush