@extends("../dashboard._blank")

@section("sidebar")
    @include("../dashboard._sidebar")
@endsection

@section("css_add")
    <link rel="stylesheet" href="{{ asset('css/investment-payment-modern.css') }}">
    <style>
        .error {
            color: red;
        }

        .inputfile {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }

        .inputfile + label {
            font-size: 1em;
            display: inline-block;
            cursor: pointer;
        }

        .inputfile:focus + label {
            outline: 1px dotted #000;
            outline: -webkit-focus-ring-color auto 5px;
        }

        #upload:hover, #upload2:hover {
            color: #6d8f1a;
            border: #6d8f1a 2px solid;
        }

        #selectedFiles img, #selectedFiles2 img {
            max-width: 125px;
            max-height: 125px;
            float: left;
            margin-bottom: 10px;
        }
    </style>
@endsection

@section("content")
    <div class="right_col payment-page-wrapper">
        <!-- ALERTS SECTION -->
        @if ($errors->any())
            <div class="payment-alert payment-alert-danger" style="margin: 0 30px 20px 30px;">
                <ul style="margin: 0; padding: 0;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if(session("success"))
            <div class="payment-alert payment-alert-success" style="margin: 0 30px 20px 30px;">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @elseif(session("error"))
            <div class="payment-alert payment-alert-danger" style="margin: 0 30px 20px 30px;">
                <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
            </div>
        @endif

        <!-- PAGE HEADER -->
        <div class="payment-header">
            <h2 class="payment-header-title">
                <i class="fas fa-newspaper"></i>
                Actualités pour le Projet
            </h2>
            <p class="payment-header-subtitle">
                Projet: <strong>{{ $project->titre }}</strong>
            </p>
        </div>

        <!-- ACTION BAR -->
        <div style="padding: 0 30px;">
            <div class="payment-action-bar">
                <button type="button" class="payment-btn payment-btn-info" data-toggle="tooltip"
                        data-placement="top"
                        title="Veuillez consulter votre profile pour modifier les informations reliées à votre compte annonceur">
                    <i class="fas fa-info-circle"></i>
                    Information
                </button>
                <button onclick="reset()" id="add_article" data-toggle="modal" data-target="#articleModal"
                        class="payment-btn payment-btn-primary">
                    <i class="fas fa-plus-circle"></i> 
                    Ajouter une actualité
                </button>
            </div>
        </div>

        <!-- NEWS HISTORY SECTION -->
        <div style="padding: 0 30px 30px;">
            <div class="payment-history-container">
                <div class="payment-history-header">
                    <i class="fas fa-list"></i>
                    <h3>Liste des actualités</h3>
                </div>

                @if($actualites->count() > 0)
                    <table class="payment-history-table">
                        <thead>
                            <tr>
                                <th>N°</th>
                                <th>Image</th>
                                <th>Titre</th>
                                <th>Résumé</th>
                                <th>Visibilité</th>
                                <th>Publication</th>
                                <th>Créé le</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i=1; @endphp
                            @foreach($actualites as $actualite)
                                <tr>
                                    <td>
                                        <span class="payment-reference">{{ $i }}</span>
                                    </td>
                                    <td>
                                        <img src="{{ $actualite->image }}" width="40" height="40" alt="" style="border-radius: 4px;">
                                    </td>
                                    <td>
                                        <span class="payment-reference">{{ $actualite->title }}</span>
                                    </td>
                                    <td>
                                        <span class="payment-reference">{{ substr($actualite->resume,0,50) }}...</span>
                                    </td>
                                    <td>
                                        <a href="javascript:void(0)"
                                           onclick="visibility(@if($actualite->status) 'désactiver' @else 'activer' @endif,'{{ route("investment.article.visibility",[$actualite->slug]) }}')">
                                            @if($actualite->status) 
                                                <span class="payment-status-badge payment-status-completed">
                                                    <i class="fas fa-eye"></i> Visible
                                                </span>
                                            @else
                                                <span class="payment-status-badge payment-status-pending">
                                                    <i class="fas fa-eye-slash"></i> Désactivé
                                                </span>
                                            @endif
                                        </a>
                                    </td>
                                    <td>
                                        <a href="javascript:void(0)"
                                           onclick="visibility(@if($actualite->status) 'rendre privé' @else 'rendre public' @endif,'{{ route("investment.article.publish",[$actualite->slug]) }}')">
                                            @if($actualite->status) 
                                                <span class="payment-status-badge payment-status-completed">
                                                    <i class="fas fa-globe"></i> Public
                                                </span>
                                            @else
                                                <span class="payment-status-badge payment-status-pending">
                                                    <i class="fas fa-lock"></i> Privé
                                                </span>
                                            @endif
                                        </a>
                                    </td>
                                    <td>
                                        <span class="payment-date">{{ date("d/m/Y H:i", strtotime($actualite->created_at)) }}</span>
                                    </td>
                                    <td>
                                        <div style="display: flex; gap: 8px;">
                                            <a title="Détail" data-slug="{{ $actualite->slug }}"
                                               class="detail_data payment-btn payment-btn-info payment-btn-sm">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a title="Supprimer"
                                               href="{{ route('investment.actualite.delete',$actualite->slug) }}"
                                               class="delete-action payment-btn payment-btn-danger payment-btn-sm">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @php $i++; @endphp
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="payment-empty-state">
                        <i class="fas fa-newspaper"></i>
                        <h4>Aucune actualité enregistrée</h4>
                        <p>Les actualités apparaîtront ici une fois qu'elles seront ajoutées.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div id="articleModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <form name="actualite_form" method="post" id="actualite_form" enctype="multipart/form-data"
                  action="{{ route("investment.article") }}">
                @csrf

                <div class="modal-content" style="border-radius: 0;">
                    <!-- Modal Header -->
                    <div class="payment-modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-plus-circle"></i>
                            <span id="textTitleModel">Ajouter</span> une nouvelle actualité
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <div class="payment-modal-body">

                        <div>
                            <div class="row">
                                <div class="text-center col-12" id="image_article">
                                    <h6 class="col-sm-12 col-xs-12">Ajouter une image de capacités inférieure ou égale
                                        à
                                        2MB. Les images lourdes ralentirons votre espace de vente.</h6>
                                    <div class="col-sm-12 col-xs-12 text-center mb-2">
                                        <div class="text-center" id="list_img_">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3 col-xs-12"></div>
                                        <div class="col-lg-6 col-xs-12">
                                            <input type="file" accept="image/*" name="image" id="file" class="inputfile"
                                                   data-multiple-caption="{count}  fichiers choisis"/>
                                            <label for="file"
                                                   style="background: #060e1c;color: #fff;border: 1px double #060e1c;"
                                                   class="form-control col-form-label text-center text-sm-center btn subs_btn"><i
                                                    id="upload" class="fa fa-upload col-2"></i>
                                                <span id="lab"
                                                      style="color: #fff;"> Mettre une image en avant </span></label>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-md-12 col-xs-12">
                                    <label>Titre </label><span style="color: red"> (requis)</span><br>
                                    <input type="text" id="titre"
                                           name="title" class="form-control"
                                           placeholder="Titre" style="width: 100%;" value="">
                                </div>

                                <div class="form-group col-md-12 col-xs-12">
                                    <label>
                                           <input type="checkbox" checked> Rendre public cette actualité
                                    </label>
                                </div>

                                <div class="form-group col-md-12 col-xs-12">
                                    <label>Type </label><span style="color: red"> (requis)</span><br>
                                    <select class="form-control" name="type" id="type" required>
                                        <option value="texte">texte</option>
                                        <option value="video">video</option>
                                        <option value="image">image</option>
                                        <option value="audio">audio</option>
                                        <option value="audio">document</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Résumé </label>
                                  <textarea name="resume" id="resume" class="form-control" required="required" style="width: 100%" rows="2"
                                            minlength="100" placeholder="Bref apperçu de l'article"></textarea>
                                </div>

                                <div id="texte" class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Contenu de l'article </label>
                                    <textarea name="contenu" id="contenu" required="required"
                                              style="width: 100%" rows="5" minlength="100"
                                              placeholder="Votre article"></textarea>
                                </div>

                                <div id="vid_file" class="form-group col-md-12 col-sm-12 col-xs-12" style="display: none">
                                    <label class="text-uppercase">Lien (vous pouvez ajouter autant de liens que vous souhaitez. Les liens devraient être séparé par un <strong>(|)</strong>) <br>
                                        exemple : https://image.png | https://cooler.image.png - ... 
                                    </label>
                                    <textarea name="link" required="required" class="form-control"
                                              style="width: 100%" rows="5" minlength="100"
                                              placeholder="Vos liens"></textarea>
                                    <input type="hidden" value="{{ $project->id }}"  class="form-control" name="project_id">
                                </div>

                            </div>
                            <input type="hidden" name="id" id="id">
                        </div>
                        <!-- Modal Footer -->
                        <div class="payment-modal-footer">
                            <button type="button" class="payment-btn payment-btn-danger" data-dismiss="modal">
                                <i class="fas fa-times"></i> Fermer
                            </button>
                            <button type="submit" name="action" id="action_add_article" class="payment-btn payment-btn-primary">
                                <i class="fas fa-check"></i> Enregistrer
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="articleDetail" class="modal fade">
        <div class="modal-dialog modal-lg">

            <div class="modal-content" style="border-radius: 0px;">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fa fa-plus"></i>
                        <span>Détails</span></h4>

                </div>
                <div class="modal-body pt-4">
                    <div class="col-12">        
                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Résumé </label>
                            <textarea name="detail_resume" id="detail_resume" cols="30" class="form-control"
                                      rows="5"></textarea>
                        </div>

                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Contenu de l'article </label>
                            <div id="detail_contenu" class=""></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="modal-footer">

                            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Fermer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="https://cdn.tiny.cloud/1/vfv84428cr1epmkh83aotqs1oquqq1svbhtkdrlok7m85r6d/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        tinymce.init({
            selector: '#contenu',
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            height:500,
            toolbar_mode: 'floating',
            menubar: true
        });
        // $('textarea').tinymce({
        //     height: 200,
        //
        //
        //     toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
        // });

        function reset() {
            $("#textTitleModel").html("Ajouter");
        }

        function visibility(text, url) {
            $.Zebra_Dialog('Etes vous sur de vouloir ' + text + ' cette publication ?', {
                'type': 'question',
                'title': 'Mise à jour ',
                'buttons': [
                    {
                        caption: 'Oui', callback: function () {

                            window.location.href = url;

                        }
                    }, {
                        caption: 'Non', callback: function () {
                            $.notify('Mise à jour annuler', 'error')
                        }
                    }
                ]
            });
        }

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

            })
            $(document).on('change', '#type', function (e) {
                let val=$(this).val();
                console.log(val,'*****')
                if(val==='texte'){
                    $('#vid_file').fadeOut('fast',function(){
                        $('#texte').fadeIn('fast')
                    })
                }else{
                    $('#texte').fadeOut('fast',function(){
                        $('#vid_file').fadeIn('fast')
                    })
                }
            })

            $("form[name='actualite_form']").validate({
                rules: {
                    title: "required",
                },
                messages: {
                    title: "Champ requis",
                },
                submitHandler: function (form) {
                    $('#action_add_article').attr('disabled', true);
                    $('#action_add_article').val('Patientez ...');
                    $('form#actualite_form').submit();
                }
            });

            $(document).on('click', '.modifier_actualite', function () {
                let slug = $(this).attr("data-slug");
                console.log(slug);
                $.ajax({
                    url: "{{route('actualite.get_actualite')}}",
                    method: 'post',
                    data: {slug: slug},
                    success: function (result) {
                        $("#textTitleModel").html("Modifier");
                        $("#titre").attr("value", result.data.titre);
                        $("#resume").val(result.data.resume);
                        $("#contenu").val(result.data.contenu);
                        $("#id").val(result.data.id);
                        $('#articleModal').modal('show');
                    },
                    error: function (result) {

                    },

                });
            });
            $(document).on('click', '.detail_data', function () {
                let slug = $(this).attr("data-slug");
                console.log(slug);
                $.ajax({
                    url: "{{route('investment.article.details')}}",
                    method: 'post',
                    data: {slug: slug},
                    success: function (result) {
                        $("#detail_title").val(result.data.title);
                        $("#detail_resume").val(result.data.resume);
                        if(result.data.type==='texte'){
                            $("#detail_contenu").html(result.data.contenu);
                        }else{
                            $("#detail_contenu").html(result.data.link);
                        }
                        $('#articleDetail').modal('show');
                    },
                    error: function (result) {

                    },

                });
            });


        })
    </script>

@endsection