<?php
/**
 * RoutexShipping - Documentation Index
 * 
 * This file provides an overview of all documentation available for the platform.
 * Access this page to find the right documentation for your needs.
 */

$page_title = 'Documentation - RoutexShipping';
require_once __DIR__ . '/../includes/homeheader.php';
?>

<section class="min-h-screen bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Header -->
        <div class="mb-12">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">Documentation</h1>
            <p class="text-xl text-gray-600">Complete guides and references for RoutexShipping</p>
        </div>

        <!-- Quick Links -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            <a href="/routex/" class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition text-center">
                <i class="fas fa-home text-4xl text-purple-600 mb-4"></i>
                <h3 class="text-lg font-bold text-gray-900">Home</h3>
                <p class="text-gray-600 text-sm mt-2">Back to homepage</p>
            </a>

            <a href="/routex/track" class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition text-center">
                <i class="fas fa-search text-4xl text-purple-600 mb-4"></i>
                <h3 class="text-lg font-bold text-gray-900">Track</h3>
                <p class="text-gray-600 text-sm mt-2">Track your parcel</p>
            </a>

            <a href="/routex/admin/login" class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition text-center">
                <i class="fas fa-lock text-4xl text-purple-600 mb-4"></i>
                <h3 class="text-lg font-bold text-gray-900">Admin</h3>
                <p class="text-gray-600 text-sm mt-2">Admin panel login</p>
            </a>

            <a href="/routex/contact" class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition text-center">
                <i class="fas fa-envelope text-4xl text-purple-600 mb-4"></i>
                <h3 class="text-lg font-bold text-gray-900">Contact</h3>
                <p class="text-gray-600 text-sm mt-2">Get in touch</p>
            </a>
        </div>

        <!-- Documentation Sections -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Getting Started -->
            <div class="bg-white rounded-xl shadow-md p-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">
                    <i class="fas fa-rocket text-purple-600 mr-2"></i>Getting Started
                </h2>
                <div class="space-y-4">
                    <div class="border-l-4 border-purple-600 pl-4">
                        <h3 class="font-bold text-gray-900">QUICKSTART.md</h3>
                        <p class="text-gray-600 text-sm">Get up and running in 5 minutes. Perfect for first-time users.</p>
                        <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-semibold mt-2 inline-block">Read Guide →</a>
                    </div>
                    <div class="border-l-4 border-purple-600 pl-4">
                        <h3 class="font-bold text-gray-900">INSTALLATION.md</h3>
                        <p class="text-gray-600 text-sm">Detailed step-by-step installation and configuration guide.</p>
                        <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-semibold mt-2 inline-block">Read Guide →</a>
                    </div>
                    <div class="border-l-4 border-purple-600 pl-4">
                        <h3 class="font-bold text-gray-900">QUICK_REFERENCE.md</h3>
                        <p class="text-gray-600 text-sm">Quick reference for common tasks and troubleshooting.</p>
                        <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-semibold mt-2 inline-block">Read Guide →</a>
                    </div>
                </div>
            </div>

            <!-- Main Documentation -->
            <div class="bg-white rounded-xl shadow-md p-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">
                    <i class="fas fa-book text-purple-600 mr-2"></i>Main Documentation
                </h2>
                <div class="space-y-4">
                    <div class="border-l-4 border-purple-600 pl-4">
                        <h3 class="font-bold text-gray-900">README.md</h3>
                        <p class="text-gray-600 text-sm">Complete documentation with features, setup, and troubleshooting.</p>
                        <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-semibold mt-2 inline-block">Read Docs →</a>
                    </div>
                    <div class="border-l-4 border-purple-600 pl-4">
                        <h3 class="font-bold text-gray-900">PROJECT_SUMMARY.md</h3>
                        <p class="text-gray-600 text-sm">Overview of the entire project, features, and technology stack.</p>
                        <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-semibold mt-2 inline-block">Read Summary →</a>
                    </div>
                    <div class="border-l-4 border-purple-600 pl-4">
                        <h3 class="font-bold text-gray-900">config/config.template.php</h3>
                        <p class="text-gray-600 text-sm">Configuration template for customizing your platform.</p>
                        <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-semibold mt-2 inline-block">View Template →</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Features Overview -->
        <div class="bg-white rounded-xl shadow-md p-8 mt-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">
                <i class="fas fa-star text-purple-600 mr-2"></i>Key Features
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 text-xl mr-3 mt-1"></i>
                    <div>
                        <h3 class="font-bold text-gray-900">Real-time Tracking</h3>
                        <p class="text-gray-600 text-sm">Track parcels with live status updates</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 text-xl mr-3 mt-1"></i>
                    <div>
                        <h3 class="font-bold text-gray-900">Admin Dashboard</h3>
                        <p class="text-gray-600 text-sm">Manage parcels, reviews, and settings</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 text-xl mr-3 mt-1"></i>
                    <div>
                        <h3 class="font-bold text-gray-900">Email Notifications</h3>
                        <p class="text-gray-600 text-sm">Automated emails on parcel updates</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 text-xl mr-3 mt-1"></i>
                    <div>
                        <h3 class="font-bold text-gray-900">Responsive Design</h3>
                        <p class="text-gray-600 text-sm">Works perfectly on all devices</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 text-xl mr-3 mt-1"></i>
                    <div>
                        <h3 class="font-bold text-gray-900">Security Features</h3>
                        <p class="text-gray-600 text-sm">CSRF protection, secure uploads</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 text-xl mr-3 mt-1"></i>
                    <div>
                        <h3 class="font-bold text-gray-900">Production Ready</h3>
                        <p class="text-gray-600 text-sm">Enterprise-grade code quality</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Admin Features -->
        <div class="bg-white rounded-xl shadow-md p-8 mt-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">
                <i class="fas fa-cog text-purple-600 mr-2"></i>Admin Panel Features
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="font-bold text-gray-900 mb-3">Parcel Management</h3>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Create new parcels</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Edit parcel details</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Add status updates</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>View timeline history</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Delete parcels</li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-bold text-gray-900 mb-3">Review Management</h3>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Create reviews</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Upload images</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Mark as featured</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Edit/delete reviews</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>View on homepage</li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-bold text-gray-900 mb-3">System Management</h3>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>View dashboard stats</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Check email logs</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Configure settings</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Manage SMTP</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>View statistics</li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-bold text-gray-900 mb-3">Security</h3>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Secure login</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Session management</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>CSRF protection</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Input validation</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Secure uploads</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Quick Links -->
        <div class="bg-gradient-to-r from-purple-600 to-purple-800 rounded-xl shadow-md p-8 mt-8 text-white">
            <h2 class="text-2xl font-bold mb-6">
                <i class="fas fa-link mr-2"></i>Quick Links
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <a href="/routex/" class="bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg p-4 transition">
                    <i class="fas fa-home mr-2"></i>Homepage
                </a>
                <a href="/routex/track" class="bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg p-4 transition">
                    <i class="fas fa-search mr-2"></i>Track Parcel
                </a>
                <a href="/routex/admin/login" class="bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg p-4 transition">
                    <i class="fas fa-lock mr-2"></i>Admin Login
                </a>
                <a href="/routex/contact" class="bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg p-4 transition">
                    <i class="fas fa-envelope mr-2"></i>Contact Us
                </a>
            </div>
        </div>

        <!-- Support -->
        <div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-8 mt-8">
            <h3 class="text-lg font-bold text-blue-900 mb-2">Need Help?</h3>
            <p class="text-blue-800 mb-4">
                All documentation is available in the project root directory. Start with QUICKSTART.md for a quick setup, or README.md for complete documentation.
            </p>
            <div class="flex flex-col sm:flex-row gap-4">
                <a href="/routex/contact" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition font-semibold">
                    Contact Support
                </a>
                <a href="/routex/" class="bg-white text-blue-600 border-2 border-blue-600 px-6 py-2 rounded-lg hover:bg-blue-50 transition font-semibold">
                    Back to Home
                </a>
            </div>
        </div>
    </div>
</section>

<?php require_once __DIR__ . '/../includes/footer.php'; ?>
