@extends('layouts.app')

@section('title', 'Tickets')

@section('content')
    <!-- Breadcrumb -->
    <nav class="mb-4">
        <ol class="flex items-center space-x-2 text-sm text-gray-600">
            <li><a href="{{ url('dashboard') }}" class="hover:text-blue-600">Dashboard</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </li>
            <li><a href="#" class="hover:text-blue-600">Tickets</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </li>
            <li class="text-gray-900">View</li>
        </ol>
    </nav>

    <!-- Overview Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-blue-100 rounded-full">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Total Tickets</p>
                <p class="text-2xl font-bold text-gray-900" id="totalTicketsCard">0</p>
            </div>
        </div>

        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-green-100 rounded-full">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Open</p>
                <p class="text-2xl font-bold text-gray-900" id="openTicketsCard">0</p>
            </div>
        </div>

        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-red-100 rounded-full">
                <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Closed</p>
                <p class="text-2xl font-bold text-gray-900" id="closedTicketsCard">0</p>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white p-4 mb-4 flex justify-between items-center">
        <div class="flex space-x-2 items-center">
            <input type="text" id="filterTitle" placeholder="Title" class="px-2 py-1 border rounded w-1/4">
            <input type="text" id="filterUser" placeholder="User" class="px-2 py-1 border rounded w-1/4">
            <select id="filterStatus" class="px-2 py-1 border rounded">
                <option value="">All Status</option>
                <option value="active">Open</option>
                <option value="inactive">Closed</option>
            </select>
            <button id="btnFilter" class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700">Filter</button>
        </div>

        <!-- Add Ticket button -->
        <a href="{{ route('tickets.create') }}"
           class="flex items-center px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-xs">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Add Ticket
        </a>
    </div>

    <p id="totalRecords" class="mb-2 text-sm text-gray-600">Total: 0</p>

    <!-- Table -->
    <div class="overflow-x-auto bg-white p-4 rounded shadow">
        <table class="min-w-full text-xs">
            <thead class="bg-gray-50">
            <tr>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">SL</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Ticket Type</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Price</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Created Date</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Actions</th>
            </tr>
            </thead>
            <tbody id="ticketTableBody" class="bg-white divide-y divide-gray-200"></tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-3 flex justify-between items-center">
        <div id="pagination" class="flex space-x-1"></div>
        <div class="text-sm text-gray-500" id="paginationInfo"></div>
    </div>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;
        let perPage = 10;

        $(document).ready(function() {
            function loadTickets(page = 1) {
                currentPage = page;
                let filters = {
                    title: $('#filterTitle').val(),
                    user: $('#filterUser').val(),
                    status: $('#filterStatus').val(),
                    page: currentPage,
                    perPage: perPage
                };

                $.get('{{ route("tickets.data") }}', filters, function(res) {
                    let tbody = '';
                    res.data.forEach((ticket, index) => {
                        tbody += `<tr>
                        <td class="px-2 py-2 text-xs">${(currentPage-1)*perPage + index + 1}</td>
                        <td class="px-2 py-2 text-xs">${ticket.ticket_type}</td>
                        <td class="px-2 py-2 text-xs">${ticket.price}</td>
                        <td class="px-2 py-2 text-xs">${ticket.status}</td>
                        <td class="px-2 py-2 text-xs">${ticket.created_date}</td>
                        <td class="px-2 py-2 text-xs">
                            <button class="text-blue-600 hover:text-blue-900" onclick="editTicket(${ticket.id})">Edit</button>
                            <button class="ml-2 text-red-600 hover:text-red-900" onclick="deleteTicket(${ticket.id})">Delete</button>
                        </td>
                    </tr>`;
                    });
                    $('#ticketTableBody').html(tbody);
                    $('#totalRecords').text('Total: ' + res.total);

                    // Update summary cards
                    $('#totalTicketsCard').text(res.total);
                    $('#openTicketsCard').text(res.active);
                    $('#closedTicketsCard').text(res.inactive);

                    // Pagination
                    let pagination = '';
                    if (res.currentPage > 1) {
                        pagination += `<button onclick="loadTickets(${res.currentPage-1})" class="px-2 py-1 border rounded">&laquo;</button>`;
                    }
                    for (let i=1; i<=res.lastPage; i++) {
                        pagination += `<button onclick="loadTickets(${i})" class="px-2 py-1 border rounded ${i === res.currentPage ? 'bg-indigo-600 text-white' : ''}">${i}</button>`;
                    }
                    if (res.currentPage < res.lastPage) {
                        pagination += `<button onclick="loadTickets(${res.currentPage+1})" class="px-2 py-1 border rounded">&raquo;</button>`;
                    }
                    $('#pagination').html(pagination);
                });
            }

            $('#btnFilter').on('click', function() {
                loadTickets(1);
            });

            loadTickets();
        });

        function editTicket(id) {
            window.location.href = `/tickets/${id}/edit`;
        }

        function deleteTicket(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This ticket will be permanently deleted.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/tickets/' + id,
                        type: 'DELETE',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(res) {
                            if (res.success) {
                                Swal.fire('Deleted!', res.message, 'success');
                                loadTickets(currentPage);
                            } else {
                                Swal.fire('Error!', res.message, 'error');
                            }
                        },
                        error: function() {
                            Swal.fire('Error!', 'Something went wrong!', 'error');
                        }
                    });
                }
            });
        }
    </script>
@endpush