@extends('layouts.app')

@section('title', 'Modifier une 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">Modifier une Sortie de Stock</h1>
            <a href="{{ url()->previous(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.update', $sortiesStock) }}" method="POST">
                @csrf
                @method('PUT')

                <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>

                <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">
                    <i class="fas fa-save"></i> Enregistrer
                </button>
            </form>
        </div>
    </div>
@endsection

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

function toggleStockState(stock) {
    var stockZero = document.getElementById('stock-zero');
    var btnSave = document.querySelector('button[type="submit"]');
    if (stock <= 0) {
        stockZero.classList.remove('d-none');
        btnSave.disabled = true;
    } else {
        stockZero.classList.add('d-none');
        btnSave.disabled = false;
    }
}

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;
                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>';
            }
            @if($selectedFourniture)
            fournitureSelect.value = '{{ $selectedFourniture->id }}';
            @endif
        })
        .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 + ')' : '');
                if ('{{ $selectedMateriel?->id }}' == m.id) opt.selected = true;
                materielSelect.appendChild(opt);
            });
        })
        .catch(function() {
            materielSelect.innerHTML = '<option value="">Sans matériel</option>';
        });
}

document.addEventListener('DOMContentLoaded', function() {
    @if($selectedMarque && $selectedFourniture)
        loadFournitures('{{ $selectedMarque->id }}');
        loadMaterielsByMarque('{{ $selectedMarque->id }}');
    @elseif($selectedMarque)
        loadFournitures('{{ $selectedMarque->id }}');
        loadMaterielsByMarque('{{ $selectedMarque->id }}');
    @endif
});
</script>
@endpush