@extends('layouts.app')

@section('title', 'Ajouter un Matériel - Print Manager')

@section('content')
    <div class="card">
        <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
            <h1 class="mb-0">Ajouter un Matériel</h1>
            <a href="{{ route('materiels.index', ['sort' => request('sort'), 'dir' => request('dir'), 'marque_id' => request('marque_id'), 'modele_id' => request('modele_id')]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
        </div>
        <div class="card-body">
            <form action="{{ route('materiels.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
                @foreach((array) request('modele_id', []) as $modId)
                <input type="hidden" name="modele_id[]" value="{{ $modId }}">
                @endforeach

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="nom" class="form-label">Nom du matériel</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-4 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 class="col-md-4 mb-3">
                        <label for="modele_id" class="form-label">Modèle</label>
                        <select class="form-select @error('modele_id') is-invalid @enderror" id="modele_id" name="modele_id" required disabled>
                            <option value="">Sélectionner d'abord une marque</option>
                        </select>
                        @error('modele_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </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-4 mb-3">
                        <label for="adresse_ip" class="form-label">Adresse IP</label>
                        <input type="text" class="form-control @error('adresse_ip') is-invalid @enderror" id="adresse_ip" name="adresse_ip" value="{{ old('adresse_ip') }}">
                        @error('adresse_ip')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="numeros_equipment" class="form-label">Numéro d'équipement</label>
                        <input type="text" class="form-control @error('numeros_equipment') is-invalid @enderror" id="numeros_equipment" name="numeros_equipment" value="{{ old('numeros_equipment') }}">
                        @error('numeros_equipment')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="numero_serie" class="form-label">Numéro de série</label>
                        <input type="text" class="form-control @error('numero_serie') is-invalid @enderror" id="numero_serie" name="numero_serie" value="{{ old('numero_serie') }}">
                        @error('numero_serie')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="localisation" class="form-label">Localisation</label>
                        <input type="text" class="form-control @error('localisation') is-invalid @enderror" id="localisation" name="localisation" value="{{ old('localisation') }}">
                        @error('localisation')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="identifiant" class="form-label">Identifiant</label>
                        <input type="text" class="form-control @error('identifiant') is-invalid @enderror" id="identifiant" name="identifiant" value="{{ old('identifiant') }}">
                        @error('identifiant')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="mot_de_passe" class="form-label">Mot de passe</label>
                        <input type="text" class="form-control @error('mot_de_passe') is-invalid @enderror" id="mot_de_passe" name="mot_de_passe" value="{{ old('mot_de_passe') }}">
                        @error('mot_de_passe')
                            <div class="invalid-feedback">{{ $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 modeleSelect = document.getElementById('modele_id');

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

    modeleSelect.disabled = true;
    modeleSelect.innerHTML = '<option value="">Chargement...</option>';

    let url = '{{ url('modeles/by-marque') }}' + '/' + marqueId;
    fetch(url)
        .then(response => response.json())
        .then(modeles => {
            if (modeles.length === 0) {
                modeleSelect.innerHTML = '<option value="">Marque sans modèle</option>';
                modeleSelect.disabled = true;
                return;
            }
            modeleSelect.innerHTML = '<option value="">Sélectionner un modèle</option>';
            modeles.forEach(modele => {
                const option = document.createElement('option');
                option.value = modele.id;
                option.textContent = modele.nom;
                modeleSelect.appendChild(option);
            });
            modeleSelect.disabled = false;
        })
        .catch(error => {
            console.error('Error:', error);
            modeleSelect.innerHTML = '<option value="">Erreur lors du chargement</option>';
            modeleSelect.disabled = true;
        });
}

document.addEventListener('DOMContentLoaded', function() {
    const marqueSelect = document.getElementById('marque_id');
    if (marqueSelect.value) {
        loadModeles(marqueSelect.value);
    }

    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