@extends('layouts.app',['ver' => 2])


@section('content')
 <style>
.selectedoption {
    background-color: #6c757d; /* Adjust the background color as needed */
}
.selectedPlan {
    background-color: #000; /* Adjust the background color as needed */
    color:#fff;
}
</style>
        <section class="masterclass-area pricing-content section-padding">

       
             <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">Abonnement</div>
                         <div class="row text-center justify-content-center px-3">  
                            <div class="mt-2 mb-2 ml-2 mr-2">
                              @if (isset($errors) && $errors->any())
                                <div class="alert alert-danger" role="alert">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{  $error }}</li>
                                        @endforeach
                                    </ul>
                                    {{ session('status') }}
                                </div>
                            @endif
            
                            @if (session()->has('success'))
                                <div class="alert alert-success" role="alert">
                                    <ul>
                                        @foreach (session()->get('success') as $message)
                                            <li>{{  $message }}</li>
                                        @endforeach
                                    </ul>
                                    {{ session('status') }}
                                </div>
                            @endif
                            @if (session('error'))
                                <div class="alert alert-danger mb-2 mt-2">
                                    {{ session('error') }}
                                </div>
                            @endif
                            </div>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('subscribe.store') }}" method="POST" id="paymentForm">
                                @csrf
                                <div class="row mt-3">
                                    <div class="col">
                                        <div class="section-title text-center mb-4">
                                             <h2 class="display-5">Choisissez votre formule</h2>
                                             <h5 class="mt-2">Essayez gratuitement pendant une 7 jours</h5>
                                            <p class="mt-3">Un programme riche comportant près de 50 nouvelles Masterclass . Avec l’intervention de spécialistes de divers aspects de la culture soufie...</p>
                                        </div>   
                                       <div class="row text-center justify-content-center">       
                                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                                @foreach ($plans as $plan)
                                                    <label
                                                        class="btn btn-outline-dark rounded m-2 p-3" onclick="selectOptionPlan(this)"
                                                    >
                                                        <input
                                                            type="radio"
                                                            name="plan"
                                                            value="{{ $plan->slug }}"
                                                            required
                                                        >
                                                        <p class="h2 font-weight-bold text-capitalize">
                                                            {{ $plan->nom }}
                                                        </p>

                                                        <p class="display-4 font-weight-bold text-primary mb-2">
                                                            {{ $plan->visual_price ?? 'N/A' }}
                                                        </p>

                                                   
                                                     <p class="h5 text-muted">
                                                        @if ($plan->local_currency_price && !empty($plan->local_currency_price))
                                                            ({{ $plan->local_currency_price }})
                                                        @endif
                                                    </p>
                                                    </label>
                                                @endforeach
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                            
                                <div class="row mt-3 text-center justify-content-center">
                                        
                                    <div class="col">
                                         <hr>
                                        <h4>
                                         Sélectionnez la méthode de paiement
                                        </h4>
                                        <div class="form-group" id="toggler">
                                            <div class="btn-group btn-group-toggle align-middle" data-toggle="buttons">
                                                @foreach ($paymentPlatforms as $paymentPlatform)
                                                    <label
                                                        class="btn btn-outline-secondary rounded m-2 p-1 align-middle"
                                                        data-bs-target="#{{ $paymentPlatform->name }}Collapse"
                                                        data-bs-toggle="collapse" aria-bs-expanded="false"  onclick="selectOption(this)"
                                                    >
                                                        <input
                                                            type="radio"
                                                            name="payment_platform"
                                                            value="{{ $paymentPlatform->id }}"
                                                            required
                                                        >
                                                        <img class="img-fluid" style=" max-width: 200px;height: auto;" src="{{ asset($paymentPlatform->image) }}?v=2">
                                                    </label>
                                                @endforeach
                                            </div>
                                            @foreach ($paymentPlatforms as $paymentPlatform)
                                                <div
                                                    id="{{ $paymentPlatform->name }}Collapse"
                                                    class="collapse"
                                                    data-parent="#toggler{{ $paymentPlatform->name }}"
                                                    
                                                >
                                                    @includeIf ('public.components.' . strtolower($paymentPlatform->name) . '-collapse')
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center mt-5">
                                    <hr>
                                    <button type="submit" id="payButton" class="subscribe-button">Abonnez-vous maintenant</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            
        </section>
@push('scripts')
<script>
$(document).ready(function() {
    $('#toggler input[type="radio"]').on('change', function() {
        $('.collapse').collapse('hide');
        $($(this).closest('label').data('bs-target')).collapse('show');
    });
});

function selectOption(element) {
    // Remove the 'selected' class from all labels
    var labels = document.querySelectorAll('.btn-group-toggle .btn');
    for (var i = 0; i < labels.length; i++) {
        labels[i].classList.remove('selectedoption');
    }

    // Add the 'selected' class to the clicked label
    element.classList.add('selectedoption');
}

function selectOptionPlan(element) {
    // Remove the 'selected' class from all labels
    var labels = document.querySelectorAll('.btn-group-toggle .btn');
    for (var i = 0; i < labels.length; i++) {
        labels[i].classList.remove('selectedPlan');
    }

    // Add the 'selected' class to the clicked label
    element.classList.add('selectedPlan');
}
</script>
@endpush
@endsection