@extends('layouts.payment_layout')

@section('content')
<div class="main-body">
            <div class="signup-box">
               <header class="signup-heading">
                    <h1 class="signup-title">Choose payment method</h1>
                    <div class="step-description">You are 2 minutes away from accessing our database!</div>
                                        </header>
                                        
                                        <div class="container my-5">
                                            <div class="row d-flex justify-content-center align-items-center">
                                                <div class="col-md-8 col-12 col-sm-12">
                                                    
                                                
    <div class="card shadow border-0 rounded-3">
        <!-- Card Header -->
        <div class="position-relative text-center text-white p-5 bzn" style="background: linear-gradient(45deg, #1d4ed8 , #0ea5e9);">
            <div class="d-flex flex-column">
              
                <div class="membership-plan-info annual-membership-plan-info" data-level="11" style="display: block;">
                    <div class="d-flex justify-content-between">
                        <div class="flex flex-column justify-content-start flex-start">
                          <h3>Subscribe to {{ucfirst($plan->name)}} Plan </h3>

                                                <div class="membership-description">
                                            Billed {{ucfirst($plan->intervals)}}
                                                 
                                                </div>  
                        </div>
                         <div class="membership-price">$<span class="bai-payment-price-js">{{number_format($plan->price)}}</span></div>
                    </div>
                                            
                                                
                                              
                                            </div>
            </div>
            <div class="hero__bottom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" class="h-12 w-full text-white fill-current">
                                <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25"></path>
                                <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5"></path>
                                <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"></path>
                            </svg>
                        </div>
        </div>

        <!-- Form Content -->
        <div class="card-body p-4">
            <form action="{{route('user.subscription.start')}}" method="post">
                @csrf

                <!-- Payment Method Selection -->
                <div class="mb-4">
                    <label class="form-label fw-semibold">Select Deposit Method</label>
                    <div class="row g-3">
                         @if(!blank($payment_methods))
                                                        @foreach($payment_methods as $payment_method)
                        <div class="col-md-4">
                            <div class="form-check border rounded p-3 h-100 " data-id="{{__the_hash($payment_method->id)}}">
                                <input class="form-check-input" type="radio" name="rcp_gateway" value="{{__the_hash($payment_method->id)}}" id="{{__the_hash($payment_method->id)}}" required>
                                <label class="form-check-label d-flex align-items-center justify-content-between" for="{{__the_hash($payment_method->id)}}">
                                    
                                    <span>{{$payment_method->name}}</span>
                                    <div class="me-2 bbns bg-opacity-25 rounded-circle border border-2">
                                       
                                    </div>
                                </label>
                                
                            </div>
                        </div>
                        @endforeach
                                                        @endif
                     
                        <!-- Add Ethereum & Bitcoin same way -->
                    </div>
                </div>

                <!-- Amount Input -->
                <div class="mb-4 p-4 border rounded bg-light">
                    <label for="amount" class="form-label fw-semibold">Amount</label>
                    <div class="input-group input-group-lg mb-3">
                        <span class="input-group-text fw-bold">$</span>
                        <input type="number" class="form-control fw-bold" id="amount" readonly  value="{{$plan->price}}" required>
                        <span class="input-group-text">.00</span>
                    </div>

                </div>

                <!-- Action Buttons -->
                <div class="d-flex flex-column flex-sm-row gap-3">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-credit-card me-2"></i> Subscribe
                    </button>
                    <input type="hidden" id="rcp-registration-type" name="registration_type" value="" />
                                                    <input type="hidden" id="rcp-membership-id" name="membership_id" value="{{__the_hash($plan->id)}}" />
                                                    <input type="hidden" id="rcp-payment-id" name="rcp_registration_payment_id" value="{{$plan->name}}" />
                    <a href="{{route('user.subscription')}}" class="btn btn-outline-secondary w-100">
                        <i class="bi bi-arrow-left me-2"></i> Back to Plans
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Security Notice -->
    <div class="alert alert-light border mt-4 d-flex align-items-start">
        <i class="bi bi-shield-check text-primary fs-4 me-3"></i>
        <div>
            <h6 class="mb-1">Secure Deposit</h6>
            <small class="text-muted">All deposits are processed through secure payment channels. Your financial information is never stored on our servers.</small>
        </div>
    </div>
    </div>
    </div>
</div>

               
            </div>
            <!-- / Signup Box -->
        </div>
@endsection

@section('javascript')
<script>
$(document).ready(function () {
    $("[data-check]").click(function () {
        let radio = $(this).find("input[type=radio]");
        radio.prop("checked", true).trigger("change");
    });
    
    $(".form-check").on("click", function () {
    // Unselect all
    $(".form-check").removeClass("bg-primary-50 bg-opacity-25");
    $(".bbns").removeClass("bg-primary-500 text-white").html(function () {
        // restore original icons
        return "";
    });

    // Highlight selected
    $(this).addClass("bg-primary-50 bg-opacity-25");

    // Change icon to check
    $(this).find(".bbns")
        .html('<i class="bi bi-check"></i>')
        .addClass("bg-primary-500 text-white");

    // Select radio
    $(this).find(".form-check-input").prop("checked", true);
});

    $("input[type=radio][name=payment]").on("change", function () {
        $("[data-check]").removeClass("bg-light border-primary");
        $("[data-check] .icon-wrap i").each(function () {
            let original = $(this).data("original-icon");
            if (!original) {
                // save original icon for restore
                $(this).data("original-icon", $(this).attr("class"));
                original = $(this).attr("class");
            }
            $(this).attr("class", original); // reset to original
        });

        // highlight selected
        let parent = $(this).closest("[data-check]");
        parent.addClass("bg-light border-primary");
        parent.find(".icon-wrap i").attr("class", "bi bi-check text-success");
    });
});
</script>
@endsection