@extends('layouts.app')

@section('title', 'Modifier le Bon de Commande - Print Manager')

@section('content')
    <div class="card">
        <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
            <h1 class="mb-0">Modifier le Bon de Commande n° {{ $bonsLivraison->numero_livraison }}</h1>
            <a href="{{ route('commandes.show', $bonsLivraison->id) }}" class="btn btn-outline-light">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
        </div>
        <div class="card-body">
            <form action="{{ route('commandes.update', $bonsLivraison->id) }}" method="POST" id="bonForm">
                @csrf
                @method('PUT')

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="numero_livraison" class="form-label">Numéro de commande</label>
                        <input type="text" class="form-control @error('numero_livraison') is-invalid @enderror" id="numero_livraison" name="numero_livraison" value="{{ old('numero_livraison', $bonsLivraison->numero_livraison) }}" required>
                        @error('numero_livraison')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label for="date_reception" class="form-label">Date de commande</label>
                        <input type="date" class="form-control @error('date_reception') is-invalid @enderror" id="date_reception" name="date_reception" value="{{ old('date_reception', $bonsLivraison->created_at ? $bonsLivraison->created_at->format('Y-m-d') : date('Y-m-d')) }}" required>
                        @error('date_reception')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

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

                <div class="table-responsive">
                    <table class="table table-bordered" id="entries-table">
                        <thead>
                            <tr>
                                <th style="width:100px">Réf.</th>
                                <th>Fourniture</th>
                                <th style="width:100px">Quantité</th>
                                <th style="width:120px">Prix HT unitaire <small class="text-muted fw-normal">(point pour les décimales)</small></th>
                                <th style="min-width:200px">Matériels liés</th>
                                <th style="width:50px">Action</th>
                            </tr>
                        </thead>
                        <tbody id="entries-tbody">
                            @forelse($bonsLivraison->entrees as $e)
                            <tr>
                                <td>{{ $e->fourniture->reference ?? '-' }}</td>
                                <td>
                                    {{ $e->fourniture->nom }}
                                    <input type="hidden" name="fournitures[{{ $e->fourniture_id }}][id]" value="{{ $e->fourniture_id }}">
                                </td>
                                <td>
                                    <input type="number" class="form-control form-control-sm qty-input" name="fournitures[{{ $e->fourniture_id }}][quantite]" value="{{ $e->quantite }}" min="1" required>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm" name="fournitures[{{ $e->fourniture_id }}][prix_ht_unit]" value="{{ $e->prix_ht_unit !== null ? number_format($e->prix_ht_unit, 2, '.', '') : '' }}" inputmode="decimal">
                                </td>
                                <td>
                                    <div class="materiels-group" data-fourniture="{{ $e->fourniture_id }}">
                                        @forelse($e->fourniture->materiels->sortBy('numeros_equipment') as $m)
                                        <div class="form-check col-6" style="float:left">
                                            <input type="checkbox" class="form-check-input materiel-cb" id="mat_{{ $e->fourniture_id }}_{{ $m->id }}" name="fournitures[{{ $e->fourniture_id }}][materiels][]" value="{{ $m->id }}" {{ $e->materiels->contains($m->id) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mat_{{ $e->fourniture_id }}_{{ $m->id }}">{{ $m->numeros_equipment ? $m->nom.' ('.$m->numeros_equipment.')' : $m->nom }}</label>
                                        </div>
                                        @empty
                                        <p class="text-muted mb-0 small">Aucun matériel lié</p>
                                        @endforelse
                                        <div style="clear:both"></div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-danger btn-sm remove-row" title="Supprimer">&times;</button>
                                </td>
                            </tr>
                            @empty
                            <tr class="empty-row">
                                <td colspan="6" class="text-center text-muted">Aucune ligne. Cliquez sur "Ajouter une ligne".</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <button type="button" class="btn btn-success mb-3" id="add-row">
                    <i class="fas fa-plus"></i> Ajouter une ligne
                </button>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Enregistrer
                    </button>
                    <a href="{{ route('commandes.show', $bonsLivraison->id) }}" class="btn btn-secondary">Annuler</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
const fournitures = @json($fournitures);
let newIndex = 0;

function toggleMaterielsVisibility(row) {
    const group = row.querySelector('.materiels-group');
    if (!group) return;
    const qtyInput = row.querySelector('.qty-input');
    const qty = parseInt(qtyInput ? qtyInput.value : 0) || 0;
    const checked = group.querySelectorAll('.materiel-cb:checked').length;
    const needMore = qty > checked;
    group.querySelectorAll('.form-check').forEach(function(el) {
        el.style.display = needMore ? '' : 'none';
    });
    var msg = group.querySelector('.materiels-msg');
    if (!msg) {
        msg = document.createElement('p');
        msg.className = 'materiels-msg text-muted mb-0 small';
        group.appendChild(msg);
    }
    msg.textContent = needMore ? 'Cochez les matériels reçus (max ' + qty + ')' : 'Quantité atteinte (' + checked + '/' + qty + ')';
    msg.style.display = '';
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('#entries-tbody tr:not(.empty-row)').forEach(function(row) {
        toggleMaterielsVisibility(row);
    });
});

document.getElementById('add-row').addEventListener('click', function() {
    const tbody = document.getElementById('entries-tbody');
    const emptyRow = tbody.querySelector('.empty-row');
    if (emptyRow) emptyRow.remove();

    const idx = newIndex++;
    const tr = document.createElement('tr');
    tr.innerHTML = `
        <td><span class="text-muted small" id="ref_new_${idx}">—</span></td>
        <td>
            <select class="form-select form-select-sm fourniture-select" data-idx="${idx}" onchange="onFournitureSelect(${idx}, this.value)">
                <option value="">Sélectionner...</option>
                ${fournitures.map(f => `<option value="${f.id}" data-ref="${f.reference || ''}">${f.reference || '—'} — ${f.nom}</option>`).join('')}
            </select>
            <input type="hidden" name="fournitures[new_${idx}][id]" value="">
        </td>
        <td>
            <input type="number" class="form-control form-control-sm qty-input" name="fournitures[new_${idx}][quantite]" value="1" min="1" required>
        </td>
        <td>
            <input type="text" class="form-control form-control-sm" name="fournitures[new_${idx}][prix_ht_unit]" value="0" inputmode="decimal">
        </td>
        <td>
            <div class="materiels-group" id="materiels_new_${idx}">
                <p class="text-muted mb-0 small">Sélectionnez d'abord une fourniture.</p>
            </div>
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-danger btn-sm remove-row" title="Supprimer">&times;</button>
        </td>
    `;
    tbody.appendChild(tr);
    tr.querySelector('.remove-row').addEventListener('click', function() {
        tr.remove();
        checkEmptyTable();
    });
});

function onFournitureSelect(idx, fournitureId) {
    const tr = document.querySelector(`.fourniture-select[data-idx="${idx}"]`).closest('tr');
    tr.querySelector('input[name="fournitures[new_' + idx + '][id]"]').value = fournitureId;

    const refSpan = document.getElementById('ref_new_' + idx);
    const container = document.getElementById('materiels_new_' + idx);

    if (!fournitureId) {
        refSpan.textContent = '—';
        container.innerHTML = '<p class="text-muted mb-0 small">Sélectionnez d\'abord une fourniture.</p>';
        return;
    }

    const f = fournitures.find(f => f.id == fournitureId);
    refSpan.textContent = f.reference || '—';

    if (!f.materiels || f.materiels.length === 0) {
        container.innerHTML = '<p class="text-muted mb-0 small">Aucun matériel lié.</p>';
        return;
    }

    const sorted = [...f.materiels].sort((a, b) => (a.numeros_equipment || '').localeCompare(b.numeros_equipment || ''));
    let html = '<div style="overflow:hidden">';
    sorted.forEach(m => {
        const label = m.numeros_equipment ? m.nom + ' (' + m.numeros_equipment + ')' : m.nom;
        html += `<div class="form-check col-6" style="float:left">
            <input type="checkbox" class="form-check-input materiel-cb" id="mat_new_${idx}_${m.id}" name="fournitures[new_${idx}][materiels][]" value="${m.id}">
            <label class="form-check-label" for="mat_new_${idx}_${m.id}">${label}</label>
        </div>`;
    });
    html += '<div style="clear:both"></div></div>';
    container.innerHTML = html;
    toggleMaterielsVisibility(tr);
}

document.getElementById('entries-tbody').addEventListener('change', function(e) {
    var el = e.target;
    var row = el.closest('tr');
    if (!row) return;

    if (el.classList.contains('qty-input')) {
        toggleMaterielsVisibility(row);
        return;
    }

    var cb = el.closest('.materiel-cb');
    if (!cb) return;
    var group = row.querySelector('.materiels-group');
    var qtyInput = row.querySelector('.qty-input');
    if (!qtyInput) return;
    var qty = parseInt(qtyInput.value) || 1;
    var checked = group.querySelectorAll('.materiel-cb:checked').length;
    if (checked > qty) {
        showModal('Vous ne pouvez pas sélectionner plus de ' + qty + ' matériel(s).');
        cb.checked = false;
    }
    toggleMaterielsVisibility(row);
});

document.querySelectorAll('.remove-row').forEach(btn => {
    btn.addEventListener('click', function() {
        this.closest('tr').remove();
        checkEmptyTable();
    });
});

function checkEmptyTable() {
    const tbody = document.getElementById('entries-tbody');
    if (tbody.querySelectorAll('tr').length === 0) {
        tbody.innerHTML = '<tr class="empty-row"><td colspan="6" class="text-center text-muted">Aucune ligne. Cliquez sur "Ajouter une ligne".</td></tr>';
    }
}

document.getElementById('bonForm').addEventListener('submit', function(e) {
    const rows = this.querySelectorAll('#entries-tbody tr:not(.empty-row)');
    if (rows.length === 0) {
        showModal('Veuillez ajouter au moins une ligne.');
        e.preventDefault();
        return;
    }
    for (const row of rows) {
        const idHidden = row.querySelector('input[name$="[id]"]');
        if (!idHidden || !idHidden.value) {
            showModal('Veuillez sélectionner une fourniture pour toutes les lignes.');
            e.preventDefault();
            return;
        }
    }
    const saveBtn = this.querySelector('.btn-primary');
    setTimeout(() => {
        saveBtn.disabled = true;
        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enregistrement...';
    }, 100);
});

document.getElementById('bonForm').addEventListener('input', function(e) {
    if (e.target.name && e.target.name.includes('prix_ht_unit')) {
        e.target.value = e.target.value.replace(',', '.');
    }
});
</script>
@endpush