@extends('layout')

@section('title', 'Modifier un inox')

@section('content')
<div class="pagetitle">
    <h1>@yield('title')</h1>
</div>

<section class="section contact">
    <div class="card p-4">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('inox.update', $inox->id) }}" method="POST" class="" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="row gy-4">
                <div class="col-md-12">
                    <label for="nom">Nom</label>
                    <input type="text" name="nom" id="nom" class="form-control"
                        value="{{ old('nom', $inox->nom) }}"
                        required>
                </div>
            </div>

            <br>

            <div id="duplique-container">
                @foreach ($inox->modeles as $index => $modele)
                    <div class="duplique col-md-6 border p-3 mb-3">
                        <label>Modèle</label>
                        <select class="form-select" name="modele_id[]" required>
                            <option value="">-- Choisir un modèle --</option>
                            @foreach ($modeles as $m)
                                <option value="{{ $m->id }}"
                                    {{ $m->id == $modele->id ? 'selected' : '' }}>
                                    {{ $m->nom }} - {{ $m->categorie->nom }}
                                </option>
                            @endforeach
                        </select>

                        <label class="mt-3">Image actuelle</label><br>
                        <img src="{{ asset('storage/inox/400/' . $modele->pivot->image) }}"
                            id="preview-{{ $index }}" class="mt-2 mb-2"
                            style="max-width: 100%; height: auto;">

                        <input type="file" name="image[]" class="form-control"
                            onchange="previewImage(event, 'preview-{{ $index }}')" accept="image/png, image/jpeg">
                        <small>Laisse vide pour garder l'image actuelle</small>

                        <label class="mt-3">Prix</label>
                        <input type="number" name="prix[]" class="form-control"
                            value="{{ old("prix.$index", $modele->pivot->prix) }}" required>

                        <button type="button" class="btn btn-danger mt-2 btn-remove" onclick="supprimerLigne(this)">❌ Supprimer</button>
                    </div>
                @endforeach
            </div>

            <button type="button" class="btn btn-secondary mt-3" onclick="dupliquerDiv()">➕ Ajouter une ligne</button>
            <br>

               <button class="btn btn-success" type="submit">Modifier</button>
        </form>
    </div>
</section>

<script>
    const modelesDispo = @json($modeles);
    let counter = {{ $inox->modeles->count() }};

    function supprimerLigne(button) {
        button.closest('.duplique').remove();
    }

    function previewImage(event, previewId) {
        const input = event.target;
        const file = input.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = function (e) {
            const img = document.getElementById(previewId);
            img.src = e.target.result;
            img.style.display = 'block';
        };
        reader.readAsDataURL(file);
    }

    function dupliquerDiv() {
        const container = document.getElementById('duplique-container');
        const index = counter++;
        const div = document.createElement('div');
        div.classList.add('duplique', 'col-md-6', 'border', 'p-3', 'mb-3');

        let modeleOptions = '<option value="">-- Choisir un modèle --</option>';
        modelesDispo.forEach(modele => {
            modeleOptions += `<option value="${modele.id}">${modele.nom} - ${modele.categorie.nom}</option>`;
        });

        div.innerHTML = `
            <label>Modèle</label>
            <select class="form-select" name="modele_id[]" required>
                ${modeleOptions}
            </select>

            <label class="mt-3">Image</label>
            <input type="file" name="image[]" class="form-control mt-2"
                onchange="previewImage(event, 'preview-${index}')" accept="image/png, image/jpeg" required>
            <img id="preview-${index}" src="#" style="display:none; max-width: 100%; height: auto;" class="mt-2">

            <label class="mt-3">Prix</label>
            <input type="number" name="prix[]" class="form-control" value="0" required>

            <button type="button" class="btn btn-danger mt-2 btn-remove" onclick="supprimerLigne(this)">❌ Supprimer</button>
        `;

        container.appendChild(div);
    }
</script>
@endsection