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

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

@section("css_add")
    <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;
        }

        .inputfile:focus + label,
        .inputfile + label:hover {
        }

        .inputfile + label {
            cursor: pointer; /* "hand" cursor */
        }

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

        #upload:hover {
            color: #D40025;
            border: #D40025 2px solid;
        }

        #selectedFiles img {
            max-width: 125px;
            max-height: 125px;
            float: left;
            margin-bottom: 10px;
        }

        #upload2 {
        }

        #upload2:hover {
            color: #D40025;
            border: #D40025 2px solid;
        }

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

@section("content")

    <style>
        @media (min-width: 768px) {
            .form-horizontal .control-label {
                text-align: left;
            }
        }

        .btn {
            border-radius: 0px;
        }

        .contact {
            border: 1px solid #ddd;
            border-radius: 50px;
        }
    </style>
    <style>
        .item img {
            width: 100%;
        }

        .pace {
            -webkit-pointer-events: none;
            pointer-events: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        .pace-inactive {
            display: none;
        }

        .contact {
            border: 1px solid #ddd;
            border-radius: 50px;
        }

        .pace .pace-progress {

            background: #88b121;

            position: fixed;
            z-index: 2000;
            top: 0;
            right: 100%;
            width: 100%;
            height: 2px;
        }

        .pace .pace-progress-inner {
            display: block;
            position: absolute;
            right: 0px;
            width: 100px;
            height: 100%;

            box-shadow: 0 0 10px #88b121, 0 0 5px #88b121;

            opacity: 1.0;
            -webkit-transform: rotate(3deg) translate(0px, -4px);
            -moz-transform: rotate(3deg) translate(0px, -4px);
            -ms-transform: rotate(3deg) translate(0px, -4px);
            -o-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
        }

        .pace .pace-activity {
            display: block;
            position: fixed;
            z-index: 2000;
            top: 15px;
            right: 15px;
            width: 14px;
            height: 14px;
            border: solid 2px transparent;

            border-top-color: #88b121;
            border-left-color: #88b121;

            border-radius: 10px;
            -webkit-animation: pace-spinner 400ms linear infinite;
            -moz-animation: pace-spinner 400ms linear infinite;
            -ms-animation: pace-spinner 400ms linear infinite;
            -o-animation: pace-spinner 400ms linear infinite;
            animation: pace-spinner 400ms linear infinite;
        }

        @-webkit-keyframes pace-spinner {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-moz-keyframes pace-spinner {
            0% {
                -moz-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -moz-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-o-keyframes pace-spinner {
            0% {
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-ms-keyframes pace-spinner {
            0% {
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes pace-spinner {
            0% {
                transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .chosen-container-single .chosen-single {
            height: 38px;
            background: none;
            border-radius: 0px;
            line-height: 38px;
        }

        .chosen-container-single .chosen-single div {
            margin-top: 8px;
        }

        #button {
            display: block;
            margin: 20px auto;
            padding: 10px 30px;
            background-color: #eee;
            border: solid #ccc 1px;
            cursor: pointer;
        }

        #overlay {
            position: fixed;
            top: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }

        .cv-spinner {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px #ddd solid;
            border-top: 4px #2e93e6 solid;
            border-radius: 50%;
            animation: sp-anime 0.8s infinite linear;
        }

        @keyframes sp-anime {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(359deg);
            }
        }

        .is-hide {
            display: none;
        }

        ul {
            list-style-type: none;
        }

        li {
            display: inline-block;
        }

        input[type="checkbox"][id^="myCheckbox"] {
            display: none;
        }

        label {
            border: 1px solid #fff;
            padding-top: 10px;
            display: block;
            position: relative;
            margin-top: 10px;
            font-weight: bold;

        }

        label:before {
            background-color: white;
            color: white;
            content: " ";
            display: block;
            border-radius: 50%;
            border: 1px solid grey;
            position: absolute;
            top: -5px;
            left: -5px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 28px;
            transition-duration: 0.4s;
            transform: scale(0);
        }

        label img {
            height: 100%;
            width: 100%;
            transition-duration: 0.2s;
            transform-origin: 50% 50%;
        }

        :checked + label {
            border-color: #ddd;
        }

        :checked + label:before {
            content: "✓";
            background-color: grey;
            transform: scale(1);
        }

        :checked + label img {
            transform: scale(0.9);
            /* box-shadow: 0 0 5px #333; */
            z-index: -1;
        }

        .card-1 {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        }

        .card-1:hover {
            box-shadow: 0 14px 28px rgba(6, 14, 28, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
            transition: all 1000ms ease;
        }


        .card-3:hover {
            box-shadow: 0 14px 28px rgba(6, 14, 28, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
            transition: all 1000ms ease;
        }

        select {
            margin-left: 0px;
        }

        p a {
            font-size: 10pt;
            font-family: 'Montserrat';
            border-bottom: none;
            background: none;
        }

        p a i {
            color: #fff;
        }

        p a:hover {
            color: #2A3F54;
            font-weight: bold;
            font-size: 10pt;
            background: none;

        }

        .carousel-item {
            height: 100%;
        }

        .carousel-caption h5 {
            font-size: 15pt;
            color: #000;
        }

        .panel {
            padding: 3%;
            text-align: left;
            color: #000;
            font-size: 15pt;
        }

        .panel .count {
            font-size: 15pt;
            padding: 2% 3%;
            text-align: left;
            border-radius: 50px;
            color: #000;
        }

        .card-1 {
            text-align: left;
            border: none;
        }

        .myslick {
            max-width: 350px !important;
            border: 1px solid #ddd;
            box-shadow: 0 1px 5px rgba(6, 14, 28, 0.25), 0 1px 1px rgba(0, 0, 0, 0.22);
            padding: 15px;
            border-radius: 10px
        }

        .btn-success {
            background: #88b121;
        }
    .open>.dropdown-menu{
        display: grid;
    }
    </style>
    <div class="right_col" role="main">

        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title" style="padding-left: 20px;">
                        <h5 class="col-md-12 col-sm-12 col-xs-12"> Les investissements sur le Projet
                            : <strong>{{$project->titre}}</strong>  
                        </h5>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if(session("success"))

                            <div class="alert alert-success">
                                {{session('success')}}
                            </div>

                        @elseif(session("error"))
                            <div class="alert alert-danger">
                                {{session('error')}}
                            </div>
                        @endif
                        <div class="row">
                            <div class="col-lg-12">
                                <a href="{{ route('admin.investment.add.post',$project->slug) }}" style="background:#000; color : #fff" type="button" class="btn btn-dark btn-sm">
                                <i class="fa fa-plus-circle"></i>
                                Ajouter des investisseurs
                                </a> &nbsp;
                                <a href="{{ route('admin.investment.rapport',$project->slug) }}" class="btn btn-sm btn-warning"> <i class="fa fa-file-download"></i> Télécharger rapport global</a>
                            </div>
                        </div>
                        <div class="row">
                            <a href="javascript:void(0)" class="col-md-6 col-lg-3 col-sm-6 col-xs-6">
                                <div class="panel card-1 text-left" style="">
                                    <h5>Montant Total Versé à Ce Jour :</h5>
                                    {{$project->total_contribution}} XOF
                                </div>
                            </a>
                           <a href="javascript:void(0)" class="col-md-6 col-lg-3 col-sm-6 col-xs-6">
                                <div class="panel card-1  text-left" style="">
                                    <h5>Nombre D'investisseurs :</h5>
                                    {{count($project->contributions)}}
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="col-md-6 col-lg-3 col-sm-6 col-xs-6">
                                <div class="panel card-1  text-left" style="">
                                    <h5>Total Gain à Remboursé :</h5>
                                    {{$project->total_gain}} XOF
                                </div>
                            </a>
                           
                           <a href="javascript:void(0)" class="col-md-6 col-lg-3 col-sm-6 col-xs-6">
                                <div class="panel card-1  text-left" style="">
                                    <h5>Total Gain + Capital à Remboursé :</h5>
                                    {{$project->total_rsi}} XOF
                                </div>
                            </a>
                             <a href="javascript:void(0)" class="col-md-6 col-lg-3 col-sm-6 col-xs-6">
                                <div class="panel card-1 text-left">
                                    <h5>Debut Remboursement Des Gains :</h5>
                                    {{$project->start_remboursment}}
                                </div>
                            </a>  
                            <a href="javascript:void(0)" class="col-md-6 col-lg-3 col-sm-6 col-xs-6">
                                <div class="panel card-1 text-left">
                                    <h5>Date Remboursement Du Capital :</h5>
                                    {{$project->retour_capital}} 
                                </div>
                            </a>

                            <a href="javascript:void(0)" class="col-md-6 col-lg-3 col-sm-6 col-xs-6">
                                <div class="panel card-1 text-left">
                                    <h5>Total Gain Remboursé :</h5>
                                    {{$project->total_remboursement}} XOF
                                </div>
                            </a>

                            <a href="javascript:void(0)" class="col-md-6 col-lg-3 col-sm-6 col-xs-6">
                                <div class="panel card-1 text-left">
                                    <h5>Reste à Remboursé :</h5>
                                    {{$project->total_rsi - $project->total_remboursement}} XOF
                                </div>
                            </a>

                        </div>
                                @if(intval($project->start_remboursment) === intval(date('Y')))
                                    <form 
                                        @if(intval($project->start_remboursment)===intval(date('Y')))
                                            action="{{ route('investment.remboursement.global') }}"
                                        @endif
                                        method="post">
                                            @csrf
                                            @if(intval($project->start_remboursment)===intval(date('Y')))
                                            <input type="hidden" name="project_id" value="{{ $project->id }}">
                                            <input type="hidden" name="year" value="{{ date('Y')}}">
                                            <input type="hidden" name="type" value="gain">
                                            @endif
                                        <button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip"
                                        data-placement="top"
                                        title="Éffectuer la distribution des gains une date la date limite du projet est atteint. Noter que les remboursements ne seront faites que pour les clients ayant finalisé les paiements.">
                                        <i class="fa fa-info-circle"></i>
                                        </button>
                                        <button type="submit" @if(intval($project->start_remboursment)!==intval(date('Y'))) disabled @endif
                                                class="btn btn-primary btn-sm">
                                            <i class="fa fa-plus-circle"></i>
                                            Remboursement globale des gains sur l'année {{ intval(date('Y')) }}
                                        </button>    
                                    </form>
                                @endif
                                @if(intval($project->retour_capital) === intval(date('Y')))
                                    <form 
                                            @if(intval($project->retour_capital)===intval(date('Y')))
                                                action="{{ route('investment.remboursement.global') }}"
                                            @endif
                                            method="post">
                                                @csrf
                                                @if(intval($project->retour_capital)===intval(date('Y')))
                                                <input type="hidden" name="project_id" value="{{ $project->id }}">
                                                <input type="hidden" name="year" value="{{ date('Y')}}">
                                                <input type="hidden" name="type" value="capital">
                                                @endif
                                            <button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip"
                                                data-placement="top"
                                                title="Éffectuer la distribution des gains une date la date limite du projet est atteint ">
                                                <i class="fa fa-info-circle"></i>
                                            </button>
                                            <button type="submit" @if(intval($project->retour_capital)!==intval(date('Y'))) disabled @endif
                                                    class="btn btn-primary btn-sm">
                                                <i class="fa fa-plus-circle"></i>
                                                Remboursement  capital 
                                            </button>    
                                    </form>
                                @endif
                        <div class="row">
                            <table id="articledatatable-buttons" class="table table-responsive-xs table-bordered">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Status de paiement</th>
                                    <th>Status de remboursement</th>
                                    <th>Investisseur</th>
                                    <th>Nombre d'action</th>
                                    <th>Capital Total A Payer</th>
                                    <th>Capital Total Payer</th>
                                    <th>Capital Total Restant à payer</th>
                                    <th>Type Paiement</th>
                                    <th>% Gain</th>
                                    <th>Total Gain</th>
                                    <th>RSI</th>
                                    <th>Investis le </th>
                                </tr>
                                </thead>
                                <tbody>
                                @php $i=1; @endphp
                                @foreach($project->contributions as $contribution)
                                    @php
                                        $payments = $contribution->payment_logs;
                                        $payment_sum=0;
                                        $month_sum=0;
                                        if(isset($payments) && count(payments) > 0){
                                            foreach($payments as $payment){
                                                $payment_sum += $payment->montant;
                                                $month_sum += $payment->number_month_paid;
                                            }
                                        }
                                    @endphp
                                    <tr>
                                        
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-light btn-sm dropdown-toggle" style="display: inline-flex;" type="button" data-toggle="dropdown">action  <i style="margin-top: 4px;margin-left: 3px;" class="fa fa-chevron-down"></i> </button>
                                                <ul class="dropdown-menu" >
                                                    @if($contribution->type_payment=='virement' && !$contribution->active && !$contribution->investissement_payment_status)
                                                    <li><a href="{{ route('investment.versement.validation',$contribution->slug) }}">Validé le virement</a></li>
                                                    @endif
                                                    <li><a href="{{ route('admin.investment.payment.index',$contribution->slug) }}">Détails des Paiements</a></li>
                                                    @if($contribution->investissement_payment_status)
                                                        <li><a href="{{ route('investment.remboursement.index',$contribution->slug) }}">Détails des Remboursements</a></li>
                                                    @endif
                                                </ul>
                                            </div>
                                        </td>
                                        <td>
                                            @if (!$contribution->investissement_payment_status)
                                                <span class="badge badge-warning">paiement en cours</span>
                                            @else
                                                <span class="badge badge-success">paiement finalisé</span>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="javascript:void(0)">
                                                @switch($contribution->statut)
                                                    @case("investir")
                                                    <span class="badge"
                                                          style="background-color: orange">En attente</span>
                                                    @break
                                                    @case("gain_envoyer")
                                                    <span class="badge"
                                                          style="background-color: #4ddb17">Terminé</span>
                                                    @break

                                                @endswitch
                                            </a>
                                        </td>
                                        <td class="user_data" data-user="{{json_encode($contribution->user) }}">{{$contribution->user->first_name}} {{$contribution->user->last_name}} </td>
                                        <td>{{ $contribution->part }}</td>
                                        <td>
                                            <span style="font-weight: bold">{{$contribution->part*$project->action_prix}} XOF</span> 
                                            @if($project->obligation_mensuel==='mensuel' && $project->support_investissement!='actionnariat')
                                                <br> 
                                                <span class="badge badge-info">sur {{ $project->nbre_obligation_mensuelle_paiement }} mois</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span style="font-weight: bold">{{$contribution->montant}} XOF</span> 
                                            @if($project->obligation_mensuel==='mensuel'  && $project->support_investissement!='actionnariat')<br>
                                           
                                                <span class="badge badge-success">
                                                    sur {{!$contribution->investissement_payment_status ? $contribution->number_month_paid : $project->nbre_obligation_mensuelle_paiement }} mois
                                                </span>
                                           

                                            @endif 
                                        </td>
                                        <td>
                                            @if ($contribution->investissement_payment_status)
                                            <span class="badge badge-success">0</span>
                                            @else
                                                <span style="font-weight: bold">{{($contribution->part*$project->action_prix) - ($contribution->montant)}} XOF</span>
                                                @if($project->obligation_mensuel==='mensuel' && $project->support_investissement!='actionnariat')<br>
                                                    <span class="badge badge-warning">
                                                   sur {{ $project->nbre_obligation_mensuelle_paiement - $contribution->number_month_paid }} mois
                                                    </span> 
                                                @endif
                                            @endif
                                        </td>
                                        <td>{{ $contribution->type_payment }} <br>
                                            @if($contribution->type_payment=='virement')
                                                <a href="{{ $contribution->receipt }}" target="_blank"> voir reçu</a>
                                            @endif
                                        </td>
                                        <td>{{ $project->pourcentage_gain }} %</td>
                                        <td>
                                            {{ 
                                                (intVal((($project->action_prix * $contribution->part)*($project->pourcentage_gain/100)) * $project->date_gain ))    
                                            }} XOF
                                        </td>
                                        <td><span style="color: darkred; font-weight: bold">
                                            {{
                                                (intVal($project->action_prix * $contribution->part)+intVal((($project->action_prix * $contribution->part)*($project->pourcentage_gain/100)) * $project->date_gain ))
                                            }}
                                            XOF</span>
                                        </td>
                                        
                                        <td>{{date("d-m-Y h:i:s",strtotime($contribution->created_at))}}</td>
                                    </tr>
                                    @php $i++; @endphp
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('dashboard.paiement_box.choose')

@endsection

@section('script')

    <script src="https://cdn.tiny.cloud/1/imnai4k01hp1s5jemj6974k5x25h7ncbmq8osv1jnlq0i4rs/tinymce/5/tinymce.min.js"
            referrerpolicy="origin"></script>
    <script
            src="https://cdn.tiny.cloud/1/imnai4k01hp1s5jemj6974k5x25h7ncbmq8osv1jnlq0i4rs/tinymce/5/jquery.tinymce.min.js"
            referrerpolicy="origin"></script>

    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function setSessionForDistribution(){
            let data = {
                "price":parseInt("{{$project->total_distribution_gain}}"),
                "devise":"XOF",
                "transaction_type":"distribution_gain",
                "slug":"{{$project->slug}}"
            };
            sessionStorage.setItem("data", JSON.stringify(data));
        }

        $('textarea#contenu').tinymce({
            height: 200,
            menubar: false,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
        });

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

        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')
                        }
                    }
                ]
            });
        }

        function askPermission(url) {
            $.Zebra_Dialog('Lancer une deamnde pour devenir promoteur de projet ?', {
                'type': 'question',
                'title': 'Demande',
                'buttons': [
                    {
                        caption: 'Oui', callback: function () {
                            window.location.href = url;
                        }
                    }, {
                        caption: 'Non', callback: function () {
                            $.notify('Demande annulé', 'error')
                        }
                    }
                ]
            });
        }

        jQuery.validator.addMethod("greaterThan",
            function (value, element, params) {

                if (!/Invalid|NaN/.test(new Date(value))) {
                    return new Date(value) > new Date($(params).val());
                }

                return isNaN(value) && isNaN($(params).val())
                    || (Number(value) > Number($(params).val()));
            }, 'Must be greater than {0}.');

        $(document).ready(function () {


            $("form[name='annonce_form']").validate({
                rules: {
                    titre: "required",
                    image: {
                        required: function () {
                            return $("#id").val() == "";
                        }
                    },
                    youtube: "required",
                    date_debut_participation: {
                        required: true,
                        date: true,
                    },
                    date_fin_participation: {
                        required: true,
                        date: true,
                        greaterThan: "#date_debut_participation"
                    },
                    date_gain: {
                        required: true,
                        date: true,
                        greaterThan: "#date_fin_participation"
                    },
                    pourcentage_gain: {
                        required: true,
                        number: true,
                    },
                    resume: "required",
                    contenu: "required",
                    min_invest: "required",
                },
                messages: {
                    titre: "Champ requis",
                    image: {
                        required: "Champ requis"
                    },
                    youtube: "Champ requis",
                    date_debut_participation: {
                        required: "Champ requis",
                        date: "Date invalide",
                    },
                    date_fin_participation: {
                        required: "Champ requis",
                        date: "Date invalide",
                        greaterThan: "Cette date doit être supérieure  à la date début de participation"
                    },
                    date_gain: {
                        required: "Champ requis",
                        date: "Date invalide",
                        greaterThan: "Cette date doit être supérieure  à la date fin de participation"
                    },
                    pourcentage_gain: {
                        required: "Champ requis",
                        number: "Nombre invalide",
                    },
                    resume: "Champ requis",
                    contenu: "Champ requis",
                    min_invest: "Champ requis",
                },
                submitHandler: function (form) {
                    $('#action_add_article').attr('disabled', true);
                    $('#action_add_article').val('Patientez ...');
                    $('form#annonce_form').submit();
                }
            });

            $("form[name='img_form']").validate({
                rules: {},
                messages: {},
                submitHandler: function (form) {

                    $('form#img_form').submit();
                }
            });
        })

        $(document).on('click', '.modifier_actualite', function () {
            let slug = $(this).attr("data-slug");
            $.ajax({
                url: "{{route('investment.getData')}}",
                method: 'post',
                data: {slug: slug},
                success: function (result) {
                    $("#textTitleModel").html("Modifier");
                    $("#titre").attr("value", result.data.titre);
                    $("#resume").val(result.data.resume);
                    $("#youtube").val(result.data.youtube);
                    $("#youtube").val(result.data.youtube);
                    $("#date_debut_participation").val(result.data.date_debut_participation);
                    $("#date_fin_participation").val(result.data.date_fin_participation);
                    $("#date_gain").val(result.data.date_gain);
                    $("#pourcentage_gain").val(result.data.pourcentage_gain);
                    $("#nbre_contributeur").val(result.data.nbre_contributeur);
                    $("#lien_facebook").val(result.data.lien_facebook);
                    $("#lien_instagram").val(result.data.lien_instagram);
                    $("#contenu").val(result.data.contenu);
                    $("#min_invest").val(result.data.min_invest);
                    $("#id").val(result.data.id);
                    $('#articleModal').modal('show');
                },
                error: function (result) {

                },

            });
        });

        $(document).on('click', '.galery_data', function () {
            let slug = $(this).attr("data-slug");
            $.ajax({
                url: "{{route('investment.getData')}}",
                method: 'post',
                data: {slug: slug, html: true},
                success: function (result) {
                    console.log("result", result.data.html);
                    $("#detailImage").html(result.data.html);
                    $("#investment_id").val(result.data.data.id);
                    $('#articleImageModal').modal('show');
                },
                error: function (result) {

                },

            });
        });

        $(document).on('click', '.detail_data', function () {
            let slug = $(this).attr("data-slug");
            console.log(slug);
            $.ajax({
                url: "{{route('investment.getData')}}",
                method: 'post',
                data: {slug: slug},
                success: function (result) {
                    console.log("result", result)
                    $("#detail_titre").html(result.data.titre);
                    $("#detail_youtube").html(result.data.youtube);
                    $("#detail_date_debut_participation").html(result.data.date_debut_participation);
                    $("#detail_date_fin_participation").html(result.data.date_fin_participation);
                    $("#detail_date_gain").html(result.data.date_gain);
                    $("#detail_pourcentage_gain").html(result.data.pourcentage_gain);
                    $("#detail_nbre_contributeur").html(result.data.nbre_contributeur);
                    $("#detail_lien_facebook").html(result.data.lien_facebook);
                    $("#min_invest").html(result.data.min_invest);
                    $("#detail_lien_instagram").html(result.data.lien_instagram);
                    $("#detail_nbre_contributeur").html(result.data.nbre_contributeur);
                    $("#detail_resume").val(result.data.resume);
                    $("#detail_contenu").html(result.data.contenu);
                    $('#articleDetail').modal('show');
                },
                error: function (result) {

                },

            });
        });
    </script>

@endsection