@extends('portal.layouts.master')
@section('title', 'Help Desk')
@section('page-title', 'Help Desk')

@section('extra-css')
.helpdesk-grid { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; }
@media (max-width: 992px) { .helpdesk-grid { grid-template-columns: 1fr; } }

/* Ticket form */
.ticket-form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 180px; }
.radio-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.radio-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .8rem; border-radius: 20px; cursor: pointer;
    border: 1px solid var(--border); font-size: .78rem;
    color: var(--text-secondary); transition: all .15s;
}
.radio-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.radio-pill input { display: none; }
.radio-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Priority colors */
.priority-low { border-color: var(--text-muted); }
.priority-medium { border-color: #3b82f6; }
.priority-high { border-color: #f59e0b; }
.priority-urgent { border-color: #f6465d; }
.radio-pill.active.priority-low { background: var(--text-muted); }
.radio-pill.active.priority-medium { background: #3b82f6; }
.radio-pill.active.priority-high { background: #f59e0b; }
.radio-pill.active.priority-urgent { background: #f6465d; }

/* Contact card */
.contact-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 1.25rem;
}
.contact-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem 0; font-size: .82rem;
}
.contact-item i { width: 20px; text-align: center; color: var(--accent); font-size: 1rem; }
.contact-item a { color: var(--text-primary); text-decoration: none; }
.contact-item a:hover { color: var(--accent); }
.social-links { display: flex; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }
.social-link {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--bg-tertiary); display: flex;
    align-items: center; justify-content: center;
    color: var(--text-secondary); text-decoration: none;
    font-size: 1rem; transition: all .15s;
}
.social-link:hover { background: var(--accent); color: #fff; }

/* Ticket list */
.ticket-list { margin-top: 1.25rem; }
.ticket-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .65rem 1rem; border-bottom: 1px solid var(--border);
    text-decoration: none; color: var(--text-primary); transition: background .12s;
}
.ticket-row:hover { background: rgba(59,130,246,.06); color: var(--text-primary); }
.ticket-left { flex: 1; min-width: 0; }
.ticket-subject { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-meta { font-size: .7rem; color: var(--text-muted); margin-top: .15rem; }
.ticket-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.open { background: #f59e0b; }
.status-dot.in_progress { background: #3b82f6; }
.status-dot.resolved { background: var(--green); }
.status-dot.closed { background: var(--text-muted); }
.priority-badge {
    font-size: .6rem; font-weight: 700; padding: .15rem .4rem;
    border-radius: 3px; text-transform: uppercase;
}
.priority-badge.low { background: rgba(255,255,255,.08); color: var(--text-muted); }
.priority-badge.medium { background: rgba(59,130,246,.15); color: #3b82f6; }
.priority-badge.high { background: rgba(245,158,11,.15); color: #f59e0b; }
.priority-badge.urgent { background: rgba(246,70,93,.15); color: #f6465d; }
@endsection

@section('content')
<div class="helpdesk-grid">
    {{-- Main column --}}
    <div>
        {{-- New ticket form --}}
        <div class="ticket-form-card">
            <h6 style="font-size:.9rem;font-weight:700;margin-bottom:1rem">
                <i class="fas fa-plus-circle me-1" style="color:var(--accent)"></i> Open a New Ticket
            </h6>

            <form method="POST" action="{{ route('portal.helpdesk.store') }}">
                @csrf

                <div class="mb-3">
                    <label class="form-label">Subject</label>
                    <input type="text" name="subject" class="form-control" required
                        value="{{ old('subject') }}" placeholder="Brief description of your issue">
                    @error('subject')
                        <div class="text-danger mt-1" style="font-size:.75rem">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-row mb-3">
                    <div>
                        <label class="form-label">Department</label>
                        <div class="radio-group" data-radio-group="department">
                            <label class="radio-pill {{ old('department', 'technical') === 'sales' ? 'active' : '' }}">
                                <input type="radio" name="department" value="sales" {{ old('department') === 'sales' ? 'checked' : '' }}>
                                <i class="fas fa-headset"></i> Sales
                            </label>
                            <label class="radio-pill {{ old('department', 'technical') === 'technical' ? 'active' : '' }}">
                                <input type="radio" name="department" value="technical" {{ old('department', 'technical') === 'technical' ? 'checked' : '' }}>
                                <i class="fas fa-wrench"></i> Technical
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="form-label">Priority</label>
                        <div class="radio-group" data-radio-group="priority">
                            <label class="radio-pill priority-low {{ old('priority', 'medium') === 'low' ? 'active' : '' }}">
                                <input type="radio" name="priority" value="low" {{ old('priority') === 'low' ? 'checked' : '' }}>
                                Low
                            </label>
                            <label class="radio-pill priority-medium {{ old('priority', 'medium') === 'medium' ? 'active' : '' }}">
                                <input type="radio" name="priority" value="medium" {{ old('priority', 'medium') === 'medium' ? 'checked' : '' }}>
                                Medium
                            </label>
                            <label class="radio-pill priority-high {{ old('priority') === 'high' ? 'active' : '' }}">
                                <input type="radio" name="priority" value="high" {{ old('priority') === 'high' ? 'checked' : '' }}>
                                High
                            </label>
                            <label class="radio-pill priority-urgent {{ old('priority') === 'urgent' ? 'active' : '' }}">
                                <input type="radio" name="priority" value="urgent" {{ old('priority') === 'urgent' ? 'checked' : '' }}>
                                Urgent
                            </label>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">How would you like to receive updates?</label>
                    <div class="radio-group" data-radio-group="update_via">
                        <label class="radio-pill {{ old('update_via', 'system') === 'system' ? 'active' : '' }}">
                            <input type="radio" name="update_via" value="system" {{ old('update_via', 'system') === 'system' ? 'checked' : '' }}>
                            <i class="fas fa-bell"></i> Internal System
                        </label>
                        <label class="radio-pill {{ old('update_via') === 'phone' ? 'active' : '' }}">
                            <input type="radio" name="update_via" value="phone" {{ old('update_via') === 'phone' ? 'checked' : '' }}>
                            <i class="fas fa-phone"></i> Phone
                        </label>
                        <label class="radio-pill {{ old('update_via') === 'callback' ? 'active' : '' }}">
                            <input type="radio" name="update_via" value="callback" {{ old('update_via') === 'callback' ? 'checked' : '' }}>
                            <i class="fas fa-phone-flip"></i> Request Callback
                        </label>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Message</label>
                    <textarea name="message" class="form-control" rows="5" required
                        placeholder="Describe your issue in detail...">{{ old('message') }}</textarea>
                    @error('message')
                        <div class="text-danger mt-1" style="font-size:.75rem">{{ $message }}</div>
                    @enderror
                </div>

                <button type="submit" class="btn btn-accent" style="padding:.55rem 1.5rem;font-size:.85rem">
                    <i class="fas fa-paper-plane me-1"></i> Submit Ticket
                </button>
            </form>
        </div>

        {{-- Ticket history --}}
        @if($tickets->isNotEmpty())
        <div class="dark-card ticket-list">
            <div class="card-header">
                <i class="fas fa-ticket me-2"></i>My Tickets ({{ $tickets->count() }})
            </div>
            <div class="card-body p-0">
                @foreach($tickets as $t)
                <a href="{{ route('portal.helpdesk.show', $t->id) }}" class="ticket-row">
                    <div class="ticket-left">
                        <div class="ticket-subject">#{{ $t->id }} — {{ $t->subject }}</div>
                        <div class="ticket-meta">
                            {{ ucfirst($t->department) }} &middot;
                            {{ ucfirst(str_replace('_', ' ', $t->update_via)) }} &middot;
                            {{ $t->created_at->diffForHumans() }}
                        </div>
                    </div>
                    <div class="ticket-right">
                        <span class="priority-badge {{ $t->priority }}">{{ ucfirst($t->priority) }}</span>
                        <span class="status-dot {{ $t->status }}" title="{{ ucfirst(str_replace('_', ' ', $t->status)) }}"></span>
                        <span style="font-size:.7rem;color:var(--text-muted)">{{ ucfirst(str_replace('_', ' ', $t->status)) }}</span>
                    </div>
                </a>
                @endforeach
            </div>
        </div>
        @endif
    </div>

    {{-- Right column: Contact info --}}
    <div>
        <div class="contact-card">
            <h6 style="font-size:.85rem;font-weight:700;margin-bottom:.75rem">
                <i class="fas fa-address-book me-1" style="color:var(--accent)"></i> Contact Us
            </h6>

            @if($settings?->phone)
            <div class="contact-item">
                <i class="fas fa-phone"></i>
                <a href="tel:{{ $settings->phone }}">{{ $settings->phone }}</a>
            </div>
            @endif

            @if($settings?->email)
            <div class="contact-item">
                <i class="fas fa-envelope"></i>
                <a href="mailto:{{ $settings->email }}">{{ $settings->email }}</a>
            </div>
            @endif

            @if($settings?->whatsapp)
            <div class="contact-item">
                <i class="fab fa-whatsapp" style="color:#25d366"></i>
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $settings->whatsapp) }}" target="_blank">{{ $settings->whatsapp }}</a>
            </div>
            @endif

            @if($settings?->telegram)
            <div class="contact-item">
                <i class="fab fa-telegram" style="color:#0088cc"></i>
                <a href="https://t.me/{{ ltrim($settings->telegram, '@') }}" target="_blank">{{ $settings->telegram }}</a>
            </div>
            @endif

            @php
                $socials = collect([
                    ['field' => 'facebook',  'icon' => 'fab fa-facebook-f',  'url' => $settings?->facebook],
                    ['field' => 'instagram', 'icon' => 'fab fa-instagram',   'url' => $settings?->instagram],
                    ['field' => 'twitter',   'icon' => 'fab fa-x-twitter',   'url' => $settings?->twitter],
                    ['field' => 'linkedin',  'icon' => 'fab fa-linkedin-in', 'url' => $settings?->linkedin],
                ])->filter(fn($s) => !empty($s['url']));
            @endphp

            @if($socials->isNotEmpty())
            <div style="margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border)">
                <div style="font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem">Follow Us</div>
                <div class="social-links">
                    @foreach($socials as $s)
                    <a href="{{ $s['url'] }}" target="_blank" class="social-link" title="{{ ucfirst($s['field']) }}">
                        <i class="{{ $s['icon'] }}"></i>
                    </a>
                    @endforeach
                </div>
            </div>
            @endif

            @if(!$settings?->phone && !$settings?->email && !$settings?->whatsapp)
            <p style="font-size:.8rem;color:var(--text-muted)">Contact information will be available soon.</p>
            @endif
        </div>

        {{-- Quick stats --}}
        <div class="contact-card" style="margin-top:1rem">
            <h6 style="font-size:.85rem;font-weight:700;margin-bottom:.75rem">
                <i class="fas fa-chart-pie me-1" style="color:var(--accent)"></i> Ticket Summary
            </h6>
            @php
                $openCount = $tickets->whereIn('status', ['open', 'in_progress'])->count();
                $resolvedCount = $tickets->where('status', 'resolved')->count();
                $closedCount = $tickets->where('status', 'closed')->count();
            @endphp
            <div style="display:flex;gap:1rem">
                <div style="text-align:center;flex:1">
                    <div style="font-size:1.3rem;font-weight:700;color:#f59e0b">{{ $openCount }}</div>
                    <div style="font-size:.65rem;color:var(--text-muted);text-transform:uppercase">Open</div>
                </div>
                <div style="text-align:center;flex:1">
                    <div style="font-size:1.3rem;font-weight:700;color:var(--green)">{{ $resolvedCount }}</div>
                    <div style="font-size:.65rem;color:var(--text-muted);text-transform:uppercase">Resolved</div>
                </div>
                <div style="text-align:center;flex:1">
                    <div style="font-size:1.3rem;font-weight:700;color:var(--text-muted)">{{ $closedCount }}</div>
                    <div style="font-size:.65rem;color:var(--text-muted);text-transform:uppercase">Closed</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-js')
<script>
document.querySelectorAll('.radio-pill').forEach(function(pill) {
    pill.addEventListener('click', function() {
        var group = this.closest('[data-radio-group]') || this.closest('.radio-group');
        group.querySelectorAll('.radio-pill').forEach(function(p) { p.classList.remove('active'); });
        this.classList.add('active');
        this.querySelector('input').checked = true;
    });
});
</script>
@endsection