@extends('layouts.app')

@section('title', 'Support Panel - Gletra')

@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="admin-page-header mb-3">
            <div>
                <h1 class="h5 fw-semibold mb-1"><i class="bi bi-headset me-2 text-primary"></i>Support Panel</h1>
                <p class="text-muted small mb-0">Live search, user help, tickets — sab ek jagah</p>
            </div>
        </div>

        {{-- Live Search --}}
        <div class="support-panel-search mb-4" id="supportLiveSearch">
            <div class="search-input-wrap d-flex align-items-center gap-2">
                <i class="bi bi-search text-muted fs-5"></i>
                <input type="text" id="supportSearchInput" placeholder="User, email, phone, order #, product, ticket ID search karo..." autocomplete="off">
                <span class="spinner-border spinner-border-sm text-primary d-none" id="searchSpinner"></span>
            </div>
            <div class="support-search-results" id="searchResults"></div>
        </div>

        {{-- Stats --}}
        <div class="row g-2 mb-3">
            <div class="col-6 col-md-3">
                <div class="card support-stat-card stat-open shadow-sm py-2 px-3">
                    <div class="x-small text-muted text-uppercase fw-semibold">Open</div>
                    <div class="h4 fw-semibold mb-0">{{ $stats['open_tickets'] }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card support-stat-card stat-pending shadow-sm py-2 px-3">
                    <div class="x-small text-muted text-uppercase fw-semibold">Pending</div>
                    <div class="h4 fw-semibold mb-0">{{ $stats['pending_tickets'] }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card support-stat-card stat-escalated shadow-sm py-2 px-3">
                    <div class="x-small text-muted text-uppercase fw-semibold">Escalated</div>
                    <div class="h4 fw-semibold mb-0">{{ $stats['escalated'] }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card support-stat-card stat-users shadow-sm py-2 px-3">
                    <div class="x-small text-muted text-uppercase fw-semibold">Users</div>
                    <div class="h4 fw-semibold mb-0">{{ number_format($stats['total_users']) }}</div>
                </div>
            </div>
        </div>

        {{-- Quick Actions --}}
        <div class="row g-2 mb-3">
            <div class="col-md-4">
                <button class="card support-quick-action w-100 border-0 shadow-sm p-3 text-start bg-white" data-bs-toggle="modal" data-bs-target="#createUserModal">
                    <i class="bi bi-person-plus text-success fs-4"></i>
                    <div class="fw-semibold small mt-2">Naya User Banayein</div>
                    <div class="x-small text-muted">Customer account create karo</div>
                </button>
            </div>
            <div class="col-md-4">
                <button class="card support-quick-action w-100 border-0 shadow-sm p-3 text-start bg-white" data-bs-toggle="modal" data-bs-target="#createTicketModal">
                    <i class="bi bi-ticket-perforated text-primary fs-4"></i>
                    <div class="fw-semibold small mt-2">Ticket Banayein</div>
                    <div class="x-small text-muted">User ke liye request log karo</div>
                </button>
            </div>
            <div class="col-md-4">
                <a href="{{ route('support.tickets.index') }}" class="card support-quick-action w-100 border-0 shadow-sm p-3 text-start bg-white text-decoration-none text-dark d-block">
                    <i class="bi bi-inbox text-warning fs-4"></i>
                    <div class="fw-semibold small mt-2">Ticket Queue</div>
                    <div class="x-small text-muted">Saari requests dekho</div>
                </a>
            </div>
        </div>

        {{-- Recent Tickets --}}
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                <h6 class="fw-semibold mb-0 small text-uppercase">Recent Tickets</h6>
                <a href="{{ route('support.tickets.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-3">#</th>
                            <th>User</th>
                            <th>Subject</th>
                            <th>Status</th>
                            <th class="text-end pe-3">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentTickets as $ticket)
                        <tr>
                            <td class="ps-3 small">{{ $ticket->id }}</td>
                            <td class="small">{{ $ticket->user?->name ?? 'N/A' }}</td>
                            <td class="small text-muted">{{ Str::limit($ticket->subject, 35) }}</td>
                            <td>
                                @if($ticket->escalated_to_admin)
                                    <span class="badge bg-danger escalated-badge">Escalated</span>
                                @else
                                    <span class="badge bg-{{ $ticket->status === 'open' ? 'danger' : ($ticket->status === 'pending' ? 'warning text-dark' : 'success') }}">{{ $ticket->status }}</span>
                                @endif
                            </td>
                            <td class="text-end pe-3">
                                <a href="{{ route('support.tickets.show', $ticket->id) }}" class="btn btn-sm btn-outline-primary">Handle</a>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center py-4 text-muted small">Koi ticket nahi hai</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-12">
        @if($escalatedTickets->count())
        <h6 class="text-muted x-small text-uppercase mb-2">Admin Ko Bheje Gaye</h6>
        <div class="card border-0 shadow-sm mb-3">
            <div class="list-group list-group-flush">
                @foreach($escalatedTickets as $ticket)
                <a href="{{ route('support.tickets.show', $ticket->id) }}" class="list-group-item list-group-item-action py-2 border-0">
                    <div class="d-flex justify-content-between">
                        <span class="small fw-medium">#{{ $ticket->id }}</span>
                        <span class="badge bg-danger">Escalated</span>
                    </div>
                    <div class="x-small text-muted">{{ Str::limit($ticket->subject, 30) }}</div>
                    <div class="x-small text-muted">{{ $ticket->escalated_at?->diffForHumans() }}</div>
                </a>
                @endforeach
            </div>
        </div>
        @endif

        <h6 class="text-muted x-small text-uppercase mb-2">Quick Links</h6>
        <div class="card border-0 shadow-sm">
            <div class="list-group list-group-flush">
                <a href="{{ route('admin.users.index') }}" class="list-group-item list-group-item-action py-2 border-0 small"><i class="bi bi-people me-2"></i>All Users</a>
                <a href="{{ route('admin.orders.index') }}" class="list-group-item list-group-item-action py-2 border-0 small"><i class="bi bi-cart me-2"></i>All Orders</a>
                <a href="{{ route('support.center') }}" class="list-group-item list-group-item-action py-2 border-0 small"><i class="bi bi-book me-2"></i>Help Center</a>
                @if(auth()->user()->getActiveAdminRole() === 'admin')
                <a href="{{ route('support.monitor') }}" class="list-group-item list-group-item-action py-2 border-0 small"><i class="bi bi-activity me-2"></i>Support Monitor</a>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Create User Modal --}}
