@extends('layouts.app')
@section('title', __('Support'))
@section('content')

<div class="page-header">
  <a href="{{ route('dashboard') }}" class="page-header-back"><i class="bi bi-arrow-left"></i></a>
  <div>
    <div class="page-header-title">{{ strtoupper(__('Support')) }}</div>
    <div class="page-header-sub">{{ app()->getLocale() === 'id' ? 'BANTUAN & TIKET' : 'HELP & TICKETS' }}</div>
  </div>
</div>

<div class="page" style="padding-bottom:2rem">
  <div class="section">

    {{-- KONTAK CEPAT --}}
    <div style="font-family:var(--mono);font-size:0.6rem;color:var(--gold);letter-spacing:0.08em;margin-bottom:0.75rem;">
      {{ app()->getLocale() === 'id' ? 'HUBUNGI KAMI' : 'CONTACT US' }}
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:1.5rem;">
      @if($whatsapp)
      <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $whatsapp) }}" target="_blank"
        style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;padding:1rem;background:rgba(37,211,102,0.08);border:1px solid rgba(37,211,102,0.25);border-radius:12px;text-decoration:none;">
        <i class="bi bi-whatsapp" style="font-size:1.75rem;color:#25d366;"></i>
        <div style="font-family:var(--mono);font-size:0.62rem;color:#25d366;font-weight:700;">WhatsApp</div>
        <div style="font-family:var(--mono);font-size:0.52rem;color:var(--t2);">{{ $whatsapp }}</div>
      </a>
      @endif

      @if($telegram)
      <a href="{{ $telegram }}" target="_blank"
        style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;padding:1rem;background:rgba(0,136,204,0.08);border:1px solid rgba(0,136,204,0.25);border-radius:12px;text-decoration:none;">
        <i class="bi bi-telegram" style="font-size:1.75rem;color:#0088cc;"></i>
        <div style="font-family:var(--mono);font-size:0.62rem;color:#0088cc;font-weight:700;">Telegram</div>
        <div style="font-family:var(--mono);font-size:0.52rem;color:var(--t2);">{{ app()->getLocale() === 'id' ? 'Klik untuk chat' : 'Click to chat' }}</div>
      </a>
      @endif
    </div>

    {{-- FORM TIKET --}}
    <div style="background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1.25rem;">
      <div style="padding:0.875rem 1rem;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:0.6rem;color:var(--gold);letter-spacing:0.08em;">
        {{ app()->getLocale() === 'id' ? 'BUAT TIKET BARU' : 'OPEN NEW TICKET' }}
      </div>
      <div style="padding:1rem;">
        <form action="{{ route('support.ticket.store') }}" method="POST">
          @csrf
          <div class="form-group">
            <label class="form-label">{{ app()->getLocale() === 'id' ? 'Subjek' : 'Subject' }}</label>
            <input type="text" name="subject" class="form-input"
              placeholder="{{ app()->getLocale() === 'id' ? 'Tulis subjek masalah...' : 'Write your subject...' }}"
              value="{{ old('subject') }}" required>
            @error('subject')<div style="color:var(--red);font-size:0.6rem;margin-top:0.3rem;">{{ $message }}</div>@enderror
          </div>
          <div class="form-group">
            <label class="form-label">{{ app()->getLocale() === 'id' ? 'Pesan' : 'Message' }}</label>
            <textarea name="message" class="form-input" rows="4"
              placeholder="{{ app()->getLocale() === 'id' ? 'Jelaskan masalah kamu...' : 'Describe your issue...' }}"
              required style="resize:none;">{{ old('message') }}</textarea>
            @error('message')<div style="color:var(--red);font-size:0.6rem;margin-top:0.3rem;">{{ $message }}</div>@enderror
          </div>
          <button type="submit" class="btn-submit">
            <i class="bi bi-send-fill"></i> {{ app()->getLocale() === 'id' ? 'KIRIM TIKET' : 'SUBMIT TICKET' }}
          </button>
        </form>
      </div>
    </div>

    {{-- LIST TIKET --}}
    <div style="font-family:var(--mono);font-size:0.6rem;color:var(--gold);letter-spacing:0.08em;margin-bottom:0.75rem;">
      {{ app()->getLocale() === 'id' ? 'RIWAYAT TIKET' : 'TICKET HISTORY' }}
    </div>

    @forelse($tickets as $ticket)
<a href="{{ route('support.ticket.show', $ticket->id) }}" style="text-decoration:none;display:block;margin-bottom:0.75rem;">
  <div style="background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:0.875rem 1rem;transition:border-color 0.2s;"
    onmouseover="this.style.borderColor='rgba(245,158,11,0.4)'" onmouseout="this.style.borderColor='var(--border)'">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;">
      <div style="font-family:var(--sans);font-size:0.8rem;font-weight:700;color:var(--t1);">{{ $ticket->subject }}</div>
      <span style="
        border-radius:4px;padding:0.1rem 0.5rem;font-family:var(--mono);font-size:0.48rem;
        background:{{ $ticket->status === 'open' ? 'rgba(245,158,11,0.12)' : ($ticket->status === 'replied' ? 'rgba(16,185,129,0.12)' : 'var(--bg3)') }};
        border:1px solid {{ $ticket->status === 'open' ? 'rgba(245,158,11,0.3)' : ($ticket->status === 'replied' ? 'rgba(16,185,129,0.3)' : 'var(--border)') }};
        color:{{ $ticket->status === 'open' ? 'var(--gold)' : ($ticket->status === 'replied' ? 'var(--green)' : 'var(--t2)') }};">
        {{ strtoupper($ticket->status) }}
      </span>
    </div>
    <div style="font-family:var(--mono);font-size:0.58rem;color:var(--t2);line-height:1.6;margin-bottom:0.5rem;">
      {{ Str::limit($ticket->message, 100) }}
    </div>
    <div style="display:flex;align-items:center;justify-content:space-between;margin-top:0.5rem;">
      <div style="font-family:var(--mono);font-size:0.5rem;color:var(--t2);">
        <i class="bi bi-clock"></i> {{ $ticket->created_at->format('d M Y, H:i') }}
      </div>
      <div style="font-family:var(--mono);font-size:0.5rem;color:var(--gold);display:flex;align-items:center;gap:0.3rem;">
        @if($ticket->admin_reply)
          <i class="bi bi-reply-fill" style="color:var(--green);"></i>
          <span style="color:var(--green);">{{ app()->getLocale() === 'id' ? 'Sudah dibalas' : 'Replied' }}</span>
        @else
          <i class="bi bi-hourglass-split"></i>
          <span>{{ app()->getLocale() === 'id' ? 'Menunggu balasan' : 'Awaiting reply' }}</span>
        @endif
        <i class="bi bi-chevron-right" style="margin-left:0.25rem;"></i>
      </div>
    </div>
  </div>
</a>
@empty
    <div style="text-align:center;padding:2rem 1rem;">
      <i class="bi bi-ticket-perforated" style="font-size:2rem;color:var(--t2);display:block;margin-bottom:0.75rem;opacity:0.3;"></i>
      <div style="font-family:var(--mono);font-size:0.65rem;color:var(--t2);">
        {{ app()->getLocale() === 'id' ? 'Belum ada tiket' : 'No tickets yet' }}
      </div>
    </div>
    @endforelse

  </div>
</div>

@endsection