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

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

@section("css_add")
<link rel="stylesheet" href="{{ asset('css/invest-modern.css') }}">
<style>
    .error {
        color: var(--invest-danger);
        font-size: 13px;
        margin-top: 4px;
    }

    .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+label {
        cursor: pointer;
    }

    .inputfile:focus+label {
        outline: 2px solid var(--invest-primary);
        outline-offset: 2px;
    }

    #selectedFiles img {
        max-width: 125px;
        max-height: 125px;
        float: left;
        margin-bottom: 10px;
        border: 2px solid var(--invest-border);
    }

    #selectedFiles2 img {
        max-width: 125px;
        max-height: 125px;
        float: left;
        margin-bottom: 10px;
        border: 2px solid var(--invest-border);
    }

    fieldset {
        min-width: min-content;
    }
</style>
@endsection

@section("content")

<div class="right_col invest-page-wrapper" role="main">
    <div class="clearfix"></div>

    <!-- Page Header -->
    <div class="invest-page-header">
        <h1 class="invest-page-title">Projet de Financement</h1>

        @if($user->investment_project_allow!=null)
        <div class="invest-page-actions">
            <button type="button" class="invest-btn invest-btn-secondary invest-btn-sm" data-toggle="tooltip"
                data-placement="top" title="Lancer un projet pour financement">
                <i class="fa fa-info-circle"></i>
                <span>Info</span>
            </button>
            <button onclick="reset()" id="createProject" class="invest-btn invest-btn-primary invest-btn-sm">
                <i class="fa fa-plus-circle"></i>
                <span>Lancer un projet</span>
            </button>
            <a href="{{ route('investment.params') }}" class="invest-btn invest-btn-light invest-btn-sm">
                <i class="fa fa-cogs"></i>
                <span>Configurations</span>
            </a>
        </div>
        @endif
    </div>

    <!-- Content Card -->
    <div class="invest-content-card">
        <!-- Alerts -->
        @if ($errors->any())
        <div class="invest-alert invest-alert-danger">
            <i class="fa fa-exclamation-circle"></i>
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        @if(session("success"))
        <div class="invest-alert invest-alert-success">
            <i class="fa fa-check-circle"></i>
            <div>{{session('success')}}</div>
        </div>
        @elseif(session("error"))
        <div class="invest-alert invest-alert-danger">
            <i class="fa fa-exclamation-circle"></i>
            <div>{{session('error')}}</div>
        </div>
        @endif

        <!-- Module Activation or Projects Table -->
        @if($user->investment_project_allow==null)
            @include('dashboard.investment.components.investisement-module-activation',['user'=>$user])
        @else
            <!-- Projects Table -->
            <div class="invest-table-wrapper">
                <table class="invest-table" id="articledatatable-buttons">
                    <thead>
                        <tr>
                            <th style="width: 120px;">Actions</th>
                            <th style="width: 100px;" class="invest-table-center">Couverture</th>
                            <th>Intitulé</th>
                            <th>Type d'investissement</th>
                            <th style="width: 130px;">Visibilité</th>
                            <th style="width: 180px;">Date de création</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $i=1; @endphp
                        @foreach($investment_projects as $projet)
                        <tr>
                            <td class="invest-table-center">
                                <div class="invest-dropdown">
                                    <button class="invest-dropdown-toggle" type="button" data-toggle="dropdown">
                                        <span>Action</span>
                                        <i class="fa fa-chevron-down"></i>
                                    </button>
                                    <ul class="dropdown-menu invest-dropdown-menu">
                                        <li>
                                            <a href="#" data-slug="{{$projet->slug}}" class="invest-dropdown-item detail_data">
                                                <i class="fa fa-eye"></i> Détails
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" data-slug="{{$projet->slug}}" class="invest-dropdown-item galery_data">
                                                <i class="fa fa-photo"></i> Gestion des médias
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{route('investment.contribution.index',$projet->slug)}}" class="invest-dropdown-item">
                                                <i class="fa fa-handshake-o"></i> Liste des investissements
                                            </a>
                                        </li>
                                        <li>
                                            @if($projet->visibility==1)
                                            <a href="javascript:void(0)" class="invest-dropdown-item"
                                                onclick="visibility('cloturer' , '{{route('investment.visibility',[$projet->slug])}}')">
                                                <i class="fa fa-eye-slash"></i> Désactiver
                                            </a>
                                            @else
                                            <a href="javascript:void(0)" class="invest-dropdown-item"
                                                onclick="visibility( 'activer' , '{{route('investment.visibility',[$projet->slug])}}')">
                                                <i class="fa fa-eye"></i> Activer
                                            </a>
                                            @endif
                                        </li>
                                        <li>
                                            <a href="{{route('investment.article.index',[$projet->slug])}}" class="invest-dropdown-item">
                                                <i class="fa fa-newspaper-o"></i> Gestion des actualités
                                            </a>
                                        </li>
                                        @if(sizeof($projet->contributions)==0)
                                        <li>
                                            <a data-slug="{{$projet->slug}}" class="invest-dropdown-item modifier_projet">
                                                <i class="fa fa-edit"></i> Modifier
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{route('investment.deleteData',$projet->slug)}}" class="invest-dropdown-item delete-action">
                                                <i class="fa fa-trash"></i> Supprimer
                                            </a>
                                        </li>
                                        @endif
                                    </ul>
                                </div>
                            </td>
                            <td class="invest-table-center">
                                <img src="{{$projet->couverture}}" alt="{{ $projet->titre }}"
                                    data-slug="{{$projet->slug}}" class="invest-project-img galery_data"
                                    title="Cliquer pour voir">
                            </td>
                            <td title="{{ $projet->titre }}">
                                <span class="invest-text-truncate">{{$projet->titre}}</span>
                            </td>
                            <td>{{ $projet->support_investissement }}</td>
                            <td>
                                @if($projet->visibility==1)
                                <span class="invest-badge invest-badge-success">Visible</span>
                                @else
                                <span class="invest-badge invest-badge-danger">Désactivé</span>
                                @endif
                            </td>
                            <td>{{date("d M Y H:i:s",strtotime($projet->created_at))}}</td>
                        </tr>
                        @php $i++; @endphp
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="invest-pagination">
                {{ $investment_projects->links() }}
            </div>
        @endif
    </div>
