@extends('layouts.app')

@section('title', 'Nouveau 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">Nouveau Bon de Commande</h1>
            <a href="{{ route('commandes.index') }}" class="btn btn-outline-light">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
        </div>
        <div class="card-body">
            @include('partials.session-alerts')

            <form action="{{ route('commandes.store') }}" method="POST" id="bonForm">
                @csrf

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="numero_livraison" class="form-label">N° commande</label>
                        <input type="text" class="form-control @error('numero_livraison') is-invalid @enderror" id="numero_livraison" name="numero_livraison" value="{{ old('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</label>
                        <input type="date" class="form-control @error('date_reception') is-invalid @enderror" id="date_reception" name="date_reception" value="{{ old('date_reception', date('Y-m-d')) }}" required>
                        @error('date_reception')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label">Marques</label>
                        <div id="marques-checkboxes" class="border rounded p-2" style="max-height: 150px; overflow-y: auto;">
                            @foreach($marques as $marque)
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input marque-checkbox" id="marque_{{ $marque->id }}" value="{{ $marque->id }}" onchange="onMarqueChange()">
                                    <label class="form-check-label" for="marque_{{ $marque->id }}">{{ $marque->nom }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

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

                <div id="fournitures-container" class="mb-3">
                    <p class="text-muted">Sélectionnez d'abord une marque pour afficher les fournitures.</p>
                </div>

                <button type="submit" class="btn btn-success btn-save">
                    <i class="fas fa-save"></i> Enregistrer
                </button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
var _loadingMarques = false;

function getSelectedMarques() {
    const checkboxes = document.querySelectorAll('.marque-checkbox:checked');
    return Array.from(checkboxes).map(cb => cb.value).join(',');
}

function onMarqueChange() {
    if (!_loadingMarques) loadFournitures();
}

function loadFournitures() {
    const container = document.getElementById('fournitures-container');
    const ids = getSelectedMarques();

    if (!ids) {
        container.innerHTML = '<p class="text-muted">Sélectionnez au moins une marque pour afficher les fournitures.</p>';
        return Promise.resolve([]);
    }

    container.innerHTML = '<p class="text-muted">Chargement...</p>';

    let url = '{{ url('bons-livraison/fournitures-by-marque') }}' + '?ids=' + encodeURIComponent(ids);
    return fetch(url)
        .then(response => response.json())
        .then(fournitures => {
            if (fournitures.length === 0) {
                container.innerHTML = '<p class="text-muted">Aucune fourniture pour ces marques.</p>';
                return [];
            }
            renderFournitures(fournitures);
            return fournitures;
        })
        .catch(function() {
            container.innerHTML = '<p class="text-danger">Erreur lors du chargement.</p>';
            return [];
        });
}

function renderFournitures(fournitures) {
    const container = document.getElementById('fournitures-container');
    let html = '<div class="table-responsive"><table class="table table-bordered"><thead><tr><th style="width:40px">Inclure</th><th>Réf.</th><th>Fourniture</th><th style="width:120px">Quantité</th><th style="width:120px">Prix HT unitaire <small class="text-muted fw-normal">(point pour les décimales)</small></th><th>Matériels (max: quantité)</th></tr></thead><tbody>';

    fournitures.forEach(f => {
        html += `<tr>
            <td class="text-center">
                <input type="checkbox" class="form-check-input fourniture-checkbox" data-id="${f.id}" onchange="toggleFourniture(${f.id}, this.checked)">
            </td>
            <td>${f.reference || '-'}</td>
            <td>${f.nom}</td>
            <td>
                <input type="number" class="form-control fourniture-quantite" data-id="${f.id}" id="quantite_${f.id}" name="fournitures[${f.id}][quantite]" value="1" min="1" disabled style="display:none;" onchange="updateSaveButton()" oninput="updateSaveButton()">
            </td>
            <td>
                <input type="text" class="form-control fourniture-prix" data-id="${f.id}" id="prix_${f.id}" name="fournitures[${f.id}][prix_ht_unit]" value="0" inputmode="decimal" disabled style="display:none;">
            </td>
            <td>
                <div id="materiels_${f.id}" style="display:none;">`;

        if (f.materiels.length === 0) {
            html += '<p class="text-muted mb-0">Aucun matériel lié</p>';
        } else {
            const sorted = [...f.materiels].sort((a, b) => (a.numeros_equipment || '').localeCompare(b.numeros_equipment || ''));
            html += '<div class="row" style="padding-left: 12px;">';
            sorted.forEach(m => {
                const label = m.numeros_equipment ? m.nom + ' (' + m.numeros_equipment + ')' : m.nom;
                html += `<div class="col-6 form-check">
                    <input type="checkbox" class="form-check-input materiel-checkbox" data-fourniture="${f.id}" id="materiel_${f.id}_${m.id}" name="fournitures[${f.id}][materiels][]" value="${m.id}" onchange="checkMaterielCount(${f.id})">
                    <label class="form-check-label" for="materiel_${f.id}_${m.id}">${label}</label>
                </div>`;
            });
            html += '</div>';
        }

        html += `</div>
            </td>
        </tr>`;
    });

    html += '</tbody></table></div>';
    container.innerHTML = html;
}

function toggleFourniture(id, checked) {
    const qty = document.getElementById('quantite_' + id);
    const prix = document.getElementById('prix_' + id);
    const materiels = document.getElementById('materiels_' + id);
    qty.disabled = !checked;
    qty.style.display = checked ? '' : 'none';
    qty.required = checked;
    prix.disabled = !checked;
    prix.style.display = checked ? '' : 'none';
    materiels.style.display = checked ? '' : 'none';

    const hidden = document.querySelector('input[name="fournitures[' + id + '][id]"]');
    if (checked && !hidden) {
        const inp = document.createElement('input');
        inp.type = 'hidden';
        inp.name = 'fournitures[' + id + '][id]';
        inp.value = id;
        document.getElementById('bonForm').appendChild(inp);
    } else if (!checked && hidden) {
        hidden.remove();
    }
    updateSaveButton();
}

function updateSaveButton() {
    let bloque = false;
    document.querySelectorAll('.fourniture-checkbox:checked').forEach(function(cb) {
        const fid = cb.getAttribute('data-id');
        const qty = parseInt(document.getElementById('quantite_' + fid).value) || 0;
        let checked = 0;
        document.querySelectorAll('.materiel-checkbox[data-fourniture="' + fid + '"]:checked').forEach(function() { checked++; });
        if (checked > qty) bloque = true;
    });
    const btn = document.querySelector('.btn-save');
    if (btn) btn.disabled = bloque;
}

function checkMaterielCount(fournitureId) {
    const qty = parseInt(document.getElementById('quantite_' + fournitureId).value) || 1;
    const checkboxes = document.querySelectorAll('.materiel-checkbox[data-fourniture="' + fournitureId + '"]');
    let checked = 0;
    checkboxes.forEach(cb => { if (cb.checked) checked++; });

    if (checked > qty) {
        showModal('Vous ne pouvez pas sélectionner plus de ' + qty + ' matériel(s).');
        checkboxes.forEach(cb => { if (cb.checked && checked > qty) { cb.checked = false; checked--; } });
    }
    updateSaveButton();
}

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const saveBtn = document.querySelector('.btn-save');
    if (saveBtn) {
        saveBtn.addEventListener('click', function(e) {
            if (this.disabled) {
                e.preventDefault();
                return;
            }
            const anyChecked = document.querySelector('.fourniture-checkbox:checked');
            if (!anyChecked) {
                showModal('Veuillez sélectionner au moins une fourniture.');
                e.preventDefault();
                return;
            }
            if (form.checkValidity()) {
                setTimeout(() => {
                    this.disabled = true;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enregistrement...';
                }, 100);
            }
        });
    }

    updateSaveButton();

    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