@extends('layout.master')

@section('content')
<div class="container my-1">
    <div class="row mb-2">
        <div class="col-lg-12 mx-auto">
            <h1 class="display-4 mb-2">Diagnostic Tools</h1>
            <p class="lead text-muted">Explore the various diagnostic tools available for troubleshooting and maintenance. These tools can help you identify and resolve issues efficiently.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card mb-3">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="card-title">Tool 1: Equipment Analyzer</h3>
                        <p class="card-text">This tool allows you to perform a comprehensive analysis of the equipment's performance. It helps identify issues related to the system’s operation and functionality.</p>
                    </div>
                    <a href="" class="btn btn-outline-primary">Launch Tool</a>
                </div>
            </div>
            <div class="card mb-3">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="card-title">Tool 2: Network Diagnostics</h3>
                        <p class="card-text">This tool scans the network for connectivity issues and identifies any communication failures between devices.</p>
                    </div>
                    <a href="" class="btn btn-outline-primary">Launch Tool</a>
                </div>
            </div>
            <div class="card mb-3">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="card-title">Tool 3: Temperature Monitor</h3>
                        <p class="card-text">Monitor the temperature of your equipment in real-time. This tool will alert you if the system is running at unsafe temperatures.</p>
                    </div>
                    <a href="" class="btn btn-outline-primary">Launch Tool</a>
                </div>
            </div>
            <div class="card mb-3">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="card-title">Tool 4: Error Log Viewer</h3>
                        <p class="card-text">View the system’s error logs to get detailed information about past errors and warnings. This can help you understand recurring issues and potential solutions.</p>
                    </div>
                    <a href="" class="btn btn-outline-primary">Launch Tool</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-lg-12">
            <h2 class="mb-1">More About Diagnostic Tools</h2>
            <p class="lead text-muted">Each diagnostic tool serves a specific function that helps identify problems in different areas of the system. These tools are designed to make troubleshooting easier and more efficient.</p>
            <ul class="list-group">
                <li class="list-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Helps detect issues with power supply and connections.">
                    Regular usage of diagnostic tools can help maintain the performance and reliability of your equipment.
                </li>
                <li class="list-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Assists in identifying software issues and compatibility problems.">
                    The tools can be accessed anytime through this page, providing quick solutions for ongoing issues.
                </li>
                <li class="list-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Supports troubleshooting of overheating and cooling system malfunctions.">
                    If you're unsure about which tool to use, consult with our support team for guidance.
                </li>
            </ul>
    
            <!-- Collapsible FAQ section -->
            <div class="mt-4">
                <h4 class="mb-3">Frequently Asked Questions (FAQs)</h4>
                <div class="accordion" id="faqAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="faqOne">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                How do I use the diagnostic tools?
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="faqOne" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                To use the diagnostic tools, simply navigate to the corresponding section on this page and select the tool that aligns with the issue you're experiencing. Follow the on-screen instructions to begin troubleshooting.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="faqTwo">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                What should I do if the tool does not resolve my issue?
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="faqTwo" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                If the diagnostic tool doesn't resolve your issue, we recommend contacting our technical support team. They can provide further assistance and guide you through more advanced troubleshooting steps.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="faqThree">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Can I run multiple diagnostic tools at the same time?
                            </button>
                        </h2>
                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="faqThree" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Yes, you can run multiple diagnostic tools simultaneously. However, it is advised to monitor the results carefully and take notes for each tool's output to ensure effective troubleshooting.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-4">
                <button class="btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target="#moreInfo" aria-expanded="false" aria-controls="moreInfo">
                    Learn More About Diagnostic Tools
                </button>
                <div class="collapse mt-2" id="moreInfo">
                    <div class="card card-body">
                        Diagnostic tools are designed to simplify the process of identifying problems within the system. They range from basic tools for checking power connections to more advanced software and cooling system diagnostics. Regular use of these tools can significantly enhance the longevity and performance of your equipment. 
                        <p class="mt-2">For a deeper understanding of each tool, refer to the user manual or consult the troubleshooting section of our website.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</div>
@endsection
<!-- Bootstrap 5 JS (for tooltips, collapsible, and accordion) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>

<!-- Enable tooltips -->
<script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
</script>