@extends('app')
@section('title-page', "formulaire d'inscription")
@section('content')

    <link rel="stylesheet" href='{{ asset('assets/css/styleFormulaire.css') }}' media="all" />
    <link rel="stylesheet" href="{{ asset('assets/css/styleToast.css') }}" media="all" />

    <style>
        body {
            background: #FFFFFF;
        }

        .montantTotal {
            color: var(--primary-color);
            text-decoration: underline;
            font-size: 15px;
            text-align: center;
            font-weight: bold;
        }
    </style>
    <!--Banner Inner-->


    <div class="toast-container" id="toastContainer"></div>

    <section>
        <div class="lgx-banner lgx-banner-inner">
            <div class="lgx-page-inner">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="lgx-heading-area">
                                <div class="lgx-heading lgx-heading-white">
                                    {{-- <h2 class="heading">Get In Touch</h2> --}}
                                </div>

                            </div>
                        </div>
                    </div><!--//.ROW-->
                </div><!-- //.CONTAINER -->
            </div><!-- //.INNER -->
        </div>
    </section> <!--//.Banner Inner-->


    <main class="padding-titre">
        <div class="lgx-heading lgx-heading-white title">
            <div style="display:flex;justify-content:center; flex-direction:column;width:100%;">
                <h1 class="text-black title-text">BULLETIN D'INSCRIPTION</h1>
                <h3 style="margin-top: -45px">Bulletin d'inscription</h3>
            </div>
        </div>

        <div class="form-container">

            <div class="row" style="justify-content:center" id="zoneModif">
                <div class="col-10">
                    <div class="card" style="margin-top: 50px">

                        <div class="card-body">
                            @if (session('message'))
                                <div @class([
                                    'alert' => true,
                                    'alert-' . session('statut') => true,
                                    'text-center' => true,
                                ])>
                                    {{ session('message') }}
                                </div>
                                @php
                                    session()->forget('message');
                                    session()->forget('statut');
                                @endphp
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <input type="text" id="idop" name="idop" value="0" hidden>
            <!-- Participant Information -->
            <h5 class="section-title">INFORMATIONS DU PARTICIPANT</h5>
            <form action="{{ route('update-participants') }}" method="post">
                @csrf
                <div class="row">
                    <div class="column">
                        <div class="form-group">
                            <input type="text" class="form-control text-uppercase mb-1" id="inpName" name="name"
                                value="{{ $participant == null ? '' : $participant->nom }}" required>
                            <i class="form-label ms-3">Nom <b style="color : red;">*</b></i>
                        </div>
                    </div>
                    <div class="column">
                        <div class="form-group">
                            <input type="text" class="form-control text-uppercase mb-1" id="inpPrenoms" name="prenom"
                                value="{{ $participant == null ? '' : $participant->prenom }}" required>
                            <i class="form-label ms-3">Prénoms <b style="color : red;">*</b></i>
                        </div>
                    </div>
                    <div class="column">
                        <div class="form-group">
                            <input type="email" class="form-control mb-1" id="inpEmail" name="email"
                                value="{{ $participant == null ? '' : $participant->email }}" required>
                            <i class="form-label ms-3">Email <b style="color : red;">*</b></i>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="column">
                        <div class="form-group">
                            <select name="pays" id="pays" class="form-select mb-1" required>
                                @foreach (listePays() as $key => $item)
                                    @if ($key == 0)
                                        <option value="{{ $item['value'] }}" @selected($participant == null ? false : $participant->pays == $item['value'])>
                                            {{ $item['nom'] }}
                                        </option>
                                    @else
                                        <option value="{{ $item['value'] }}" @selected($participant == null ? false : $participant->pays == $item['value'])>
                                            {{ $item['nom'] }} ({{ $item['tel'] }})
                                        </option>
                                    @endif
                                @endforeach
                            </select>
                            <i class="form-label ms-3">pays <b style="color : red;">*</b></i>
                        </div>
                    </div>
                </div>

                <!-- Profession Choice -->
                <div class="row">
                    <div class="column">
                        <div class="form-group">

                            <select name="fonction" id="" class="form-select" required>
                                <option value="NOTAIRE" @selected($participant == null ? false : $participant->fonction == 'NOTAIRE')>NOTAIRE</option>
                                <option value="ACCOMP" @selected($participant == null ? false : $participant->fonction == 'ACCOMP')>ACCOMPAGNANT</option>
                                <option value="COLLABORATEUR" @selected($participant == null ? false : $participant->fonction == 'COLLABORATEUR')>COLLABORATEUR</option>
                            </select>
                            <i class="form-label ms-3">Votre qualité <b style="color : red;">*</b></i>

                        </div>
                    </div>
                    <div class="column">
                        <div class="form-group">
                            <input type="text" class="form-control" id="inpTelephone_whatsapp" name="montant"
                                value="" required>
                            <i class="form-label ms-3">Montant <b style="color : red;">*</b></i>
                        </div>
                    </div>
                </div>

                <!-- Participant Information -->
                <h5 class="section-title">DROITS D'INSCRIPTION / MODE DE PAIEMENT</h5>

                <!-- Registration Fees -->
                <table class="table mx-3" style="margin-bottom : 40px!important;a">
                    <thead>
                        <tr>
                            <th width="40%"><i class="form-label">Université</i></th>
                            <th width="20%"><i class="form-label">Montant</i></th>
                            <th width="20%"><i class="form-label">Unités</i></th>
                            <th width="20%"><i class="form-label">Total</i></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="fw-bold">NOTAIRE</td>
                            <td class="text-center fw-bold">375&nbsp;000&nbsp;F&nbsp;CFA</td>
                            <td class="text-center"><span class="fw-bold" id="libUnitNotaire">1</span></td>
                            <td class="right-aligned"><span class="fw-bold"
                                    id="libTotalNotaire">375&nbsp;000&nbsp;F&nbsp;CFA</span></td>
                        </tr>
                        <tr>
                            <td class="fw-bold">COLLABORATEUR</td>
                            <td class="text-center fw-bold">150&nbsp;000&nbsp;F&nbsp;CFA</td>
                            <td class="text-center"><span class="fw-bold" id="libUnitCollaborateur">0</span></td>
                            <td class="right-aligned"><span class="fw-bold"
                                    id="libTotalCollaborateur">0&nbsp;F&nbsp;CFA</span></td>
                        </tr>
                        <tr>
                            <td class="fw-bold">ACCOMPAGNANT</td>
                            <td class="text-center fw-bold">150&nbsp;000&nbsp;F&nbsp;CFA</td>
                            <td class="text-center"><span class="fw-bold" id="libUnitAccompagnant">1</span></td>
                            <td class="right-aligned"><span class="fw-bold"
                                    id="libTotalAccompagnant">150&nbsp;000&nbsp;F&nbsp;CFA</span></td>
                        </tr>
                        <!-- <tr>
                                                <td class="fw-bold">AUTRES PROFESSIONNELS</td>
                                                <td class="text-center fw-bold">375&nbsp;000&nbsp;F&nbsp;CFA</td>
                                                <td class="text-center"><span class="fw-bold" id="libAutreProffessionnel">0</span></td>
                                                <td class="right-aligned"><span class="fw-bold" id="libTotalProffessionnel">0&nbsp;F&nbsp;CFA</span></td>
                                            </tr> -->
                        <tr>
                            <td colspan="3" style="text-align: right;padding-right : 5px; border-bottom : none;">
                                Sous-total :</td>
                            <td class="right-aligned fw-bold" style="background : #777777; color : #F1F1F1"
                                id="libSoutTotalTable1">

                            </td>
                        </tr>
                    </tbody>
                </table>

                <table class="table mx-3 mb-4">
                    <thead>
                        <tr>
                            <th><i class="form-label">Activités</i></th>
                            <th><i class="form-label">Montant</i></th>
                            <th><i class="form-label">Nombre</i></th>
                            <th><i class="form-label">Total</i></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div><strong>COCKTAIL DE BIENVENUE :</strong> 22/04/2025</div>
                                <div>Abidjan-Cocody</div>
                            </td>
                            <td>Offert par la<br>CNCI</td>
                            <td><input type="number" class="form-control text-end inputActivity" value="1"
                                    name="cocktail_bienvenue"></td>
                            <td><input type="text" class="form-control text-end" value="Offert" readonly></td>
                        </tr>
                        <tr>
                            <td>
                                <div><strong>SOIREE DE CLOTURE (soirée retro) :</strong> 25/04/2025</div>
                            </td>
                            <td>30&nbsp;000&nbsp;F&nbsp;CFA</td>
                            <td><input type="number" class="form-control text-end inputActivity"
                                    value="{{ $participant == null ? 0 : $participant->soiree }}" name="soire_cloture">
                            </td>
                            <td><input type="text" id="libTotalMontantSoireCloture" class="form-control text-end"
                                    value="{{ $participant == null ? 0 : ($participant->soiree == 1 ? 30000 : 0) }}&nbsp;F&nbsp;CFA"
                                    readonly></td>
                        </tr>
                        <tr>
                            <td>
                                <div><strong>EXCURSION DÉTENTE :</strong> 26/04/2025</div>
                                <div>Assinie Mafia</div>
                            </td>
                            <td>20&nbsp;000&nbsp;F&nbsp;CFA</td>
                            <td>
                                <input type="number" class="form-control text-end inputActivity"
                                    value="{{ $participant == null ? 0 : $participant->excursion }}"
                                    name="excursion_detente">
                            </td>
                            <td>
                                <input type="text" id="libTotalMontantExcursionDetente" class="form-control text-end"
                                    value="{{ $participant == null ? 0 : ($participant->excursion == 1 ? 20000 : 0) }}&nbsp;F&nbsp;CFA"
                                    readonly>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="text-align: right;padding-right : 5px; border-bottom : none;">
                                Sous-total :</td>
                            <td class="right-aligned fw-bold" style="background : #777777; color : #F1F1F1"
                                id="libSoutTotalTable2">
                                0&nbsp;F&nbsp;CFA
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div style="display: flex; justify-content : center;margin-bottom : 20px;">
                    <span class="montantTotal">TOTAL GÉNÉRAL</span>
                </div>
                <div style="display: flex; justify-content : center; margin-bottom : 20px;">
                    <span
                        style="background: #ED7D31; padding : 5px 10px;margin-top : -7px; color : #F1F1F1; font-weight : bold;"
                        id="libTotalTotal"></span>
                </div>

                <!-- Payment Method -->
                <h5 class="section-title">MODE DE PAIEMENT</h5>

                <div style="display : flex; justify-content : center; margin-bottom : 0px;">
                    <i style="font-weight : bold;">Uniquement les paiements FRANC CFA (XOF)</i>
                </div>

                <input type="text" name="id" id=""
                    value="{{ $participant == null ? 0 : $participant->idparticipant }}" hidden>
                <div class="form-section mb-4">
                    <div class="payment-option">
                        <div class="radio-container">
                            <input class="custom-radio" type="radio" id="cash" name="mode_paiement"
                                value="CASH" @checked($participant == null ? false : $participant->mode_paiement == 'CASH')>
                            <div style="padding-top : 8px;">
                                <label class="fw-bold ms-3" for="cash">PAIEMENT CASH</label>
                            </div>
                        </div>
                    </div>

                    <div class="payment-option">
                        <div class="radio-container">
                            <input class="custom-radio" type="radio" id="virement" name="mode_paiement"
                                value="VIREMENT" @checked($participant == null ? false : $participant->mode_paiement == 'VIREMENT')>
                            <div style="padding-top: 10px;">
                                <label class="fw-bold ms-3" for="virement">VIREMENT</label>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="text-center" style="margin-top: -30px;">
                    <a href="{{ route('listeParticipant') }}">
                        <button type="button" class="btn">Retour</button>
                    </a>
                    @if ($participant == null)
                        <button type="submit" class="btn" style="background: orange">Ajouter le participant</button>
                    @else
                        <button type="submit" class="btn btn-success">Appliquer les modifications</button>
                    @endif
                </div>

            </form>
        </div>
    </main>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            sousTotalTable1()
        })

        function _(elmt) {
            return document.getElementById(elmt);
        }

        function formatNumber(value, nbreCaractereApresVirgule = 2) {

            // Vérifier si la valeur est une chaîne contenant un nombre
            if (typeof value === 'string') {

                // Si la chaîne représente un nombre, convertir en float ou int
                if (!isNaN(value)) {
                    value = value.includes('.') ? parseFloat(value) : parseInt(value, 10);
                } else {
                    // Si ce n'est pas un nombre valide, retourner une erreur
                    return "Erreur : La valeur n'est pas un nombre valide.";
                }
            }

            // Si la valeur est toujours non numérique après vérification
            if (isNaN(value)) {
                return "Erreur : La valeur n'est pas un nombre.";
            }

            // Si c'est un flottant, limiter les décimales
            if (!Number.isInteger(value)) {
                value = parseFloat(value).toFixed(nbreCaractereApresVirgule);
            }

            // Convertir le nombre en chaîne pour le traitement
            let nombre = value.toString();

            // Diviser la chaîne en partie entière et décimale
            let parties = nombre.split('.');

            // Formater la partie entière avec des séparateurs de milliers
            let partieEntiere = parties[0].replace(/\B(?=(\d{3})+(?!\d))/g, "&nbsp;");

            // Construire le résultat
            let result = partieEntiere;

            // Ajouter la partie décimale si nécessaire
            if (parties.length > 1 && nbreCaractereApresVirgule > 0) {
                result += '.' + parties[1].substr(0, nbreCaractereApresVirgule);
            }

            return result;
        }

        function sousTotalTable1() {

            let libTotalNotaire = parseInt(_('libTotalNotaire').innerHTML.replace('&nbsp;', '').replace('CFA', '').replace(
                'F', ''))
            let libTotalCollaborateur = parseInt(_('libTotalCollaborateur').innerHTML.replace('&nbsp;', '').replace('CFA',
                '').replace('F', ''))
            let libTotalAccompagnant = parseInt(_('libTotalAccompagnant').innerHTML.replace('&nbsp;', '').replace('CFA', '')
                .replace('F', ''))
            // let libTotalProffessionnel = parseInt(_('libTotalProffessionnel').innerHTML.replace('&nbsp;', '').replace('CFA', '').replace('F', ''))

            let total = libTotalNotaire + libTotalCollaborateur + libTotalAccompagnant // + libTotalProffessionnel
            _('libSoutTotalTable1').innerHTML = formatNumber(total) + '&nbsp;F&nbsp;CFA'

            // let totalTotal = total + sousTotalTable2()
            let totalTotal = total 

            _('libTotalTotal').innerHTML = formatNumber(totalTotal ?? 0) + '&nbsp;F&nbsp;CFA'

            return total
        }
    </script>
@endsection