@extends('layouts.app')

@section('content')
    <div class="card">
        <div class="card-header bg-warning text-white d-flex justify-content-between align-items-center">
            <h1 class="mb-0">Ajouter une Fourniture</h1>
            <a href="{{ route('fournitures.index', ['sort' => request('sort'), 'dir' => request('dir'), 'marque_id' => request('marque_id')]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
        </div>
        <div class="card-body">
            <form action="{{ route('fournitures.store') }}" method="POST">
                @csrf
                <input type="hidden" name="sort" value="{{ request('sort') }}">
                <input type="hidden" name="dir" value="{{ request('dir') }}">
                @foreach((array) request('marque_id', []) as $mid)
                <input type="hidden" name="marque_id[]" value="{{ $mid }}">
                @endforeach

                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label for="nom" class="form-label">Nom</label>
                        <input type="text" class="form-control @error('nom') is-invalid @enderror" id="nom" name="nom" value="{{ old('nom') }}" required>
                        @error('nom')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="reference" class="form-label">Référence</label>
                        <input type="text" class="form-control @error('reference') is-invalid @enderror" id="reference" name="reference" value="{{ old('reference') }}" required>
                        @error('reference')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="numero" class="form-label">Numéro</label>
                        <input type="text" class="form-control @error('numero') is-invalid @enderror" id="numero" name="numero" value="{{ old('numero') }}">
                        @error('numero')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="code_barre" class="form-label">Code barre</label>
                        <input type="text" class="form-control @error('code_barre') is-invalid @enderror" id="code_barre" name="code_barre" value="{{ old('code_barre') }}">
                        @error('code_barre')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Stock</label>
                        <input type="text" class="form-control" value="0 (calculé automatiquement)" disabled>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="description" class="form-label">Description</label>
                    <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="3">{{ old('description') }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="marque_id" class="form-label">Marque</label>
                        <select class="form-select @error('marque_id') is-invalid @enderror" id="marque_id" name="marque_id" required onchange="loadModeles(this.value)">
                            <option value="">Sélectionner une marque</option>
                            @foreach($marques as $marque)
                                <option value="{{ $marque->id }}" {{ old('marque_id') == $marque->id ? 'selected' : '' }}>
                                    {{ $marque->nom }}
                                </option>
                            @endforeach
                        </select>
                        @error('marque_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label class="form-label">Modèles</label>
                        <div id="modeles-checkboxes" class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
                            <p class="text-muted mb-0">Sélectionner d'abord une marque</p>
                        </div>
                        @error('modeles_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="statut" name="statut" value="1" {{ old('statut', true) ? 'checked' : '' }}>
                    <label class="form-check-label" for="statut">Actif</label>
                </div>

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

@push('scripts')
<script>
function loadModeles(marqueId) {
    const container = document.getElementById('modeles-checkboxes');

    if (!marqueId) {
        container.innerHTML = '<p class="text-muted mb-0">Sélectionner d\'abord une marque</p>';
        return;
    }

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

    let url = '{{ url('modeles/by-marque') }}' + '/' + marqueId;
    fetch(url)
        .then(response => response.json())
        .then(modeles => {
            if (modeles.length === 0) {
                container.innerHTML = '<p class="text-muted mb-0">Marque sans modèle</p>';
                return;
            }
            container.innerHTML = '';
            modeles.forEach(function(modele) {
                const div = document.createElement('div');
                div.className = 'form-check';
                const cb = document.createElement('input');
                cb.type = 'checkbox';
                cb.className = 'form-check-input';
                cb.id = 'modele_' + modele.id;
                cb.name = 'modeles_id[]';
                cb.value = modele.id;
                const label = document.createElement('label');
                label.className = 'form-check-label';
                label.htmlFor = 'modele_' + modele.id;
                label.textContent = modele.nom;
                div.appendChild(cb);
                div.appendChild(label);
                container.appendChild(div);
            });
        })
        .catch(function() {
            container.innerHTML = '<p class="text-danger mb-0">Erreur lors du chargement</p>';
        });
}

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