@extends('layout')

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

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

    {{-- Flash / erreurs --}}
    @if(session('status'))
        <div class="alert alert-success">{{ session('status') }}</div>
    @endif
    @error('color')
        <div class="alert alert-danger">{{ $message }}</div>
    @enderror

    {{-- Filtres API --}}
    <form method="GET" action="{{ route('couleurs.index') }}" class="row g-3 align-items-end mb-4">
        <div class="col-auto">
            <label class="form-label">Type</label>
            <select name="type" class="form-select">
                <option value="">Tous</option>
                <option value="RAL" @selected(request('type')==='RAL')>RAL</option>
                <option value="MDR" @selected(request('type')==='MDR')>MDR</option>
                <option value="MDL" @selected(request('type')==='MDL')>MDL</option>
            </select>
        </div>
        <div class="col-auto">
            <label class="form-label">Recherche</label>
            <input name="q" value="{{ request('q') }}" class="form-control" placeholder="ex : 9005, RAL 7016…">
        </div>
        <div class="col-auto">
            <label class="form-label">Filtre API</label>
            <select name="filter" class="form-select">
                <option value="no_stock" @selected(request('filter','no_stock')==='no_stock')>Sans stock</option>
                <option value="all" @selected(request('filter')==='all')>Tous</option>
            </select>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary">Appliquer</button>
        </div>
    </form>

    <div class="row">
        {{-- Colonne gauche : couleurs disponibles (API) --}}
        <div class="col-md-7">
            <div class="card mb-4">
                <div class="card-header">Couleurs disponibles (API)</div>
                <div class="list-group list-group-flush">
                    @forelse($available as $c)
                        @php
                            // Données API
                            $hexRaw       = $c['hex'] ?? null;
                            // Normalisation: ajoute # si manquant, uppercase
                            $hex = $hexRaw ? (str_starts_with($hexRaw, '#') ? $hexRaw : '#'.$hexRaw) : null;
                            $hexLabel     = $hex ? strtoupper($hex) : 'N/A';

                            $already      = $c['already_selected'] ?? false;
                            $valueDisplay = $c['value_display'] ?? ($c['value'] ?? '');
                            $idApi        = $c['id'] ?? null;

                            // Style puce
                            $chipColor  = $hex ?? '#ffffff';
                            $chipBorder = $hex ? '#ccc' : '#888';
                        @endphp
                        <div class="list-group-item d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center gap-3">
                                <span class="rounded border"
                                      style="display:inline-block;width:28px;height:28px;
                                             background-color:{{ $chipColor }}; border-color: {{ $chipBorder }};"
                                      title="HEX {{ $hexLabel }}"></span>
                                <div>
                                    <div class="fw-semibold">{{ $valueDisplay }}</div>
                                    <small class="text-muted d-block">
                                        {{ $c['type'] ?? '' }} — API #{{ $idApi }}
                                    </small>
                                    <small class="text-muted">
                                        HEX :
                                        <span class="badge bg-light text-dark border">{{ $hexLabel }}</span>
                                    </small>
                                </div>
                            </div>
                            <div>
                                @if($already || !$idApi)
                                    <button class="btn btn-sm btn-outline-secondary" disabled>
                                        {{ $already ? 'Déjà sélectionnée' : 'Indisponible' }}
                                    </button>
                                @else
                                    <form method="POST" action="{{ route('couleurs.store') }}">
                                        @csrf
                                        <input type="hidden" name="external_id" value="{{ $idApi }}">
                                        <button class="btn btn-sm btn-success">Ajouter</button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    @empty
                        <div class="list-group-item text-muted">Aucune couleur trouvée.</div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Colonne droite : sélection (DB, enrichie par l'API) --}}
        <div class="col-md-5">
            <div class="card">
                <div class="card-header">Couleurs sélectionnées</div>
                <ul class="list-group list-group-flush">
                    @forelse($selected as $item)
                        @php
                            /** @var \App\Models\Couleur $row */
                            $row = $item['row'];
                            $api = $item['api']; // array (API)

                            $hexRaw   = $api['hex'] ?? null;
                            $hex      = $hexRaw ? (str_starts_with($hexRaw, '#') ? $hexRaw : '#'.$hexRaw) : null;
                            $hexLabel = $hex ? strtoupper($hex) : 'N/A';

                            $valueDisplay = $api['value_display'] ?? ($api['value'] ?? '(introuvable)');
                            $type         = $api['type'] ?? null;
                            $idApi        = $api['id'] ?? $row->external_id;

                            $chipColor  = $hex ?? '#ffffff';
                            $chipBorder = $hex ? '#ccc' : '#888';
                        @endphp
                        <li class="list-group-item d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center gap-3">
                                <span class="rounded border"
                                      style="display:inline-block;width:28px;height:28px;
                                             background-color:{{ $chipColor }}; border-color: {{ $chipBorder }};"
                                      title="HEX {{ $hexLabel }}"></span>
                                <div>
                                    <div class="fw-semibold">{{ $valueDisplay }}</div>
                                    <small class="text-muted d-block">
                                        {{ $type }} — API #{{ $idApi }}
                                    </small>
                                    <small class="text-muted">
                                        HEX :
                                        <span class="badge bg-light text-dark border">{{ $hexLabel }}</span>
                                    </small>
                                </div>
                            </div>
                            <form method="POST" action="{{ route('couleurs.destroy', $row) }}"
                                  onsubmit="return confirm('Retirer {{ $valueDisplay }} ?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger">Supprimer</button>
                            </form>
                        </li>
                    @empty
                        <li class="list-group-item text-muted">Aucune couleur sélectionnée.</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection