@extends('admin.layout')

@section('title', 'Gestion des couleurs')

@section('content')
<div class="pagetitle">
    <h1>@yield('title')</h1>
</div>

<style>
    /* Pilule de couleur */
    .color-pill {
        display: inline-block;
        width: 150px;
        max-width: 100%;
        height: 34px;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, .12);
        vertical-align: middle;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    }

    /* Badge de stock rond (✓ vert / ✗ rouge) */
    .stock-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-size: .8rem;
        line-height: 1;
    }
    .stock-badge.ok { background: #d7f3e0; color: #1e7e34; }
    .stock-badge.no { background: #fde4e4; color: #dc3545; }

    /* Nom de la couleur : code en gras + libellé estompé */
    .color-name strong { font-weight: 700; }
    .color-name .color-alt { color: #000; margin-left: .4rem; }

    .dark-mode .color-pill { border-color: rgba(255, 255, 255, .18); }
    .dark-mode .stock-badge.ok { background: #143d24; color: #4ade80; }
    .dark-mode .stock-badge.no { background: #3d1618; color: #f87171; }
    .dark-mode .color-name .color-alt { color: #fff; }
</style>

<section class="section contact">
    <div class="row gy-4">
        <div class="col-xl-12">
            <div class="card p-4">

                <div class="search-form d-flex align-items-center pt-3 pb-3">
                    <input class="form-control" type="text" name="search" id="search" placeholder="Rechercher">
                </div>

                <div class="table-responsive-sm">
                    {{-- Pas de liste compacte ici (.table-compacte) : elle serre les
                         colonnes courtes sur leur contenu et donne toute la place au
                         nom. Avec cinq colonnes, la pastille et les stocks partaient
                         a l'autre bout de l'ecran, loin du nom qu'ils decrivent. Le
                         tableau ordinaire repartit la place entre les colonnes. --}}
                    <table class="table table-hover align-middle">
                        <thead>
                            <tr>
                                <th>Nom de la couleur</th>
                                <th>Couleur</th>
                                <th class="text-center">Brillant</th>
                                <th class="text-center">Mât</th>
                                <th class="text-center">Sablé</th>
                            </tr>
                        </thead>
                        <tbody id="table-body">
                            @foreach ($colors as $color)
                                <tr>
                                    <td class="color-name">
                                        <strong>{{ $color['value_display'] }}</strong>
                                        @if (!empty($color['name_fr']))
                                            <span class="color-alt">{{ $color['name_fr'] }}</span>
                                        @endif
                                    </td>

                                    <td>
                                        <span class="color-pill"
                                              style="background:#{{ $color['color'] }};"
                                              title="#{{ $color['color'] }}"></span>
                                    </td>

                                    {{-- Stocks : badge rond ✓ / ✗ --}}
                                    <td class="text-center">
                                        @if(($color['shiny_stock'] ?? 0) > 0)
                                            <span class="stock-badge ok"><i class="fa fa-check"></i></span>
                                        @else
                                            <span class="stock-badge no"><i class="fa fa-times"></i></span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if(($color['matte_stock'] ?? 0) > 0)
                                            <span class="stock-badge ok"><i class="fa fa-check"></i></span>
                                        @else
                                            <span class="stock-badge no"><i class="fa fa-times"></i></span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if(($color['sanded_stock'] ?? 0) > 0)
                                            <span class="stock-badge ok"><i class="fa fa-check"></i></span>
                                        @else
                                            <span class="stock-badge no"><i class="fa fa-times"></i></span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</section>

<script src="@assetV('js/search.js')"></script>
@endsection