@extends('layouts.atelier')

@section('title', 'Traitement lot')
@section('page-title', 'Traitement lot')

@section('content')

{{-- Formulaire --}}
<div id="batch-form-wrap">
    <div style="max-width:680px;">
        <div class="card">
            <div style="font-size:0.9rem;color:#475569;margin-bottom:1.5rem;line-height:1.6;">
                Importez une liste d'identifiants (un par ligne, ou séparés par virgule/point-virgule) pour lancer
                un reset en lot. Maximum 2 000 étiquettes par session.
            </div>

            <form id="batch-form" action="{{ route('batch.start') }}" method="POST" enctype="multipart/form-data">
                @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

                {{-- Nom du lot --}}
                <div style="margin-bottom:1.25rem;">
                    <label class="form-label" for="nom">Nom du lot <span style="color:#94a3b8;font-weight:400;">(optionnel)</span></label>
                    <input type="text" id="nom" name="nom" class="form-input"
                           placeholder="Ex : Retour client 2026-06-05" value="{{ old('nom') }}">
                </div>

                {{-- 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="batch_brand_{{ $val }}" value="{{ $val }}"
                                   class="brand-option"
                                   {{ old('brand', $prefillBrand ?? 'hanshow') === $val ? 'checked' : '' }}
                                   onchange="window.BatchForm.onBrandChange(this.value)">
                            <label class="brand-label" for="batch_brand_{{ $val }}">{{ $label }}</label>
                        @endforeach
                    </div>
                </div>

                {{-- Saisie IDs --}}
                <div style="margin-bottom:0.5rem;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.4rem;">
                        <label class="form-label" for="ids" style="margin:0;">Identifiants</label>
                        {{-- Bouton "Charger depuis l'AP" (Hanshow uniquement) --}}
                        <div id="btn-load-ap-wrap" style="position:relative;display:{{ old('brand', $prefillBrand ?? 'hanshow') === 'hanshow' ? 'block' : 'none' }};">
                            <button type="button" id="btn-load-ap"
                                    class="btn btn-ghost btn-sm"
                                    style="font-size:0.78rem;"
                                    onclick="window.BatchForm.toggleLoadMenu()">
                                Charger depuis l'AP ▾
                            </button>
                            <div id="load-ap-menu"
                                 style="display:none;position:absolute;right:0;top:calc(100% + 4px);
                                        background:#fff;border:1px solid #e2e8f0;border-radius:8px;
                                        box-shadow:0 4px 16px rgba(0,0,0,0.1);min-width:190px;z-index:100;overflow:hidden;">
                                <button type="button" class="load-ap-option"
                                        data-filter="all"
                                        onclick="window.BatchForm.loadFromAp('all')">
                                    Toutes les ESLs
                                </button>
                                <button type="button" class="load-ap-option"
                                        data-filter="online"
                                        onclick="window.BatchForm.loadFromAp('online')">
                                    En ligne seulement
                                </button>
                                <button type="button" class="load-ap-option"
                                        data-filter="low_battery"
                                        onclick="window.BatchForm.loadFromAp('low_battery')">
                                    Batterie faible (&lt; 30%)
                                </button>
                            </div>
                        </div>
                    </div>
                    <textarea id="ids" name="ids" class="form-textarea"
                              rows="8"
                              placeholder="">{{ old('ids', isset($prefillIds) && $prefillIds ? implode("\n", array_filter(preg_split('/[,\s]+/', $prefillIds))) : '') }}</textarea>
                    <div id="batch-ids-hint" class="form-hint"></div>
                </div>

                <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;margin-top:1rem;">
                    <hr style="flex:1;border:none;border-top:1px solid #e2e8f0;">
                    <span style="font-size:0.78rem;color:#94a3b8;">ou</span>
                    <hr style="flex:1;border:none;border-top:1px solid #e2e8f0;">
                </div>

                {{-- CSV --}}
                <div style="margin-bottom:1.5rem;">
                    <label class="form-label" for="csv_file">Importer un fichier CSV</label>
                    <input type="file" id="csv_file" name="csv_file" class="form-input"
                           accept=".csv,.txt" style="padding:0.4rem;">
                    <div class="form-hint">Fichier .csv ou .txt, max 1 Mo, une colonne d'IDs.</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="M5 3l14 9-14 9V3z"/>
                    </svg>
                    Lancer le lot
                </button>
            </form>
        </div>
    </div>
</div>

{{-- Progression --}}
<div id="batch-progress-wrap" style="display:none;max-width:680px;">
    <div class="card" style="margin-bottom:1rem;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
            <div>
                <div style="font-weight:800;font-size:1.1rem;">Traitement en cours</div>
                <div id="batch-statut" style="font-size:0.82rem;color:#64748b;margin-top:0.2rem;">En cours…</div>
            </div>
            <div style="font-size:1.5rem;font-weight:800;color:#2563eb;" id="batch-pct">0%</div>
        </div>

        <div class="progress-bar" style="margin-bottom:1rem;">
            <div class="progress-bar-fill" style="width:0%"></div>
        </div>

        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;text-align:center;">
            <div>
                <div style="font-size:1.5rem;font-weight:800;"><span id="batch-done">0</span> / <span id="batch-total">0</span></div>
                <div class="card-title" style="margin:0;">Traitées</div>
            </div>
            <div>
                <div class="kpi-value success" style="font-size:1.5rem;"><span id="batch-succes">0</span></div>
                <div class="card-title" style="margin:0;">Succès</div>
            </div>
            <div>
                <div class="kpi-value danger" style="font-size:1.5rem;"><span id="batch-erreurs">0</span></div>
                <div class="card-title" style="margin:0;">Erreurs</div>
            </div>
        </div>
    </div>

    <div style="display:flex;gap:0.75rem;margin-bottom:1rem;">
        <a href="{{ route('batch.index') }}" class="btn btn-ghost">Nouveau lot</a>
        <a href="{{ route('historique.index') }}" class="btn btn-ghost">Voir l'historique</a>
    </div>

    {{-- Tableau par opération (rempli par JS via polling) --}}
    <div id="batch-ops-table-wrap" class="table-wrap"></div>
</div>

@endsection