@extends('model')

@section('content')
    <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">Notifications</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <button class="btn btn-primary btn-wave me-0" id="callModal" data-bs-toggle="modal" data-bs-target="#exampleModal">
                <i class="bx bx-plus-circle me-1"></i> Ajouter une notification
            </button>
        </div>
    </div>
    <!-- End::page-header -->

    <div class="card custom-card overflow-hidden">

        <div class="card-body p-2 px-3">

            <table class="table table-hover text-nowrap w-100" id="tableListeNotification">
                <thead>
                    <tr>
                        <th data-column="" class="text-center">Actions</th>
                        <th data-column="" data-class="text-start" class="text-center">images</th>
                        <th data-column="" data-class="text-start" class="text-center">Titre</th>
                        <th data-column="" data-class="text-start" class="text-center">message</th>
                        <th data-column="" data-class="text-start" class="text-center">statut</th>
                        <th data-column="" data-class="text-start" class="text-center">destinataire</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Notification</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <form id="notificationForm" class="needs-validation p-0" method="POST" novalidate>

                        @csrf
                        <div
                            style="display:block; margin: 0 auto; border:2.5px solid #F6C0BA; width:100px; height:100px; border-radius:60px; margin-bottom:12px;">

                            <div id="PhotoZone" class="PhotoZone"
                                style="display:block; margin: 0 auto; border:1px dashed #F6C0BA; width:85px; height:85px; border-radius:60px; margin-top:5px;">
                                <img class="imgPhoto" src="">
                                <input type="file" id="photo" accept="image/*" class="inputPhoto"
                                    name="photoNotification" hidden>
                            </div>

                            <div id="RemovePicture" style="display:none;background:#E02E1C"
                                class="animate animated animate__bounceIn cursor-pointer"> <i class="fa fa-times"
                                    style="postion:absolute;margin-left:10px;margin-top:8px;color:#fff"></i>
                            </div>

                        </div>

                        <div class="row">

                            <div class="col-xl-12 mb-2">
                                <input type="text" class="form-control" name="titre" placeholder="Titre" id="titre"
                                    required />
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                                <input type="hidden" value="0" class="form-control" name="idCache" placeholder="Titre"
                                    id="idCache" />
                            </div>
                            
                            <div class="col-xl-12 mb-2">
                                <select class="form-control" name="utilisateur" id="userSelect2"></select>
                            </div>

                            <div class="col-xl-12">
                                <textarea rows="5" class="form-control" id="message" name="message" placeholder="texte..." required></textarea>
                                <div class="invalid-feedback">
                                    Champ obligatoire
                                </div>
                            </div>

                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </div>

                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {

            $('#tableListeNotification').DataTable({
                responsive: true,
                language: languageTable,
                "pageLength": 10,
                columnDefs: [{
                    targets: [0, 1, 4],
                    className: 'text-center'
                }]
            });

            recuperation()
            remplirSelect2("{{ route('listeDeTousLesUtilisateursClientSimple') }}", null, "#userSelect2", "idusers",
                "nom_prenoms", "#exampleModal");

            $('#callModal').on('click', function() {
                $('.imgPhoto').css("display", "none")
                $('#userSelect2').val(0).trigger('change')
                $('#titre').val("")
                $('#idCache').val(0)
                $('#message').val("")
            })
            $('#notificationForm').on('submit', function(e) {

                if (!$(this)[0].checkValidity()) {

                    $(this).addClass(
                    'was-validated'); // Ajoutez la classe 'was-validated' pour activer les styles de validation Bootstrap
                    e.preventDefault(); // Empêchez la soumission normale du formulaire
                    e.stopPropagation(); // Arrêtez la propagation de l'événement
                } else {
                    e.preventDefault();

                    $.ajax({
                        type: "POST",
                        url: "{{ Route('notification.create') }}",
                        data: new FormData(this),
                        dataType: "JSON",
                        contentType: false,
                        processData: false,
                        success: function(resp) {
                            $('#exampleModal').modal('hide');
                            recuperation()
                            notifSuccess(resp.msg)
                            $('#notificationForm').removeClass('was-validated');
                            $('#notificationForm')[0].reset();
                        }
                    });

                }
            })

        })

        $(document).on('click', '#modifierNotification', function() {
            var Getid = $(this).data('id')
            recuperation(Getid)
        })



        $(document).on('click', '#supprimerNotification', 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('notification.delete') }}",
                        data: {
                            idnotification: Getid
                        },
                        dataType: "JSON",
                        success: function(resp) {
                            notifSuccess(resp.msg)
                            recuperation()
                        }
                    });

                }
            })


        })

        function recuperation($id = null) {
            var table = $('#tableListeNotification').DataTable()
            $.ajax({
                type: "GET",
                url: "{{ route('notification.get') }}",
                data: {
                    idnotification: $id
                },
                dataType: "JSON",
                success: function(resp) {

                    if ($id != null) {
                        $('#titre').val(resp.data[0].titre)
                        $('#userSelect2').val(resp.data[0].iduser).trigger('change')
                        $('#message').val(resp.data[0].message)
                        $('#idCache').val(resp.data[0].idnotification)
                        $('.imgPhoto').css("display", "block")
                        $('.imgPhoto').attr("src", "../" + resp.data[0].urlDoc)

                        $('#exampleModal').modal('show');
                    } else {

                        table.clear().draw();
                        $.each(resp.data, function(key, row) {

                            let statut = '';
                            let img = '';
                            let destinataire = ''

                            if (row.iduser > 0) {
                                destinataire = row.nom + ' ' + row.prenoms
                            } else {
                                destinataire = 'TOUS'
                            }
                            if (row.statut == 1) {
                                statut =
                                    '<span class="badge bg-primary3 fs-9" style="width : 80px;"> <i class="ri-discount-percent-line fs-10"></i> &nbsp; Envoyé</span>'
                            }
                            if (row.statut == 2) {
                                statut =
                                    '<span class="badge bg-primary3 fs-9" style="width : 80px;"> <i class="ri-discount-percent-line fs-10"></i> &nbsp; Supprimer</span>'
                            }

                            img = '<img src="../' + row.urlDoc +
                                '" style="width:30px;border-radius:20px"/>'
                            table.row.add([
                                '<div class="d-flex justify-content-center ">\
                    <button id="supprimerNotification" data-id="' + row.idnotification + '"  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="modifierNotification" data-id="' + row.idnotification + '" class="btn btn-outline-teal p-1 pt-1 pb-0 align-self-center me-2">\
                        <i class="bx bx-edit" style="font-size : 14px;"></i>\
                    </button>\
                    </div>',
                                img,
                                row.titre,
                                row.message,
                                statut,
                                destinataire
                            ])

                        })

                        table.draw()
                    }


                }
            });
        }
    </script>

    <script>
        var photoZone = document.querySelector('.PhotoZone');
        var inputPhotoPersonnel = document.querySelector('.inputPhoto');
        var ImgPhotos = document.querySelector('.imgPhoto');
        photoZone.addEventListener('click', () => {
            inputPhotoPersonnel.click();

        })

        inputPhotoPersonnel.addEventListener('change', function() {
            var clickFile = this.files[0];
            if (clickFile) {
                ImgPhotos.style = "display:block";
                var reader = new FileReader();
                reader.readAsDataURL(clickFile);
                reader.onloadend = function() {
                    var result = reader.result;
                    let src = this.result;
                    ImgPhotos.src = src;
                    ImgPhotos.alt = clickFile.name
                }

            }

        })
    </script>
@endsection