@extends('layouts.app')

@section('title', 'HR Helpdesk')

@section('content')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-2">
    <div>
        <h4 class="fw-bold mb-1">Employee Service Desk & Support</h4>
        <p class="text-secondary small mb-0">Confidential workplace inquiries, payroll queries, and internal grievance resolution</p>
    </div>
    <button class="btn btn-primary btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#newTicketModal">
        <i class="bi bi-plus-circle me-1"></i> Submit Support Ticket
    </button>
</div>

<!-- Tickets Stats -->
<div class="row g-3 mb-4">
    <div class="col-12 col-sm-4">
        <div class="stat-card">
            <span class="text-secondary small fw-medium">Open Inquiries</span>
            <h3 class="fw-bold text-danger mb-0 mt-1">{{ $openCount }}</h3>
            <span class="small text-muted">Awaiting HR assignment</span>
        </div>
    </div>
    <div class="col-12 col-sm-4">
        <div class="stat-card">
            <span class="text-secondary small fw-medium">In Progress</span>
            <h3 class="fw-bold text-warning mb-0 mt-1">{{ $inProgressCount }}</h3>
            <span class="small text-muted">Under investigation</span>
        </div>
    </div>
    <div class="col-12 col-sm-4">
        <div class="stat-card">
            <span class="text-secondary small fw-medium">Resolved Cases</span>
            <h3 class="fw-bold text-success mb-0 mt-1">{{ $resolvedCount }}</h3>
            <span class="small text-muted">Successfully closed</span>
        </div>
    </div>
</div>

<!-- Tickets List -->
<div class="card shadow-sm">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold">Support Requests</h6>
        <span class="badge bg-light text-secondary border">Total {{ $tickets->total() }}</span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 small">
            <thead class="table-light text-secondary">
                <tr>
                    <th>Ticket #</th>
                    <th>Requester</th>
                    <th>Subject</th>
                    <th>Category</th>
                    <th>Priority</th>
                    <th>Status</th>
                    <th>Date</th>
                    <th class="text-end">Manage</th>
                </tr>
            </thead>
            <tbody>
                @forelse($tickets as $t)
                    <tr>
                        <td class="fw-bold text-primary">{{ $t->ticket_number }}</td>
                        <td>
                            <div class="fw-semibold text-dark">{{ $t->employee->full_name ?? 'Employee' }}</div>
                            <span class="text-muted text-xs">{{ $t->employee->department->name ?? '' }}</span>
                        </td>
                        <td style="max-width: 250px;">
                            <div class="fw-semibold text-dark">{{ $t->subject }}</div>
                            <span class="text-muted text-xs text-truncate d-block">{{ Str::limit($t->description, 50) }}</span>
                        </td>
                        <td>
                            <span class="badge bg-light text-secondary border text-xs">
                                {{ ucfirst($t->category) }}
                            </span>
                        </td>
                        <td>
                            @if($t->priority === 'urgent' || $t->priority === 'high')
                                <span class="badge badge-soft-danger">{{ ucfirst($t->priority) }}</span>
                            @elseif($t->priority === 'medium')
                                <span class="badge badge-soft-warning">Medium</span>
                            @else
                                <span class="badge badge-soft-secondary">Low</span>
                            @endif
                        </td>
                        <td>
                            @if($t->status === 'resolved' || $t->status === 'closed')
                                <span class="badge badge-soft-success">{{ ucfirst($t->status) }}</span>
                            @elseif($t->status === 'in_progress')
                                <span class="badge badge-soft-warning">In Progress</span>
                            @else
                                <span class="badge badge-soft-danger">Open</span>
                            @endif
                        </td>
                        <td class="text-muted">{{ $t->created_at->format('d M Y') }}</td>
                        <td class="text-end">
                            <form action="{{ route('helpdesk.status', $t->id) }}" method="POST" class="d-inline-flex gap-1">
                                @csrf
                                <select name="status" class="form-select form-select-sm py-0 text-xs" onchange="this.form.submit()">
                                    <option value="open" {{ $t->status === 'open' ? 'selected' : '' }}>Open</option>
                                    <option value="in_progress" {{ $t->status === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                    <option value="resolved" {{ $t->status === 'resolved' ? 'selected' : '' }}>Resolved</option>
                                    <option value="closed" {{ $t->status === 'closed' ? 'selected' : '' }}>Closed</option>
                                </select>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5 text-muted">
                            <i class="bi bi-chat-square-dots fs-2 d-block mb-2"></i>
                            No helpdesk tickets on file.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Modal: New Ticket -->
<div class="modal fade" id="newTicketModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('helpdesk.store') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header">
                <h6 class="modal-title fw-bold">Submit HR Support Ticket</h6>
                <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 / Inquiry Title *</label>
                    <input type="text" name="subject" class="form-control form-control-sm" required placeholder="e.g. Discrepancy in Conveyance Allowance">
                </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" required>
                            <option value="payroll">Payroll & Compensation</option>
                            <option value="leave">Leave & Attendance</option>
                            <option value="workplace">Workplace & Facilities</option>
                            <option value="it_support">IT & Access Credentials</option>
                            <option value="general">General Inquiries</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label small fw-semibold">Priority Level *</label>
                        <select name="priority" class="form-select form-select-sm" required>
                            <option value="low">Low</option>
                            <option value="medium" selected>Medium</option>
                            <option value="high">High</option>
                            <option value="urgent">Urgent</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Detailed Description *</label>
                    <textarea name="description" class="form-control form-control-sm" rows="3" required placeholder="Describe the situation clearly for HR review..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-sm btn-primary">Submit Ticket</button>
            </div>
        </form>
    </div>
</div>
@endsection