@extends('layouts.app')

@section('unique-css')
    <link href="{{ asset('css/projets/planning/planning.css') }}" rel="stylesheet">
@endsection

@section('content')
    <div class="container">

        @include('layouts.commons.errors')
        @include('layouts.commons.success')

        <h2 class="pb-2">Projets</h2>

        {{-- Filtres --}}
        @include('projets.index.layouts.filtres')<hr/>

        {{-- Liste des onglets --}}
        <ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Synthèse des actions achats</a>
            </li>
            <li class="nav-item">
                <a class="nav-item nav-link" id="nav-planning-tab" data-toggle="tab" href="#nav-planning" role="tab" aria-controls="nav-planning" aria-selected="false">Planning</a>
            </li>
            <li class="nav-item">
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Gains</a>
            </li>
            <li class="nav-item">
                <a class="nav-item nav-link" id="nav-perf-tab" data-toggle="tab" href="#nav-perf" role="tab" aria-controls="nav-perf" aria-selected="false">Performance achat</a>
            </li>
            <li class="nav-item">
                <a class="nav-item nav-link" id="nav-pol-rse-tab" data-toggle="tab" href="#nav-pol-rse" role="tab" aria-controls="nav-rse" aria-selected="false">RSE</a>
            </li>
        </ul>

        {{-- Contenu des onglets --}}
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                @include('projets.index.layouts.onglets.synthese')
            </div>
            <div class="tab-pane fade" id="nav-planning" role="tabpanel" aria-labelledby="nav-planning-tab">
                @include('projets.index.layouts.onglets.planning')
            </div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                @include('projets.index.layouts.onglets.gains')
            </div>
            <div class="tab-pane fade" id="nav-perf" role="tabpanel" aria-labelledby="nav-perf-tab">
                @include('projets.index.layouts.onglets.performance')
            </div>
            <div class="tab-pane fade" id="nav-pol-rse" role="tabpanel" aria-labelledby="nav-pol-rse-tab">
                @include('projets.index.layouts.onglets.rse')
            </div>
          </div>
    </div>
@endsection

@section('unique-js')
    <script src="{{ asset('js/projets/planning/planning.js') }}"></script>
    <script src="{{ asset('js/commons/controls/directions-services.js') }}"></script>
@endsection