@extends('layouts.admin-layout.main')
@section('GestionPage')
    @include('sweetalert::alert')
    <div class="pagetitle">
        <h1 class="fw-bold"> <i class="bi bi-archive"></i> Produits</h1>

    </div><!-- End Page Title -->
    <section class="section">
        <div class="container mt-4">
            <div class="card">
                <div class="card-body mt-4">
                    <a id="btnModalFormOrganisteur" href="{{ route('Gestion+Produits.create') }}" class="btn text-white mb-4"
                        style="background-color:#0b3544;"><i class="fas fa-plus-circle"></i> <span>Ajouter un
                            produit</span></a>

                    <table class="table table-striped table-bordered table-hover" id="table" data-toggle="table"
                        data-ajax="ajaxRequest" data-toolbar="#btnModalFormGestionProduits" data-buttons-class="success"
                        data-show-refresh="false" data-show-toggle="false" data-show-fullscreen="false"
                        data-show-columns="false" data-show-columns-toggle-all="false" data-show-export="false"
                        data-page-list="[10, 25, 50, 100, all]" data-click-to-select="true" data-toggle="table"
                        data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name"
                        data-page-size="10" data-sort-order="desc">
                        <thead>
                            <tr>
                            <th data-field="codeProduit" data-sortable="true">Produit ID</th>
                            <th data-formatter="formatterImg">Image</th>
                            <th data-field="nomProduit" data-sortable="true">Nom produits</th>
                            <th data-field="nomCategorie" data-sortable="true">Categorie</th>
                            <th data-field="descriptionProduit" data-sortable="true">Description</th>
                            <th data-field="quantiteEnStock" data-sortable="true">Quantités</th>
                            <th data-field="tarifRegulier" data-sortable="true">Tarif régulier</th>
                            <th data-field="tarifPromo" data-sortable="true">Tarif promo</th>
                            <th data-field="dateDebut" data-sortable="true">Date début</th>
                            <th data-field="dateFin" data-sortable="true">Date fin</th>
                            <th data-field="etatStock" data-sortable="true">Etat stock</th>
                            <th data-field="seuilStockFaible" data-sortable="true">Seuil stock</th>
                            <th data-field="autoriserAvis" data-sortable="true">Autorisation avis</th>
                            <th data-field="etatCommande" data-sortable="true">Autorisation commande</th>
                            <th data-formatter="actionFormatter" data-events="actionEvents">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- End #main -->
        @include('Admin.Produit.deleteProduit')
@endsection


@section('script')
    <script>
        $(function() {
            // Summernote
            $('#summernote').summernote({
                height: 100,
                placeholder: 'Entrer un texte',
            });

            // CodeMirror
            CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
                mode: "htmlmixed",
                theme: "monokai"
            });
        });
    </script>{{-- route('Gestion+Produits.create') --}}
    <script>
        // your custom ajax request here
        function ajaxRequest(params) {
            var url = '{{ route('Produits.list') }}'
            $.get(url + '?' + $.param(params.data)).then(function(res) {
                params.success(res)
            })
        }
    </script>
    <script>
        function actionFormatter(value, row, index) {
            return [
                '<a class="editProduits" style="color:blue" href="javascript:void(0)" title="Modifier">',
                '<i class="fas fa-edit" aria-hidden="true"></i>',
                '</a>',
                ' &nbsp &nbsp',
                '<a class="deleteProduits" style="color:red" href="javascript:void(0)" title="Supprimer">',
                '<i class="fas fa-trash" aria-hidden="true"></i>',
                '</a>'

            ].join('');
        }
        window.actionEvents = {
            'click .editProduits': function(e, value, row, index) {
                var id = row.id;


              window.location.href = '/Produit/edit/' + id;
            },

            'click .deleteProduits': function(e, value, row, index) {
                var id = row.id;

                $('#ModalDelete').modal('show');
                $('#deleteing_id').val(id);
            }
        };

     function formatterImg(value, row, index) {
    var images = JSON.parse(row.images); // Parse the JSON string
    var imageSrc = images[0]; // Assuming it's an array of image URLs
    return '<img src="img/' + imageSrc + '" alt="" height="100" width="100"></img>';
}

    </script>

    <script>
        $(function() {
            $('.toastrDefaultSuccess').each(function() {
                toastr.success($(this).text());
            });
            $('.toastrDefaultWarning').each(function() {
                toastr.warning($(this).text());
            });
            $('.toastrDefaultError').each(function() {
                toastr.error($(this).text());
            });
        });
    </script>

    <script>
        window.addEventListener('online', function() {
            toastr.success('Internet connection restored.');
        });

        window.addEventListener('offline', function() {
            toastr.error('Internet connection lost.');
        });
    </script>
@endsection
