@extends('users.layouts.index')
@section('content')
   

  <div class="flex justify-center md:justify-end">
      <!-- Button to Open Modal -->
    <button id="openModalBtn" class="bg-[#bca680] text-white font-semibold py-2 px-4 rounded-lg mb-4">Raise a Ticket</button>

  </div>

    @if ($tickets->count() == 0)
        <div class="text-center text-gray-500 text-lg text-center">
            No tickets have been raised yet.
              <img src="{{ asset('images/cuate.png') }}" alt="No ticket" class="h-18 mx-auto">
        </div>
    @else
        <div class="bg-white p-6 rounded-lg shadow-lg">
             <h2 class="text-2xl font-semibold mb-4 text-center">Tickets Raised</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white border border-gray-300">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="py-2 px-4 text-left border-b">Ticket ID</th>
                            <th class="py-2 px-4 text-left border-b">Title</th>
                            <th class="py-2 px-4 text-left border-b">Category</th>
                            <th class="py-2 px-4 text-left border-b">Priority</th>
                            <th class="py-2 px-4 text-left border-b">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($tickets as $ticket)
                        <tr class="border-t hover:bg-gray-100 cursor-pointer transition duration-150 ease-in-out" onclick="window.location='{{ route('ticket.view', $ticket->id) }}'">
                            <td class="py-2 px-4 border-b">{{ $ticket->id }}</td>
                                <td class="py-2 px-4 border-b">{{ $ticket->title }}</td>
                                <td class="py-2 px-4 border-b capitalize">{{ $ticket->category }}</td>
                                <td class="py-2 px-4 border-b capitalize">{{ $ticket->priority }}</td>
                                <td class="py-2 px-4 border-b font-semibold 
                                    {{ $ticket->status == 'Resolved' ? 'text-green-600' : ($ticket->status == 'Pending' ? 'text-yellow-600' : 'text-red-600') }}">
                                    {{ $ticket->status }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    <!-- Modal -->
    <div id="ticketModal" class="fixed z-10 inset-0 overflow-y-auto hidden bg-black bg-opacity-50">
        <div class="flex items-center justify-center min-h-screen">
            <div class="bg-white p-6 rounded-lg shadow-lg max-w-lg w-full relative">
                <span id="closeModalBtn" class="absolute top-2 right-2 text-gray-500 cursor-pointer">&times;</span>
                <h2 class="text-xl font-semibold mb-4">Submit a Ticket</h2>
                <form id="ticketForm">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-gray-700 font-semibold mb-2">Title</label>
                        <input type="text" name="title" class="w-full bg-gray-50 p-2 rounded-lg" required>
                    </div>
                    <div class="mb-4">
                        <label class="block text-gray-700 font-semibold mb-2">Description</label>
                        <textarea name="description" rows="5" class="w-full bg-gray-50 p-2 rounded-lg" required></textarea>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label class="block text-gray-700 font-semibold mb-2">Category</label>
                            <select name="category" class="w-full bg-gray-50 p-2 rounded-lg" required>
                                <option value="" disabled selected>Select a category</option>
                                <option value="technical">Technical Issue</option>
                                <option value="billing">Billing Issue</option>
                                <option value="general">General Inquiry</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-gray-700 font-semibold mb-2">Priority</label>
                            <select name="priority" class="w-full bg-gray-50 p-2 rounded-lg" required>
                                <option value="" disabled selected>Select priority</option>
                                <option value="low">Low</option>
                                <option value="medium">Medium</option>
                                <option value="high">High</option>
                            </select>
                        </div>
                    </div>
                    <button type="submit" class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg w-full">Submit Ticket</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        const modal = document.getElementById('ticketModal');
        const openBtn = document.getElementById('openModalBtn');
        const closeBtn = document.getElementById('closeModalBtn');

        openBtn.onclick = () => modal.classList.remove('hidden');
        closeBtn.onclick = () => modal.classList.add('hidden');
        window.onclick = (e) => { if (e.target === modal) modal.classList.add('hidden'); }

        document.getElementById('ticketForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            fetch('{{ route("tickets.store") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if(data.success) {
                    alert('Ticket submitted successfully!');
                    window.location.reload();
                } else {
                    alert('Failed to submit ticket!');
                }
            });
        });
    </script>
@endsection