@extends('layouts.app')
@section('content')

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Liste des produits</h4>
            <h6>Gérer tous les produits</h6>
        </div>
    </div>
    <div class="page-btn">
        <a href="{{ route('inventory.add-product') }}" class="btn btn-added"><i data-feather="plus-circle" class="me-2"></i>Ajouter un produit</a>
    </div>
    <div class="page-btn import">
        <a href="#" class="btn btn-added color" data-bs-toggle="modal" data-bs-target="#import-product"><i data-feather="download" class="me-2"></i>Importer Produit</a>
    </div>
</div>

<div class="card table-list-card">
    <div class="card-body dedi-livewire-table">
        <livewire:tables.products-table />
    </div>
</div>

{{-- Modal quantité partagée --}}
<div class="modal fade" id="edit-product-qty-modal" tabindex="-1" aria-hidden="true" wire:ignore>
    <div class="modal-dialog modal-dialog-centered custom-modal-two">
        <div class="modal-content">
            <div class="modal-header border-0 custom-modal-header">
                <h4 id="qty-modal-title">Mettre à jour la quantité</h4>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="qty-modal-form" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="mb-3">
                        <label class="form-label">Quantité actuelle</label>
                        <input type="text" class="form-control" id="qty-modal-current" readonly disabled>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Quantité</label>
                        <p><i>Note : Cette nouvelle valeur va s'ajouter à l'ancienne.</i></p>
                        <input type="number" name="quantity" class="form-control" min="1" required>
                    </div>
                    <div class="modal-footer-btn">
                        <button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-submit">Valider</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Import Product -->
<div class="modal fade" id="import-product" wire:ignore>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="page-wrapper-new p-0">
                <div class="content">
                    <div class="modal-header border-0 custom-modal-header">
                        <div class="page-title">
                            <h4>Importer des Produits</h4>
                        </div>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body custom-modal-body">
                        <form action="{{ route('inventory.import') }}" method="POST" enctype="multipart/form-data">
                           @csrf
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="input-blocks image-upload-down">
                                        <label>Télécharger le fichier CSV</label>
                                        <div class="image-upload download">
                                            <input type="file" id="fileInput" name="csv_file" accept=".csv">
                                            <div class="image-uploads" onclick="document.getElementById('fileInput').click();">
                                                <img src="{{ asset('assets/img/download-img.png') }}" alt="img">
                                                <h4 id="fileName">Glissez et déposez un <span>fichier à téléverser</span></h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="modal-footer-btn">
                                    <button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Annuler</button>
                                    <button type="submit" class="btn btn-submit">Soumettre</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function openProductQtyModal(id, name, quantity) {
    var form = document.getElementById('qty-modal-form');
    var title = document.getElementById('qty-modal-title');
    var current = document.getElementById('qty-modal-current');
    form.action = "{{ url('/inventory/product/update/quantity') }}/" + id;
    title.textContent = "Mettre à jour la quantité de " + name;
    current.value = quantity;
    form.querySelector('input[name="quantity"]').value = '';
    var modal = new bootstrap.Modal(document.getElementById('edit-product-qty-modal'));
    modal.show();
    if (typeof feather !== 'undefined') feather.replace();
}

document.getElementById('fileInput')?.addEventListener('change', function(event) {
    let fileName = event.target.files.length > 0 ? event.target.files[0].name : "Glissez et déposez un fichier à téléverser";
    document.getElementById('fileName').innerHTML = fileName;
});
</script>
@endsection