@extends('layouts.master')
@section('style')
    <style>
        .swal2-popup{
            margin-top: 13%;
        }
    </style>
@endsection
@section('contents')
    {{-- <div class="container p-4" style="margin-top:8%;">
        <h3 class="text-center font-weight-bold mb-2">Choose Your <span style="color:#EA5B0C">Membership Tier</span></h3>
        <p class="text-center mb-5">Select the tier that best aligns with your business goals and scale</p>

        <div class="row mb-4">
            <div class="col-md-4 mb-4">
                <div class="plan-card h-100">
                    <p class="font-weight-bold">Community Partner</p>
                    <p>For small organizations and startups </p>
                    <p class="price">$500<span style="font-size:16px">/year</span></p>
                    <ul class="list-unstyled">
                        <li>✔ Network Access</li>
                        <li>✔ Event Discounts</li>
                        <li>✔ Newsletter Access</li>
                        <li>✔ Online Directory Listing</li>
                    </ul>
                    <button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                        data-whatever="500">Select Plan</button>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="plan-card h-100">
                    <p class="font-weight-bold">Bronze Membership</p>
                    <p>For individuals and sale properties</p>
                    <p class="price">$1,000<span style="font-size:16px">/year</span></p>
                    <ul class="list-unstyled">
                        <li>✔ All Community Benefits</li>
                        <li>✔ 1-Hour Consultation</li>
                        <li>✔ 2 Event Registrations</li>
                        <li>✔ Basic Matchmaking</li>
                    </ul>
                    <button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                        data-whatever="1000">Select Plan</button>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="plan-card h-100">
                    <p class="font-weight-bold">Silver Partner</p>
                    <p>Companies with < 300 employees</p>
                            <p class="price">$5,000<span style="font-size:16px">/year</span></p>
                            <ul class="list-unstyled">
                                <li>✔ All Bronze Benefits</li>
                                <li>✔ 5 Consultation Hours</li>
                                <li>✔ Priority Event Access</li>
                                <li>✔ B2B Matchmaking</li>
                            </ul>
                            <button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                                data-whatever="5000">Select Plan</button>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="plan-card gold-highlight h-100">
                    <span class="popular text-center">★ POPULAR</span>
                    <p class="font-weight-bold">Gold Membership</p>
                    <p>Growing companies with < 300 employees</p>
                            <p class="price">$7,500<span style="font-size:16px">/year</span></p>
                            <ul class="list-unstyled">
                                <li>✔ All Silver Benefits</li>
                                <li>✔ 10 Consultation Hours</li>
                                <li>✔ Trade Mission Access</li>
                                <li>✔ Policy Advocacy Support</li>
                            </ul>
                            <button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                                data-whatever="7500">Select Plan</button>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="plan-card h-100">
                    <p class="font-weight-bold">Platinum Partner</p>
                    <p>Companies with 300+ employees</p>
                    <p class="price">$10,000<span style="font-size:16px">/year</span></p>
                    <ul class="list-unstyled">
                        <li style="color:#007bff">✔ All Gold Benefits</li>
                        <li style="color:#007bff">✔ 25 Consultation Hours</li>
                        <li style="color:#007bff">✔ Priority Trade Missions</li>
                        <li style="color:#007bff">✔ Committee Leadership</li>
                    </ul>
                    <button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                        data-whatever="10000" style="margin-top:60px">Select Plan</button>
                </div>
            </div>

            <div class="col-md-4 mb-4">
                <div class="plan-card h-100">
                    <p class="font-weight-bold">Premium Partner</p>
                    <p>Industry Leaders</p>
                    <p class="price">$15,000<span style="font-size:16px">/year</span></p>
                    <ul class="list-unstyled">
                        <li>✔ All Platinum Benefits</li>
                        <li>✔ 37.5 Consultation Hours</li>
                        <li>✔ VIP Matchmaking</li>
                        <li>✔ Sector Lobbying Access</li>
                    </ul>
                    <button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                        data-whatever="15000" style="margin-top:60px">Select Plan</button>
                </div>
            </div>
        </div>


        <!-- Last Card -->


        <div class="row justify-content-center">
            <div class="col-md-10">

                <div class="nuicc-cta-card">
                    <h3 class="nuicc-cta-title text-white">Become a Global Partner</h3>
                    <p class="nuicc-cta-text text-white">
                        Global Corporate Partner ($25,000/year) offers the highest-tier benefits
                        with strategic influence and brand leadership.
                    </p>
                    <button class="nuicc-cta-btn">Contact Us</button>
                </div>

            </div>
        </div>

        <div class="row justify-content-center mt-3">
            <div class="col-md-10">
                <div class="nuicc-cta-strip">
                    <strong>Have questions ? </strong> We’ll help you choose the right plan.
                    Contact Dr. Purnima Voria at
                    <a href="mailto:purnima@nuicc.org">purnima@nuicc.org</a>
                    or +1 (720) 323-3728
                </div>
            </div>
        </div>




    </div> --}}

    <div id="membership" class="container membership_table">
        {{-- Table of membership options --}}
        <div class="table-responsive membership_div my-2 text-center d-flex justify-content-center">
            <table class="table table-hover table-bordered w-75">
                <thead>
                    <tr style="background:#EA5B0C; color:#fff;">
                        <th colspan="6" class="text-center">NUICC Membership Options</th>
                    </tr>
                    <tr>
                        <th></th>
                        <th>Small Business<br></th>
                        <th>Associate</th>
                        <th>Corporate</th>
                        <th>Chairman’s Circle</th>
                        <th>Individual / Nonprofit</th>
                    </tr>
                    <tr>
                        <th></th>
                        <th>$1,000 (₹90,270)</th>
                        <th>$5,000 (₹4,51,350)</th>
                        <th>$10,000 (₹9,02,700)</th>
                        <th>$15,000 (₹13,54,050)</th>
                        <th>$400 (₹36,108)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Individual consultation on doing business in the Indian marketplace.</td>
                        <td>✔ (2½ hrs.)</td>
                        <td>✔ (12½ hrs.)</td>
                        <td>✔ (25 hrs.)</td>
                        <td>✔ (37½ hrs.)</td>
                        <td>✔ (1 hrs.)</td>
                    </tr>
                    <tr>
                        <td>Invitation to bi-monthly events focused on opportunities in India & and the United States at a
                            discounted price.
                        </td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Opportunities to introduce and promote your business to the 9,000 members of NUICC worldwide.
                        </td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Discounted admission to NUICC educational events.</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Discounted opportunities to travel to India/United States on arranged trade missions.</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>International Trade Alert, highlighting current US/India trade information, delivered directly
                            to you via email.</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                    </tr>
                    <tr>
                        <td>"Daily Investor News" emails.</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                    </tr>
                    <tr>
                        <td>Preferred company status and product placement on NUICC website.</td>
                        <td></td>
                        <td>✔</td>
                        <td>✔</td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Premium company status and product placement on NUICC website.</td>
                        <td></td>
                        <td></td>
                        <td>✔</td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Banner ads promoting your business at www.nuicc.org</td>
                        <td></td>
                        <td></td>
                        <td>✔</td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Recognition in NUICC Communications.</td>
                        <td></td>
                        <td></td>
                        <td>✔</td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Speaking opportunities at NUICC events and seminars in India and the United States</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Business referral services including access to US and Indian business leaders and government
                            officials.</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Invitation for NUICC Board of Advisors membership.</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>✔</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                                data-whatever="1000">Select Plan</button></td>
                        <td><button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                                data-whatever="5000">Select Plan</button></td>
                        <td><button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                                data-whatever="10000">Select Plan</button></td>
                        <td><button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                                data-whatever="15000">Select Plan</button></td>
                        <td><button type="button" class="btn-plan" data-toggle="modal" data-target="#userDetailsModal"
                                data-whatever="400">Select Plan</button></td>
                    </tr>
                </tbody>
            </table>

        </div>
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show mt-3 px-4" role="alert">
                <strong>Success!</strong> {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        @if (session('fail'))
            <div class="alert alert-danger alert-dismissible fade show mt-3 px-4" role="alert">
                <strong>Oops!</strong> {{ session('fail') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        {{-- <div class="card shadow">
        <div class="card-header text-center">
            <h4 class="mb-0">Membership</h4>
        </div>

        <div class="card-body">
            <form class="membership-form" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Name<span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control responsive_form_tag" placeholder="Enter your name"
                            value="{{ old('name', $payment->name ?? '') }}">
                        @error('name') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Email<span class="text-danger">*</span></label>
                        <input type="email" name="email" class="form-control responsive_form_tag" placeholder="Enter your email"
                            value="{{ old('email', $payment->email ?? '') }}"
                            pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
                        @error('email') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Phone<span class="text-danger">*</span></label>
                        <input type="text" name="phone" class="form-control responsive_form_tag" placeholder="Enter your phone number"
                            value="{{ old('phone', $payment->phone ?? '') }}">
                        @error('phone') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Amount<span class="text-danger">*</span></label>
                        <input type="number" name="amount" class="form-control responsive_form_tag" placeholder="Enter amount"
                            value="{{ old('amount', $payment->amount ?? '') }}" step="0.01" min="0">
                        @error('amount') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>
                </div>
                <div class="mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Payment Proof Upload<span class="text-danger">*</span> (Max :
                            2MB)</label>
                        <input type="file" name="proof_file" class="form-control responsive_form_tag" accept=".pdf,.jpg,.jpeg,.png">
                        @error('proof_file') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>
                </div>

                <div class="text-center">
                    <button type="submit" class="btn px-5 text-white"
                        style="background-color: rgb(234, 91, 12); border-color: rgb(234, 91, 12);">
                        Submit
                    </button>
                </div>

            </form>
        </div>
    </div> --}}

        <!-- intro Section End -->

        {{-- Payment section --}}
        <section id="payment-section" class="section-padding">
            <div class="container">
                <div class="row ">
                    <div class="col-md-12 section-title-header text-center ">
                        <h3 class="section-title wow fadeInUp" data-wow-delay="0.2s">Payment</h3>
                    </div>
                </div>

                <div class="single-intro-text founder-hover">
                    <div class="row  align-items-center">

                        <!--  Image -->
                        <div class="col-md-4 col-12 text-center">
                            <img src="{{ asset('assets/img/QR-code.jpeg') }}" alt="QR Code" class="img-fluid">
                        </div>

                        <!-- Content  PayPal -->
                        <div class="col-md-8 col-12">
                            <p class="section-subtext-new">
                                You can use PayPal Checkout to get paid online or in an app.
                                It can be set up in minutes and offers the convenience and security of PayPal.
                                Your customers don't have to re-enter information stored on their accounts
                                to complete payments in just a few steps. PayPal Checkout is available
                                to any merchant that has API access and supports different checkout flows.
                            </p>

                            <div class="row align-items-center mt-3">

                                <!-- Instructions -->
                                <div class="col-md-7 col-12">
                                    <p class="section-subtext-new mb-1">• Click Business Tools</p>
                                    <p class="section-subtext-new mb-1">• Click PayPal Checkout</p>
                                    <p class="section-subtext-new mb-1">• Click Get Started</p>
                                    <p class="section-subtext-new mb-1">• Choose the option that suits you best</p>
                                </div>

                                <!-- PayPal Button -->
                                <div class="col-md-5 col-12 text-center">
                                    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                                        <input type="hidden" name="cmd" value="_s-xclick">
                                        <input type="hidden" name="hosted_button_id" value="YBN6K8TRJLYW6">
                                        <input type="hidden" name="currency_code" value="USD">

                                        <input type="image"
                                            src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif"
                                            border="0" name="submit" alt="Buy Now with PayPal">

                                        <!-- Small helper text -->
                                        <p class="text-muted" style="font-size: 12px;">
                                            Real customer PayPal / card → pays
                                        </p>
                                    </form>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
{{-- 
                <a href="{{ route('paypal.payment') }}">
                    Pay with PayPal
                </a> --}}


            </div>
    </div>
    </div>
    </section>

    {{-- Contact us form --}}
    <!-- Contact Us Section -->
    <section id="contact-map" class="section-padding"
        style="background-image: url('{{ asset('assets/img/home/contact-background.jpg') }}');
           background-size: cover;
           background-position: center;
           background-repeat: no-repeat;">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Contact Us</h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s"></p>
                    </div>
                </div>
            </div>
            <div class="row justify-content-middle">
                <div class="col-lg-6 col-md-6 col-xs-12 d-flex align-items-center">
                    <div class="container-form wow fadeInLeft w-100" data-wow-delay="0.2s">
                        <img src="{{ asset('assets/img/home/World-Map.jpg') }}" alt="map" class="img-fluid">
                    </div>
                </div>

                <div class="col-lg-6 col-md-6 col-xs-12">
                    <div class="container-form wow fadeInLeft" data-wow-delay="0.2s">
                        <div class="form-wrapper">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            @if (session()->has('success'))
                                <div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
                                    {{ session()->get('success') }}
                                </div>
                            @endif
                            @if (session()->has('error'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{ session()->get('error') }}
                                </div>
                            @endif
                            <form role="form" class="contact-us" method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6 form-line">
                                        <div class="form-group">
                                            <input type="text" class="form-control responsive_form_tag" name="name"
                                                placeholder="Full Name" required>
                                        </div>
                                        @error('name')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 form-line">
                                        <div class="form-group">
                                            <input type="text" class="form-control responsive_form_tag" name="email"
                                                placeholder="Email" required>
                                        </div>
                                        @error('email')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 form-line">
                                        <div class="form-group">
                                            <input type="text" class="form-control responsive_form_tag" name="mobile"
                                                placeholder="Mobile" maxlength="15" required>

                                        </div>
                                        @error('mobile')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <textarea class="form-control responsive_form_tag" rows="4" name="message" placeholder="Write Message"
                                                required></textarea>

                                        </div>
                                        @error('message')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                        <div class="form-submit">
                                            <button type="submit" class="btn btn-common"><i class="fa fa-paper-plane"
                                                    aria-hidden="true"></i> Send
                                                Message</button>

                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Contact Us Section End -->
    </div>

    <div class="modal fade user-details-modal" id="userDetailsModal" tabindex="-1" role="dialog"
        aria-labelledby="userDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog membership_modal_dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userDetailsModalLabel">Membership Form</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="membership_cross">&times;</span>
                    </button>
                </div>
                <form class="payment-form" id="payment-form" method ="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Name: <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="membername" class="form-control responsive_form_tag"
                                        required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Email: <span
                                            class="text-danger">*</span></label>
                                    <input type="email" class="form-control responsive_form_tag" name="email"
                                        required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Phone: <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control responsive_form_tag" maxlength="15"
                                        name="phone" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Amount: <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control responsive_form_tag amount" id="amount"
                                        name="amount" readonly>
                                </div>
                            </div>
                            {{-- <div class="col-md-6">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Payment Proof:</label>
                                    <input type="file" class="form-control responsive_form_tag" accept=".jpeg,.jpg,.pdf"
                                        name="proof_file">
                                </div>
                            </div> --}}
                        </div>
                        <input type="hidden" name="payment_id" id="payment_id">
                        <input type="hidden" name="payment_status" id="payment_status">


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary small" style="font-size: 78%" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary paypal_pay small" style="font-size: 78%">Pay with PayPal</button>
                        <button type="button" class="btn btn-primary small qr-button" style="font-size: 78%"  data-whatever="QR">Using QR Code</button>
                   
                    </div>
                    <div class="paypal-area d-none p-4">
                        <div id="paypal-button-container" class="mt-3"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="{{ asset('assets/js/membership.js') }}"></script>
    <script src="{{ asset('assets/js/homepage.js') }}"></script>

    {{-- Live --}}
    {{-- <script
        src="https://www.paypal.com/sdk/js?client-id=AdfmoM8OVleGUGfbv2OX_lzo2_7pwuLu-KcZRqXVW3rftq4os63WwfijGPc-O3O1Jf85tBqlvBwMvuBS&currency=USD" >
    </script> --}}

    {{-- Sandbox --}}
    <script
        src="https://www.paypal.com/sdk/js?client-id=AYNuKHVYggJ2RM_zXhMDfrJ3p5097Z3565Jc1eQCRrIMe_mhsiq8nIW2XDE1d5cbYWJ41gzTGpqnAV0g&currency=USD" >
    </script>

    <!-- <script src="https://www.paypal.com/sdk/js?client-id=YOUR_SANDBOX_CLIENT_ID&currency=INR"></script> -->

    {{-- <!-- <script src="https://www.paypal.com/sdk/js?client-id=YOUR_SANDBOX_CLIENT_ID&currency=INR"></script> --> --}}

@endsection