@extends('layouts.main')

@section('title', 'Support Tickets')

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar text-dark" style="background: #E3F2FD;">
                            <i class="bx bx-support"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Support Tickets</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-ticket"></i>
                                @if(auth()->user()->hasRole('super-admin'))
                                    Manage all support tickets
                                @else
                                    Manage your support tickets
                                @endif
                            </h5>
                        </div>
                    </div>
                    @if(auth()->user()->hasRole('company'))
                        <a href="{{ route('support.create') }}" class="btn btn-primary">
                            <i class="bx bx-plus"></i> Create New Ticket
                        </a>
                    @endif
                </div>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <!-- Filters -->
                <div class="card mb-4">
                    <div class="card-body">
                        <form method="GET" action="{{ route('support.index') }}" class="row g-3">
                            <div class="col-md-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="">All Status</option>
                                    <option value="0" {{ request('status') == '0' ? 'selected' : '' }}>Open</option>
                                    <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>In Progress</option>
                                    <option value="2" {{ request('status') == '2' ? 'selected' : '' }}>Resolved</option>
                                    <option value="3" {{ request('status') == '3' ? 'selected' : '' }}>Closed</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="type" class="form-label">Type</label>
                                <select class="form-select" id="type" name="type">
                                    <option value="">All Types</option>
                                    <option value="1" {{ request('type') == '1' ? 'selected' : '' }}>Account / Billing</option>
                                    <option value="2" {{ request('type') == '2' ? 'selected' : '' }}>Technical</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="subject" class="form-label">Subject</label>
                                <input type="text" class="form-control" id="subject" name="subject" 
                                       value="{{ request('subject') }}" placeholder="Search by subject">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">&nbsp;</label>
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-primary">Filter</button>
                                    <a href="{{ route('support.index') }}" class="btn btn-outline-secondary">Clear</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Status Counts (for company users) -->
                @if(auth()->user()->hasRole('company') && !empty($statusCounts))
                <div class="row mb-4">
                    <div class="col-md-2 col-6 mb-2">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center">
                                <h5 class="text-primary">{{ $statusCounts['all'] }}</h5>
                                <small class="text-muted">Total</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-6 mb-2">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center">
                                <h5 class="text-warning">{{ $statusCounts['open'] }}</h5>
                                <small class="text-muted">Open</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-6 mb-2">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center">
                                <h5 class="text-info">{{ $statusCounts['in_progress'] }}</h5>
                                <small class="text-muted">In Progress</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-6 mb-2">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center">
                                <h5 class="text-success">{{ $statusCounts['resolved'] }}</h5>
                                <small class="text-muted">Resolved</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-6 mb-2">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center">
                                <h5 class="text-secondary">{{ $statusCounts['closed'] }}</h5>
                                <small class="text-muted">Closed</small>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Tickets Table -->
                <div class="table-responsive">
                    @if($tickets->count() > 0)
                        <table class="table table-striped table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Ticket ID</th>
                                    <th>Subject</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    @if(auth()->user()->hasRole('super-admin'))
                                        <th>User</th>
                                    @endif
                                    <th>Last Activity</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($tickets as $ticket)
                                    <tr>
                                        <td>
                                            <span class="badge bg-secondary">{{ $ticket->unique_id }}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-2">
                                                    @if($ticket->type == 1)
                                                        <i class="bx bx-credit-card text-primary"></i>
                                                    @else
                                                        <i class="bx bx-cog text-success"></i>
                                                    @endif
                                                </div>
                                                <div>
                                                    <strong>{{ Str::limit($ticket->subject, 50) }}</strong>
                                                    @if($ticket->status == 0)
                                                        <span class="badge bg-danger badge-sm ms-1">New</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge {{ $ticket->type == 1 ? 'bg-primary' : 'bg-success' }}">
                                                {{ $ticket->type_label }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge {{ $ticket->status_badge_class }}">
                                                {{ $ticket->status_label }}
                                            </span>
                                        </td>
                                        @if(auth()->user()->hasRole('super-admin'))
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-sm rounded-circle bg-light me-2 d-flex align-items-center justify-content-center">
                                                        <i class="bx bx-user"></i>
                                                    </div>
                                                    <div>
                                                        <small>{{ $ticket->user->name }}</small><br>
                                                        <small class="text-muted">{{ $ticket->user->email }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                        @endif
                                        <td>
                                            <small>{{ $ticket->last_activity_at->diffForHumans() }}</small>
                                        </td>
                                        <td>
                                            <div class="d-flex gap-1">
                                                <a href="{{ route('support.show', $ticket->unique_id) }}" 
                                                   class="btn btn-sm btn-outline-primary" title="View Details">
                                                    <i class="bx bx-show"></i>
                                                </a>
                                                @if(auth()->user()->hasRole('company') && in_array($ticket->status, [2, 3]))
                                                    <form action="{{ route('support.reopen', $ticket->unique_id) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        <button type="submit" class="btn btn-sm btn-outline-warning" 
                                                                title="Reopen Ticket">
                                                            <i class="bx bx-refresh"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <!-- Pagination -->
                        <div class="d-flex justify-content-center">
                            {{ $tickets->appends(request()->query())->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="bx bx-support" style="font-size: 4rem; opacity: 0.3;"></i>
                            <h4 class="text-muted mt-3">No Support Tickets Found</h4>
                            @if(auth()->user()->hasRole('company'))
                                <p class="text-muted">You haven't created any support tickets yet.</p>
                                <a href="{{ route('support.create') }}" class="btn btn-primary">
                                    <i class="bx bx-plus"></i> Create Your First Ticket
                                </a>
                            @else
                                <p class="text-muted">No support tickets match your current filters.</p>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection