@extends('layouts.app')

@section('title', 'Valider les données OCR - Print Manager')

@section('content')
    <div class="card">
        <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
            <h1 class="mb-0">Valider les données extraites</h1>
            <div>
                @if(count($bonsParsed) > 1)
                <span class="badge bg-light text-dark me-2">{{ count($bonsParsed) }} bons détectés</span>
                @endif
                <a href="{{ route('bons-livraison.ocr') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i> Retour
                </a>
            </div>
        </div>
        <div class="card-body">
            @if(session('warning'))
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    {{ session('warning') }}
                </div>
            @endif

            <form action="{{ route('bons-livraison.ocr-store') }}" method="POST" id="ocrForm">
            @csrf
            <input type="hidden" name="active_tab" id="active_tab" value="{{ $activeTab ?? 0 }}">

            @if(count($bonsParsed) > 1)
            <ul class="nav nav-tabs mb-3" id="bonsTabs" role="tablist">
                @foreach($bonsParsed as $b => $parsed)
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ ($activeTab ?? 0) == $b ? 'active' : '' }}" id="bon-{{ $b }}-tab" data-bs-toggle="tab" data-bs-target="#bon-{{ $b }}" type="button" role="tab">
                        Bon {{ $b+1 }}
                        @if($parsed['exists'])
                        <span class="badge bg-warning text-dark ms-1">déjà traité</span>
                        @endif
                    </button>
                </li>
                @endforeach
            </ul>
            @endif

            <div class="tab-content">
            @foreach($bonsParsed as $b => $parsed)
            @php $pfx = "bons[{$b}]"; $ek = 0; @endphp
            <div class="tab-pane {{ ($activeTab ?? 0) == $b ? 'show active' : '' }}" id="bon-{{ $b }}" role="tabpanel" data-exists="{{ $parsed['exists'] ? '1' : '0' }}">
                <div class="card border-{{ $parsed['exists'] ? 'warning' : 'primary' }} mb-3">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
                        <strong>Livraison {{ $parsed['numero_livraison'] }}</strong>
                        @if($parsed['exists'])
                        <span class="badge bg-warning text-dark">Déjà importé</span>
                        @endif
                    </div>
                    <div class="card-body{{ $parsed['exists'] ? ' text-muted' : '' }}">
                        @if($parsed['exists'])
                        <div class="alert alert-warning py-2 mb-2"><small><i class="fas fa-info-circle me-1"></i> Ce bon de livraison existe déjà en base. Aucune donnée ne sera réimportée.</small></div>
                        @endif
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Numéro de livraison</label>
                                <input type="text" class="form-control form-control-sm numero-input" name="{{ $pfx }}[numero_livraison]" value="{{ $parsed['numero_livraison'] }}" {{ $parsed['exists'] ? 'disabled' : 'required' }}>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Date de réception</label>
                                <input type="date" class="form-control form-control-sm date-input" name="{{ $pfx }}[date_reception]" value="{{ $parsed['date_reception'] }}" {{ $parsed['exists'] ? 'disabled' : 'required' }}>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">N° commande associé</label>
                                <div class="d-flex align-items-center gap-2">
                                    <input type="text" class="form-control form-control-sm" value="{{ $parsed['numero_commande'] ?? '—' }}" readonly>
                                    @if(!empty($parsed['numero_commande']) && !$parsed['exists'])
                                    <span class="badge bg-info" id="cmd-badge-{{ $b }}" style="display:none">
                                        <i class="fas fa-sync fa-spin"></i>
                                    </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered entries-table">
                                <thead>
                                    <tr>
                                        <th style="width:40px">Inclure</th>
                                        <th style="width:130px">Réf.</th>
                                        <th style="width:220px">Fourniture (BDD)</th>
                                        <th style="max-width:300px;width:300px">Texte OCR</th>
                                        <th style="width:80px">Quantité</th>
                                        <th style="min-width:200px">Matériels liés</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($parsed['entries'] as $i => $entry)
                                    @php $mIds = $entry['materiel_ids'] ?? []; $ek++; @endphp
                                    <tr>
                                        <td class="text-center">
                                            <input type="checkbox" class="form-check-input entry-checkbox" name="{{ $pfx }}[fournitures][{{ $i }}][include]" value="1" checked onchange="toggleEntry(this)" {{ $parsed['exists'] ? 'disabled' : '' }}>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center gap-1">
                                                <input type="text" class="form-control form-control-sm" value="{{ $entry['reference'] }}" readonly style="width:90px">
                                                @if(!empty($entry['fuzzy_ref']))
                                                <span class="text-warning" title="Correspondance approximative — vérifier la référence">
                                                    <i class="fas fa-exclamation-triangle"></i>
                                                </span>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <select class="form-select form-select-sm fourniture-select" name="{{ $pfx }}[fournitures][{{ $i }}][id]" onchange="loadMateriels(this, '{{ $pfx }}_{{ $i }}', '{{ $pfx }}', {{ $i }})" {{ $parsed['exists'] ? 'disabled' : '' }}>
                                                <option value="">Sélectionner...</option>
                                                @foreach($fournitures as $f)
                                                    <option value="{{ $f->id }}" {{ ($entry['fourniture_id'] ?? null) == $f->id ? 'selected' : '' }}>
                                                        {{ $f->reference }} - {{ $f->nom }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td style="max-width:300px;word-break:break-word"><small class="text-muted">{{ $entry['nom'] }}</small></td>
                                        <td>
                                            <div class="d-flex align-items-center gap-1">
                                                <input type="number" class="form-control form-control-sm quantite-input" name="{{ $pfx }}[fournitures][{{ $i }}][quantite]" value="{{ $entry['quantite'] }}" min="1" style="width:80px" {{ $parsed['exists'] ? 'disabled' : '' }}>
                                                @if(!($entry['qty_confirmed'] ?? false))
                                                <span class="text-warning" title="Quantité non confirmée — vérifier">
                                                    <i class="fas fa-question-circle"></i>
                                                </span>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <div id="materiels-{{ $pfx }}_{{ $i }}" class="materiels-container">
                                                @forelse($mIds as $mid)
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" name="{{ $pfx }}[fournitures][{{ $i }}][materiels][]" value="{{ $mid }}" id="mat_{{ $pfx }}_{{ $i }}_{{ $mid }}" checked {{ $parsed['exists'] ? 'disabled' : '' }}>
                                                        <label class="form-check-label" for="mat_{{ $pfx }}_{{ $i }}_{{ $mid }}">
                                                            <small>{{ $materielNames[$mid] ?? 'Matériel #' . $mid }}</small>
                                                            @if(in_array($mid, $entry['fuzzy_mat_ids'] ?? []))
                                                            <span class="text-warning" title="Correspondance approximative — vérifier le matériel">
                                                                <i class="fas fa-exclamation-triangle"></i>
                                                            </span>
                                                            @endif
                                                        </label>
                                                    </div>
                                                @empty
                                                    <p class="text-muted mb-0"><small>Aucun matériel trouvé automatiquement</small></p>
                                                @endforelse
                                                @if(!empty($entry['fallback_materiel_ids']))
                                                    @php $addedFallback = false; @endphp
                                                    @foreach($entry['fallback_materiel_ids'] as $fbid)
                                                        @if(!in_array($fbid, $mIds))
                                                            @php if(!$addedFallback): $addedFallback = true; @endphp
                                                            <hr class="my-1">
                                                            <small class="text-muted">Autres matériels suggérés :</small>
                                                            @php endif; @endphp
                                                            <div class="form-check">
                                                                <input type="checkbox" class="form-check-input" name="{{ $pfx }}[fournitures][{{ $i }}][materiels][]" value="{{ $fbid }}" id="mat_{{ $pfx }}_{{ $i }}_{{ $fbid }}" {{ $parsed['exists'] ? 'disabled' : '' }}>
                                                                <label class="form-check-label" for="mat_{{ $pfx }}_{{ $i }}_{{ $fbid }}">
                                                                    <small><span class="text-muted">{{ $materielNames[$fbid] ?? 'Matériel #' . $fbid }}</span></small>
                                                                </label>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                @endif
                                                @foreach($entry['unmatched_sn'] ?? [] as $usn)
                                                    <div class="text-warning small mt-1">
                                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                                        S/N non trouvé en BDD : {{ $usn }}
                                                    </div>
                                                @endforeach
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="6" class="text-center text-muted">
                                            Aucune fourniture détectée automatiquement.
                                            <button type="button" class="btn btn-sm btn-outline-primary ms-2" onclick="addEntry('{{ $pfx }}')" {{ $parsed['exists'] ? 'disabled' : '' }}>Ajouter manuellement</button>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <button type="button" class="btn btn-outline-primary btn-sm mb-2" onclick="addEntry('{{ $pfx }}')" {{ $parsed['exists'] ? 'disabled' : '' }}>
                            <i class="fas fa-plus me-1"></i> Ajouter une ligne
                        </button>

                        @if($parsed['raw'] ?? false)
                        <details class="mt-2">
                            <summary class="text-muted small">Texte OCR brut ({{ strlen($parsed['raw']) }} car.)</summary>
                            <pre class="bg-light border p-2 mt-1 small" style="max-height:200px;overflow:auto">{{ $parsed['raw'] }}</pre>
                        </details>
                        @endif
                    </div>
                </div>
                <hr>
                <button type="submit" class="btn {{ $parsed['exists'] ? 'btn-secondary' : 'btn-primary' }} btn-tab-submit" data-tab="{{ $b }}" {{ $parsed['exists'] ? 'disabled' : '' }}>
                    <i class="fas fa-check me-1"></i>
                    {{ $parsed['exists'] ? 'Déjà importé' : 'Créer ce bon de livraison' }}
                </button>
            </div>
            @endforeach
            </div>

            @if($rawFullText ?? false)
            <details class="mt-3 mb-3">
                <summary class="text-info small fw-bold">Texte OCR brut COMPLET ({{ strlen($rawFullText) }} car.) — avant découpage</summary>
                <pre class="bg-dark text-light border p-2 mt-1 small" style="max-height:400px;overflow:auto;white-space:pre-wrap;word-break:break-all">{{ $rawFullText }}</pre>
            </details>
            @endif
            </form>
        </div>
    </div>

    @push('scripts')
    <script>
    const fournituresData = @json($fournituresData);
    const bonsParsed = @json($bonsParsed);
    let entryCounters = {};
    bonsParsed.forEach((bp, b) => { entryCounters['bons[' + b + ']'] = (bp.entries || []).length; });

    function getActiveTab() {
        const active = document.querySelector('.tab-pane.active');
        return active ? parseInt(active.id.replace('bon-', '')) : 0;
    }

    function loadMateriels(sel, key, pfx, i) {
        const container = document.getElementById('materiels-' + key);
        const entry = fournituresData[sel.value];
        if (!entry || !entry.materiels || entry.materiels.length === 0) {
            container.innerHTML = '<p class="text-muted mb-0"><small>Aucun matériel lié</small></p>';
            checkFormValidity();
            return;
        }
        const sorted = [...entry.materiels].sort((a, b) => (a.nom || '').localeCompare(b.nom || ''));
        let html = '<div class="row">';
        sorted.forEach(m => {
            html += `<div class="col-6 form-check">
                <input type="checkbox" class="form-check-input materiel-check" name="${pfx}[fournitures][${i}][materiels][]" value="${m.id}" id="mat_${key}_${m.id}" onchange="checkMaterielQty(this.closest('tr')); checkFormValidity();">
                <label class="form-check-label" for="mat_${key}_${m.id}"><small>${m.info}</small></label>
            </div>`;
        });
        html += '</div>';
        container.innerHTML = html;
        checkFormValidity();
    }

    function toggleEntry(cb) {
        const row = cb.closest('tr');
        const inputs = row.querySelectorAll('select, input:not([type="checkbox"])');
        inputs.forEach(inp => { inp.disabled = !cb.checked; });
        const materielChecks = row.querySelectorAll('input[type="checkbox"][name*="materiels"]');
        materielChecks.forEach(c => { c.disabled = !cb.checked; });
    }

    function addEntry(pfx) {
        const card = document.querySelector(`[name="${pfx}[numero_livraison]"]`).closest('.tab-pane');
        const tbody = card.querySelector('.entries-table tbody');
        const emptyRow = tbody.querySelector('tr td[colspan]');
        if (emptyRow) emptyRow.closest('tr').remove();

        const i = entryCounters[pfx] || 0;
        entryCounters[pfx] = i + 1;
        const key = pfx + '_' + i;

        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td class="text-center">
                <input type="checkbox" class="form-check-input entry-checkbox" name="${pfx}[fournitures][${i}][include]" value="1" checked onchange="toggleEntry(this)">
            </td>
            <td><input type="text" class="form-control form-control-sm" readonly></td>
            <td>
                <select class="form-select form-select-sm fourniture-select" name="${pfx}[fournitures][${i}][id]" onchange="loadMateriels(this, '${key}', '${pfx}', ${i})">
                    <option value="">Sélectionner...</option>
                    @foreach($fournitures as $f)
                        <option value="{{ $f->id }}">{{ $f->reference }} - {{ $f->nom }}</option>
                    @endforeach
                </select>
            </td>
            <td style="max-width:300px;word-break:break-word"><small class="text-muted">—</small></td>
            <td><input type="number" class="form-control form-control-sm quantite-input" name="${pfx}[fournitures][${i}][quantite]" value="1" min="1" style="width:80px"></td>
            <td><div id="materiels-${key}" class="materiels-container"><p class="text-muted mb-0"><small>Sélectionnez d'abord une fourniture</small></p></div></td>
        `;
        tbody.appendChild(tr);
        checkFormValidity();
    }

    function checkMaterielQty(row) {
        const qty = parseInt(row.querySelector('.quantite-input')?.value || 0);
        const checks = row.querySelectorAll('input[type="checkbox"][name*="materiels"]:checked');
        if (qty > 0 && checks.length > qty) {
            checks[checks.length - 1].checked = false;
        }
    }

    function checkFormValidity() {
        const tabIdx = getActiveTab();
        const pane = tabIdx !== null ? document.getElementById('bon-' + tabIdx) : document.querySelector('.tab-pane');
        if (!pane || pane.dataset.exists === '1') {
            const btn = pane ? pane.querySelector('.btn-tab-submit') : null;
            if (btn) btn.disabled = true;
            return;
        }

        let anyValid = false;
        let anyIncluded = false;

        const table = pane.querySelector('.entries-table');
        if (table) {
            table.querySelectorAll('tbody tr').forEach(row => {
                const include = row.querySelector('.entry-checkbox');
                if (!include || !include.checked) return;
                anyIncluded = true;

                const fourniture = row.querySelector('.fourniture-select');
                const qty = row.querySelector('.quantite-input');
                const fournitureOk = fourniture && fourniture.value !== '';
                const qtyVal = parseInt(qty?.value || 0);
                const qtyOk = qtyVal > 0;
                const checkedMateriels = row.querySelectorAll('input[type="checkbox"][name*="materiels"]:checked').length;
                const materielOk = checkedMateriels <= qtyVal;

                row.querySelectorAll('.fourniture-select, .quantite-input').forEach(el => {
                    el.classList.toggle('is-invalid', false);
                });
                if (!fournitureOk) fourniture?.classList.add('is-invalid');
                if (!qtyOk || !materielOk) qty?.classList.add('is-invalid');

                if (fournitureOk && qtyOk && materielOk) anyValid = true;
            });
        }

        const btn = pane.querySelector('.btn-tab-submit');
        if (btn) btn.disabled = !(anyValid || !anyIncluded);
    }

    function loadCommandeData(numero, bonIndex) {
        if (!numero) return;
        fetch('{{ url('bons-livraison/commande-data') }}/' + encodeURIComponent(numero))
            .then(r => r.json())
            .then(data => {
                if (!data.found) return;
                const badge = document.getElementById('cmd-badge-' + bonIndex);
                if (!badge) return;
                badge.style.display = 'inline-block';
                badge.className = 'badge bg-success';
                badge.title = 'Commandée : ' + data.fournitures.reduce((s, f) => s + f.quantite, 0) + ' fourniture(s), ' + data.fournitures.reduce((s, f) => s + (f.materiels ? f.materiels.length : 0), 0) + ' matériel(s)';
                badge.innerHTML = '<i class="fas fa-check me-1"></i>Commande liée';
            })
            .catch(function() {});
    }

    document.addEventListener('DOMContentLoaded', function() {
        bonsParsed.forEach(function(bp, b) {
            if (bp.numero_commande && !bp.exists) {
                loadCommandeData(bp.numero_commande, b);
            }
        });

        document.querySelectorAll('.btn-tab-submit').forEach(btn => {
            btn.addEventListener('click', function(e) {
                const tabIdx = this.dataset.tab;
                document.getElementById('active_tab').value = tabIdx;
                document.querySelectorAll('.tab-pane').forEach(pane => {
                    if (pane.id !== 'bon-' + tabIdx) {
                        pane.querySelectorAll('input, select, textarea').forEach(el => el.disabled = true);
                    }
                });
            });
        });

        document.querySelectorAll('.fourniture-select').forEach(sel => {
            sel.addEventListener('change', checkFormValidity);
        });
        document.querySelectorAll('.entry-checkbox').forEach(cb => {
            cb.addEventListener('change', checkFormValidity);
        });
        document.querySelectorAll('.quantite-input').forEach(inp => {
            inp.addEventListener('input', checkFormValidity);
        });
        document.querySelectorAll('.numero-input, .date-input').forEach(inp => {
            inp.addEventListener('input', checkFormValidity);
        });
        document.querySelectorAll('.btn-tab-submit').forEach(btn => {
            btn.addEventListener('change', function(e) {
                const pane = btn.closest('.tab-pane');
                const row = pane ? pane.querySelector('tr') : null;
                if (row) checkFormValidity();
            });
        });
        document.getElementById('ocrForm').addEventListener('change', function(e) {
            if (e.target.matches('input[type="checkbox"][name*="materiels"]')) {
                const row = e.target.closest('tr');
                checkMaterielQty(row);
                checkFormValidity();
            }
        });
        document.querySelectorAll('.nav-link[data-bs-toggle="tab"]').forEach(tab => {
            tab.addEventListener('shown.bs.tab', function(e) {
                const tabIdx = e.target.getAttribute('data-bs-target').replace('#bon-', '');
                document.getElementById('active_tab').value = tabIdx;
                checkFormValidity();
            });
        });
        checkFormValidity();
    });
    </script>
    @endpush
@endsection