@extends('model')

@section('content')
    <!-- Start::page-header -->
    <div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
        <div>
            <nav>
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0);">
                            Configuration
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Liste des catégories produit</li>
                </ol>
            </nav>
        </div>
        <div class="btn-list">

            <button class="btn btn-primary btn-wave me-0" id="btnCategorie">
                <i class="bx bx-plus-circle me-1"></i> Nouvelle catégorie
            </button>
        </div>
    </div>
    <!-- End::page-header -->

    <!-- Start::row-2 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card overflow-hidden">
                <div class="card-body p-0 px-2 pt-2">
                    <div class="table-responsive">
                        <table class="table table-hover text-nowrap w-100" id="tableCategorie">
                            <thead>
                                <tr>
                                    <th data-column="action" class="text-center">Actions</th>
                                    <th data-column="nom" class="text-center">Icon</th>
                                    <th data-column="nom" class="text-center">Rang</th>
                                    <th data-column="nom" class="text-center">Libelle</th>
                                    <th data-column="prenoms" class="text-center">Date de création</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($Categorie_produit as $item)
                                    <tr>
                                        <td class="text-center">
                                            <div class="d-flex justify-content-center ">
                                                <button id="supprimerCategorie" data-id="{{$item->idcategorie_produit}}"
                                                    class="btn btn-outline-danger p-1 pt-1 pb-0 align-self-center me-2">
                                                    <i class="bx bx-trash" style="font-size : 14px;"></i>
                                                </button>
                                                <button id="modifierCategorie"  data-id="{{$item->idcategorie_produit}}"
                                                    class="btn btn-outline-warning p-1 pt-1 pb-0 align-self-center me-2">
                                                    <i class="bx bx-edit" style="font-size : 14px;"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td class="text-center"><img src="../{{$item->icon}}" style="width:30px"></td>
                                        <td class="text-center">{{ $item->position }}</td>
                                        <td class="text-start">{{ $item->libelleCategorieProduit }}</td>
                                        <td class="text-center">{{ $item->date }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End::row-2 -->

    {{-- - Section des modals - --}}
    <!-- Modal d'utilisateur-->
    <div id="modalCategorie" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header bg-primary-light">
                    <i class="iconeHeader bx bx-category text-primary me-3" style="font-size : 25px;"></i>
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close bg-light text-dark" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body iconFond">
                    <i class='bx bx-category iconFondBody text-primary'></i>
                    <form id="formCategorie" class="w-100">
                        <div class="row g-2">
                            <div class="col-md-9">
                                <div id="image-container" class="rounded h-100 w-100 p-2" style="border: 1px dashed;">
                                 <div id="imagePreview"></div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <input type="file" id="imageInput" multiple accept="image/*" hidden>
                                <button type="button" onclick="document.getElementById('imageInput').click();"
                                    class="rounded d-flex justify-content-center align-items-center btn btn-outline-primary w-100 h-100"
                                    style="border: 1px dashed red; font-size: 55px;">
                                    <i class="bx bxs-camera-plus"></i>
                                </button>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <p class="text-muted mb-0">Rang</p>
                                <input type="text" class="form-control text-center" id="rang" name="rang">
                                 <input type="hidden" class="form-control text-center" id="Cat_id_Hidden" name="Cat_id_Hidden" value="0">
                            </div>
                            <div class="col-md-12">
                                <p class="text-muted mb-0">libelle</p>
                                <input type="text" class="form-control text-center" id="cat" name="categorie">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer pt-4 pb-2 mb-0">
                    <button type="button" class="btn btn-primary" id="uploadBtn">Enregistrer</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
@endsection


@section('script')
    <script>
        $(function() {
           
            $("#tableCategorie").DataTable({
                bFilter: false, // Activer ou désactiver le filtrage
                language: languageTable, // Utiliser une configuration de langue définie ailleurs
                order: [], // Désactiver le tri initial
                lengthChange: false,
                pageLength: 10,
                lengthMenu: [10, 20, 25, 35, 50, 100, 200, 500],
            })

        })

        $(function() {
            $("#btnCategorie").click(function(e) {
                e.preventDefault();
                $("#modalCategorie").modal("show")
            });

            {{-- $("#btnSave").click(function(e) {
                e.preventDefault();
                if ($("#cat").val() == "") {
                    return false
                }
                $.ajax({
                    type: "post",
                    url: "{{ route('categorie.add') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        categorie: $("#cat").val(),
                        rang: $("#rang").val(),
                        Cat_id_Hidden: $("#Cat_id_Hidden").val()
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            notifSuccess(response.messages)
                            $("#modalCategorie").modal("hide")
                            window.location.reload()
                            return false
                        }
                       /// notifWarning(response.messages)
                    },
                    error: function(response) {
                        notifDanger(response.responseJSON.messages)
                    }
                });
            }); --}}

           
        })
    </script>

    <script>

    $(document).ready(function(){

        $(document).on('click','#modifierCategorie',function(){

            var Getid = $(this).data('id')
            RecuperationProduit(Getid)
        })

       


        $(document).on('click','#supprimerCategorie',function(){

            var Getid = $(this).data('id')
            const swalWithBootstrapButtons = Swal.mixin({
                    customClass: {
                        confirmButton: 'btn btn-danger ms-2',
                        cancelButton: 'btn btn-dark'
                    },
                    buttonsStyling: false
                })

                swalWithBootstrapButtons.fire({
                    title: 'Êtes-vous sûres ?',
                    text: "De vouloirs retirer cette offre spéciale !",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Je confirme !',
                    cancelButtonText: 'Non !',
                    reverseButtons: true
                }).then((result) => {

                    if (result.isConfirmed) {

                        $.ajax({
                        type: "GET",
                        url: "{{route('categorie.delete')}}",
                        data: {Cat_id:Getid},
                        dataType: "JSON",
                        success: function (resp) {
                            notifSuccess(resp.msg)
                            window.location.reload()
                        }
                        });

                    }})
        
            
        })

        let selectedFiles = [];
        $("#imageInput").on("change", function(event) {
                const files = event.target.files;

                Array.from(files).forEach(file => {
                    if (!selectedFiles.some(f => f.name === file.name)) {
                        selectedFiles.push(file);

                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const imgWrapper = $("<div>").addClass("image-wrapper");
                            const img = $("<img>").attr("src", e.target.result).addClass("image-preview");
                            const removeBtn = $("<button>").html("&times;").addClass("remove-btn");

                            removeBtn.on("click", function() {
                                imgWrapper.remove();
                                selectedFiles = selectedFiles.filter(f => f.name !== file.name);
                            });

                            imgWrapper.append(img).append(removeBtn);
                            $("#imagePreview").append(imgWrapper);
                        };
                        reader.readAsDataURL(file);
                    }
                });

                $(this).val(""); // Permet de re-sélectionner la même image
        });

        $('#uploadBtn').on('click',function(){
            $("#formCategorie").submit();
        })
        // Envoi des images via AJAX
        $("#formCategorie").on("submit", function(e) {
            e.preventDefault();
            {{-- if (selectedFiles.length === 0) {
                notifDanger("Aucune image sélectionnée !");
                return;
            } --}}
            if ($("#imagePreview").is(':empty')) {
                notifDanger("Aucune image sélectionnée !");
                return;
            }

            let formData = new FormData(this);
            formData.append('_token', "{{ csrf_token() }}");
            selectedFiles.forEach((file, index) => {
                    formData.append("images[]", file);
            });

            $.ajax({
                url: "{{route('categorie.add')}}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                
                success: function(response) {
                    if (response.error == false) {
                        notifSuccess(response.messages)
                        $("#modalCategorie").modal("hide")
                        window.location.reload()
                        $("#imagePreview").empty(); 
                        selectedFiles = []; 
                        $(this)[0].reset(); 
                        return false

                        
                    }
                    
                },
                error: function(xhr) {
                    notifDanger(response.responseJSON.messages)
                }
            });
        });

        $(document).on('click', '.deleteBtn', function(e) {
            e.preventDefault();
           
            let iddoc = $(this).data('id');
           const imgWrapper = $(this).parent();
          
            $.ajax({
                type: "GET",
                url: "{{route('categorie.deleteImage')}}",
                data: {iddoc:iddoc},
                dataType: "JSON",
                success: function (resp) {
                      imgWrapper.remove(); // Supprimer l'image de l'affichage
                },
                error: function (resp) {
                    notifDanger(resp.responseJSON.messages)
                }
            });
        });

        
    })

    function RecuperationProduit(id){

             $.ajax({
            type: "GET",
            url: "{{route('categorie.get')}}",
            data: {Cat_id : id},
            dataType: "JSON",
            success: function (resp) {
               $('#rang').val(resp.data[0].position)
               $('#cat').val(resp.data[0].libelleCategorieProduit)
               $('#Cat_id_Hidden').val(resp.data[0].idcategorie_produit)

                $("#imagePreview").empty(); // Nettoyer l'affichage avant d'ajouter de nouvelles images
                $.each(resp.data[0].iconImage, function(index, value) {
                    const imgWrapper = $("<div>").addClass("image-wrapper");
                    const img = $("<img>").attr("src", "../"+value.urlDoc).addClass("image-preview");
                    const removeBtn = $("<button >").html("&times;").addClass("remove-btn deleteBtn");
                    removeBtn.attr("data-id", value.iddocument); // Ajouter l'ID de l'image à supprimer

                    {{-- removeBtn.on("click", function() {
                        imgWrapper.remove();
                        selectedFiles = selectedFiles.filter(f => f.name !== value.name);
                    }); --}}

                    imgWrapper.append(img).append(removeBtn);
                    $("#imagePreview").append(imgWrapper);
                });
                

               $('#modalCategorie').modal('show')
               
            }
           });
    }
    
    </script>
@endsection