@extends('frontend.inc.layout-front')
@section('title')
    Choix Categorie || {{ 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"> 
                    <form action="{{route('lions.choix-package-store')}}" method="post">
                        @csrf
                        <input type="hidden" name="email" id="email" value="{{Crypt::encrypt($email)}}">
                    <div class="card-body"> 
                        @mobile()
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-size:90%; font-weight: bold;">Etape 2 : Choix des rubriques de paiement</h3>
                        @endmobile

                        @desktop
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-weight: bold;">Etape 2 : Choix des rubriques de paiement
                            </h3>
                        @enddesktop
                        <div class="row mb-4 mx-auto"> 
                            <div class="col-md-12 col-lg-6 d-flex align-items-stretch mx-auto">
                   
                                <!-- liste des packages -->
                                <div class="card border-dark mb-3 mx-auto" style="max-width: auto; min-height: 17em;">
                                    <div class="card-header bg-theme">
                                        <span class="color-theme-white">
                                            <i class="bi bi-calendar-range"></i>
                                            <b>DM403 CoCo2023 </b>
                                        </span> &nbsp;&nbsp;

                                         
                                        <span class="color-theme-yellow" style="float: right;">
                                            <b><i class="bi bi-hourglass-bottom"></i> Inscription LIONS</b>
                                        </span>&nbsp;
                                    </div>
                                    <div class="card-body text-dark text-center align-middle" style="padding:auto;">
                                        {{-- 
                                            <h5 class="card-title">
                                            {{ $rubrique->libelle }}
                                        </h5> 
                                        --}}
                                         
                                        <p class="card-text" style="color: black;float: left; text-align:left; margin: 10px 0;">
                                            
                                                @foreach (getTarification($rubrique->id, $categorie_lions->id) as $tarification)
                                                    &nbsp; &nbsp;
                                                    <input style="border: 3px solid #7a1f0d;"
                                                        class="form-check-input limited {{ $rubrique->code }}"
                                                        data-number="{{ $rubrique->code }}_{{ $tarification->tarif_id }}"
                                                        type="checkbox"
                                                        @if ($rubrique->date_fin) {{ $rubrique->date_fin <= date('Y-m-d H:i:s') ? 'disabled' : '' }} @endif
                                                        value="{{ $tarification->id }}"
                                                        name="package[]" />&nbsp;&nbsp;{{ $tarification->getTyperubrique->libelle }}
                                                    :&nbsp;{{ number_format($tarification->getGrilletarifaire->montant, 0, ',', '.') }}
                                                    F CFA <br>
                                                @endforeach 
                                        </p>


                                    </div>
                                    <div class="card-footer text-muted text-center bg-theme-yellow">
                                        <span class="color-theme" style="text-align:center;">
                                            <i class="fas fa-exclamation color-theme"></i><i class="fas fa-exclamation color-theme"></i><i class="fas fa-exclamation color-theme"></i>&nbsp;&nbsp; Tarifs valables jusqu'au : 
                                            <b class="">{{ $rubrique->date_fin ? \Carbon\Carbon::parse($rubrique->date_fin)->format('d-m-Y H:i:s') : '' }}</b>
                                        </span>
                                    </div>
                                </div>
                                <!-- end liste packages -->
                            </div> 
                            <div class="row">
                                <div class="form-group col-md-6 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="suivant" style="border-radius: 25px;">Suivant<i class="bi bi-chevron-right"></i></button>
                                </div>
                              </div>
                        </div>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </section>
    <!-- home 4grids block -->
@endsection
@section('jsScript')
<script>
    $(document).ready(function() {

$('#suivant').prop('disabled', true);
 var number_limited = 1;
  $('.limited').on('change', function(){
    var noChecked = 0;
// ###### script permettant de vérifier le nbre de package par mode #####
  //1- récupérer la valeur de data-number
  var code_package_tarif = $(this).attr("data-number"); 
  // 2- substrat code formation inside the data-number
  var tab_code_package = code_package_tarif.split('_');
  var code_package = tab_code_package[0]; 
  // 3- check if the element is checked or no
      // 3-1 : if true we goin to unchecked the rest of training code
        if($(this).is(':checked')){ 
          $.each($('.'+code_package), function(){
            if($(this).not(':checked').length == 1){
                $(this).attr('disabled',false); // default true
            }
          }); 
        }
      // 3-2 : if false we goin to unchecked all of training code
      if(!$(this).is(':checked')){
          $.each($('.'+code_package), function(){ 
                $(this).attr('disabled',false); 
          }); 
        }
//#### end script permettant de vérifier le nbre de formation par mode ####
  

// count number checked
    $.each($('.limited'), function(){
        if($(this).is(':checked')){
            noChecked++;
          $('#suivant').prop('disabled', false);
        } 
    });
    // if number checked equalto number limited disable all checkbox not checked else don't disable
    if(noChecked >= number_limited){ 
      $('#suivant').prop('disabled', false); 
      }else{
        noChecked--;
        $('#suivant').prop('disabled', true);
    };
}); 


    }); 


</script>

@endsection