@extends('layouts.app')

@section('title', 'Rapprochement stocks - Print Manager')

@section('content')
<div class="card">
    <div class="card-header bg-warning text-dark d-flex justify-content-between align-items-center">
        <h1 class="mb-0"><i class="fas fa-balance-scale me-2"></i>Rapprochement des stocks</h1>
        <a href="{{ route('etat-stocks') }}" class="btn btn-outline-dark">
            <i class="fas fa-arrow-left me-1"></i>Retour
        </a>
    </div>
    <div class="card-body">
        @include('partials.session-alerts')

        <form method="POST" id="rapprochement-form">
            @csrf
            <div class="row mb-3">
                <div class="col-md-3">
                    <label class="form-label">Date du rapprochement</label>
                    <input type="date" name="date_rapprochement" class="form-control" value="{{ old('date_rapprochement', date('Y-m-d')) }}" required>
                </div>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-md-2">
                    <label class="form-label">Marques</label>
                    <div class="filter-checkbox-group" id="filter-marque">
                        @foreach($marques as $marque)
                            <div class="form-check">
                                <input class="form-check-input filter-marque-cb" type="checkbox"
                                    value="{{ $marque->id }}"
                                    id="mq_{{ $marque->id }}"
                                    {{ in_array($marque->id, (array) request('marque_id', [])) ? 'checked' : '' }}>
                                <label class="form-check-label small" for="mq_{{ $marque->id }}">{{ $marque->nom }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Modèles</label>
                    <div class="filter-checkbox-group" id="filter-modele">
                        @foreach($modeles as $modele)
                            <div class="form-check" data-marque-id="{{ $modele->marque_id }}">
                                <input class="form-check-input filter-modele-cb" type="checkbox"
                                    value="{{ $modele->id }}"
                                    id="md_{{ $modele->id }}"
                                    data-marque-id="{{ $modele->marque_id }}"
                                    {{ in_array($modele->id, (array) request('modele_id', [])) ? 'checked' : '' }}>
                                <label class="form-check-label small" for="md_{{ $modele->id }}">{{ $modele->nom }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Recherche</label>
                    <input type="text" name="search" class="form-control" placeholder="Nom, réf., code-barre" value="{{ request('search') }}" id="filter-search">
                </div>
                <div class="col-md-2 d-flex flex-column gap-1">
                    <label class="form-label invisible">&nbsp;</label>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-primary flex-fill" id="btn-search"><i class="fas fa-search me-1"></i> Filtrer</button>
                        <a href="{{ route('etat-stocks.rapprochement') }}" class="btn btn-outline-secondary flex-fill">Reset</a>
                    </div>
                </div>
            </div>

            @error('date_rapprochement')
                <div class="alert alert-danger">{{ $message }}</div>
            @enderror

            @if($fournitures->isEmpty())
                <p class="text-muted">Aucune fourniture trouvée.</p>
            @else
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th data-col="0" class="sortable">Fourniture</th>
                                <th data-col="1" class="sortable">Marque</th>
                                <th data-col="2" class="sortable">Référence</th>
                                <th data-col="3" class="sortable">Stock actuel</th>
                                <th data-col="6" class="sortable">En commande</th>
                                <th>Qté physique</th>
                                <th>Écart</th>
                                <th>Matériels à sortir</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($fournitures as $f)
                            <tr>
                                <td>
                                    <strong>{{ $f->nom }}</strong>
                                    @if($f->modeles->isNotEmpty())
                                        <br><small class="text-muted">{{ $f->modeles->pluck('nom')->implode(', ') }}</small>
                                    @endif
                                </td>
                                <td>{{ $f->marque->nom ?? '-' }}</td>
                                <td><code>{{ $f->reference ?? '-' }}</code></td>
                                <td>
                                    <span class="badge fs-6 {{ $f->stock <= 0 ? 'bg-danger' : ($f->stock <= 5 ? 'bg-warning text-dark' : 'bg-success') }}">
                                        {{ number_format($f->stock, 0, ',', ' ') }}
                                    </span>
                                    <input type="hidden" name="lignes[{{ $f->id }}][id]" value="{{ $f->id }}">
                                    <input type="hidden" name="lignes[{{ $f->id }}][stock_actuel]" value="{{ $f->stock }}">
                                </td>
                                <td>
                                    <span class="badge fs-6 bg-info">{{ number_format((int) ($f->en_commande ?? 0), 0, ',', ' ') }}</span>
                                </td>
                                <td>
                                    <input type="number" name="lignes[{{ $f->id }}][quantite_physique]" class="form-control form-control-sm qte-physique" value="{{ $qtePhysique[$f->id] ?? $f->stock }}" min="0" style="width:100px" data-id="{{ $f->id }}">
                                </td>
                                <td>
                                    <span class="badge fs-6 ecart-badge" id="ecart_{{ $f->id }}">0</span>
                                    <small class="text-warning fw-bold ecart-ignore" id="ignore_{{ $f->id }}" style="display:none;">Ignoré</small>
                                </td>
                                <td>
                                    @php
                                        $groups = $stockUnits[$f->id] ?? [];
                                        $totalUnits = collect($groups)->sum(fn($g) => count($g['units']));
                                    @endphp
                                    @if ($totalUnits > 0)
                                        <div class="materiel-checkboxes" id="mats_{{ $f->id }}" data-fourniture="{{ $f->id }}" style="display:none;">
                                            @php $gi = 0; @endphp
                                            @foreach ($groups as $g)
                                                <div class="mb-2">
                                                    <small class="text-muted">{{ $g['date']->format('d/m/Y') }}</small>
                                                    <div class="row">
                                                        @foreach ($g['units'] as $u)
                                                            <div class="col-6 form-check">
                                                                    <input class="form-check-input materiel-cb" type="checkbox"
                                                                        name="lignes[{{ $f->id }}][materiels][]"
                                                                        value="{{ $u['materiel_id'] }}_{{ $g['entree_id'] }}"
                                                                        data-mat="{{ $u['materiel_id'] }}"
                                                                        data-entree="{{ $g['entree_id'] }}"
                                                                        data-has-numero="{{ $u['has_numero'] ? '1' : '0' }}"
                                                                        id="cb_{{ $f->id }}_{{ $gi }}">
                                                                    <label class="form-check-label small" for="cb_{{ $f->id }}_{{ $gi }}">
                                                                        {{ $u['materiel_nom'] }}
                                                                    </label>
                                                                </div>
                                                                @php $gi++; @endphp
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <div class="validation-msg text-danger small mt-1" id="valid_{{ $f->id }}" style="display:none;"></div>
                                        </div>
                                    @else
                                        <span class="text-muted small">—</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <button type="submit" class="btn btn-warning btn-lg">
                    <i class="fas fa-check-circle me-1"></i>Valider le rapprochement
                </button>
            @endif
        </form>
    </div>
</div>

<form method="GET" id="filter-form" style="display:none;">
    <input type="hidden" name="sort" value="{{ request('sort') }}">
    <input type="hidden" name="dir" value="{{ request('dir') }}">
    <input type="text" name="search" value="{{ request('search') }}">
</form>
@endsection

@push('scripts')
<script>
var stockData = @json($fournitures->mapWithKeys(fn($f) => [$f->id => $f->stock]));

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.qte-physique').forEach(function(input) {
        input.addEventListener('input', function() {
            var fid = this.dataset.id;
            var stock = stockData[fid] || 0;
            var qte = parseInt(this.value) || 0;
            var ecart = stock - qte;
            var badge = document.getElementById('ecart_' + fid);
            if (badge) {
                badge.textContent = ecart > 0 ? '-' + ecart : (ecart < 0 ? '+' + Math.abs(ecart) : '0');
                badge.className = 'badge fs-6 ecart-badge ' + (ecart > 0 ? 'bg-danger' : (ecart < 0 ? 'bg-info' : 'bg-success'));
            }
            var ignoreMsg = document.getElementById('ignore_' + fid);
            if (ignoreMsg) ignoreMsg.style.display = ecart < 0 ? '' : 'none';
            // Show/hide and auto-check checkboxes (priorité aux matériels avec numéro)
            var container = document.getElementById('mats_' + fid);
            if (container) {
                var cbs = Array.from(container.querySelectorAll('.materiel-cb'));
                if (ecart > 0) {
                    container.style.display = '';
                    cbs.forEach(function(cb) { cb.checked = false; });
                    var reste = ecart;
                    cbs.filter(function(cb) { return cb.dataset.hasNumero === '1'; }).forEach(function(cb) {
                        if (reste > 0) { cb.checked = true; reste--; }
                    });
                    cbs.forEach(function(cb) {
                        if (reste > 0 && !cb.checked) { cb.checked = true; reste--; }
                    });
                } else {
                    container.style.display = 'none';
                    cbs.forEach(function(cb) { cb.checked = false; });
                }
            }
            validerLigne(fid, stock, qte);
        });
        input.addEventListener('change', function() {
            var fid = this.dataset.id;
            var stock = stockData[fid] || 0;
            var qte = parseInt(this.value) || 0;
            validerLigne(fid, stock, qte);
        });
        input.dispatchEvent(new Event('input'));
    });

    // Validation on checkbox change
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('materiel-cb')) {
            var container = e.target.closest('.materiel-checkboxes');
            if (!container) return;
            var fid = container.dataset.fourniture;
            var stock = stockData[fid] || 0;
            var qteInput = document.querySelector('.qte-physique[data-id="' + fid + '"]');
            var qte = qteInput ? parseInt(qteInput.value) || 0 : 0;
            validerLigne(fid, stock, qte);
        }
    });

    function validerLigne(fid, stock, qte) {
        var ecart = stock - qte;
        var container = document.getElementById('mats_' + fid);
        var msg = document.getElementById('valid_' + fid);
        if (!msg) return;
        var nbChecked = container ? container.querySelectorAll('.materiel-cb:checked').length : 0;
        if (ecart > 0 && nbChecked > 0 && nbChecked !== ecart) {
            msg.textContent = 'Incohérence : ' + ecart + ' sortie(s) attendue(s), ' + nbChecked + ' matériel(s) coché(s).';
            msg.style.display = '';
            msg.classList.add('validation-error');
        } else if (ecart <= 0 && nbChecked > 0) {
            msg.textContent = 'Incohérence : écart négatif ou nul mais ' + nbChecked + ' matériel(s) coché(s).';
            msg.style.display = '';
            msg.classList.add('validation-error');
        } else {
            msg.style.display = 'none';
            msg.classList.remove('validation-error');
        }
    }

    // Blocage de la soumission si incohérence
    document.getElementById('rapprochement-form').addEventListener('submit', function(e) {
        var errors = document.querySelectorAll('.validation-msg.validation-error');
        if (errors.length > 0) {
            e.preventDefault();
            showModal('Corrigez les incohérences avant de valider le rapprochement.');
        }
    });

    function syncFilterForm() {
        var ff = document.getElementById('filter-form');
        // Remove old marque/modele inputs
        ff.querySelectorAll('.sync-input').forEach(function(el) { el.remove(); });
        // Sync marque checkboxes
        document.querySelectorAll('.filter-marque-cb:checked').forEach(function(cb) {
            var inp = document.createElement('input');
            inp.type = 'hidden';
            inp.name = 'marque_id[]';
            inp.value = cb.value;
            inp.className = 'sync-input';
            ff.appendChild(inp);
        });
        // Sync modele checkboxes
        document.querySelectorAll('.filter-modele-cb:checked').forEach(function(cb) {
            var inp = document.createElement('input');
            inp.type = 'hidden';
            inp.name = 'modele_id[]';
            inp.value = cb.value;
            inp.className = 'sync-input';
            ff.appendChild(inp);
        });
    }

    function filterModeleByMarque() {
        var mids = [];
        document.querySelectorAll('.filter-marque-cb:checked').forEach(function(cb) {
            mids.push(cb.value);
        });
        document.querySelectorAll('#filter-modele .form-check').forEach(function(div) {
            if (mids.length === 0 || mids.includes(div.dataset.marqueId)) {
                div.style.display = '';
            } else {
                div.style.display = 'none';
                div.querySelector('.filter-modele-cb').checked = false;
            }
        });
    }

    function filterMarqueByModele() {
        var modeleIds = [];
        document.querySelectorAll('.filter-modele-cb:checked').forEach(function(cb) {
            modeleIds.push(cb.value);
        });
        if (modeleIds.length > 0) {
            var allowedMarqueIds = {};
            document.querySelectorAll('#filter-modele .form-check').forEach(function(div) {
                var cb = div.querySelector('.filter-modele-cb');
                if (cb && modeleIds.indexOf(cb.value) !== -1 && div.dataset.marqueId) {
                    allowedMarqueIds[div.dataset.marqueId] = true;
                }
            });
            document.querySelectorAll('#filter-marque .form-check').forEach(function(div) {
                var cb = div.querySelector('.filter-marque-cb');
                if (cb && allowedMarqueIds[cb.value]) {
                    div.style.display = '';
                } else {
                    div.style.display = 'none';
                    if (cb) cb.checked = false;
                }
            });
        } else {
            document.querySelectorAll('#filter-marque .form-check').forEach(function(div) {
                div.style.display = '';
            });
        }
    }

    function submitFilters() {
        filterModeleByMarque();
        filterMarqueByModele();
        syncFilterForm();
        document.getElementById('filter-form').submit();
    }

    document.querySelectorAll('.filter-marque-cb').forEach(function(cb) {
        cb.addEventListener('change', submitFilters);
    });

    document.querySelectorAll('.filter-modele-cb').forEach(function(cb) {
        cb.addEventListener('change', submitFilters);
    });

    filterModeleByMarque();
    filterMarqueByModele();

    var searchInput = document.getElementById('filter-search');
    var btnSearch = document.getElementById('btn-search');

    function syncQtePhysique() {
        var ff = document.getElementById('filter-form');
        ff.querySelectorAll('.sync-qte').forEach(function(el) { el.remove(); });
        document.querySelectorAll('.qte-physique').forEach(function(inp) {
            var h = document.createElement('input');
            h.type = 'hidden';
            h.name = 'qte_physique[' + inp.dataset.id + ']';
            h.value = inp.value;
            h.className = 'sync-qte';
            ff.appendChild(h);
        });
    }

    function syncSearch() {
        var ff = document.getElementById('filter-form');
        ff.querySelector('input[name="search"]').value = searchInput.value;
    }

    function toggleSearchBtn() {
        if (btnSearch) {
            btnSearch.disabled = !searchInput.value.trim();
        }
    }

    if (searchInput) {
        var searchTimer;
        searchInput.addEventListener('input', function() {
            toggleSearchBtn();
            clearTimeout(searchTimer);
            searchTimer = setTimeout(function() {
                syncSearch();
                syncFilterForm();
                document.getElementById('filter-form').submit();
            }, 500);
        });
        toggleSearchBtn();
    }

    if (btnSearch) {
        btnSearch.addEventListener('click', function() {
            if (searchInput && !searchInput.value.trim()) return;
            syncSearch();
            syncFilterForm();
            document.getElementById('filter-form').submit();
        });
    }

    var urlParams = new URLSearchParams(window.location.search);
    var sortCol = urlParams.get('sort');
    var sortDir = urlParams.get('dir');

    document.querySelectorAll('th.sortable').forEach(function(th) {
        th.addEventListener('click', function() {
            var col = this.dataset.col;
            var asc = sortCol !== col || sortDir === 'desc';
            var url = new URL(window.location);
            url.searchParams.set('sort', col);
            url.searchParams.set('dir', asc ? 'asc' : 'desc');
            window.location.href = url.toString();
        });
        if (sortCol === th.dataset.col) {
            th.classList.add(sortDir === 'asc' ? 'sort-asc' : 'sort-desc');
        }
    });
});
</script>
@endpush

@push('styles')
<style>
    .sortable { cursor: pointer; user-select: none; }
    .sortable:hover { background-color: rgba(0,0,0,0.05); }
    .qte-physique:focus { border-color: #ffc107; box-shadow: 0 0 0 0.2rem rgba(255,193,7,.25); }
</style>
@endpush