<?php
/**
 * Support Ticket Template
 *
 * This file contains the template for the support ticket system interface.
 * It provides a form for users to submit support tickets and displays existing tickets.
 *
 * @package Postomatic
 * @subpackage Admin/Templates
 * @since 1.0.0
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Support Ticket System</title>

	<?php
	// Output enqueued styles.
	wp_head();
	?>
	<style>
		/* Additional inline styles to complement the external CSS */
		body {
			font-family: 'Inter', sans-serif;
			background-color: #f9fafb;
		}

		.fade-enter-active, .fade-leave-active {
			transition: opacity 0.5s;
		}
		.fade-enter-from, .fade-leave-to {
			opacity: 0;
		}

		/* Custom scrollbar for a more polished look */
		::-webkit-scrollbar {
			width: 8px;
			height: 8px;
		}
		::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 10px;
		}
		::-webkit-scrollbar-thumb {
			background: #c1c1c1;
			border-radius: 10px;
		}
		::-webkit-scrollbar-thumb:hover {
			background: #a8a8a8;
		}
	</style>
</head>
<body>
	<div id="app" class="wrap">
		<div class="container mx-auto px-4 py-12">
			<!-- Page Header -->
			<div class="text-center mb-12">
				<h1 class="text-4xl font-bold text-gray-900 mb-3">Customer Support Center</h1>
				<p class="text-xl text-gray-600 max-w-3xl mx-auto">We're here to help you with any questions or issues you may have with our services.</p>
			</div>

			<!-- Form Section -->
			<div class="mx-auto mb-16 max-w-3xl">
				<div class="bg-white rounded-xl form-shadow overflow-hidden border border-gray-200">
					<div class="gradient-header px-12 py-8 border-b border-gray-100 flex items-center">
						<div class="bg-indigo-100 p-3 rounded-full mr-4">
							<i class="fas fa-headset text-indigo-600 text-xl"></i>
						</div>
						<div>
							<h2 class="text-3xl font-bold text-gray-900">Submit Support Request</h2>
							<p class="text-gray-700 mt-2 text-lg">We typically respond within 24 hours</p>
						</div>
					</div>

					<div class="p-12">
						<!-- Error/Success Alert -->
						<transition name="fade">
							<div v-if="alert.show" 
								:class="['mb-8 border px-6 py-4 rounded-lg relative flex items-center', 
										alert.type === 'error' ? 'bg-red-50 border-red-300 text-red-800' : 'bg-green-50 border-green-300 text-green-800']"
								role="alert">
								<i :class="['mr-3 text-lg', alert.type === 'error' ? 'fas fa-exclamation-circle text-red-500' : 'fas fa-check-circle text-green-500']"></i>
								<span class="block text-base font-medium">{{ alert.message }}</span>
								<button @click="alert.show = false" class="absolute top-4 right-4 hover:text-gray-900 transition-colors">
									<i class="fas fa-times"></i>
								</button>
							</div>
						</transition>

						<!-- Support Form -->
						<form @submit.prevent="submitTicket" class="space-y-8">
							<div>
								<label class="block text-base font-bold text-gray-900 mb-3" for="title">
									<div class="flex items-center">
										<i class="fas fa-tag text-indigo-500 mr-2"></i>
										Title
										<span class="text-red-600 ml-1">*</span>
									</div>
								</label>
								<input type="text" id="title" v-model="formData.title"
										class="w-full px-5 py-4 text-base rounded-lg border border-gray-300 focus:ring-4 focus:ring-indigo-500/30 focus:border-indigo-600 transition-all shadow-sm"
										placeholder="Brief summary of your issue"
										required>
							</div>

							<div>
								<label class="block text-base font-bold text-gray-900 mb-3" for="description">
									<div class="flex items-center">
										<i class="fas fa-align-left text-indigo-500 mr-2"></i>
										Description 
										<span class="text-red-600 ml-1">*</span>
									</div>
								</label>
								<textarea id="description" v-model="formData.description" rows="6"
										class="w-full px-5 py-4 text-base rounded-lg border border-gray-300 focus:ring-4 focus:ring-indigo-500/30 focus:border-indigo-600 transition-all shadow-sm"
										placeholder="Please provide detailed information about your issue"
										required></textarea>
								<p class="mt-3 text-sm text-gray-600 flex items-center">
									<i class="fas fa-info-circle text-indigo-400 mr-2"></i>
									Include any relevant error messages or screenshots
								</p>
							</div>

							<div class="flex items-center p-6 rounded-lg border border-indigo-200 bg-indigo-50">
								<div class="bg-white p-2 rounded-md border border-indigo-200 mr-4">
									<input type="checkbox" id="highPriority" v-model="formData.high_priority"
											class="h-6 w-6 text-indigo-700 rounded border-gray-400 focus:ring-indigo-600 cursor-not-allowed"
											:disabled="!isProUltimate">
								</div>
								<div>
									<label class="text-base font-bold text-gray-900 flex items-center" for="highPriority">
										<i class="fas fa-bolt text-amber-500 mr-2"></i>
										High Priority Support
									</label>
									<p class="text-sm text-gray-700 mt-1">Available for Pro Ultimate users</p>
								</div>
							</div>

							<div class="flex justify-end pt-6">
								<button type="submit"
										:disabled="isSubmitting"
										class="px-8 py-4 bg-indigo-600 text-white text-base font-bold rounded-lg shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-600/50 focus:ring-offset-2 transition-all transform hover:scale-[1.02] flex items-center">
									<i :class="['mr-2', isSubmitting ? 'fas fa-spinner fa-spin' : 'fas fa-paper-plane']"></i>
									{{ isSubmitting ? 'Submitting...' : 'Submit Request' }}
								</button>
							</div>
						</form>
					</div>
				</div>
			</div>

			<!-- Tickets List -->
			<div class="max-w-4xl mx-auto">
				<div class="bg-white rounded-xl form-shadow overflow-hidden transform transition-all">
					<div class="gradient-header px-8 py-8 border-b border-gray-100">
						<div class="flex items-center">
							<div class="bg-indigo-100 p-3 rounded-full mr-4">
								<i class="fas fa-ticket-alt text-indigo-600 text-xl"></i>
							</div>
							<div>
								<h2 class="text-2xl font-bold text-gray-800">Your Support Tickets</h2>
								<p class="text-gray-600 mt-2">View and manage your support requests</p>
							</div>
						</div>
					</div>

					<div class="px-8 py-10">
						<!-- Loading State -->
						<div v-if="loading" class="flex flex-col items-center justify-center p-12">
							<div class="w-16 h-16 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
							<p class="text-gray-600 font-medium">Loading your tickets...</p>
						</div>

						<!-- No Tickets Message -->
						<div v-else-if="tickets.length === 0" class="bg-indigo-50 border border-indigo-200 rounded-lg p-8 text-center">
							<div class="bg-white p-4 rounded-full inline-flex items-center justify-center mb-4 shadow-sm">
								<i class="fas fa-inbox text-indigo-500 text-3xl"></i>
							</div>
							<h3 class="text-xl font-bold text-gray-800 mb-2">No Support Tickets</h3>
							<p class="text-gray-600 mb-6">You don't have any support tickets yet. Create one using the form above.</p>
							<a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition-colors flex items-center justify-center">
								<i class="fas fa-arrow-up mr-2"></i>
								Go to support form
							</a>
						</div>

						<!-- Ticket Items -->
						<div v-else class="space-y-4">
							<div v-for="ticket in tickets" :key="ticket.ticket_id"
								class="border border-gray-200 rounded-lg p-6 hover:bg-gray-50 ticket-hover cursor-pointer bg-white"
								@click="showTicket(ticket.ticket_id)">
								<div class="flex justify-between items-start">
									<div class="flex">
										<div class="mr-4 mt-1">
											<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
												<i class="fas fa-comment-dots text-indigo-600"></i>
											</div>
										</div>
										<div>
											<h3 class="font-bold text-lg text-gray-800">{{ ticket.title }}</h3>
											<div class="flex items-center text-sm text-gray-600 mt-2">
												<i class="far fa-clock mr-2 text-gray-400"></i>
												<span>{{ ticket.request_time }}</span>
											</div>
											<div class="flex items-center text-xs text-gray-500 mt-1">
												<i class="fas fa-hashtag mr-1 text-gray-400"></i>
												<span>{{ ticket.ticket_id }}</span>
											</div>
											<div v-if="ticket.answer" class="mt-2 p-2 bg-green-50 border border-green-100 rounded">
												<div class="flex items-center mb-1">
													<i class="fas fa-comment-dots text-green-600 mr-2"></i>
													<span class="text-sm font-medium text-gray-700">Support Response:</span>
												</div>
												<p class="text-sm text-gray-600">{{ ticket.answer }}</p>
											</div>
											<div v-else class="mt-2 p-2 bg-gray-50 border border-gray-100 rounded">
												<div class="flex items-center">
													<i class="fas fa-hourglass-half text-gray-400 mr-2"></i>
													<span class="text-sm text-gray-500">Awaiting response</span>
												</div>
											</div>
										</div>
									</div>
									<div>
										<span class="status-badge px-3 py-1 text-sm rounded-full font-medium inline-flex items-center"
											:class="getStatusColorClass(ticket.status)">
											<i :class="getStatusIcon(ticket.status)" class="mr-1"></i>
											{{ ticket.status }}
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Support Modal -->
		<transition name="fade">
			<div v-if="isModalVisible" class="modal fixed inset-0 z-50 active">
				<div class="modal-backdrop absolute inset-0 flex items-center justify-center p-4" @click.self="closeModal">
					<div class="modal-content bg-white rounded-xl shadow-2xl max-w-2xl w-full">
						<!-- Modal Header -->
						<div class="px-8 py-6 border-b border-gray-100 gradient-header">
							<div class="flex justify-between items-center">
								<div class="flex items-center">
									<div class="bg-indigo-100 p-2 rounded-full mr-3">
										<i class="fas fa-ticket-alt text-indigo-600"></i>
									</div>
									<h3 class="text-xl font-bold text-gray-900">{{ modalData.title || 'Loading...' }}</h3>
								</div>
								<button @click="closeModal" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
									<i class="fas fa-times text-gray-500"></i>
								</button>
							</div>
							<div class="flex items-center mt-4 space-x-4">
								<div class="flex items-center text-sm text-gray-500">
									<i class="far fa-calendar-alt mr-2 text-gray-400"></i>
									<span>{{ modalData.request_time || 'Loading date...' }}</span>
								</div>
								<span :class="['status-badge px-3 py-1 text-sm font-medium rounded-full inline-flex items-center', getStatusTextColorClass(modalData.status)]">
									<i :class="getStatusIcon(modalData.status)" class="mr-1"></i>
									{{ modalData.status || '' }}
								</span>
							</div>
						</div>

						<!-- Modal Content -->
						<div class="px-8 py-6">
							<!-- Loading State -->
							<div v-if="modalLoading" class="flex flex-col items-center justify-center p-12">
								<div class="w-16 h-16 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
								<p class="text-gray-600 font-medium">Loading ticket details...</p>
							</div>

							<!-- Ticket Content -->
							<div v-else class="space-y-6">
								<!-- Question Section -->
								<div class="bg-indigo-50 p-6 rounded-lg border border-indigo-100">
									<div class="flex items-center mb-4">
										<div class="bg-white p-2 rounded-full shadow-sm mr-3">
											<i class="fas fa-question text-indigo-600"></i>
										</div>
										<h4 class="font-bold text-gray-800">Your Question</h4>
									</div>
									<div class="bg-white p-4 rounded-lg border border-indigo-100">
										<p class="text-gray-700 leading-relaxed">{{ modalData.description || 'No description available' }}</p>
									</div>
								</div>

								<!-- Answer Section -->
								<div class="bg-green-50 p-6 rounded-lg border border-green-100">
									<div class="flex items-center mb-4">
										<div class="bg-white p-2 rounded-full shadow-sm mr-3">
											<i class="fas fa-comment-dots text-green-600"></i>
										</div>
										<h4 class="font-bold text-gray-800">Support Response</h4>
									</div>
									<div class="bg-white p-4 rounded-lg border border-green-100">
										<p class="text-gray-700 leading-relaxed">{{ modalData.answer || 'Our support team will respond to your question soon.' }}</p>
									</div>
								</div>
							</div>
						</div>

						<!-- Modal Footer -->
						<div class="px-8 py-6 bg-gray-50 border-t border-gray-100">
							<div class="flex items-center justify-between">
								<div class="flex items-center text-sm text-gray-500">
									<i class="fas fa-hashtag mr-2 text-gray-400"></i>
									<span class="font-medium">Support ID:</span>
									<code class="bg-white px-3 py-1 rounded border border-gray-200 text-gray-600 ml-2 font-mono">{{ modalData.ticket_id || '' }}</code>
								</div>
								<button @click="closeModal"
										class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center">
									<i class="fas fa-times mr-2"></i>
									Close
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</transition>
	</div>

	<?php
	// Enqueue the support ticket script.
	wp_enqueue_script(
		'postomatic-support-ticket',
		POSTOMATIC_PLUGIN_URL . 'includes/admin/assets/js/support-ticket.js',
		array( 'vue-js', 'axios' ),
		POSTOMATIC_VERSION,
		true
	);

	// Pass PHP variables to JavaScript.
	wp_localize_script(
		'postomatic-support-ticket',
		'postomaticSupportData',
		array(
			'ajaxUrl'      => esc_url( admin_url( 'admin-ajax.php' ) ),
			'nonce'        => wp_create_nonce( 'postomatic_support_nonce' ),
			'baseURL'      => isset( $base_url ) ? $base_url : '',
			'apiEndpoints' => isset( $api_endpoints ) ? $api_endpoints : array(
				'GET_TICKETS'       => 'postomatic_get_tickets',
				'POST_TICKET'       => 'postomatic_submit_ticket',
				'GET_SINGLE_TICKET' => 'postomatic_get_ticket',
			),
			'api_key'      => isset( $api_key ) ? $api_key : '',
		)
	);
	?>
	<?php wp_footer(); ?>
</body>
</html>
