@extends('layout.app')

@section('title', __('models.classes.labels'))
@section('description', __('Liste de tous les :model', ['model' => __('models.classes.labels')]))

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center">
    @include('breadcrumbs.breadcrumb-body')
    <a href="{{ route('bo.labels.create') }}"
        class="btn btn-primary float-right"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="{{ __('crud.helpers.create_model', ['model' => Str::singular(__('models.classes.labels'))]) }}">
        <i class="fa-solid fa-plus"></i>
    </a>
</div>
@include('bo.modules.search-bar')
<table class="table table-hover">
    @if (count($labelModels) > 0)
    <thead>
        @include('bo.modules.table-col-sorter', [
            'cols' => [
                'name' => Str::ucfirst(__('validation.attributes.name')),
                'color' => Str::ucfirst(__('validation.attributes.color')),
            ],
        ])
    </thead>
    <tbody>
        @foreach ($labelModels as $labelModel)
        <tr class="list-item border-bottom">
            <td class="text-center align-middle">{{ $labelModel->name }}</td>
            <td class="text-center align-middle"><span class="colorize badge">{{ $labelModel->color }}</span></td>
            <td class="text-end align-middle">
                <form action="{{ route('bo.labels.destroy', $labelModel->id) }}"
                    method="POST"
                    class="btn-group confirmDeleteTS"
                    novalidate>
                    <a class="btn btn-sm btn-primary"
                        href="{{ route('bo.labels.edit', ['label' => $labelModel->id]) }}"
                        data-bs-toggle="tooltip"
                        data-bs-placement="top"
                        title="{{ __('crud.actions.update') }}">
                        <i class="fa-solid fa-pencil"></i>
                    </a>
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                        class="btn btn-sm btn-danger"
                        data-bs-toggle="tooltip"
                        data-bs-placement="top"
                        title="{{ __('crud.actions.delete') }}">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
    @else
    <tr>
        <td class="text-center fw-bold border-0">{{ __('crud.other.no_model_found', ['model' => Str::singular(__('models.classes.labels'))]) }}</td>
    </tr>
    @endif
</table>
{!! $labelModels->links() !!}
@endsection

@push('scripts')
<script @if(isset($nonce) and is_string($nonce)) nonce="{{ $nonce }}" @endif>
window.addEventListener("DOMContentLoaded", (event) => {
    // https://stackoverflow.com/a/35970186/4355295
    let __invertColor = function(hex, bw) {
        if (hex.indexOf('#') === 0) {
            hex = hex.slice(1);
        }
        // convert 3-digit hex to 6-digits.
        if (hex.length === 3) {
            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        }
        if (hex.length !== 6) {
            throw new Error('Invalid HEX color.');
        }
        var r = parseInt(hex.slice(0, 2), 16),
            g = parseInt(hex.slice(2, 4), 16),
            b = parseInt(hex.slice(4, 6), 16);
        if (bw) {
            // https://stackoverflow.com/a/3943023/112731
            return (r * 0.299 + g * 0.587 + b * 0.114) > 186
                ? '#000000'
                : '#FFFFFF';
        }
        // invert color components
        r = (255 - r).toString(16);
        g = (255 - g).toString(16);
        b = (255 - b).toString(16);
        // pad each with zeros and return
        return "#" + r.padStart(1, '0') + g.padStart(1, '0') + b.padStart(1, '0');
    }
    let colorSpans = document.getElementsByClassName('colorize');
    if(colorSpans.length) {
        for(let colorSpan of colorSpans) {
            colorSpan.style.color = __invertColor(colorSpan.textContent, true);
            colorSpan.style.backgroundColor = colorSpan.textContent;
        }
    }
});
</script>
@endpush