@extends('layouts.app')

@section('title', $user->name . ' - Support Panel')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/support-panel.css') }}">
@endpush

@section('content')
<div class="row g-3 admin-dashboard">
    <div class="col-lg-2 d-none d-lg-block">
        @include('admin.partials.sidebar')
    </div>

    <div class="col-lg-7 col-12">
        <div class="d-flex align-items-center gap-2 mb-3">
            <a href="{{ route('support.dashboard') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
            <div>
                <h1 class="h5 fw-semibold mb-0">{{ $user->name }}</h1>
                <p class="text-muted small mb-0">User ID: #{{ $user->id }} · {{ $user->email }}</p>
            </div>
            <div class="ms-auto">
                <a href="{{ route('admin.users.show', $user->id) }}" class="btn btn-sm btn-outline-primary">Full Profile</a>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success py-2 small">{{ session('success') }}</div>
        @endif

        <div class="row g-2 mb-3">
            <div class="col-4">
                <div class="card border-0 shadow-sm py-2 px-3 text-center">
                    <div class="h4 fw-semibold mb-0">{{ $context['stats']['orders'] }}</div>
                    <div class="x-small text-muted">Orders</div>
                </div>
            </div>
            <div class="col-4">
                <div class="card border-0 shadow-sm py-2 px-3 text-center">
                    <div class="h4 fw-semibold mb-0">{{ $context['stats']['tickets'] }}</div>
                    <div class="x-small text-muted">Tickets</div>
                </div>
            </div>
            <div class="col-4">
                <div class="card border-0 shadow-sm py-2 px-3 text-center">
                    <div class="h4 fw-semibold mb-0 text-danger">{{ $context['stats']['open_tickets'] }}</div>
                    <div class="x-small text-muted">Open</div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm user-context-card mb-3">
            <div class="card-header bg-white py-2"><h6 class="fw-semibold mb-0 small">User Details</h6></div>
            <div class="card-body">
                <div class="info-row"><span class="text-muted">Phone</span><span>{{ $context['user']['phone'] ?? 'N/A' }}</span></div>
                <div class="info-row"><span class="text-muted">Role</span><span class="text-capitalize">{{ $context['user']['role'] }}</span></div>
                <div class="info-row"><span class="text-muted">Status</span>
                    <span class="badge bg-{{ $context['user']['status'] === 'active' ? 'success' : 'secondary' }}">{{ $context['user']['status'] }}</span>
                </div>
                <div class="info-row"><span class="text-muted">Member Since</span><span>{{ $context['user']['member_since'] }}</span></div>
                <div class="info-row"><span class="text-muted">Last Login</span><span>{{ $context['user']['last_login'] ?? 'Never' }}</span></div>
                <div class="info-row"><span class="text-muted">Wallet</span><span>₹{{ number_format($context['user']['wallet_balance'], 2) }}</span></div>
            </div>
        </div>

        @if($context['vendor'])
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white py-2 d-flex justify-content-between">
                <h6 class="fw-semibold mb-0 small">Vendor Profile</h6>
                <a href="{{ $context['vendor']['url'] }}" class="btn btn-sm btn-outline-primary">View</a>
            </div>
            <div class="card-body small">
                <div class="info-row"><span class="text-muted">Shop</span><span>{{ $context['vendor']['shop_name'] }}</span></div>
                <div class="info-row"><span class="text-muted">KYC</span><span>{{ $context['vendor']['kyc_status'] }}</span></div>
                <div class="info-row"><span class="text-muted">Approved</span><span>{{ $context['vendor']['approved'] ? 'Yes' : 'No' }}</span></div>
            </div>
        </div>
        @endif

        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white py-2"><h6 class="fw-semibold mb-0 small">Recent Orders</h6></div>
            <div class="table-responsive">
                <table class="table table-sm mb-0">
                    <thead class="bg-light"><tr><th>Order</th><th>Total</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                        @forelse($context['orders'] as $order)
                        <tr>
                            <td class="small">#{{ $order['order_number'] }}</td>
                            <td class="small">{{ $order['total'] }}</td>
                            <td><span class="badge bg-light text-dark">{{ $order['status'] }}</span></td>
                            <td><a href="{{ $order['url'] }}" class="btn btn-sm btn-outline-primary py-0">View</a></td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-center text-muted small py-3">No orders</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-12">
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white py-2"><h6 class="fw-semibold mb-0 small">Quick Actions</h6></div>
            <div class="card-body d-grid gap-2">
                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createTicketForUser">
                    <i class="bi bi-ticket me-1"></i> Ticket Banayein
                </button>
                <a href="{{ route('admin.orders.index', ['search' => $user->email]) }}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-cart me-1"></i> Orders Dekho
                </a>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-2"><h6 class="fw-semibold mb-0 small">Support Tickets</h6></div>
            <div class="list-group list-group-flush">
                @forelse($context['tickets'] as $ticket)
                <a href="{{ $ticket['url'] }}" class="list-group-item list-group-item-action py-2 border-0">
                    <div class="small fw-medium">#{{ $ticket['id'] }} {{ Str::limit($ticket['subject'], 25) }}</div>
                    <span class="badge bg-{{ $ticket['status'] === 'open' ? 'danger' : 'secondary' }} x-small">{{ $ticket['status'] }}</span>
                </a>
                @empty
                <div class="p-3 text-muted small text-center">No tickets</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="createTicketForUser" tabindex="-1">
    <div class="modal-dialog">
        <form class="modal-content" method="POST" action="{{ route('support.tickets.store') }}">
            @csrf
            <input type="hidden" name="user_id" value="{{ $user->id }}">
            <div class="modal-header">
                <h5 class="modal-title">Ticket for {{ $user->name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Subject</label>
                    <input type="text" name="subject" class="form-control" required>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label small fw-semibold">Category</label>
                        <select name="category" class="form-select form-select-sm">
                            <option value="general">General</option>
                            <option value="technical">Technical</option>
                            <option value="billing">Billing</option>
                            <option value="vendor">Vendor</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label small fw-semibold">Priority</label>
                        <select name="priority" class="form-select form-select-sm">
                            <option value="medium" selected>Medium</option>
                            <option value="high">High</option>
                            <option value="low">Low</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Message</label>
                    <textarea name="message" class="form-control" rows="4" required></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Create Ticket</button>
            </div>
        </form>
    </div>
</div>
@endsection