@extends('frontend.inc.layout-front')
@section('title')
    Récapitulatif Paiement || {{ env('APP_NAME') }}
@endsection
@section('container')
    <!-- home 4grids block -->
    <section class="services-w3l-block py-5 mt-5" id="features" style="background-color: #f4f4f4; margin-bottom=-2rem;">
        <div class="container py-md-5 py-4">
            <div class="row">
                <div class="col-12 mx-auto card">
                    <div class="card-body"> 
                        @mobile()
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-size:90%; font-weight: bold;">Etape 4 :
                                Récapitulatif Paiement</h3>
                        @endmobile

                        @desktop
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-weight: bold;">Etape 4 :
                                Récapitulatif Paiement
                            </h3>
                        @enddesktop
                        <div class="row mb-4">
                            <form action="{{ route('leo.store-modepaiement') }}" method="post">
                                @csrf
                                <input type="hidden" name="ref" id="ref" value="{{Crypt::encrypt($paiement->reference)}}">
                                <div class="align-items-stretch">
                                    <div class="p-2 bg-theme text-white mb-3"
                                        style="border-top:#2c3347 dashed 1px; border-bottom:#2c3347 dashed 1px; ">
                                        Information sur le lions
                                    </div>
                                    <div class="row mt-0">
                                        <div class="form-group col-md-4 mb-3">
                                            <label for="name"><b>Prénoms <i class="text-danger">*</i></b></label>
                                            <input type="text" class="form-control" maxlength="150" minlength="2"
                                                name="prenoms" id="prenoms" value="{{ $inscrit->prenoms }}" readonly required>
                                        </div>
                                        <div class="form-group col-md-4 mb-3">
                                            <label for="name"><b>Nom <i class="text-danger">*</i></b></label>
                                            <input type="text" class="form-control" maxlength="150" minlength="2"
                                                name="nom" id="nom" value="{{ $inscrit->nom }}" readonly required>
                                        </div>
                                        <div class="form-group col-md-4 mb-3">
                                            <label for="name"><b>E-mail <i class="text-danger">*</i></b></label>
                                            <input type="email" class="form-control" maxlength="150" minlength="2"
                                                name="email" id="email" readonly value="{{ $inscrit->email }}"
                                                required>
                                        </div>
                                    </div>

                                    <div class="p-2 bg-theme text-white mb-3"
                                        style="border-top:#2c3347 dashed 1px; border-bottom:#2c3347 dashed 1px; ">
                                        Détails paiements
                                    </div>

                                    <div class="row mt-0">
                                        <div class="form-group col-md-6 mb-3">
                                            <label for="name"><b>Rubrique <i class="text-danger">*</i></b></label><br>
                                            <input type="text" name="rubrique" class="form-control" id="rubrique" value="{{$paiement->getRubrique->libelle}}"  autofocus readonly required> 
                                        </div>
                                        <div class="form-group col-md-6 mb-3">
                                            <label for="name"><b>Code <i class="text-danger">*</i></b></label>
                                            <input type="text" class="form-control" maxlength="150" minlength="2"
                                                name="code" id="code" value="{{$paiement->getRubrique->code}}" readonly required>
                                        </div>  
                                    </div>
                                    @foreach ($details_paiement as $item)
                                    <div class="row mt-0"> 
                                        <div class="form-group col-md-3 mb-3">
                                            <label for="name"><b>Catégorie <i class="text-danger">*</i></b></label>
                                            <input type="text" class="form-control" maxlength="150" minlength="2"
                                                name="categorie" value="{{$item->getRubriquetarif->getCategorie->libelle}}" readonly required>
                                        </div>
                                        <div class="form-group col-md-5 mb-3">
                                            <label for="name"><b>Type rubrique <i class="text-danger">*</i></b></label>
                                            <input type="text" class="form-control" maxlength="150" minlength="2"
                                                name="type_rubrique" value="{{$item->getRubriquetarif->getTyperubrique->libelle}}" readonly required>
                                        </div>
                                        <div class="form-group col-md-4 mb-3">
                                            <label for="name"><b>Montant <i class="text-danger">*</i></b></label>
                                            <input type="text" class="form-control" maxlength="150" minlength="2"
                                                name="montant" value="{{$item->montant}}" readonly required>
                                        </div>
                                    </div> 
                                        
                                    @endforeach  
                                    <div class="row mt-0">
                                        <div class="form-group col-md-6 mb-3">
                                            <label for="name"><b>Montant total <i class="text-danger">*</i></b></label><br>
                                            <input type="text" name="montant_total" class="form-control" id="montant_total" value="{{$paiement->montant_total}}"  autofocus readonly required> 
                                        </div> 
                                        <div class="form-group col-md-6 mb-3">
                                            <label for="name"><b>Mode paiement <i class="text-danger">*</i></b></label>
                                            <select class="form-select" name="modepaiement_id" id="modepaiement_id" required>
                                                <option value="" selected>---Choisissez---</option>
                                                @foreach ($modepaiements as $item)
                                                    <option value="{{ $item->id }}">{{ $item->libelle }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>  
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-12 text-center mx-auto">
                                        <a href="{{ url()->previous() }}"><button type="button" id="valider" class="btn btn-primary btn-lg" style="border-radius: 25px;">Précédent</button></a> &nbsp;&nbsp; <button type="submit" class="btn btn-warning btn-lg" id="valider" style="border-radius: 25px;">Valider<i class="bi bi-chevron-right"></i></button>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!-- home 4grids block -->
@endsection
@section('jsScript') 
@endsection