@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: #fff;
        }

        .card-1 {
            text-align: left;
            border: none;
            background: #f8f8f8

        }

        .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;
        }

    </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"> Détails des paiments du client {{$contribution->user->first_name}} {{$contribution->user->last_name}} sur le Projet
                            : {{$project->titre}} </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-12">
                                <a href="{{ route('investment.contribution.index',$project->slug) }}" class="btn btn-light btn-sm">
                                    <i class="mdi mdi-arrow-left"></i>
                                    Retour
                                </a>
                                @if(($contribution->type_payment !='virement' || $contribution->reference !='virement') && $project->support_investissement!='actionnariat')
                                    <a href="#" data-target="#PaymentModal" data-toggle="modal" class="btn btn-dark btn-sm" style="background: #000;color:#fff;">
                                        Ajouter un paiement
                                    </a>
                                @endif
                             <a href="{{ route('admin.investment.paiement.rapport',$contribution->slug) }}" class="btn btn-warning btn-sm">
                                    Télécharger Rapport de paiement
                                </a>
                            </div>
                            <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>Client :</h5>
                                    {{$contribution->user->first_name}} {{$contribution->user->last_name}} 
                                </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 total de part :</h5>
                                    {{$contribution->part}} 
                                </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>Prix d'une part :</h5>
                                    {{$project->action_prix}} 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>Montant total à Investir :</h5>
                                    {{intVal($project->action_prix)*intVal($contribution->part)}} 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>Gain :</h5>
                                    {{$project->pourcentage_gain}} %
                                </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 par année:</h5>
                                    {{
                                        (intVal((($project->action_prix * $contribution->part)*($project->pourcentage_gain/100))))
                                    }} 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 sur {{ $project->date_gain }} {{ $project->frequence_paiement }} :</h5>
                                    {{
                                        (intVal((($project->action_prix * $contribution->part)*($project->pourcentage_gain/100)) * $project->date_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 Retour sur Investissement :</h5>
                                    {{ 
                                        (intVal($project->action_prix)*intVal($contribution->part)) + (intVal((($project->action_prix * $contribution->part)*($project->pourcentage_gain/100)) * $project->date_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="background:antiquewhite">
                                    <h5>Montant Total Payé :</h5>
                                    {{$total_payments}} 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="background:antiquewhite">
                                    <h5>Total Restant A Payé :</h5>
                                    {{ 
                                        (intVal($project->action_prix)*intVal($contribution->part)) - $total_payments
                                    }} 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="background:antiquewhite">
                                    <h5>Status de l'investissement :</h5>
                                @if($contribution->investissement_payment_status) <span class="badge bagde-success">complèté</span>  @endif  
                                @if(!$contribution->investissement_payment_status) <span class="badge bagde-warning">en cours</span>  @endif   
                                </div>
                            </a>
                           
                        </div>
                        <div class="row">
                            <table id="articledatatable-buttons" class="table table-responsive-xs table-bordered">
                                <thead>
                                <tr>
                                    <th>Référence</th>
                                    <th>montant</th>
                                    <th>Nombre de mois</th>
                                    <th>Payé le </th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($payments as $payment)
                                    <tr>
                                        <td>
                                           {{ $payment->reference }}
                                        </td>
                                       <td>{{ $payment->montant }} XOF</td>
                                       <td>{{ $payment->number_month_paid }}</td>
                                       <td> {{date("d-m-Y h:i:s",strtotime($payment->created_at))}} </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
                <div id="PaymentModal" class="modal fade">
                    <div class="modal-dialog modal-md">
                        <form  method="post" id="payment_form" enctype="multipart/form-data"
                              action="{{route("investment.updateInvestmentPayment")}}">
                            @csrf
                            <div class="modal-content" style="border-radius: 0px;">
                                <div class="modal-header">
                                    <h4 class="modal-title"><i class="fa fa-plus"></i>
                                        <span id="textTitleModel">Valider </span> un paiement effectuer en espèce</h4>
                                </div>
                                <div class="modal-body col-md-12" style="background: #fff">
            
                                    <div class="col-lg-12">       
                                        <div class="row">
                                            <div class="col-lg-12 col-xs-12 col-md-12">
                                                <h3>Définition des parts achetées</h3>
                                                </div>
                                                
                                                <div class="col-lg-6 col-xs-12 col-md-12">
                                                <h4 style="background: #2A3F54;padding:20px;color:#fff;">Total de part acheté =  <strong id="action_prix_display">{{ $project->action_prix }}</strong>XOF</h4>
                                                </div>
                                                <div class="col-lg-6 col-xs-12 col-md-12">
                                                <h4 style="background: #2A3F54;padding:20px;color:#fff;">Total de part payé =  <strong id="action_prix__pay_display">{{ $project->support_investissement=='actionnariat' ? $project->action_prix : $project->montant_fixe_obligation_mensuelle }}</strong>XOF</h4>
                                                </div>
                                                <div class="col-lg-6 col-xs-12 col-md-12">
                                                <h4 style="background: #2A3F54;padding:20px;color:#fff;">Reste à payé =  <strong id="action_reste__pay_display">0</strong>XOF</h4>
                                                </div>
                                                <div class="col-lg-12 col-xs-12 col-md-12"></div>
                                            <input type="hidden" value="{{ $project->slug }}" name="project_id">
                                            <input type="hidden" value="{{ $project->action_prix }}" id="action_price" name="action_price">
                                            <input type="hidden" value="{{ $project->obligation_mensuel }}" id="obligation_mensuel">
                                            <input type="hidden" value="{{ $project->support_investissement=='actionnariat' ? $project->action_prix : $project->montant_fixe_obligation_mensuelle }}" id="montant_fixe_obligation_mensuelle">
                                            <input type="hidden" value="{{ $contribution->part }}" id="action_part" name="action_part">
                                            <input type="hidden" value="{{ $contribution->slug }}" id="slug" name="slug">
                                            <div class="col-lg-12 col-xs-12 col-md-12">
                                                <div class="form-group">
                                                    <label for="number_month_paid">Nombre de mensualité total payé<br> </label>
                                                    <select name="number_month_paid" id="number_month_paid" class="form-control">
                                                        <option value="1">1</option>
                                                        @if(isset($project->nbre_obligation_mensuelle_paiement))
                                                            @for($i=2; $i<=(intVal($project->nbre_obligation_mensuelle_paiement) - intVal($contribution->number_month_paid));$i++)
                                                                    <option value="{{ $i }}">{{ $i }}</option>
                                                            @endfor
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-12" style="color: darkred">
                                                <strong>Note : </strong> <br>
                                                En cliquant sur valider, vous ajouter un nouvel investisseur à votre projet. Cette action est irréversible.
                                            </div>
                                            <div class="col-lg-12 text-right">
                                                <button type="submit" class="btn btn-primary btn-lg">Valider</button>
                                            </div> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
<script type="text/javascript">
    $(document).ready(function () {
       $(document).on('change', '#number_month_paid', function () {
           updatePaiementData();
       });
   });

   function updatePaiementData (){
           let action_paid = $("#number_month_paid").val(),
               action_part = $("#action_part").val(),
               val_price=$('#action_prix_display').html();
               action_pay=$("#montant_fixe_obligation_mensuelle").val(),
               total_Paid=(parseInt(action_paid) * parseInt(action_pay)) * parseInt(action_part);
               $('#action_prix__pay_display').html(total_Paid);
               $('#action_reste__pay_display').html(parseInt(val_price) - parseInt(total_Paid));
   }
</script>
@endsection