@extends('parent')

@section('content')

<div class="page-inner">
    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
        <div>
            <h3 class="fw-bold mb-3">Tableau de bord</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-6">
            <a href="{{ route('textes-juridiques.index') }}" class="card-link">
                <div class="card card-stats card-round has-ribbon">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-icon">
                                <div class="icon-big text-center icon-primary bubble-shadow-small">
                                    <i class="fas fa-book"></i>
                                </div>
                            </div>
                            <div class="col col-stats ms-3 ms-sm-0">
                                <div class="numbers">
                                    <h3 class="card-category fw-bold">Textes juridiques</h3>
                                    <h4 class="card-title">{{ number_format($textesCount) }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-sm-6 col-md-6">
            <a href="{{ route('institutions.index') }}" class="card-link">
                <div class="card card-stats card-round has-ribbon">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-icon">
                                <div class="icon-big text-center icon-success bubble-shadow-small">
                                    <i class="fas fa-university"></i>
                                </div>
                            </div>
                            <div class="col col-stats ms-3 ms-sm-0">
                                <div class="numbers">
                                    <p class="card-category">Institutions financières</p>
                                    <h4 class="card-title">{{ number_format($institutionsCount) }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-sm-6 col-md-4">
            <a href="{{ route('categories.index') }}" class="card-link">
                <div class="card card-stats card-round has-ribbon">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-icon">
                                <div class="icon-big text-center icon-secondary bubble-shadow-small">
                                    <i class="fas fa-list"></i>
                                </div>
                            </div>
                            <div class="col col-stats ms-3 ms-sm-0">
                                <div class="numbers">
                                    <p class="card-category">Catégories</p>
                                    <h4 class="card-title">{{ number_format($categoriesCount) }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-sm-6 col-md-4">
            <a href="{{ route('types.index') }}" class="card-link">
                <div class="card card-stats card-round has-ribbon">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-icon">
                                <div class="icon-big text-center icon-warning bubble-shadow-small">
                                    <i class="fas fa-industry"></i>
                                </div>
                            </div>
                            <div class="col col-stats ms-3 ms-sm-0">
                                <div class="numbers">
                                    <p class="card-category">Types Institutions</p>
                                    <h4 class="card-title">{{ number_format($typeCount) }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-sm-6 col-md-4">
            <a href="{{ route('abonnements.index') }}" class="card-link">
                <div class="card card-stats card-round has-ribbon">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-icon">
                                <div class="icon-big text-center icon-info bubble-shadow-small">
                                    <i class="fas fa-user-check"></i>
                                </div>
                            </div>
                            <div class="col col-stats ms-3 ms-sm-0">
                                <div class="numbers">
                                    <p class="card-category">Abonnements</p>
                                    <h4 class="card-title">{{ number_format($abonnementCount) }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card card-round">
                <div class="card-header">
                    <div class="card-head-row">
                        <div class="card-title">Historiques</div>
                    </div>
                </div>


                <div class="card-body">
                    <!-- <ol class="activity-feed">
                        @foreach($histories as $history)
                            <li class="feed-item feed-item-secondary">
                                <time class="date" datetime="9-25">{{ $history->user_name }}</time>
                                <span class="text"
                                >{{ $history->action }}
                                <a href="#">{{ $history->created_at->locale('fr')->diffForHumans() }}</a></span
                                >
                            </li>
                        @endforeach
                        
                    </ol> -->

                    <div class="table-responsive" style="min-height: 375px">
                      <!-- Projects table -->
                      <table class="table align-items-center mb-0">
                        <tbody>
                        @foreach($histories as $history)
                          <tr>
                            <th scope="row">
                              <button
                                class="btn btn-icon btn-round btn-success btn-sm me-2"
                              >
                                <i class="fa fa-check"></i>
                              </button>
                              {{ $history->user_name }}
                            </th>
                            <td class="text-end">{{ $history->action }}</td>
                            <td class="text-end">{{ $history->created_at->locale('fr')->diffForHumans() }}</td>
                            <td class="text-end">
                              <span class="badge badge-success">Effectué</span>
                            </td>
                          </tr>
                        @endforeach
                        </tbody>
                      </table>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</div>

<style>

  .has-ribbon {
    position: relative;
    background: #ffffff;
    padding: 10px;
    border-radius: 10px;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 10px; */
    flex: 1;
    overflow: hidden;
}

.has-ribbon::before {
    content: "";
    position: absolute;
    right: 0; /* Aligné à droite */
    top: 0;
    width: 15px; /* Largeur plus grande */
    height: 100%; /* Couvre toute la hauteur */
    border-top-right-radius: 10px; /* Arrondi en haut à droite */
    border-bottom-right-radius: 10px; /* Arrondi en bas à droite */
    background: linear-gradient(to bottom, #1E3A34, #67A04D); /* Dégradé noir-vert */
}




    /* Effet de survol */
    .card-link {
        text-decoration: none;
        display: block;
    }

    .has-ribbon:hover {
        transform: scale(1.05);
        transition: transform 0.3s ease-in-out;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }


</style>

@stop