@extends('layouts.tech')

@section('content')
<div class="min-h-screen bg-gray-50 flex flex-col font-sans pb-28">
  <main class="flex-1 max-w-2xl mx-auto w-full p-4 py-6">
    
    <div class="flex items-center gap-3 mb-6">
      <div class="bg-gray-900 p-2.5 rounded-xl shadow-md">
        <i data-lucide="life-buoy" class="w-6 h-6 text-white"></i>
      </div>
      <div>
        <h1 class="text-2xl font-black text-gray-900 leading-tight">Help Center</h1>
        <p class="text-sm font-bold text-gray-500">24/7 Support for Instafix24 Partners</p>
      </div>
    </div>

    <div id="sos-container" class="rounded-3xl p-6 mb-6 transition-colors duration-500 border-2 bg-red-50 border-red-100">
      <div class="flex items-center justify-between mb-4">
        <div>
          <h2 id="sos-title" class="text-xl font-black text-red-600 flex items-center gap-2">
            <i data-lucide="shield-alert" class="w-6 h-6"></i> EMERGENCY SOS
          </h2>
          <p id="sos-subtitle" class="text-xs font-bold mt-1 text-red-400">
            Use only in case of accident, customer dispute, or danger.
          </p>
        </div>
      </div>
      <button id="sos-btn" onclick="handleSOS()" class="w-full h-16 rounded-2xl font-black text-lg flex items-center justify-center gap-2 transition-transform bg-red-600 text-white shadow-[0_10px_20px_rgba(220,38,38,0.3)] hover:scale-[1.02]">
        SLIDE OR PRESS TO SOS
      </button>
    </div>

    <div class="grid grid-cols-2 gap-4 mb-8">
      <button onclick="alert('Calling Dispatcher...')" class="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex flex-col items-center justify-center gap-3 hover:border-[#109E38] transition-colors group">
        <div class="bg-green-50 p-4 rounded-full group-hover:bg-[#109E38] transition-colors">
          <i data-lucide="phone-call" class="w-6 h-6 text-[#109E38] group-hover:text-white transition-colors"></i>
        </div>
        <div class="text-center">
          <h3 class="font-black text-gray-900 text-sm">Call Admin</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Instant Reply</p>
        </div>
      </button>

      <button onclick="alert('Opening Chat Support...')" class="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex flex-col items-center justify-center gap-3 hover:border-blue-500 transition-colors group">
        <div class="bg-blue-50 p-4 rounded-full group-hover:bg-blue-500 transition-colors">
          <i data-lucide="message-square" class="w-6 h-6 text-blue-500 group-hover:text-white transition-colors"></i>
        </div>
        <div class="text-center">
          <h3 class="font-black text-gray-900 text-sm">Chat Support</h3>
          <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Avg wait: 2 mins</p>
        </div>
      </button>
    </div>

    <h3 class="text-sm font-black text-gray-400 uppercase tracking-wider mb-4 px-2">Report a quick issue</h3>
    
    <div class="bg-white rounded-3xl p-2 shadow-sm border border-gray-100 space-y-1 mb-8">
      <button onclick="raiseTicket('Customer is not picking up phone')" class="w-full flex items-center justify-between p-4 hover:bg-gray-50 rounded-2xl transition-colors text-left">
        <div class="flex items-center gap-3">
          <div class="bg-orange-50 p-2 rounded-lg"><i data-lucide="phone-call" class="w-5 h-5 text-orange-500"></i></div>
          <span class="font-bold text-gray-700 text-sm">Customer not picking call</span>
        </div>
        <i data-lucide="chevron-right" class="w-5 h-5 text-gray-300"></i>
      </button>

      <button onclick="raiseTicket('Customer refusing to pay')" class="w-full flex items-center justify-between p-4 hover:bg-gray-50 rounded-2xl transition-colors text-left border-t border-gray-50">
        <div class="flex items-center gap-3">
          <div class="bg-red-50 p-2 rounded-lg"><i data-lucide="credit-card" class="w-5 h-5 text-red-500"></i></div>
          <span class="font-bold text-gray-700 text-sm">Customer refusing to pay</span>
        </div>
        <i data-lucide="chevron-right" class="w-5 h-5 text-gray-300"></i>
      </button>

      <button onclick="raiseTicket('Need spare parts urgently')" class="w-full flex items-center justify-between p-4 hover:bg-gray-50 rounded-2xl transition-colors text-left border-t border-gray-50">
        <div class="flex items-center gap-3">
          <div class="bg-blue-50 p-2 rounded-lg"><i data-lucide="wrench" class="w-5 h-5 text-blue-500"></i></div>
          <span class="font-bold text-gray-700 text-sm">Need spare parts urgently</span>
        </div>
        <i data-lucide="chevron-right" class="w-5 h-5 text-gray-300"></i>
      </button>
      
      <button onclick="raiseTicket('App is freezing / GPS issue')" class="w-full flex items-center justify-between p-4 hover:bg-gray-50 rounded-2xl transition-colors text-left border-t border-gray-50">
        <div class="flex items-center gap-3">
          <div class="bg-gray-100 p-2 rounded-lg"><i data-lucide="alert-octagon" class="w-5 h-5 text-gray-600"></i></div>
          <span class="font-bold text-gray-700 text-sm">App / Tech Issue</span>
        </div>
        <i data-lucide="chevron-right" class="w-5 h-5 text-gray-300"></i>
      </button>
    </div>

    <h3 class="text-sm font-black text-gray-400 uppercase tracking-wider mb-4 px-2">Recent Tickets</h3>
    
    <div class="space-y-3">
      @forelse($tickets as $ticket)
      <div class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100 flex items-start justify-between {{ $ticket->type == 'sos' ? 'border-l-4 border-l-red-500' : '' }}">
        <div>
          <span class="{{ $ticket->status == 'open' ? 'bg-orange-100 text-orange-700' : 'bg-green-100 text-green-700' }} text-[10px] font-black px-2 py-1 rounded uppercase tracking-wider mb-2 inline-flex items-center gap-1">
            <i data-lucide="{{ $ticket->status == 'open' ? 'clock' : 'check-circle-2' }}" class="w-3 h-3"></i> {{ $ticket->status }}
          </span>
          <h4 class="text-sm font-black text-gray-900 mt-1">{{ $ticket->issue }}</h4>
          <p class="text-xs font-bold text-gray-400 mt-1">ID: TKT-{{ $ticket->id }}</p>
        </div>
        <p class="text-[10px] font-bold text-gray-400 flex items-center gap-1 mt-1">
            <i data-lucide="calendar" class="w-3 h-3"></i> {{ $ticket->created_at->format('d M, h:i A') }}
        </p>
      </div>
      @empty
      <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 text-center">
        <i data-lucide="inbox" class="w-10 h-10 text-gray-300 mx-auto mb-2"></i>
        <p class="text-sm font-bold text-gray-500">No recent tickets.</p>
      </div>
      @endforelse
    </div>

  </main>

  <script>
    function handleSOS() {
        const btn = document.getElementById('sos-btn');
        const container = document.getElementById('sos-container');
        const title = document.getElementById('sos-title');
        const subtitle = document.getElementById('sos-subtitle');

        // State: Active
        btn.disabled = true;
        btn.innerText = "SENDING ALERT...";
        btn.className = "w-full h-16 rounded-2xl font-black text-lg flex items-center justify-center gap-2 transition-transform bg-white text-red-600 scale-95 opacity-80";
        
        container.className = "rounded-3xl p-6 mb-6 transition-colors duration-500 border-2 bg-red-600 border-red-700 shadow-[0_0_40px_rgba(220,38,38,0.6)]";
        title.className = "text-xl font-black text-white flex items-center gap-2";
        subtitle.className = "text-xs font-bold mt-1 text-red-100";

        // 🚀 Asali Database Call
        fetch('/api/raise-ticket/sos/Emergency%20SOS%20Triggered')
            .then(response => response.json())
            .then(data => {
                alert("EMERGENCY ALERT SENT! Instafix24 Team will call you in 30 seconds.");
                window.location.reload(); // Page reload karke naya ticket dikhayenge
            })
            .catch(error => console.error("Error sending SOS:", error));
    }

    function raiseTicket(issue) {
        // 🚀 Asali Database Call
        fetch('/api/raise-ticket/ticket/' + encodeURIComponent(issue))
            .then(response => response.json())
            .then(data => {
                alert(`Ticket Raised: "${issue}". Admin notified!`);
                window.location.reload(); // Page reload karke naya ticket dikhayenge
            })
            .catch(error => console.error("Error raising ticket:", error));
    }
  </script>
</div>
@endsection