@extends('layouts.atelier')

@section('title', 'Reset unitaire')
@section('page-title', 'Reset unitaire')

@section('content')
<div style="max-width:560px;">

    <div class="card">
        <div style="font-size:0.9rem;color:#475569;margin-bottom:1.5rem;line-height:1.6;">
            Scannez ou saisissez l'identifiant de l'étiquette à réinitialiser, sélectionnez la marque, puis validez.
        </div>

            <form id="reset-form" action="{{ route('reset.process') }}" method="POST">
            @csrf

            {{-- Agent actif --}}
            @if($activeAgent)
            <div style="margin-bottom:1rem;padding:0.5rem 0.75rem;background:#f0f7ff;border:1px solid #bfdbfe;border-radius:8px;font-size:0.82rem;color:#1e40af;display:flex;align-items:center;gap:0.5rem;">
                <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16" style="flex-shrink:0;"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
                Agent actif : <strong>{{ $activeAgent->name }}</strong>
            </div>
            @endif

            {{-- Marque --}}
            <div style="margin-bottom:1.25rem;">
                <label class="form-label">Marque</label>
                <div class="brand-selector">
                    @foreach(['hanshow' => 'Hanshow', 'vusion' => 'SES-imagotag', 'pricer' => 'Pricer'] as $val => $label)
                        <input type="radio" name="brand" id="brand_{{ $val }}" value="{{ $val }}"
                               class="brand-option" {{ old('brand', 'hanshow') === $val ? 'checked' : '' }}>
                        <label class="brand-label" for="brand_{{ $val }}">
                            <svg viewBox="0 0 20 20" fill="currentColor" width="14" height="14">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            {{ $label }}
                        </label>
                    @endforeach
                </div>
            </div>

            {{-- Scan --}}
            <div style="margin-bottom:1.5rem;">
                <label class="form-label" for="label_id">Identifiant étiquette</label>
                <div class="scan-input-wrap">
                    <input type="text" id="label_id" name="label_id"
                           class="form-input scan-input"
                           placeholder=""
                           value="{{ old('label_id', $prefillLabelId ?? '') }}"
                           autocomplete="off" spellcheck="false" autofocus>
                    <span id="scan-indicator" style="display:none;align-items:center;gap:3px;font-size:0.68rem;font-weight:600;color:#10b981;background:#10b9811a;padding:2px 8px;border-radius:99px;margin-right:4px;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M1 4h2v16H1zM5 4h1v16H5zM8 4h2v16H8zM12 4h1v16h-1zM15 4h3v16h-3zM20 4h1v16h-1zM23 4h0v16h0z"/></svg>
                        Scan
                    </span>
                    <span class="scan-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                            <path d="M1 4h2v16H1zM5 4h1v16H5zM8 4h2v16H8zM12 4h1v16h-1zM15 4h3v16h-3zM20 4h1v16h-1zM23 4h0v16h0z"/>
                        </svg>
                    </span>
                </div>
                <div id="label-id-preview" style="display:none;margin-top:0.3rem;font-size:0.8rem;font-family:monospace;font-weight:600;color:#2563eb;letter-spacing:0.05em;"></div>
                <div id="label-id-hint" class="form-hint"></div>
            </div>

            <button type="submit" class="btn btn-primary btn-lg" style="width:100%;justify-content:center;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                    <path d="M4 4v6h6M20 20v-6h-6"/><path d="M20.49 9A9 9 0 1 0 21 12"/>
                </svg>
                Réinitialiser
            </button>
        </form>
    </div>

    {{-- Résultat --}}
    <div id="reset-result" class="card" style="margin-top:1rem;display:none;"></div>

</div>
@endsection

@section('scripts')
<script>
const brandHints = {
    hanshow: 'Formats acceptés : hex (<code>XX-XX-XX-XX</code>), décimal 10 ou 18 chiffres. Le champ reste actif après envoi pour scan en série.',
    vusion: 'Format attendu : hex 8 caractères (<code>DE158A7F</code>).',
    pricer: 'Format libre selon votre catalogue.',
};
const brandPlaceholders = {
    hanshow: '34-8A-D1-3B  ou  0881512763  ou  116319350881512763',
    vusion: 'DE158A7F',
    pricer: 'Identifiant étiquette',
};

function updateResetBrandUI(brand) {
    const input = document.getElementById('label_id');
    const hint = document.getElementById('label-id-hint');
    input.placeholder = brandPlaceholders[brand] ?? brandPlaceholders.hanshow;
    hint.innerHTML = brandHints[brand] ?? brandHints.hanshow;
}

function autoDetectBrand() {
    const input = document.getElementById('label_id');
    const val   = input?.value ?? '';
    const detected = guessBrand(val);
    if (detected === 'unknown' || detected === 'ambiguous') return;
    const current = document.querySelector('input[name="brand"]:checked')?.value;
    if (detected !== current) {
        const radio = document.getElementById('brand_' + detected);
        if (radio) { radio.checked = true; updateResetBrandUI(detected); }
    }
}

document.getElementById('label_id')?.addEventListener('input', autoDetectBrand);

document.querySelectorAll('input[name="brand"]').forEach(el => {
    el.addEventListener('change', () => updateResetBrandUI(el.value));
    if (el.checked) updateResetBrandUI(el.value);
});
</script>
@endsection