@extends('layouts.app')

@section('title', 'Dashboard du Stock')

@section('content')
<style>
    .stock-dashboard {
        font-family: Arial, sans-serif;
    }

    .stock-dashboard .vignette {
        display: inline-block;
        width: 150px;
        height: 150px;
        margin: 10px;
        text-align: center;
        border: 2px solid #007bff;
        border-radius: 10px;
        background-color: #f8f9fa;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .stock-dashboard .vignette:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    }

    .stock-dashboard .vignette h3 {
        font-size: 2rem;
        color: #007bff;
        margin-top: 25px;
    }

    .stock-dashboard .vignette p {
        font-size: 1rem;
        color: #6c757d;
    }

    .stock-dashboard .section-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: #343a40;
        margin: 20px 0;
        text-align: center;
    }

    .stock-dashboard .vignette-container {
        text-align: center;
    }
</style>

<div class="container my-5 stock-dashboard">
    <h1 class="mb-4 text-center">Stock Dashboard</h1>

    <!-- Section des BOX -->
    <h2 class="section-title">BOX</h2>
    <div class="vignette-container">
        <div class="vignette">
            <h3>{{ $totalBox }}</h3>
            <p>Total BOX</p>
        </div>
        <div class="vignette">
            <h3>{{ $boxX96 }}</h3>
            <p>BOX X96</p>
        </div>
        <div class="vignette">
            <h3>{{ $boxMI }}</h3>
            <p>BOX MI</p>
        </div>
        <div class="vignette">
            <h3>{{ $boxSenior }}</h3>
            <p>BOX SENIOR ANIM</p>
        </div>
    </div>

    <!-- Section Tablettes & Routeurs -->
    <h2 class="section-title">Autres Équipements</h2>
    <div class="vignette-container">
        <div class="vignette">
            <h3>{{ $tablettes }}</h3>
            <p>Tablettes</p>
        </div>
        <div class="vignette">
            <h3>{{ $routeurs }}</h3>
            <p>Routeurs</p>
        </div>
        <!-- Nouveaux câbles -->
        <div class="vignette">
            <h3>{{ $cableHdmi }}</h3>
            <p>Câbles HDMI</p>
        </div>
        <div class="vignette">
            <h3>{{ $cableTablette }}</h3>
            <p>Câbles Tablette</p>
        </div>
    </div>
</div>
@endsection