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

        }

        .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"> Remboursement 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>
                            <a href="{{ route('admin.investment.remboursement.rapport',$contribution->slug) }}" class="btn btn-warning btn-sm">
                                    Télécharger Rapport de Remboursement
                                </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>Montant Investis :</h5>
                                    {{$contribution->montant}} 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 :</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>
                                    {{ 
                                        $contribution->montant + (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>Montant Total Rembourser :</h5>
                                    {{$total_rembourse}} 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 Restant A Remboursé :</h5>
                                    {{ 
                                        ($contribution->montant + (intVal((($project->action_prix * $contribution->part)*($project->pourcentage_gain/100)) * $project->date_gain )) - $total_rembourse)
                                    }} XOF
                                </div>
                            </a>
                           
                        </div>
                        <div class="row">
                            <table id="articledatatable-buttons" class="table table-responsive-xs table-bordered">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Status </th>
                                    <th>montant</th>
                                    <th>Type</th>
                                    <th>Année</th>
                                    <th>Remboursé par</th>
                                    <th>Remboursé le </th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($remboursements as $remboursement)
                                    <tr>
                                        
                                        <td>
                                            @if($remboursement->status==='pending')
                                                <form 
                                                @if(intval($remboursement->year)===intval(date('Y')))
                                                    action="{{ route('investment.remboursement') }}"
                                                @endif
                                                method="post">
                                                    @csrf
                                                    @if(intval($remboursement->year)===intval(date('Y')))
                                                     <input type="hidden" name="remboursement_id" value="{{ $remboursement->id }}">
                                                    @endif
                                                <button type="submit" class="btn btn-primary btn-sm" @if(intval($remboursement->year)!==intval(date('Y'))) disabled @endif>Rembourser</button>
                                                </form>
                                            @endif
                                        </td>
                                        <td>
                                                    @if($remboursement->status==='pending')
                                                        <span class="badge badge-warning">En attente</span>
                                                    @else
                                                        <span class="badge badge-success">Terminé</span>
                                                    @endif
                                        </td>
                                       <td>{{ $remboursement->montant }} XOF</td>
                                       <td>{{ $remboursement->type }}</td>
                                       <td>{{ $remboursement->year }}</td>
                                       <td>@if($remboursement->paid_by) {{ $remboursement->paid_by }} @else --- @endif</td> 
                                        <td> @if($remboursement->paid_id) {{date("d-m-Y h:i:s",strtotime($remboursement->paid_id))}}  @else --- @endif</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection