@extends('frontend.layouts.app')


@section('content')
    <style>
        .custom-checkbox input[type="checkbox"] {
            display: none;
        }

        .custom-checkbox {
            display: flex;
            align-items: center;
            cursor: pointer;
            position: relative;
            padding-left: 35px;
            font-size: 16px;
            background: rgb(171, 207, 202);
            padding: 7px;
        }

        .custom-checkbox .checkbox {
            position: absolute;
            left: 0;
            width: 20px;
            height: 20px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 4px;
            transition: background-color 0.3s, border-color 0.3s;
        }

        .custom-checkbox input[type="checkbox"]:checked+.checkbox {
            background-color: #007bff;
            border-color: #007bff;
        }

        .custom-checkbox input[type="checkbox"]:checked+.checkbox:after {
            content: "✔";
            color: white;
            font-size: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .custom-checkbox .label-text {
            margin-left: 10px;

        }

        .label-text {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 10px;
            flex-grow: 1;

        }

        .label-text .duration {
            font-size: 16px;
            color: #333;
        }
        .custom-pricing-back{
            background-image: url("{{ asset('/frontend/assets/images/back.jpg') }}");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width:100%;
            height:770px;
            opacity:90%;
        }
    </style>



    <section class="space-top space-extra2-bottom custom-pricing-back">
        <div class="container">
            <div style="margin-top:-25px" class="row p-1">
                
                <div style="margin:0 auto; background:white;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;border-radius:10px"
                    class="col-xl-4 col-lg-4 col-md-7 col-sm-12 p-5">
                    <div class="">
                        <p style="text-align:center; font-size:19px; font-weight:600">Select Your Membership Plan</p>
                        <div class="membership-options">
                            <form action="{{ route('frontend.checkout') }}" method="GET" class="mt-40">
                                @csrf
                                @forelse ($prices as $price)
                                <label style="margin-bottom:20px; border-radius:5px" class="custom-checkbox">
                                    <input type="checkbox" name="membership[{{ $price->course_id }}][price]" value="{{ $price->price }}">
                                    <span class="checkbox ms-2 me-2"></span>
                                    <span class="label-text mb-2">
                                        <span class="duration ms-3 mt-2">{{ $price->month }} Month</span>
                                        <span class="price text-danger me-2 mt-2">${{ $price->price }}</span>
                                    </span>
                                </label>
                                @empty
                                <p style="text-align:center; font-size:14px" class="mb-5">No membership options available.</p>
                                @endforelse
                                <button type="submit" style="background:rgb(1, 113, 141); padding:7px 25px; width:100%; color:white" class="btn">Continue</button>
                            </form>


                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
@if(session('membership_error'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: '{{ session('membership_error') }}',
        });
    });
</script>
@endif
@endpush