@extends('models')
@section('titre-page', 'Bureau d\'achat')
@section('content-body')
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-7 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Fiche technique</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Aides</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <style>
        .container_custom {
            
            margin: 40px auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-top: -5px;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 22px;
            color: #333;
        }

        .tabs {
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #eee;
        }

        .tab {
            flex: 1;
            text-align: center;
            padding: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #777;
            font-weight: 500;
            border-bottom: 3px solid transparent;
        }

        .tab img {
            display: block;
            margin: 0 auto 6px;
            width: 40px;
            height: 40px;
            opacity: 0.5;
            transition: all 0.3s ease;
        }

        .tab.active {
            color: #3a57e8;
            border-bottom: 3px solid #3a57e8;
        }

        .tab.active img {
            opacity: 1;
            transform: scale(1.1);
        }

        .tab-content {
            display: none;
            padding: 25px 15px;
            animation: fadeIn 0.6s ease;
        }

        .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .tab-content h3 {
            color: #3a57e8;
            margin-bottom: 15px;
        }

        .tab-content p {
            color: #555;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background: #3a57e8;
            color: #fff;
            border-radius: 20px;
            text-decoration: none;
            transition: background 0.3s;
        }

        .btn:hover {
            background: #2c45b0;
            color: #fff;
        }
    </style>

    <!-- Page Header Close -->

    <div class="container_custom">
     
        <div class="tabs">
            <div class="tab active" data-target="research">
                <img src="https://img.icons8.com/?size=160&id=19nQzXuCO2It&format=png" alt="research">
                Support
            </div>
            <div class="tab" data-target="planning">
                <img src="https://img.icons8.com/color/48/graph.png" alt="planning">
                FaQs
            </div>
            <div class="tab" data-target="production">
                <img src="https://img.icons8.com/color/48/factory.png" alt="production">
                Documentation
            </div>
            <div class="tab" data-target="testing">
                <img src="https://img.icons8.com/color/48/graph-report.png" alt="testing">
                Détails
            </div>

        </div>

        <div id="research" class="tab-content active">
            <h3>Support technique</h3>
            <p>
                <div class="row">
                    <div class="col-xl-6">
                    {{-- <img src="https://img.icons8.com/?size=160&id=19nQzXuCO2It&format=png" alt="research" style="width: 100px; height: 100px; opacity: 0.5; transition: all 0.3s ease;"> --}}
                    <img src="{{asset('assets/images/icone-support.jpg')}}" alt="research" style="width: 400px; opacity: 0.5; transition: all 0.3s ease;">
                    
                    </div>
                    <div class="col-xl-6">

                        <p>Notre équipe de support technique est dédiée à fournir une assistance rapide et efficace
                            pour garantir que vos systèmes fonctionnent de manière optimale.</p>
                        <table class="table table-bordered">
                            <tr>
                                <th>Type de support</th>
                                <th>Détails</th>
                            </tr>
                            <tr>
                                <td>Assistance en ligne</td>
                                <td>Disponible 24/7 via chat et email pour résoudre vos problèmes rapidement.</td>
                            </tr>
                            <tr>
                                <td>Support téléphonique</td>
                                <td>Ligne directe avec nos experts pour une assistance immédiate.</td>
                            </tr>
                            <tr>
                                <td>Support sur site</td>
                                <td>Interventions rapides par nos techniciens qualifiés pour les problèmes complexes.</td>
                            </tr>
                            <tr>
                                <td>Base de connaissances</td>
                                <td>Accès à une bibliothèque complète de guides, FAQ et tutoriels.</td>
                            </tr>
                        </table>
                    
                    </div>
                </div>
            </p>
            <div class="btn">Email : <a style="color:#fff" href="mailto:support@logimatiqueci.com?subject=Assistance&body=Bonjour, j'ai besoin d'aide concernant...">support@logimatiqueci.com</a> / 
            <a style="color:#fff" href="mailto:ky@logimatiqueci.com?subject=Assistance&body=Bonjour, j'ai besoin d'aide concernant...">ky@logimatiqueci.com</a>/ <a style="color:#fff" href="mailto:dev@logimatiqueci.com?subject=Assistance&body=Bonjour, j'ai besoin d'aide concernant...">dev@logimatiqueci.com</a></div>
            <div  class="btn">Téléphone : 0554042629 / 0554043221</div>
           
        </div>

        <div id="planning" class="tab-content">
            <h3>FaQs</h3>
            <p>Bientôt alimenté</p>
            {{-- <a href="#" class="btn">Learn More</a> --}}
        </div>

        <div id="production" class="tab-content">
            <h3>Modules</h3>
              <p>Bientôt alimenté</p>
            {{-- <a href="#" class="btn">Learn More</a> --}}
        </div>

        <div id="testing" class="tab-content">
            <h3>Détails</h3>
              <p>Bientôt alimenté</p>
            {{-- <a href="#" class="btn">Learn More</a> --}}
        </div>


    </div>
@endsection
@section('script')

    <script>
        const tabs = document.querySelectorAll(".tab");
        const contents = document.querySelectorAll(".tab-content");

        tabs.forEach(tab => {
            tab.addEventListener("click", () => {
                tabs.forEach(t => t.classList.remove("active"));
                contents.forEach(c => c.classList.remove("active"));

                tab.classList.add("active");
                document.getElementById(tab.dataset.target).classList.add("active");
            });
        });
    </script>

@endsection