<div class="modal fade" id="createUserModal" tabindex="-1">
    <div class="modal-dialog">
        <form class="modal-content" method="POST" action="{{ route('support.users.store') }}">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Naya Customer Banayein</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">Naam</label>
                    <input type="text" name="name" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Email</label>
                    <input type="email" name="email" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Mobile</label>
                    <input type="text" name="mobile" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Password</label>
                    <input type="password" name="password" class="form-control" minlength="8" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">User Create</button>
            </div>
        </form>
    </div>
</div>

{{-- Create Ticket Modal --}}
<div class="modal fade" id="createTicketModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form class="modal-content" method="POST" action="{{ route('support.tickets.store') }}">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">User Request / Ticket</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">User ID</label>
                        <input type="number" name="user_id" id="ticketUserId" class="form-control" required placeholder="Search se user ID copy karo">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">Order ID (optional)</label>
                        <input type="number" name="order_id" class="form-control" placeholder="Agar order se related hai">
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-semibold">Subject</label>
                        <input type="text" name="subject" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">Category</label>
                        <select name="category" class="form-select">
                            <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-md-6">
                        <label class="form-label small fw-semibold">Priority</label>
                        <select name="priority" class="form-select">
                            <option value="low">Low</option>
                            <option value="medium" selected>Medium</option>
                            <option value="high">High</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-semibold">Message / Problem Details</label>
                        <textarea name="message" class="form-control" rows="4" required></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Ticket Create</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function() {
    const input = document.getElementById('supportSearchInput');
    const results = document.getElementById('searchResults');
    const spinner = document.getElementById('searchSpinner');
    const searchUrl = @json(route('support.search'));
    let debounceTimer = null;

    const icons = {
        users: { cls: 'bg-primary bg-opacity-10 text-primary', icon: 'bi-person' },
        orders: { cls: 'bg-success bg-opacity-10 text-success', icon: 'bi-cart' },
        products: { cls: 'bg-warning bg-opacity-10 text-warning', icon: 'bi-box' },
        tickets: { cls: 'bg-danger bg-opacity-10 text-danger', icon: 'bi-ticket' },
    };

    const labels = { users: 'Users', orders: 'Orders', products: 'Products', tickets: 'Tickets' };

    function renderResults(data) {
        let html = '';
        let hasResults = false;

        for (const [key, items] of Object.entries(data)) {
            if (!items.length) continue;
            hasResults = true;
            html += `<div class="support-search-section"><div class="support-search-section-title">${labels[key]}</div>`;
            items.forEach(item => {
                let title = '', sub = '';
                if (key === 'users') {
                    title = item.name;
                    sub = `${item.email} · ${item.role}`;
                } else if (key === 'orders') {
                    title = `#${item.order_number}`;
                    sub = `${item.customer} · ${item.total} · ${item.status}`;
                } else if (key === 'products') {
                    title = item.name;
                    sub = `SKU: ${item.sku || 'N/A'} · ${item.price}`;
                } else if (key === 'tickets') {
                    title = `#${item.id} ${item.subject}`;
                    sub = `${item.user} · ${item.status}`;
                }
                html += `<a href="${item.url}" class="support-search-item" ${key === 'users' ? `data-user-id="${item.id}"` : ''}>
                    <div class="support-search-item-icon ${icons[key].cls}"><i class="bi ${icons[key].icon}"></i></div>
                    <div class="overflow-hidden"><div class="fw-medium small text-truncate">${title}</div><div class="x-small text-muted text-truncate">${sub}</div></div>
                </a>`;
            });
            html += '</div>';
        }

        if (!hasResults) {
            html = '<div class="p-4 text-center text-muted small">Koi result nahi mila</div>';
        }
        results.innerHTML = html;
        results.classList.add('show');
    }

    input.addEventListener('input', function() {
        clearTimeout(debounceTimer);
        const q = this.value.trim();
        if (q.length < 2) {
            results.classList.remove('show');
            return;
        }
        debounceTimer = setTimeout(() => {
            spinner.classList.remove('d-none');
            fetch(`${searchUrl}?q=${encodeURIComponent(q)}`, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(r => r.json())
            .then(renderResults)
            .catch(() => { results.innerHTML = '<div class="p-3 text-danger small">Search error</div>'; results.classList.add('show'); })
            .finally(() => spinner.classList.add('d-none'));
        }, 300);
    });

    document.addEventListener('click', function(e) {
        if (!document.getElementById('supportLiveSearch').contains(e.target)) {
            results.classList.remove('show');
        }
        const userLink = e.target.closest('[data-user-id]');
        if (userLink) {
            document.getElementById('ticketUserId').value = userLink.dataset.userId;
        }
    });
})();
</script>
@endpush