@extends('layouts.app')

@section('title', 'Nouvelle Sortie de Stock - 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">Nouvelle Sortie de Stock</h1>
            <a href="{{ route('sorties-stock.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
        </div>
        <div class="card-body">
            <form action="{{ route('sorties-stock.store') }}" method="POST">
                @csrf

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="marque_id" class="form-label">Marque</label>
                        <select class="form-select" id="marque_id" required onchange="loadFournitures(this.value); loadMaterielsByMarque(this.value)">
                            <option value="">Sélectionner une marque</option>
                            @foreach($marques as $marque)
                                <option value="{{ $marque->id }}" {{ $selectedMarque?->id == $marque->id ? 'selected' : '' }}>
                                    {{ $marque->nom }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="fourniture_id" class="form-label">Fourniture</label>
                        <select class="form-select @error('fourniture_id') is-invalid @enderror" id="fourniture_id" name="fourniture_id" required onchange="updateStockState(this)">
                            <option value="">Sélectionner d'abord une marque</option>
                        </select>
                        @error('fourniture_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="materiel_id" class="form-label">Matériel</label>
                        <select class="form-select @error('materiel_id') is-invalid @enderror" id="materiel_id" name="materiel_id">
                            <option value="">Sélectionner d'abord une marque</option>
                        </select>
                        @error('materiel_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="date_sortie" class="form-label">Date de sortie</label>
                        <input type="date" class="form-control @error('date_sortie') is-invalid @enderror" id="date_sortie" name="date_sortie" value="{{ old('date_sortie', $dateSortie) }}" required>
                        @error('date_sortie')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                @if($releveId)
                <input type="hidden" name="releve_id" value="{{ $releveId }}">
                @endif

                <div id="stock-warning" class="alert alert-warning d-none">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Stock insuffisant pour cette fourniture.
                </div>

                <div id="stock-zero" class="alert alert-danger d-none">
                    <i class="fas fa-times-circle me-2"></i>
                    Stock à zéro — la sortie ne peut pas être enregistrée.
                </div>

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

@push('scripts')
<script>
let fournituresCache = {};
let _preselectFournitureId = null;

function toggleStockState(stock) {
    var stockZero = document.getElementById('stock-zero');
    var btnSave = document.getElementById('btn-save');
    if (stock <= 0) {
        stockZero.classList.remove('d-none');
        btnSave.disabled = true;
        btnSave.classList.remove('btn-primary');
        btnSave.classList.add('btn-secondary');
    } else {
        stockZero.classList.add('d-none');
        btnSave.disabled = false;
        btnSave.classList.remove('btn-secondary');
        btnSave.classList.add('btn-primary');
    }
}

function loadFournitures(marqueId) {
    const fournitureSelect = document.getElementById('fourniture_id');

    fournitureSelect.innerHTML = '<option value="">Chargement...</option>';
    document.getElementById('stock-warning').classList.add('d-none');
    toggleStockState(1);

    if (!marqueId) {
        fournitureSelect.innerHTML = '<option value="">Sélectionner d\'abord une marque</option>';
        return;
    }

    let url = '{{ route('bons-livraison.by-marque') }}' + '?ids=' + marqueId;
    fetch(url)
        .then(response => response.json())
        .then(fournitures => {
            fournitureSelect.innerHTML = '<option value="">Sélectionner une fourniture</option>';
            fournituresCache = {};
            fournitures.forEach(f => {
                var stock = f.stock || 0;
                if (stock <= 0 && _preselectFournitureId != f.id) return;
                const option = document.createElement('option');
                option.value = f.id;
                option.textContent = f.nom + ' (Stock: ' + stock + ')';
                option.dataset.stock = stock;
                fournitureSelect.appendChild(option);
                fournituresCache[f.id] = f;
            });
            if (fournitureSelect.options.length <= 1) {
                fournitureSelect.innerHTML = '<option value="">Aucune fourniture en stock</option>';
            }
            var selected = fournitureSelect.options[fournitureSelect.selectedIndex];
            if (selected) toggleStockState(parseInt(selected.dataset?.stock || 0));
        })
        .catch(function() {
            fournitureSelect.innerHTML = '<option value="">Erreur de chargement</option>';
        });
}

function updateStockState(select) {
    var option = select.options[select.selectedIndex];
    toggleStockState(parseInt(option?.dataset?.stock || 0));
}

function loadMaterielsByMarque(marqueId) {
    const materielSelect = document.getElementById('materiel_id');
    materielSelect.innerHTML = '<option value="">Chargement...</option>';

    if (!marqueId) {
        materielSelect.innerHTML = '<option value="">Sélectionner d\'abord une marque</option>';
        return;
    }

    let url = '{{ url('materiels/by-marque') }}' + '/' + marqueId;
    fetch(url)
        .then(response => response.json())
        .then(materiels => {
            materielSelect.innerHTML = '<option value="">Sans matériel</option>';
            materiels.forEach(m => {
                const opt = document.createElement('option');
                opt.value = m.id;
                opt.textContent = m.nom + (m.numeros_equipment ? ' (' + m.numeros_equipment + ')' : '');
                materielSelect.appendChild(opt);
            });
        })
        .catch(function() {
            materielSelect.innerHTML = '<option value="">Sans matériel</option>';
        });
}

document.addEventListener('DOMContentLoaded', function() {
    @if($selectedFourniture)
        _preselectFournitureId = '{{ $selectedFourniture->id }}';
        loadFournitures('{{ $selectedMarque->id }}');
        @if($selectedMateriel)
        loadMaterielsByMarque('{{ $selectedMarque->id }}');
        var _pollTimerMat = setInterval(function() {
            var ms = document.getElementById('materiel_id');
            if (ms.options.length > 1) {
                ms.value = '{{ $selectedMateriel->id }}';
                clearInterval(_pollTimerMat);
            }
        }, 50);
        @else
        loadMaterielsByMarque('{{ $selectedMarque->id }}');
        @endif
        var _pollTimerFour = setInterval(function() {
            var fs = document.getElementById('fourniture_id');
            if (fs.options.length > 1) {
                fs.value = '{{ $selectedFourniture->id }}';
                clearInterval(_pollTimerFour);
            }
        }, 50);
    @elseif($selectedMarque)
        loadFournitures('{{ $selectedMarque->id }}');
        loadMaterielsByMarque('{{ $selectedMarque->id }}');
    @endif

    const form = document.querySelector('form');
    const saveBtn = document.getElementById('btn-save');
    if (saveBtn && form) {
        form.addEventListener('submit', function() {
            if (!saveBtn.disabled) {
                setTimeout(() => {
                    saveBtn.disabled = true;
                    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enregistrement...';
                }, 100);
            }
        });
    }
});
</script>
@endpush