@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>
            <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->nom }}" required @readonly($read)>
                        <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->prenom }}" required @readonly($read)>
                        <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->email }}" required @readonly($read)>
                        <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">
                        <input type="email" class="form-control mb-1" id="inpEmail" name="email"
                            value="{{ $participant->pays }}" required @readonly($read)>
                        <i class="form-label ms-3">pays <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="telephone_whatsapp"
                            required @readonly($read)>
                        <i class="form-label ms-3">Téléphone whatsapp <b style="color : red;">*</b></i>
                    </div>
                </div>
            </div>

            <!-- Profession Choice -->
            <div class="form-section mb-4">
                <div class="flex-container space-between">
                    <div class="radio-container">
                        <p class="form-label pt-2">Votre qualité : </p>
                        <input type="text" class="form-control" value="{{ $participant->fonction }}" required
                            @readonly($read)>
                    </div>
                </div>
            </div>



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

            <!-- Registration Fees -->
            <table class="table mx-3" style="margin-bottom : 40px!important;a">
                <thead>
                    <tr>
                        <th width="40%"><i class="form-label"></i></th>
                        <th width="20%"><i class="form-label">Total</i></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold">Montant individuel</td>

                        <td class="right-aligned"><span class="fw-bold" id="libTotalNotaire">
                                {{ $participant->montant_individuel }} &nbsp;F&nbsp;CFA</span></td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Montant total</td>

                        <td class="right-aligned"><span class="fw-bold" id="libTotalCollaborateur">
                                {{ $participant->montant_total_bulletin }} &nbsp;F&nbsp;CFA</span></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">{{ $participant->montant_total_bulletin }}</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>

            @if ($participant->inscription_payee == 0)
                <form action="{{ route('confirmParticipation') }}" method="post" onsubmit=" return confirm('Voulez-vous confirmer le paiement ?')">
                    @csrf
                    <input type="text" name="id" id="" value="{{ $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">
                                <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">
                                <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>
                    </div>
                    <div class="text-center" style="margin-top: -30px;">
                        <button class="btn btn-success">Confirmer le paiement</button>
                    </div>
                </form>
            @else
                <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="1" @checked($participant->mode_paiement == 'CASH') @disabled($read)>
                            <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="2" @checked($participant->mode_paiement == 'VIREMENT') @disabled($read)>
                            <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>
                    <a href="{{ route('badgePdf', ['id' => $participant->idparticipant]) }}" class="btn submit-btn" target="_blank">
                        Imprimer
                    </a>

                </div>
            @endif
        </div>
    </main>
@endsection