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

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

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

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

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

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

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

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

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

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

        <!-- PAGE HEADER -->
        <div class="payment-header">
            <h2 class="payment-header-title">
                <i class="fas fa-file-invoice-dollar"></i>
                Détails des paiements
            </h2>
            <p class="payment-header-subtitle">
                Client: <strong>{{ $contribution->user->first_name }} {{ $contribution->user->last_name }}</strong>
                | Projet: <strong>{{ $project->titre }}</strong>
            </p>
        </div>

        <!-- ACTION BAR -->
        <div style="padding: 0 30px;">
            <div class="payment-action-bar">
                <a href="{{ route('investment.contribution.index',$project->slug) }}" class="payment-btn payment-btn-danger">
                    <i class="fas fa-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="payment-btn payment-btn-primary">
                        <i class="fas fa-plus"></i>
                        Ajouter un paiement
                    </a>
                @endif
                <a href="{{ route('admin.investment.paiement.rapport',$contribution->slug) }}" class="payment-btn payment-btn-secondary">
                    <i class="fas fa-download"></i>
                    Télécharger rapport
                </a>
            </div>
        </div>

        <!-- CONTRIBUTION SUMMARY SECTION -->
        <div style="padding: 0 30px 30px;">
            <div class="payment-summary-grid">
                <!-- Client Info -->
                <div class="payment-summary-card">
                    <span class="payment-summary-label">Client</span>
                    <p class="payment-summary-value">{{ $contribution->user->first_name }} {{ $contribution->user->last_name }}</p>
                </div>

                <!-- Total Shares -->
                <div class="payment-summary-card">
                    <span class="payment-summary-label">Nombre de parts</span>
                    <p class="payment-summary-value">{{ $contribution->part }}</p>
                </div>

                <!-- Price Per Share -->
                <div class="payment-summary-card">
                    <span class="payment-summary-label">Prix par part</span>
                    <p class="payment-summary-value">{{ $project->action_prix }} <span class="payment-summary-unit">XOF</span></p>
                </div>

                <!-- Total Investment Amount -->
                <div class="payment-summary-card">
                    <span class="payment-summary-label">Montant total à investir</span>
                    <p class="payment-summary-value">{{ intVal($project->action_prix)*intVal($contribution->part) }} <span class="payment-summary-unit">XOF</span></p>
                </div>

                <!-- Profit Percentage -->
                <div class="payment-summary-card">
                    <span class="payment-summary-label">Rendement annuel</span>
                    <p class="payment-summary-value">{{ $project->pourcentage_gain }} <span class="payment-summary-unit">%</span></p>
                </div>

                <!-- Annual Gain -->
                <div class="payment-summary-card">
                    <span class="payment-summary-label">Gain annuel</span>
                    <p class="payment-summary-value">{{ intVal((($project->action_prix * $contribution->part)*($project->pourcentage_gain/100))) }} <span class="payment-summary-unit">XOF</span></p>
                </div>

                <!-- Total Gain Over Period -->
                <div class="payment-summary-card">
                    <span class="payment-summary-label">Gain sur {{ $project->date_gain }} {{ $project->frequence_paiement }}</span>
                    <p class="payment-summary-value">{{ intVal((($project->action_prix * $contribution->part)*($project->pourcentage_gain/100)) * $project->date_gain ) }} <span class="payment-summary-unit">XOF</span></p>
                </div>

                <!-- Total Return on Investment -->
                <div class="payment-summary-card">
                    <span class="payment-summary-label">Retour total sur investissement</span>
                    <p class="payment-summary-value">{{ (intVal($project->action_prix)*intVal($contribution->part)) + (intVal((($project->action_prix * $contribution->part)*($project->pourcentage_gain/100)) * $project->date_gain )) }} <span class="payment-summary-unit">XOF</span></p>
                </div>

                <!-- Total Paid Card (Highlighted) -->
                <div class="payment-summary-card payment-total-card">
                    <span class="payment-summary-label">Montant total payé</span>
                    <p class="payment-summary-value">{{ $total_payments }}</p>
                    <span class="payment-summary-unit">XOF</span>
                </div>

                <!-- Remaining Balance Card (Warning) -->
                <div class="payment-summary-card payment-remaining-card">
                    <span class="payment-summary-label">Total restant à payer</span>
                    <p class="payment-summary-value">{{ (intVal($project->action_prix)*intVal($contribution->part)) - $total_payments }}</p>
                    <span class="payment-summary-unit">XOF</span>
                </div>

                <!-- Investment Status -->
                <div class="payment-summary-card">
                    <span class="payment-summary-label">Statut de l'investissement</span>
                    <div style="margin-top: 12px;">
                        @if($contribution->investissement_payment_status)
                            <span class="payment-status-badge payment-status-completed">
                                <i class="fas fa-check-circle"></i> Complété
                            </span>
                        @else
                            <span class="payment-status-badge payment-status-pending">
                                <i class="fas fa-hourglass-half"></i> En cours
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- PAYMENT HISTORY SECTION -->
        <div style="padding: 0 30px 30px;">
            <div class="payment-history-container">
                <div class="payment-history-header">
                    <i class="fas fa-history"></i>
                    <h3>Historique des paiements</h3>
                </div>

                @if($payments->count() > 0)
                    <table class="payment-history-table">
                        <thead>
                            <tr>
                                <th>Référence</th>
                                <th>Montant</th>
                                <th>Mensualités payées</th>
                                <th>Date de paiement</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($payments as $payment)
                                <tr>
                                    <td>
                                        <span class="payment-reference">{{ $payment->reference }}</span>
                                    </td>
                                    <td>
                                        <span class="payment-amount">{{ number_format($payment->montant, 0, ',', ' ') }} XOF</span>
                                    </td>
                                    <td>
                                        <span class="payment-months">{{ $payment->number_month_paid }}</span>
                                    </td>
                                    <td>
                                        <span class="payment-date">{{ date("d/m/Y H:i", strtotime($payment->created_at)) }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="payment-empty-state">
                        <i class="fas fa-inbox"></i>
                        <h4>Aucun paiement enregistré</h4>
                        <p>Les paiements apparaîtront ici une fois qu'ils seront ajoutés.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
        <!-- PAYMENT MODAL -->
        <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: 0;">
                        <!-- Modal Header -->
                        <div class="payment-modal-header">
                            <h5 class="modal-title">
                                <i class="fas fa-plus-circle"></i>
                                Ajouter un nouveau paiement
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <!-- Modal Body -->
                        <div class="payment-modal-body">
                            <div class="payment-info-box">
                                <strong>Définition des parts investies</strong>
                                <p>Veuillez sélectionner le nombre de mensualités payées pour enregistrer ce paiement.</p>
                            </div>

                            <!-- Hidden Fields -->
                            <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">

                            <!-- Summary Boxes -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;">
                                <div class="payment-info-box" style="border-left: 4px solid #6d8f1a;">
                                    <strong>Total à investir</strong>
                                    <p style="font-size: 18px; font-weight: 700; color: #6d8f1a; margin-top: 8px;">
                                        <span id="action_prix_display">{{ $project->action_prix }}</span> XOF
                                    </p>
                                </div>
                                <div class="payment-info-box" style="border-left: 4px solid #88b121;">
                                    <strong>Total à payer</strong>
                                    <p style="font-size: 18px; font-weight: 700; color: #88b121; margin-top: 8px;">
                                        <span id="action_prix__pay_display">{{ $project->support_investissement=='actionnariat' ? $project->action_prix : $project->montant_fixe_obligation_mensuelle }}</span> XOF
                                    </p>
                                </div>
                            </div>

                            <div class="payment-info-box" style="border-left: 4px solid #f59e0b;">
                                <strong>Montant restant</strong>
                                <p style="font-size: 18px; font-weight: 700; color: #f59e0b; margin-top: 8px;">
                                    <span id="action_reste__pay_display">0</span> XOF
                                </p>
                            </div>

                            <!-- Form Group -->
                            <div class="payment-form-group">
                                <label for="number_month_paid">Nombre de mensualités à payer</label>
                                <select name="number_month_paid" id="number_month_paid" class="form-control">
                                    <option value="1">1 mensualité</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 }} mensualités</option>
                                        @endfor
                                    @endif
                                </select>
                            </div>

                            <!-- Warning Alert -->
                            <div class="payment-alert payment-alert-warning">
                                <strong>Attention!</strong> En confirmant cette action, vous enregistrez un paiement pour l'investissement. Cette action est irréversible.
                            </div>
                        </div>

                        <!-- Modal Footer -->
                        <div class="payment-modal-footer">
                            <button type="button" class="payment-btn payment-btn-danger" data-dismiss="modal">
                                <i class="fas fa-times"></i> Annuler
                            </button>
                            <button type="submit" class="payment-btn payment-btn-primary">
                                <i class="fas fa-check"></i> Confirmer le paiement
                            </button>
                        </div>
                    </div>
                </form>
            </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