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

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

@section("content")
    <link rel="stylesheet" href="{{ asset('css/investor-modern.css') }}">

    <div class="right_col investor-page" role="main">
        <div class="investor-container">
            <!-- BACK BUTTON -->
            <a href="{{ route('investment.contribution.index',$project->slug) }}" class="investor-back-btn">
                <i class="fa fa-chevron-left"></i>
                Liste des investissements
            </a>

            <!-- PAGE HEADER -->
            <div class="investor-page-header">
                <h1>
                    <i class="fa fa-user-plus"></i>
                    Nouvel Investisseur
                </h1>
                <p class="investor-page-header-subtitle">Gérez l'ajout de nouveaux investisseurs au projet</p>
            </div>

            <!-- VALIDATION MESSAGES -->
            @if ($errors->any())
                <div class="investor-alert investor-alert-danger">
                    <strong>Erreurs détectées :</strong>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

            <div class="investor-grid-2">
                <!-- IMPORT SECTION -->
                <div class="investor-form-section">
                    <h3 class="investor-form-section-title">
                        <i class="fa fa-file-excel"></i>
                        Importation en Masse
                    </h3>

                    <p style="color: #718096; font-size: 14px; margin-bottom: 20px;">
                        Téléversez un fichier Excel pour ajouter plusieurs investisseurs rapidement
                    </p>

                    <form action="{{ route('admin.investment.import') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" value="{{ $project->id }}" name="project_id">

                        <div class="investor-upload-area">
                            <label for="file" style="cursor: pointer; width: 100%;">
                                <div class="investor-upload-icon">
                                    <i class="fa fa-cloud-upload"></i>
                                </div>
                                <div class="investor-upload-text">Cliquez pour sélectionner ou glissez un fichier</div>
                                <div class="investor-upload-hint">Format : Excel (.xlsx, .xls)</div>
                                <input type="file" id="file" name="file" required style="display: none;">
                            </label>
                        </div>

                        <div style="margin-top: 20px;">
                            <a href="{{ asset('docs/add_investissor.xlsx') }}" target="_blank" class="investor-btn investor-btn-secondary investor-btn-sm" style="text-decoration: none; display: inline-flex;">
                                <i class="fa fa-download"></i>
                                Télécharger le modèle
                            </a>
                        </div>

                        <div class="investor-button-group" style="margin-top: 20px; border-top: 1px solid #e0e3e8; padding-top: 20px; justify-content: flex-start;">
                            <button type="submit" class="investor-btn investor-btn-primary">
                                <i class="fa fa-upload"></i>
                                Téléverser
                            </button>
                        </div>
                    </form>
                </div>

                <!-- MANUAL ENTRY SECTION -->
                <div class="investor-form-section">
                    <h3 class="investor-form-section-title">
                        <i class="fa fa-keyboard"></i>
                        Saisie Manuelle
                    </h3>

                    <p style="color: #718096; font-size: 14px; margin-bottom: 20px;">
                        Renseignez les informations pour ajouter un nouvel investisseur individuellement
                    </p>

                    <!-- INFO BOX -->
                    <div class="investor-info-box">
                        <h4>Informations Importantes</h4>
                        <ul>
                            <li>Un compte est <strong>systématiquement créé</strong> pour les clients dont l'email n'existe pas</li>
                            <li>Mot de passe par défaut : <strong>123456780</strong></li>
                            <li>Les nouveaux clients doivent s'acquitter de la souscription et des dépenses annuelles</li>
                            <li>Impossible d'ajouter un investisseur ayant déjà un investissement en cours</li>
                            <li>Les frais d'investissement ne seront pas ajoutés au portefeuille (paiement en espèces)</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- MANUAL FORM SECTION -->
            <form action="{{route('admin.investment.add')}}" method="post">
                @csrf

                <!-- PERSONAL INFORMATION SECTION -->
                <div class="investor-form-section">
                    <h3 class="investor-form-section-title">
                        <i class="fa fa-user"></i>
                        Informations Personnelles
                    </h3>

                    <div class="investor-form-row">
                        <div class="investor-form-group">
                            <label for="last_name">
                                Nom du Client
                                <span class="required">*</span>
                            </label>
                            <input type="text" id="last_name" name="last_name" required class="investor-input" placeholder="Ex: Sall">
                        </div>

                        <div class="investor-form-group">
                            <label for="first_name">
                                Prénom du Client
                                <span class="required">*</span>
                            </label>
                            <input type="text" id="first_name" name="first_name" required class="investor-input" placeholder="Ex: Marie">
                        </div>
                    </div>

                    <div class="investor-form-row">
                        <div class="investor-form-group">
                            <label for="sexe">
                                Sexe
                                <span class="required">*</span>
                            </label>
                            <select name="sexe" id="sexe" required class="investor-select">
                                <option value="">-- Sélectionner --</option>
                                <option value="Homme">Homme</option>
                                <option value="Femme">Femme</option>
                            </select>
                        </div>

                        <div class="investor-form-group">
                            <label for="country_id">
                                Pays
                                <span class="required">*</span>
                            </label>
                            <select name="country_id" required id="country_id" class="investor-country-select">
                                <option value="">-- Sélectionner un pays --</option>
                                @foreach($countries as $country)
                                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="investor-form-row">
                        <div class="investor-form-group">
                            <label for="email">
                                Email
                                <span class="required">*</span>
                            </label>
                            <input type="email" name="email" id="email" required class="investor-input" placeholder="ex@example.com">
                        </div>

                        <div class="investor-form-group">
                            <label for="telephone">
                                Téléphone
                                <span class="required">*</span>
                            </label>
                            <input type="tel" id="telephone" name="telephone" required class="investor-input" placeholder="+221 7X XXX XXXX">
                        </div>
                    </div>
                </div>

                <!-- PAYMENT INFORMATION SECTION -->
                <div class="investor-form-section">
                    <h3 class="investor-form-section-title">
                        <i class="fa fa-credit-card"></i>
                        Information de Paiement
                    </h3>

                    <div class="investor-form-row investor-form-row-full">
                        <div class="investor-form-group">
                            <label style="display: flex; align-items: center; gap: 10px; font-weight: 500; margin-bottom: 0;">
                                <input type="checkbox" name="has_paid" class="investor-checkbox" id="has_paid">
                                <span>Le client a-t-il honoré les 12 000 XOF de souscription ?</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- INVESTMENT DETAILS SECTION -->
                <div class="investor-form-section">
                    <h3 class="investor-form-section-title">
                        <i class="fa fa-chart-bar"></i>
                        Définition des Parts Achetées
                    </h3>

                    <!-- CALCULATION DISPLAY -->
                    <div class="investor-calc-grid">
                        <div class="investor-calc-item">
                            <div class="investor-calc-label">Total de Part Acheté</div>
                            <div class="investor-calc-value">
                                <span id="action_prix_display">{{ $project->action_prix }}</span>
                                <span class="investor-calc-unit">XOF</span>
                            </div>
                        </div>

                        <div class="investor-calc-item">
                            <div class="investor-calc-label">Total de Part Payé</div>
                            <div class="investor-calc-value">
                                <span id="action_prix__pay_display">{{ $project->support_investissement=='actionnariat' ? $project->action_prix : $project->montant_fixe_obligation_mensuelle }}</span>
                                <span class="investor-calc-unit">XOF</span>
                            </div>
                        </div>

                        <div class="investor-calc-item">
                            <div class="investor-calc-label">Reste à Payer</div>
                            <div class="investor-calc-value">
                                <span id="action_reste__pay_display">0</span>
                                <span class="investor-calc-unit">XOF</span>
                            </div>
                        </div>
                    </div>

                    <!-- HIDDEN FIELDS -->
                    <input type="hidden" value="{{ $project->id }}" 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">

                    <!-- INVESTMENT INPUTS -->
                    <div class="investor-form-row">
                        <div class="investor-form-group">
                            <label for="action_part">
                                Nombre de Parts Total Acheté
                                <span class="required">*</span>
                            </label>
                            <select name="action_part" id="action_part" class="investor-select" required>
                                <option value="">-- Sélectionner --</option>
                                @for($i=1; $i<=$project->nbre_part;$i++)
                                    @if($i<=$project->action_nbre_limit)
                                        <option value="{{ $i }}">{{ $i }} part(s)</option>
                                    @endif
                                @endfor
                            </select>
                        </div>

                        <div class="investor-form-group">
                            <label for="number_month_paid">
                                Nombre de Mensualités Payées
                                <span class="required">*</span>
                            </label>
                            <select name="number_month_paid" id="number_month_paid" class="investor-select" required>
                                <option value="1">1 mois</option>
                                @if(isset($project->nbre_obligation_mensuelle_paiement))
                                    @for($i=2; $i<=$project->nbre_obligation_mensuelle_paiement;$i++)
                                        <option value="{{ $i }}">{{ $i }} mois</option>
                                    @endfor
                                @endif
                            </select>
                        </div>
                    </div>
                </div>

                <!-- WARNING BOX -->
                <div class="investor-warning-box">
                    <strong>Attention !</strong>
                    <p>
                        En cliquant sur <strong>Valider</strong>, vous ajoutez un nouvel investisseur à votre projet. <strong>Cette action est irréversible</strong> et les données seront enregistrées immédiatement dans le système.
                    </p>
                </div>

                <!-- SUBMIT BUTTONS -->
                <div class="investor-button-group">
                    <button type="reset" class="investor-btn investor-btn-secondary">
                        <i class="fa fa-times"></i>
                        Réinitialiser
                    </button>
                    <button type="submit" class="investor-btn investor-btn-primary investor-btn-lg">
                        <i class="fa fa-check"></i>
                        Valider
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

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

    $(document).ready(function () {
        $(document).on('change', '#action_part', function () {
            let action_part = $(this).val(),
            action_price=$("#action_price").val();
            $('#action_prix_display').html(parseInt(action_part) * parseInt(action_price));
            updatePaiementData();
        });
        $(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