</div>

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

            <div class="modal-content invest-modal-content">
                <div class="modal-header invest-modal-header">
                    <h4 class="modal-title invest-modal-title">
                        <i class="fa fa-plus"></i>
                        <span id="textTitleModel">Soumettre</span> un nouveau projet
                    </h4>
                </div>
                <div class="modal-body invest-modal-body"

                    <div class="col-lg-12">

                        <div class="row">
                            <fieldset class="col-lg-12 text-justify invest-step-container" id="step1">
                                <div class="invest-step-content">
                                    <h5 class="invest-step-title">Conditions d'utilisations et termes de confidentialités</h5>
                                    <div class="invest-terms-box">
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ab quia sint
                                        deleniti consectetur quisquam eveniet. Illum ratione ex, aut labore sint quas,
                                        expedita accusantium praesentium molestias maiores consequatur quidem.
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ab quia sint
                                        deleniti consectetur quisquam eveniet. Illum ratione ex, aut labore sint quas,
                                        expedita accusantium praesentium molestias maiores consequatur quidem.
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ab quia sint
                                        deleniti consectetur quisquam eveniet. Illum ratione ex, aut labore sint quas,
                                        expedita accusantium praesentium molestias maiores consequatur quidem.
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ab quia sint
                                        deleniti consectetur quisquam eveniet. Illum ratione ex, aut labore sint quas,
                                        expedita accusantium praesentium molestias maiores consequatur quidem.
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ab quia sint
                                        deleniti consectetur quisquam eveniet. Illum ratione ex, aut labore sint quas,
                                        expedita accusantium praesentium molestias maiores consequatur quidem.
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ab quia sint
                                        deleniti consectetur quisquam eveniet. Illum ratione ex, aut labore sint quas,
                                        expedita accusantium praesentium molestias maiores consequatur quidem.
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ab quia sint
                                        deleniti consectetur quisquam eveniet. Illum ratione ex, aut labore sint quas,
                                        expedita accusantium praesentium molestias maiores consequatur quidem.
                                    </div>
                                    <p class="text-justify" style="margin-top: 20px;">
                                        En cliquant sur continuer, vous acceptez les conditions et termes qui vous sont
                                        imposés dans le processus de misse en ligne et d'acquisition de financement pour
                                        vos projets.
                                    </p>
                                    <div class="text-right col-md-12" style="margin-top: 20px;">
                                        <button class="invest-btn invest-btn-light invest-btn-sm" type="button"
                                            data-dismiss="modal">Fermer</button>
                                        <button class="invest-btn invest-btn-primary invest-btn-sm" type="button"
                                            id="btn-step1">Continuer</button>
                                    </div>
                                </div>
                            </fieldset>


                            <fieldset class="col-md-12 invest-step-container" id="step2" style="display: none">
                                <div class="invest-step-content">
                                    <h3 class="invest-step-title">Informations primaires</h3>
                                    <div class="row">
                                        <div class="invest-form-group col-md-6 col-xs-12">
                                            <label class="invest-form-label">Quel est le nom de votre projet?<span class="invest-required">*</span></label>
                                            <input type="text" id="titre" name="titre" class="invest-form-control" required
                                                placeholder="Nom du projet" value="">
                                        </div>

                                        <div class="invest-form-group col-md-6 col-xs-12">
                                            <label class="invest-form-label">Quel est le support d'investissement?<span class="invest-required">*</span></label>
                                            <select name="support_investissement" id="support_investissement"
                                                class="invest-form-control">
                                                <option value="obligation_convertible">Obligation convertible</option>
                                                <option value="actionnariat">Actionnariat</option>
                                            </select>
                                        </div>

                                        <div class="invest-form-group col-md-6 col-xs-12">
                                            <label class="invest-form-label">Date de lancement de la campagne<span class="invest-required">*</span></label>
                                            <input type="date" id="date_debut_participation" required
                                                name="date_debut_participation" class="invest-form-control" value="">
                                        </div>
                                        <div class="invest-form-group col-md-6 col-xs-12">
                                            <label class="invest-form-label">Date de clôture de la campagne<span class="invest-required">*</span></label>
                                            <input type="date" id="date_fin_participation" required
                                                name="date_fin_participation" class="invest-form-control" value="">
                                        </div>
                                    </div>
                                <fieldset id="obligation_panel">

                                    <div class="form-group col-md-12 col-xs-12">
                                        <label>L'investissement peut il se faire en plusieurs mensualité ? </label>
                                        <br>
                                        <label for="obligation_mensuel">
                                            <input type="radio" name="obligation_mensuel" checked
                                                class="obligation_radio" value="mensuel"> Oui
                                        </label>&nbsp;&nbsp;
                                        <label for="obligation_block">
                                            <input type="radio" name="obligation_mensuel" class="obligation_radio"
                                                value="block"> Non
                                        </label>
                                    </div>

                                    <fieldset id="obligation_block_is_set" style="display: none">

                                        <div class="form-group col-md-6 col-xs-12">
                                            <label> Quel est le montant minimum que vous souhaitez mobiliser en lançant
                                                cette campagne ? (en XOF) </label><span style="color: red">
                                                (requis)</span><br>
                                            <input type="number" id="montant_global" name="montant_global"
                                                class="form-control" placeholder="40000000" required min="10000"
                                                style="width: 100%;">
                                        </div>

                                        <div class="form-group col-md-6 col-xs-12">
                                            <label>Quel est le montant minimum à investir ? (en XOF) </label>
                                            <span style="color: red"> (requis)</span><br>
                                            <input type="number" min="1000" id="min_invest" required name="min_invest"
                                                class="form-control" placeholder="100000" style="width: 100%;" value="">
                                        </div>

                                        <div class="form-group col-md-6 col-xs-12">
                                            <label>Quel est le montant maximum à investir ? (en XOF) </label>
                                            <span style="color: red"> (requis)</span><br>
                                            <input type="number" min="1000" id="max_invest" required name="max_invest"
                                                class="form-control" placeholder="999999999999" style="width: 100%;"
                                                value="">
                                        </div>
                                    </fieldset>

                                    <fieldset id="obligation_mensuel_is_set">

                                        <div class="form-group col-md-6 col-xs-12">
                                            <label>En combien de mensualité l'investisseur devra t-il payer son
                                                investissement ? </label><span style="color: red"> (requis)</span><br>
                                            <input type="number" min="1" id="nbre_obligation_mensuelle_paiement"
                                                required name="nbre_obligation_mensuelle_paiement" class="form-control"
                                                placeholder="36" style="width: 100%;" value="">
                                        </div>
                                        <div class="form-group col-md-6 col-xs-12">
                                            <label>Quel est le montant fixe de l'investissement à payer mensuellement ?
                                                (en XOF) </label>
                                            <span style="color: red"> (requis)</span><br>
                                            <input type="number" min="1000" id="montant_fixe_obligation_mensuelle"
                                                required name="montant_fixe_obligation_mensuelle" class="form-control"
                                                placeholder="999999999999" style="width: 100%;" value="">
                                        </div>

                                        <div class="form-group col-md-6 col-xs-12">
                                            <label>Quel est le nombre maximal d'investisseur que vous êtes prêt à
                                                accueillir ? (mettez O pour infini ...) </label><span
                                                style="color: red"> (requis)</span><br>
                                            <input type="number" id="nbre_obligation_mensuelle_investisseur"
                                                name="nbre_obligation_mensuelle_investisseur" class="form-control"
                                                placeholder="40" required min="1" style="width: 100%;">
                                        </div>


                                    </fieldset>
                                </fieldset>
                                <fieldset>
                                    <div class="form-group col-md-6 col-xs-12">
                                        <label>Quel est le nombre de part d'action disponible ?</label>
                                        <span style="color: red"> (requis)</span><br>
                                        <input type="number" min="1" id="nbre_part" required name="nbre_part"
                                            class="form-control" placeholder="10" style="width: 100%;" value="">
                                    </div>

                                    <div class="form-group col-md-6 col-xs-12">
                                        <label>Quel est le prix d'une part de vos actions ? </label>
                                        <span style="color: red"> (requis)</span><br>
                                        <input type="number" min="1000" id="action_prix" required name="action_prix"
                                            class="form-control" placeholder="999999999999" style="width: 100%;"
                                            value="">
                                    </div>

                                    <div class="form-group col-md-6 col-xs-12">
                                        <label>Quelle est le nombre maximal d'action que peut acheter un investisseur ?
                                        </label>
                                        <span style="color: red"> (requis)</span><br>
                                        <input type="number" min="1" id="action_nbre_limit" required
                                            name="action_nbre_limit" class="form-control" placeholder="2"
                                            style="width: 100%;" value="">
                                    </div>

                                </fieldset>
                                <div class="col-lg-12">
                                    <div class="row">
                                        <div class="form-group col-md-6 col-xs-12">
                                            <label> Quel est le taux d'intérêt brut de chaque investissement ? (en %)
                                            </label><span style="color: red"> (requis)</span><br>
                                            <input type="number" id="pourcentage_gain" name="pourcentage_gain"
                                                class="form-control" placeholder="Exemple : 5" required min="1"
                                                max="100" style="width: 100%;">
                                        </div>
                                        <h3 class="col-lg-12">Remboursement</h3>
                                        <div class="form-group col-md-6 col-xs-12">
                                            <label>Année de debut de remboursement des gains. </label><span
                                                style="color: red"> (requis)</span><br>
                                            <select name="start_remboursment" id="start_remboursment"
                                                class="form-control" required>
                                                @for($i=0; $i<100; $i++) <option
                                                    value="{{ (intVal(date('Y')) + ($i+1))}}">{{ (intVal(date('Y')) +
                                                    ($i+1) )}}</option>
                                                    @endfor
                                            </select>
                                        </div>
                                        <div class="form-group col-md-6 col-xs-12">
                                            <label>Qu'elle est la fréquence de paiement des gains? </label><span
                                                style="color: red"> (requis)</span><br>
                                            <select name="frequence_paiement" id="frequence_paiement"
                                                class="form-control">
                                                <option value="journalier">journalier</option>
                                                <option value="hebdomadaire">hebdomadaire</option>
                                                <option value="trimestriel">trimestriel</option>
                                                <option value="semestriel">semestriel</option>
                                                <option value="mensuel">mensuel</option>
                                                <option value="annuel" selected>annuel</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-12 col-xs-12">
                                            <label>Qu'elle est la durée total de remboursement des gains ? (suivant la
                                                fréquence de paiement) </label><span style="color: red">
                                                (requis)</span><br>
                                            <input type="number" id="date_gain" required name="date_gain"
                                                class="form-control"
                                                placeholder="Exemple: 360 si fréquence journalière."
                                                style="width: 100%;" value="">
                                        </div>
                                        <div class="form-group col-md-6 col-xs-12">
                                            {{-- https://www.vousfinancer.com/credit-immobilier/guides/remboursement
                                            --}}
                                            <label>Modalité de remboursement du capital ? </label><span
                                                style="color: red"> (requis)</span><br>
                                            <select name="modalite_remboursement" id="modalite_remboursement"
                                                class="form-control">
                                                <option value="echeances_constantes">échéances constantes</option>
                                                <option value="echeances_modulables">échéances modulables</option>
                                                <option value="in_fine">remboursement (in fine)</option>
                                                <option value="differe_amortissement">différé d’amortissement</option>
                                                <option value="anticipation">anticipation</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-6 col-xs-12">
                                            <label>Année de recupération du capital de base. </label><span
                                                style="color: red"> (requis)</span><br>
                                            <select name="retour_capital" id="retour_capital" class="form-control">
                                                @for($i=0; $i<100; $i++) <option
                                                    value="{{ (intVal(date('Y')) + ($i+1))}}">{{ (intVal(date('Y')) +
                                                    ($i+1) )}}</option>
                                                    @endfor
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Présentez l'offre d'investissement</label><br>
                                    <textarea name="offre_investissement" id="offre_investissement" class="contenu"
                                        required="required" style="width: 100%" rows="15" minlength="100"
                                        placeholder="Offre d'investisssement"></textarea>
                                </div>

                                    <div class="text-right col-md-12" style="margin-top: 30px;">
                                        <button class="invest-btn invest-btn-light invest-btn-sm" type="button"
                                            data-dismiss="modal">Fermer</button>
                                        <button class="invest-btn invest-btn-secondary invest-btn-sm" type="button"
                                            id="previous-step1">Précédent</button>
                                        <button class="invest-btn invest-btn-primary invest-btn-sm" type="button"
                                            id="btn-step2">Continuer</button>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset class="col-md-12 invest-step-container" id="step3" style="display: none">
                                <div class="invest-step-content">
                                    <h3 class="invest-step-title">Présentation du projet</h3>

                                    <div class="invest-form-group col-md-12 col-sm-12 col-xs-12">
                                        <label class="invest-form-label">Présentation du porteur de projet et de son entreprise<span class="invest-required">*</span></label>
                                        <small style="display: block; margin-bottom: 8px; color: var(--invest-text-light);">Faites vous connaître auprès des investisseurs. Veuillez fournir toutes les
                                            informations qui définissent vos compétences et celles de votre entreprise.</small>
                                        <textarea name="porteur_projet" id="porteur_projet" class="contenu invest-form-control"
                                            required="required" rows="15" minlength="100"
                                            placeholder="Votre biographie"></textarea>
                                    </div>

                                    <div class="invest-form-group col-md-12 col-sm-12 col-xs-12">
                                        <label class="invest-form-label">Résumé des objectifs clés du projet (500 caractères)<span class="invest-required">*</span></label>
                                        <small style="display: block; margin-bottom: 8px; color: var(--invest-text-light);">Veuillez fournir un résumé simple et impactant.</small>
                                        <textarea name="resume" id="resume" class="invest-form-control" rows="4" required
                                            placeholder="Donnez un aperçu du projet"></textarea>
                                    </div>

                                    <div class="invest-form-group col-md-12 col-sm-12 col-xs-12">
                                        <label class="invest-form-label">Présentation détaillée du projet<span class="invest-required">*</span></label>
                                        <small style="display: block; margin-bottom: 8px; color: var(--invest-text-light);">Veuillez fournir toutes les informations susceptible d'influencer un contributeur.</small>
                                        <textarea name="contenu" id="contenu" class="contenu invest-form-control" required="required"
                                            rows="15" minlength="100"
                                            placeholder="Votre projet"></textarea>
                                    </div>

                                    <div class="invest-form-group col-md-12 col-sm-12 col-xs-12">
                                        <label class="invest-form-label">Risques identifiés<span class="invest-required">*</span></label>
                                        <textarea name="risques" id="risques" class="invest-form-control" rows="4" required
                                            placeholder="Identifiez les risques"></textarea>
                                    </div>

                                    <div class="invest-form-group col-md-12 col-sm-12 col-xs-12">
                                        <label class="invest-form-label">Données financières (Business plan)<span class="invest-required">*</span></label>
                                        <small style="display: block; margin-bottom: 8px; color: var(--invest-text-light);">Veuillez décrire vos projections et détailler votre budget global.</small>
                                        <textarea name="finance" id="finance" class="contenu invest-form-control" required="required"
                                            rows="15" minlength="100"
                                            placeholder="Business plan"></textarea>
                                    </div>

                                    <div class="text-right col-md-12" style="margin-top: 30px;">
                                        <button class="invest-btn invest-btn-light invest-btn-sm" type="button"
                                            data-dismiss="modal">Fermer</button>
                                        <button class="invest-btn invest-btn-secondary invest-btn-sm" type="button"
                                            id="previous-step2">Précédent</button>
                                        <button class="invest-btn invest-btn-primary invest-btn-sm" type="button"
                                            id="btn-step3">Continuer</button>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset class="col-md-12 invest-step-container" id="step4" style="display: none">
                                <div class="invest-step-content">
                                    <h3 class="invest-step-title">Médias et liens</h3>

                                    <div class="text-left col-12" id="image_article">
                                        <div class="invest-info-message">
                                            <strong>Note:</strong> Ajoutez une image de capacités inférieure ou égale à 2MB. Les images lourdes ralentirons votre espace de vente.
                                            Cette image apparaîtra sur votre projet. Veuillez donc fournir une image impactante.
                                        </div>
                                        <div class="col-sm-12 col-xs-12 text-center mb-2">
                                            <div class="text-left" id="list_img_"></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12 col-xs-12">
                                                <input type="file" accept="image/*" name="image" id="file" class="inputfile"
                                                    data-multiple-caption="{count}  fichiers choisis" />
                                                <label for="file" class="invest-file-label">
                                                    <i id="upload" class="fa fa-upload"></i>
                                                    <span id="lab"> Cliquez pour choisir une image en avant </span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="invest-form-group col-md-12 col-xs-12">
                                        <label class="invest-form-label">Lien Youtube de la présentation du projet<span class="invest-required">*</span></label>
                                        <input type="text" id="youtube" name="youtube" class="invest-form-control" required
                                            placeholder="https://www.youtube.com/..." value="">
                                    </div>
                                    <div class="invest-form-group col-md-6 col-xs-12">
                                        <label class="invest-form-label">Lien Facebook (optionnel)</label>
                                        <input type="text" id="lien_facebook" name="lien_facebook" class="invest-form-control"
                                            placeholder="https://www.facebook.com/..." value="">
                                    </div>

                                    <div class="invest-form-group col-md-6 col-xs-12">
                                        <label class="invest-form-label">Lien Instagram (optionnel)</label>
                                        <input type="text" id="lien_instagram" name="lien_instagram" class="invest-form-control"
                                            placeholder="https://www.instagram.com/..." value="">
                                    </div>

                                    <div class="text-right col-md-12" style="margin-top: 30px;">
                                        <button class="invest-btn invest-btn-light invest-btn-sm" type="button"
                                            data-dismiss="modal">Fermer</button>
                                        <button class="invest-btn invest-btn-secondary invest-btn-sm" type="button"
                                            id="previous-step3">Précédent</button>
                                        <button class="invest-btn invest-btn-primary invest-btn-sm" type="submit" name="action"
                                            id="action_add_article">Enregistrer</button>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <input type="hidden" name="id" id="id">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

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

            <div class="modal-content invest-modal-content">
                <div class="modal-header invest-modal-header">
                    <h4 class="modal-title invest-modal-title">
                        <i class="fa fa-images"></i>
                        <span>Images de galerie</span>
                    </h4>
                </div>
                <div class="modal-body invest-modal-body">

                    <div>
                        <div class="row">

                            <div class="container" style="padding-right: 2%;padding-left: 2%;">
                                <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" multiple name="couverture[]" />
                                            <label for="file">Mettre une image en avant </label>
                                        </div>
                                        <input type="hidden" id="investment_id" name="investment_id">
                                    </div>
                                </div>

                                <div class="container" id="detailImage" style="margin-top: 2%">

                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="modal-footer invest-modal-footer" style="width: 100%;">
                            <button type="button" class="invest-btn invest-btn-light invest-btn-sm" data-dismiss="modal">Fermer</button>
                            <input type="submit" name="action" id="action_add_article" class="invest-btn invest-btn-primary invest-btn-sm"
                                value="Enregistrer" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="articleDetail" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content invest-modal-content">
            <div class="modal-header invest-modal-header">
                <h4 class="modal-title invest-modal-title">
                    <i class="fa fa-info-circle"></i>
                    <span>Détails du projet: <strong class="detail_titre"></strong></span>
                </h4>
            </div>
            <div class="modal-body invest-modal-body">
                <div class="col-lg-12">
                    <fieldset id="info_global_panel">
                        <div class="invest-form-group col-md-12 col-sm-12 col-xs-12">
                            <label class="invest-form-label">Titre: <strong class="detail_titre"></strong> </label>
                        </div>
                        <div class="invest-form-group col-md-12 col-sm-12 col-xs-12">
                            <iframe width="100%" height="526" id="detail_youtube" src="" title="YouTube video player"
                                frameborder="0" allow="accelerometer; autoplay;" allowfullscreen style="border: 2px solid var(--invest-border);"></iframe>

                        </div>
                        <div class="invest-form-group col-md-6 col-sm-12 col-xs-12">
                            <label class="invest-form-label">Nombre de contributeur actif</label>
                            <input type="text" id="detail_nbre_contributeur" readonly class="invest-form-control">
                        </div>

                        <div class="invest-form-group col-md-6 col-sm-12 col-xs-12">
                            <label class="invest-form-label">Support d'investissement</label>
                            <input type="text" id="detail_support_investissement" readonly class="invest-form-control">
                        </div>
                        <div class="invest-form-group col-md-6 col-sm-12 col-xs-12">
                            <label class="invest-form-label">Taux d'intérêt de l'investissement</label>
                            <input type="text" id="detail_pourcentage_gain" readonly class="invest-form-control">
                        </div>

                        <div class="invest-form-group col-md-6 col-sm-12 col-xs-12">
                            <label class="invest-form-label">Date début de la campagne</label>
                            <input type="text" id="detail_date_debut_participation" readonly class="invest-form-control">
                        </div>

                        <div class="invest-form-group col-md-6 col-sm-12 col-xs-12">
                            <label class="invest-form-label">Date fin de la campagne</label>
                            <input type="text" id="detail_date_fin_participation" readonly class="invest-form-control">
                        </div>

                        <div class="invest-form-group col-md-6 col-sm-12 col-xs-12">
                            <label class="invest-form-label">Date récupération des retour sur investissement</label>
                            <input type="text" id="detail_date_gain" readonly class="invest-form-control">
                        </div>

                        <fieldset id="detail_obligation_panel" style="none">
                            <fieldset id="detail_obligation_block_is_set" style="none">
                                <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                    <label>Type de paiement</label>
                                    <input type="text" id="detail_obligation_mensuel" readonly class="form-control">
                                </div>

                                <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Montant à mobilisé </label>
                                    <input type="text" id="detail_montant_global" readonly class="form-control">
                                </div>
                                <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Montant minimum à investir</label>
                                    <input type="text" id="detail_min_invest" readonly class="form-control">
                                </div>
                                <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Montant maximal à investir</label>
                                    <input type="text" id="detail_max_invest" readonly class="form-control">
                                </div>
                            </fieldset>
                            <fieldset id="detail_obligation_mensuel_is_set" style="none">
                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Nombre de mensualité à payer </label>
                                    <input type="number" id="detail_nbre_obligation_mensuelle_paiement"
                                        class="form-control" readonly>
                                </div>
                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Montant fixe de l'investissement à payer mensuellement </label>
                                    <input type="number" id="detail_montant_fixe_obligation_mensuelle" readonly
                                        class="form-control">
                                </div>

                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Nombre maximal d'investisseur pouvant investir ( O pour infini ...) </label>
                                    <input type="number" id="detail_nbre_obligation_mensuelle_investisseur" readonly
                                        class="form-control">
                                </div>
                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Nombre de part d'action disponible </label>
                                    <input type="number" id="detail_nbre_part_obligation" readonly class="form-control">
                                </div>
                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Nombre maximal d'action que peut acheter un investisseur </label>
                                    <input type="number" id="detail_action_nbre_limit_obligation" readonly
                                        class="form-control">
                                </div>
                            </fieldset>
                            <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                <label class="text-uppercase">Modalité d'investissement</label>
                                <input type="text" id="detail_modalite_remboursement" readonly class="form-control">
                            </div>

                            <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                <label class="text-uppercase">Fréquence de remboursement</label>
                                <input type="text" id="detail_frequence_paiement" readonly class="form-control">
                            </div>
                        </fieldset>

                        <fieldset id="detail_actionnaria_panel" style="none">
                            <div class="form-group col-md-6 col-xs-12">
                                <label>Nombre de part d'action disponible </label>
                                <input type="number" id="detail_nbre_part" readonly class="form-control">
                            </div>

                            <div class="form-group col-md-6 col-xs-12">
                                <label>Prix d'une part de vos actions </label>
                                <input type="number" id="detail_action_prix" readonly class="form-control">
                            </div>

                            <div class="form-group col-md-6 col-xs-12">
                                <label>Nombre maximal d'action que peut acheter un investisseur </label>
                                <input type="number" id="detail_action_nbre_limit" readonly class="form-control">
                            </div>
                        </fieldset>


                        <div class="form-group col-md-6 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Lien facebook</label>
                            <input type="text" id="detail_lien_facebook" readonly class="form-control">
                        </div>

                        <div class="form-group col-md-6 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Lien instagram</label>
                            <input type="text" id="detail_lien_instagram" readonly class="form-control">
                        </div>

                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Résumé </label>
                            <textarea readonly 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">Risques liés au projet</label>
                            <textarea readonly id="detail_risques" cols="30" class="form-control" rows="5"></textarea>
                        </div>
                        <div class="col-lg-12" style="margin-top: 20px; padding-bottom: 20px; border-top: 2px solid var(--invest-border); padding-top: 20px;">
                            <button class="invest-btn invest-btn-light invest-btn-sm" type="button" id="detail_porteur_projet_btn">
                                <i class="fa fa-user"></i> Porteur du projet
                            </button>
                            <button class="invest-btn invest-btn-light invest-btn-sm" type="button" id="detail_contenu_btn">
                                <i class="fa fa-file-text"></i> Description du projet
                            </button>
                            <button class="invest-btn invest-btn-light invest-btn-sm" type="button" id="detail_finance_btn">
                                <i class="fa fa-line-chart"></i> Données Financières
                            </button>
                            <button class="invest-btn invest-btn-light invest-btn-sm" type="button" id="detail_offre_investissement_btn">
                                <i class="fa fa-handshake-o"></i> Offre d'investissement
                            </button>
                        </div>
                    </fieldset>

                    <fieldset class="detail_fieldset" id="detail_contenu_panel" style="display: none">
                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Contenu du projet </label>
                            <div id="detail_contenu" class=""></div>
                        </div>
                    </fieldset>
                    <fieldset class="detail_fieldset" id="detail_porteur_projet_panel" style="display: none">
                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Porteur du projet </label>
                            <div id="detail_porteur_projet" class=""></div>
                        </div>
                    </fieldset>
                    <fieldset class="detail_fieldset" id="detail_finance_panel" style="display: none">
                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Données Financières</label>
                            <div id="detail_finance" class=""></div>
                        </div>
                    </fieldset>
                    <fieldset class="detail_fieldset" id="detail_offre_investissement_panel" style="display: none">
                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Offre d'investissement</label>
                            <div id="detail_offre_investissement" class=""></div>
                        </div>
                    </fieldset>
                </div>

            </div>
            <div class="invest-modal-footer">
                <button type="button" class="invest-btn invest-btn-secondary invest-btn-sm" style="display: none"
                    id="info_global_btn">
                    <i class="fa fa-arrow-left"></i> Information globale
                </button>
                <button type="button" class="invest-btn invest-btn-light invest-btn-sm" data-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

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

        $('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('Êtes vous sur de vouloir activer se module ?', {
                '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 () {
            
            
            $(document).on('change', '.obligation_radio', function () {
                let btn=$("input[name='obligation_mensuel']:checked"),
                 data=btn.val();
                     if(data==='mensuel'){
                        $('#obligation_block_is_set').fadeOut(100,function(){
                         $('#obligation_mensuel_is_set').fadeIn(100);
                         });
                     }else{
                        $('#obligation_mensuel_is_set').fadeOut(100,function(){
                            $('#obligation_block_is_set').fadeIn(100);
                        });
                     }
             }); 

   $(document).on('change', '#support_investissement', function () {
                let data=$(this).val();
                if(data==='obligation_convertible'){
                    $('#actionnaria_panel').fadeOut(100,function(){
                    $('#obligation_panel').fadeIn(100);
                });
                }else{
                    $('#obligation_panel').fadeOut(100,function(){
                    $('#actionnaria_panel').fadeIn(100);
                });
                }
             }); 


            //details modal actions
             $(document).on('click', '#info_global_btn', function () {
                $('.detail_fieldset').fadeOut(100,function(){
                    $('#info_global_panel').fadeIn(100);
                    $('#info_global_btn').fadeOut(100);
                });
             });
 $(document).on('click', '#detail_contenu_btn', function () {
                $('#info_global_panel').fadeOut(100,function(){
                    $('#detail_contenu_panel').fadeIn(100);
                    $('#info_global_btn').fadeIn(100);
                });
             });
 $(document).on('click', '#detail_porteur_projet_btn', function () {
    $('#info_global_panel').fadeOut(100,function(){
                    $('#detail_porteur_projet_panel').fadeIn(100);
                    $('#info_global_btn').fadeIn(100);
                });
             });
 $(document).on('click', '#detail_finance_btn', function () {
    $('#info_global_panel').fadeOut(100,function(){
                    $('#detail_finance_panel').fadeIn(100);
                    $('#info_global_btn').fadeIn(100);
                });
             });

 $(document).on('click', '#detail_offre_investissement_btn', function () {
    $('#info_global_panel').fadeOut(100,function(){
                    $('#detail_offre_investissement_panel').fadeIn(100);
                    $('#info_global_btn').fadeIn(100);
                });
             });

             //creating modal actions
            $(document).on('click', '#createProject', function () {
                $('#step2').fadeOut(100,function(){
                        $('#step1').fadeIn(100)
                        $('#previous-step1').fadeIn(100)
                        $('#articleModal').modal('show')
                    })
             });

  $(document).on('click', '#btn-step1', function () {
                $('#step1').fadeOut(100,function(){
                    $('#step2').fadeIn(100);
                });
             });

           $(document).on('click', '#btn-step2', function () {
                $('#step2').fadeOut(100,function(){
                    $('#step3').fadeIn(100);
                });
             });

           $(document).on('click', '#btn-step3', function () {
                $('#step3').fadeOut(100,function(){
                    $('#step4').fadeIn(100);
                });
             });

           $(document).on('click', '#previous-step1', function () {
                $('#step2').fadeOut(100,function(){
                    $('#step1').fadeIn(100);
                });
             });

           $(document).on('click', '#previous-step2', function () {
                $('#step3').fadeOut(100,function(){
                    $('#step2').fadeIn(100);
                });
             });

            $(document).on('click', '#previous-step3', function () {
                $('#step4').fadeOut(100,function(){
                    $('#step3').fadeIn(100);
                });
             });

            $("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",
                    max_invest: "required",
                    support_investissement: "required",
                    montant_global: "required",
                    frequence_paiement: "required",
                    modalite_remboursement: "required",
                    offre_investissement: "required",
                    porteur_projet: "required",
                    risques: "required",
                    finance: "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"
                    },
                    date_gain: {
                        required: "Champ requis",
                        date: "Date invalide",
                        greaterThan: "Cette date doit être supérieure  à la date fin"
                    },
                    pourcentage_gain: {
                        required: "Champ requis",
                        number: "Nombre invalide",
                    },
                    resume: "Champ requis",
                    contenu: "Champ requis",
                    min_invest: "Champ requis",
                    max_invest: "Champ requis",
                    support_investissement: "Champ requis",
                    offre_investissement: "Champ requis",
                    montant_global: "Champ requis",
                    frequence_paiement: "Champ requis",
                    modalite_remboursement: "Champ requis",
                    porteur_projet: "Champ requis",
                    risques: "Champ requis",
                    finance: "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);
                    $("#max_invest").val(result.data.max_invest);
                    $("#support_investissement").val(result.data.support_investissement);
                    $("#montant_global").val(result.data.montant_global);
                    $("#frequence_paiement").val(result.data.frequence_paiement);
                    $("#modalite_remboursement").val(result.data.modalite_remboursement);
                    $("#porteur_projet").val(result.data.porteur_projet);
                    $("#risques").val(result.data.risques);
                    $("#finance").val(result.data.finance);
                    $("#offre_investissement").val(result.data.offre_investissement);
                    $("#nbre_part").val(result.data.nbre_part);
                    $("#action_prix").val(result.data.action_prix);
                    $("#action_nbre_limit").val(result.data.action_nbre_limit);
                    $("#nbre_obligation_mensuelle_investisseur").val(result.data.nbre_obligation_mensuelle_investisseur);
                    $("#montant_fixe_obligation_mensuelle").val(result.data.montant_fixe_obligation_mensuelle);
                    $("#nbre_obligation_mensuelle_paiement").val(result.data.nbre_obligation_mensuelle_paiement);
                    $("#obligation_mensuel").val(result.data.obligation_mensuel);
                    $("#id").val(result.data.id);
                    if(result.data.obligation_mensuel==='mensuel'){
                        $('#obligation_block_is_set').fadeOut(100,function(){
                         $('#obligation_mensuel_is_set').fadeIn(100);
                         });
                     }else{
                        $('#obligation_mensuel_is_set').fadeOut(100,function(){
                            $('#obligation_block_is_set').fadeIn(100);
                        });
                     }
                     if(result.data.support_investissement==='obligation_convertible'){
                          $('#actionnaria_panel').fadeOut(100,function(){
                                $('#obligation_panel').fadeIn(100);
                            });
                            }else{
                                $('#obligation_panel').fadeOut(100,function(){
                                $('#actionnaria_panel').fadeIn(100);
                            });
                    }
                    $('#step1').fadeOut(100,function(){
                        $('#step2').fadeIn(100)
                        $('#previous-step1').fadeOut(100)
                    })
                    $('#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").attr('src',result.data.youtube);
                    $("#detail_date_debut_participation").val(result.data.date_debut_participation);
                    $("#detail_date_fin_participation").val(result.data.date_fin_participation);
                    $("#detail_date_gain").val(result.data.date_gain);
                    $("#detail_pourcentage_gain").val(result.data.pourcentage_gain);
                    $("#detail_nbre_contributeur").val(result.data.nbre_contributeur);
                    $("#detail_lien_facebook").val(result.data.lien_facebook);
                    $("#detail_min_invest").val(result.data.min_invest);
                    $("#detail_lien_instagram").val(result.data.lien_instagram);
                    $("#detail_resume").val(result.data.resume);
                    $("#detail_contenu").html(result.data.contenu);
                    $("#detail_max_invest").val(result.data.max_invest);
                    $("#detail_support_investissement").val(result.data.support_investissement);
                    $("#detail_montant_global").val(result.data.montant_global);
                    $("#detail_frequence_paiement").val(result.data.frequence_paiement);
                    $("#detail_modalite_remboursement").val(result.data.modalite_remboursement);
                    $("#detail_porteur_projet").html(result.data.porteur_projet);
                    $("#detail_risques").val(result.data.risques);
                    $("#detail_finance").html(result.data.finance);
                    $("#detail_offre_investissement").html(result.data.offre_investissement);
                    $("#detail_nbre_part").val(result.data.nbre_part);
                    $("#detail_nbre_part_obligation").val(result.data.nbre_part);
                    $("#detail_action_prix").val(result.data.action_prix);
                    $("#detail_action_nbre_limit").val(result.data.action_nbre_limit);
                    $("#detail_action_nbre_limit_obligation").val(result.data.action_nbre_limit);
                    $("#detail_nbre_obligation_mensuelle_investisseur").val(result.data.nbre_obligation_mensuelle_investisseur);
                    $("#detail_montant_fixe_obligation_mensuelle").val(result.data.montant_fixe_obligation_mensuelle);
                    $("#detail_nbre_obligation_mensuelle_paiement").val(result.data.nbre_obligation_mensuelle_paiement);
                    $("#detail_obligation_mensuel").val(result.data.obligation_mensuel);
                    if(result.data.obligation_mensuel==='mensuel'){
                        $('#detail_obligation_block_is_set').fadeOut(100,function(){
                         $('#detail_obligation_mensuel_is_set').fadeIn(100);
                         });
                     }else{
                        $('#detail_obligation_mensuel_is_set').fadeOut(100,function(){
                            $('#detail_obligation_block_is_set').fadeIn(100);
                        });
                     }
                     if(result.data.support_investissement==='obligation_convertible'){
                          $('#detail_actionnaria_panel').fadeOut(100,function(){
                                $('#detail_obligation_panel').fadeIn(100);
                            });
                            }else{
                                $('#detail_obligation_panel').fadeOut(100,function(){
                                $('#detail_actionnaria_panel').fadeIn(100);
                            });
                    }
                    $('#articleDetail').modal('show');
                },
                error: function (result) {

                },

            });
        });
</script>

@endsection