HEX
Server: Apache/2.4.52 (Ubuntu)
System: Linux spn-python 5.15.0-89-generic #99-Ubuntu SMP Mon Oct 30 20:42:41 UTC 2023 x86_64
User: arjun (1000)
PHP: 8.1.2-1ubuntu2.20
Disabled: NONE
Upload Files
File: /var/www/html/video-rental/wp-content/themes/video-rental-olds/page-home.php
<?php /* Template Name: Home Page */
get_header();

$current_user_id = get_current_user_id();
$affiliate_code = '';

if ($current_user_id) {
    $affiliate_code = get_user_meta($current_user_id, 'referred_by_affiliate', true);
}

?>

<div class="banner-wrap">
    <div class="banner-slider">
        <div class="banner-slide banner-slide-1">
            <div class="container custom-container">
                <div class="content-wrap">
                    <h2 class="banner-title">
                        <span>Tisha B’Av: </span>
                        Stories That Inspire,
                        Messages That Matter
                    </h2>
                    <div class="btn-wrap">
                        <a href="#special-offer" class="btn link"> <img
                                src="<?php echo get_template_directory_uri(); ?>/img/play.svg" alt=""> <span>Rabbi
                                Yechiel
                                Spero</span></a>
                        <a href="#special-offer" class="btn link"><img
                                src="<?php echo get_template_directory_uri(); ?>/img/play.svg" alt=""> <span>Eli
                                Scheller</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="arrow-btm">
        <a href="#video-section"><img src="<?php echo get_template_directory_uri(); ?>/img/arrow-btm.svg" alt=""></a>
    </div>

</div>

<div class="home-content-wrap" id="video-section">
    <div class="container custom-container">

        <div class="row">
            <div class="col-12">
                <div class="head-wrap">
                    <h2 class="title-wrap">Tisha B’Av Video Presentations</h2>
                    <p class="para-wrap">Experience two powerful and meaningful presentations designed to connect,
                        inspire, and bring deeper reflection this Tisha B’Av. Each video supports Chesed of
                        Flatbush, an organization dedicated to helping families in crisis.</p>
                </div>
            </div>
        </div>
        <!-- <div class="video-wrap">
           
            <?php
            // $args = [
            //     'post_type' => 'vm_video',
            //     'posts_per_page' => 2, // Get exactly 2 videos
            //     'post_status' => 'publish'
            // ];
            
            // $video_query = new WP_Query($args);
            
            // if ($video_query->have_posts()):
            //     while ($video_query->have_posts()):
            //         $video_query->the_post();
            
            //         $trailer_link = get_post_meta(get_the_ID(), 'vm_trailer_link', true);
            //         $description = get_post_meta(get_the_ID(), 'vm_description', true);
            //         $price = get_post_meta(get_the_ID(), 'vm_price', true);
            //         $rental = get_post_meta(get_the_ID(), 'vm_rental', true);
            //         $thumb = get_post_meta(get_the_ID(), 'vm_video_thumbnail', true);
            ?>

                    <div class="row row-align">
                        <div class="col-lg-6">
                            <div class="video-inner-wrap">
                                <video controls poster="<?= esc_url($thumb); ?>">
                                    <source src="<?= esc_url($trailer_link); ?>" type="video/mp4" />
                                    Your browser does not support the video tag.
                                </video>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="content-wrap">
                                <?php
                                // $title = get_the_title();
                                // $modified_title = preg_replace('/\bwith\b/i', 'with <span>', $title, 1);
                                // if ($modified_title !== $title) {
                                //     echo '<h2 class="sub-title-wrap">' . $modified_title . '</span></h2>';
                                // } else {
                                //     echo '<h2 class="sub-title-wrap"><span>' . esc_html($title) . '</span></h2>';
                                // }
                                ?>

                             

                                </p>
                                <div class="para-wrap">
                                    <?= wp_kses_post(wpautop($description)); ?>
                                </div>
                                <ul class="listing">
                                    <li class="price">Price : <div class="num">$<?= esc_html($price); ?></div>
                                    </li>
                                    <li class="star"><img src="<?= get_template_directory_uri(); ?>/img/star.svg" alt=""> 7.3/10
                                    </li>
                                    <li class="time"><img src="<?= get_template_directory_uri(); ?>/img/time.svg" alt="">
                                        <?= esc_html($rental); ?> days</li>
                                </ul>
                                <div class="btn-wrap">
                                   <a href="#" class="btn link"><span>Rent Now</span></a> -->
        <!-- <button type="button" class="btn btn-rent rent-now-btn" data-bs-toggle="modal"
                                        data-post-id="<?php echo get_the_ID(); ?>" data-bs-target="#modalStep1">
                                        Rent Now
                                    </button> -->
        <!-- <button type="button" class="btn btn-rent rent-now-btn" data-bs-toggle="modal"
                                        data-bs-target="#modalStep1" data-post-id="<?php echo get_the_ID(); ?>">
                                        Rent Now
                                    </button> -->
        <!-- <button type="button" class="btn btn-rent rent-now-btn"
                                        data-post-id="<?php echo get_the_ID(); ?>">
                                        Rent Now
                                    </button>

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

                    <?php
                    //     endwhile;
                    //     wp_reset_postdata();
                    // else:
                    //     echo '<p>No videos found.</p>';
                    // endif;
                    ?>

        </div> -->

    </div>
</div>

<section class="offer-box" id="special-offer">
    <div class="container custom-container offer-box-inner">
        <div class="special-offer"><img src="<?php echo get_template_directory_uri(); ?>/img/offer-tag.png"></div>
        <div class="top-content-sec">
            <div class="left-title">Bundle & Save –<br> Get Both Videos at <span class="highlight">20% Off</span>
            </div>
            <div class="content">
                <p> Enhance your Tisha B’Av experience with both powerful presentations – one for adults and one for
                    children – and receive 20% off when you purchase them together.</p>
                <ul class="list">
                    <li><span>Rabbi Yechiel Spero</span> – Inspiring true stories for adults</li>
                    <li><span>Eli Scheller</span> – A meaningful message created just for children</li>
                </ul>
                <p>One purchase. Two impactful experiences. Greater impact.</p>
                <p class="change-txt"> All proceeds support Chesed of Flatbush, helping families in crisis when they
                    need it most.</p>
            </div>
        </div>
        <div class="row video-outer">
            <?php
            $args = [
                'post_type' => 'vm_video',
                'posts_per_page' => 2,
                'post_status' => 'publish'
            ];

            $video_query = new WP_Query($args);

            if ($video_query->have_posts()):
                while ($video_query->have_posts()):
                    $video_query->the_post();

                    $trailer_link = get_post_meta(get_the_ID(), 'vm_trailer_link', true);
                    // Extract the path
                    $path = parse_url($trailer_link, PHP_URL_PATH);

                    // Match the video ID using regex
                    preg_match('#/([a-f0-9]{32})/#', $path, $matches);

                    // Get the video ID
                    $video_id = $matches[1] ?? null;
                    $description = get_post_meta(get_the_ID(), 'vm_description', true);
                    $price = get_post_meta(get_the_ID(), 'vm_price', true);
                    $rental = get_post_meta(get_the_ID(), 'vm_rental', true);
                    $thumb = get_post_meta(get_the_ID(), 'vm_video_thumbnail', true);
                    $title = get_the_title();

                    // Insert <span> after the word "with"
                    $modified_title = preg_replace('/\bwith\b/i', 'with <span>', $title, 1);
                    if ($modified_title !== $title) {
                        $formatted_title = $modified_title . '</span>';
                    } else {
                        $formatted_title = '<span>' . esc_html($title) . '</span>';
                    }
                    ?>
                    <div class="col-md-6 box-1">
                        <div class="video-wrapper" data-video-id="<?= esc_attr($video_id); ?>">
                            <img src="<?= esc_url($thumb); ?>" class="video-thumb" style="cursor:pointer;" />
                            <div class="play-icon"></div>
                        </div>
                        <div class="wrper">
                            <p class="wrp-content"> <?= wp_kses_post($formatted_title); ?> </p>
                            <!-- <p class="subt-txt">Real stories. Lasting impact.</p> -->
                            <p class="video-description para-wrap">
                                <?= nl2br(esc_html($description)); ?>
                            </p>
                        </div>
                    </div>
                    <?php
                endwhile;
                wp_reset_postdata();
            else:
                echo '<p>No videos found.</p>';
            endif;
            ?>
        </div>


        <div class="bottom-sec">
            <div class="botm-title">Select License: </div>
            <div class="bottom-inner">
                <div class="license-options">

                    <label><input type="radio" id="packageone" name="radio-group" value="single" checked>
                        <label for="packageone">Single</label></label> <label> <span class="price">$18</span></label>

                    <label class="ms-2"><input type="radio" id="packagetwo" name="radio-group" value="family">
                        <label for="packagetwo">Family</label></label> <label> <span class="price">$36</span></label>

                </div>
                <button type="button" class="btn btn-rent rent-now-btn" data-post-id="<?php echo get_the_ID(); ?>">Rent
                    Now</button>
            </div>
        </div>
    </div>
</section>

<!-- <section class="rental-instruction">
    <div class="container custom-container">

        <div class="title">Rental Instruction</div>
        <div class="instruction-inner">
            <div class="subtitle-col">
                <span class="img-ico"><img src="<?php echo get_template_directory_uri(); ?>/img/play-video.svg"
                        alt="play-video"></span>
                <span class="subtitle">
                    For Digital Rental
                </span>
            </div>
            <div class="contents">
                <ul class="list">
                    <li>Users can browse and select the video they want to rent.</li>
                    <li>The rental can be completed securely through the website.</li>
                    <li>Once the payment is successful, the video will be added to the user's account.</li>
                    <li>Rented videos can be accessed anytime from the “My Account” section.</li>
                    <li>Videos are available to stream for the duration of the rental period (e.g., 48 hours).</li>
                    <li>No additional apps or downloads are required — videos can be viewed on desktop, tablet, or
                        mobile.</li>
                    <li>Each rental is a one-time payment with no recurring charges.</li>
                    <li>All proceeds go to Chesed of Flatbush to support families in crisis.</li>
                </ul>
            </div>
        </div>

    </div>
</section> -->
<section class="faq-sec">
    <div class="container custom-container">
        <div class="top-sec">
            <div class="title">Frequently Asked Questions</div>
            <div class="content">Everything you need to know about renting and watching our Tisha B’Av videos</div>
        </div>
        <div class="faq-section text-white">


            <div class="accordion" id="faqAccordion">

                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOne" aria-expanded="true">
                            What’s included in the package?
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            You’ll receive access to two powerful Tishabav videos: A stirring and emotional presentation
                            by Rabbi Yechiel Spero, A dynamic and engaging children’s video by Rabbi Eli Scheller.
                        </div>
                    </div>
                </div>

                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo">
                            How much does it cost?
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            $36 per family
                            $18 for individuals (watching alone)
                            This one-time payment gives full access to both videos.
                        </div>
                    </div>
                </div>

                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseThree">
                            How do I access the videos?
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            After payment, you’ll be able to log in to your account on our website to watch the videos.
                            Everything is conveniently available in your personal dashboard — no email links required.
                        </div>
                    </div>
                </div>

                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFour">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseFour">
                            How long can I watch the videos?
                        </button>
                    </h2>
                    <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            You’ll have access for 1 full year, with unlimited rewatching at any time during that
                            period.
                        </div>
                    </div>
                </div>

                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFive">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseFive">
                            Can I share the videos with others?
                        </button>
                    </h2>
                    <div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            No. Access is for your household only. Please do not share your login or let others outside
                            your family view the videos.
                        </div>
                    </div>
                </div>

                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingSix">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseSix">
                            Is there something for children?
                        </button>
                    </h2>
                    <div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Yes! Rabbi Eli Scheller’s video is created specifically for kids, with age-appropriate
                            storytelling and lessons to make Tishabav meaningful for them too.
                        </div>
                    </div>
                </div>

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


<!-- The Modal -->
<div class="modal custom-modal check-out-modal" id="modalStep1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header border-0">
                <h2>
                    <span class="mr-2">
                        <i><img src="<?php echo get_template_directory_uri(); ?>/img/check_ic.svg" alt=""></i>
                    </span> Check Out
                </h2>
                <button type="button" class="close-btn" data-bs-dismiss="modal"></button>
            </div>
            <form class="form" id="step1Form" data-parsley-validate>
                <!-- Modal body -->
                <div class="modal-body border-0 d-flex flex-column">

                    <!-- Step Indicator -->
                    <div class="progress-wrapper d-flex align-items-center justify-content-center">
                        <div class="step done">
                            <span class="circle">
                                <img src="<?php echo get_template_directory_uri(); ?>/img/tick-mark.svg" alt="checkmark"
                                    class="check-img" />
                            </span>
                            <div class="label">Details</div>
                        </div>
                        <div class="divider"></div>
                        <div class="step">
                            <span class="circle">02</span>
                            <div class="label">Card Detail</div>
                        </div>
                    </div>
                    <!-- Summary and Address -->
                    <div>
                        <!-- summary-box -->
                        <div class="summary-box">
                            <h3 class="sumary-title">Summary</h3>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-3 inner-sec">
                                            <label>Name :</label>
                                        </div>
                                        <div class="col-md-9 inner-sec">
                                            <label><?php echo esc_html($current_user->display_name); ?></label>
                                        </div>

                                        <div class="col-md-3 inner-sec">
                                            <label>Package :</label>
                                        </div>
                                        <div class="col-md-9 inner-sec">
                                            <div class="d-flex gap-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" id="onepackag"
                                                        name="package_types" value="single" required checked>
                                                    <label class="form-check-label" for="onepackag">Single</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" id="twopackage"
                                                        name="package_types" value="family" required>
                                                    <label class="form-check-label" for="twopackage">Family</label>
                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="d-flex align-items-end justify-content-lg-end">
                                        <div class="d-flex flex-column justify-content-end amount-cover">
                                            <label class="amount-label">Amount</label>
                                            <label class="amount"><span class="amount"
                                                    id="amountDisplay">$35.00</span></label>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="form-group mb-3 w-100">
                                <label class="form-label">Coupon Code</label>
                                <div class="input-group">
                                    <input type="text" id="coupon_code" name="coupon_code"
                                        class="form-control custom-input" placeholder="Enter coupon code">
                                    <button type="button" class="btn verify-btn" id="applyCouponBtn">Apply</button>

                                </div>
                                <div id="couponMessage" class="text-success mt-2" style="display:none;"></div>
                            </div>
                        </div>


                        <!-- address-box -->
                        <div class="address-box">

                            <h3 class="address-title">Address</h3>
                            <div class="row">

                                <!-- Street Address -->
                                <div class="col-md-12 form-grp">
                                    <label class="form-label">Street Address</label>
                                    <input type="text" name="address" class="form-control custom-input"
                                        placeholder="Street Address" data-parsley-required="true"
                                        data-parsley-required-message="Street address is required">
                                </div>

                                <!-- State -->
                                <div class="col-md-6 form-grp">
                                    <label class="form-label">State</label>
                                    <select name="state" class="form-control custom-input" id="stateSelect"
                                        data-parsley-required="true" data-parsley-required-message="State is required">
                                        <option value="">-- Select State --</option>
                                    </select>

                                </div>

                                <!-- City -->
                                <div class="col-md-6 form-grp">
                                    <label class="form-label">City</label>
                                    <input type="text" name="city" class="form-control custom-input" placeholder="City"
                                        data-parsley-required="true" data-parsley-required-message="City is required">
                                </div>

                                <!-- Zip/Postal Code -->
                                <div class="col-md-6 form-grp">
                                    <label class="form-label">Zip/Postal Code</label>
                                    <input type="text" name="zip" class="form-control custom-input"
                                        placeholder="Zip/Postal Code" data-parsley-required="true"
                                        data-parsley-pattern="^\d{5,6}$"
                                        data-parsley-pattern-message="Enter a valid ZIP code"
                                        data-parsley-required-message="ZIP code is required">
                                </div>

                                <!-- Phone Number -->
                                <div class="col-md-6 form-grp">
                                    <label class="form-label">Phone Number</label>
                                    <div class="d-flex custom-phone-wrapper">
                                        <select name="phone_code" class="form-select custom-select-code"
                                            data-parsley-required="true"
                                            data-parsley-required-message="Phone code is required">
                                            <?php foreach ($country_codes as $code => $label): ?>
                                                <option value="<?php echo esc_attr($code); ?>" <?php selected($code, '+1'); ?>>
                                                    <?php echo esc_html($code); ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>

                                        <input type="text" name="phone" class="form-control custom-phone-input"
                                            placeholder="2756 3232 234" data-parsley-required="true"
                                            data-parsley-pattern="^\d{10}$"
                                            data-parsley-pattern-message="Enter a valid 10-digit phone number"
                                            data-parsley-required-message="Phone number is required">
                                    </div>
                                </div>
                            </div>

                            <!-- Hidden Inputs -->
                            <input type="hidden" name="video_id" id="rentalVideoId" value="">
                            <input type="hidden" name="affiliate_code" id="affiliateCode"
                                value="<?php echo esc_attr($affiliate_code); ?>">
                            <input type="hidden" name="amount" id="amount" value="">
                            <input type="hidden" name="coupon_code" id="coupon_value" value="">


                        </div>
                    </div>

                </div>

                <!-- Modal footer -->
                <div class="modal-footer d-flex justify-content-end border-0">
                    <button type="button" class="btn back-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn verify-btn" id="toStep2">Next</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- The Modal -->
<div class="modal custom-modal check-out-modal" id="modalStep2">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header border-0">
                <h2>
                    <span class="mr-2">
                        <i><img src="<?php echo get_template_directory_uri(); ?>/img/check_ic.svg" alt=""></i>
                    </span> Check Out
                </h2>
                <button type="button" class="close-btn" data-bs-dismiss="modal"></button>
            </div>
            <form class="form card-form" id="step2Form" data-parsley-validate>
                <!-- Modal body -->
                <div class="modal-body border-0 d-flex flex-column">
                    <!-- Step Indicator -->
                    <div class="progress-wrapper d-flex align-items-center justify-content-center">
                        <div class="step">
                            <span class="circle">
                                <img src="<?php echo get_template_directory_uri(); ?>/img/tick-mark.svg" alt="checkmark"
                                    class="check-img" />
                            </span>
                            <div class="label">Details</div>
                        </div>
                        <div class="divider"></div>
                        <div class="step done">
                            <span class="circle">02</span>
                            <div class="label">Card Detail</div>
                        </div>
                    </div>
                    <div>
                        <div class="address-box address-box1">
                            <div class="form-group position-relative mb-4">
                                <label class="form-label">Card Number</label>
                                <div class="input-with-icons">
                                    <input type="text" name="card_number" class="form-control custom-input"
                                        placeholder="1234 5678 9012 3456" required data-parsley-pattern="^\d{13,19}$"
                                        data-parsley-pattern-message="Enter a valid card number (13-19 digits)"
                                        data-parsley-required-message="Card number is required">
                                    <div class="card-icons">
                                        <img src="<?php echo get_template_directory_uri(); ?>/img/Visa.svg"
                                            alt="Visa" />
                                        <img src="<?php echo get_template_directory_uri(); ?>/img/Discover.svg"
                                            alt="Discover" />
                                        <img src="<?php echo get_template_directory_uri(); ?>/img/Mastercard.svg"
                                            alt="Mastercard" />
                                        <img src="<?php echo get_template_directory_uri(); ?>/img/Maestro.svg"
                                            alt="Maestro" />
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <label class="form-label">Expiration Date</label>
                                    <input type="text" name="expiry" id="expiry" class="form-control custom-input"
                                        placeholder="MM/YY" required data-parsley-pattern="^(0[1-9]|1[0-2])\/\d{2}$"
                                        data-parsley-pattern-message="Enter a valid expiry in MM/YY format"
                                        maxlength="5" data-parsley-required-message="Expiration Date is required">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Security Code (CVV)</label>
                                    <input type="text" name="cvv" class="form-control custom-input" placeholder="123"
                                        required data-parsley-pattern="^\d{3,4}$"
                                        data-parsley-pattern-message="Enter a valid 3 digit CVV" minlength="3"
                                        maxlength="3" data-parsley-required-message="Security Code is required">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Country</label>
                                    <?php render_country_dropdown(); ?>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Zip Code</label>
                                    <input type="text" name="zip" class="form-control custom-input" placeholder="12345"
                                        required pattern="\d{5,6}"
                                        data-parsley-pattern-message="ZIP must be 5 or 6 digits"
                                        data-parsley-required-message="Zip Code is required">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer d-flex justify-content-end border-0">
                    <button type="button" class="btn back-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn verify-btn" id="submitRental">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- The Modal -->
<div class="modal custom-modal success-modal" id="myModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header border-0">
                <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body justify-content-center border-0 text-center d-flex flex-column align-items-center">
                <span class="modal-icon">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/success_message_ic.svg" alt="Success" />
                </span>
                <h3>Payment Successful!</h3>
                <p>
                    Thank you! <br />
                    Your Payment has been processed successfully.
                </p>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer d-flex justify-content-center border-0">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
                    onclick="window.location.href='/profile'">Take me to the videos</button>
            </div>

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

<div class="modal custom-modal failed-modal" id="failModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header border-0">
                <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body justify-content-center border-0 text-center d-flex flex-column align-items-center">
                <span class="modal-icon">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/failure_message_ic.svg" alt="Failed" />
                </span>
                <h3 class="text-danger">Payment Failed</h3>
                <p>
                    Sorry! <br />
                    Your payment could not be processed. Please try again or contact support.
                </p>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer d-flex justify-content-center border-0">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>
<!-- Modal to load Cloudflare Stream -->
<div id="videoModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body" id="videoModalBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary close-modal" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Login Prompt Modal -->
<div class="modal custom-modal failed-modal" id="loginPromptModal" tabindex="-1" aria-labelledby="loginPromptModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header border-0">
                <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body justify-content-center border-0 text-center d-flex flex-column align-items-center">
                <span class="modal-icon">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/logout-img.svg" alt="Failed" />
                </span>
                <h3 class="text-danger">Login Required</h3>
                <p>
                    You need to login or register to rent this video.
                </p>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer d-flex justify-content-center border-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary proceed-login">Login / Register</button>
            </div>

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




<script>
    jQuery(document).ready(function ($) {
        jQuery('.video-wrapper').on('click', function () {
            const videoId = $(this).data('video-id');
            const modalBody = $('#videoModalBody');

            modalBody.html(`
            <stream src="${videoId}" controls></stream>
        `);

            const script = document.createElement('script');
            script.setAttribute('data-cfasync', 'false');
            script.setAttribute('defer', '');
            script.type = 'text/javascript';
            script.src = `https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js?video=${videoId}`;

            modalBody[0].appendChild(script);

            jQuery('#videoModal').modal('show');
        });

        jQuery('.close-modal').on('click', function () {
            jQuery('#videoModal').modal('hide');
            jQuery('#videoModalBody').html(''); // clear content when modal closes
        });
    });
    document.addEventListener('DOMContentLoaded', function () {
        console.log("DOM fully loaded");

        const rentButtons = document.querySelectorAll('.rent-now-btn');
        const hiddenField = document.getElementById('rentalVideoId');

        if (!hiddenField) {
            console.error("Hidden input field #rentalVideoId not found!");
            return;
        }

        rentButtons.forEach(button => {
            button.addEventListener('click', function () {
                const videoId = this.getAttribute('data-post-id');
                console.log("Clicked Rent Now button with video ID:", videoId);

                if (videoId) {
                    hiddenField.value = videoId;
                } else {
                    console.error("No video ID found on button.");
                }
            });
        });
    });

</script>
<?php
function render_country_dropdown()
{
    global $wpdb;
    $table_name = $wpdb->prefix . 'countries';

    // Fetch countries ordered by name
    $countries = $wpdb->get_results("SELECT name, code FROM $table_name ORDER BY name ASC");

    // Start dropdown
    echo '<select name="country" class="form-control custom-input" data-parsley-required="true" data-parsley-required-message="Country is required">';
    echo '<option value="">-- Select Country --</option>';

    // Populate options
    foreach ($countries as $country) {
        echo '<option value="' . esc_attr($country->name) . '">' . esc_html($country->name) . '</option>';
    }

    echo '</select>';
}

get_footer(); ?>
<script>
    const isUserLoggedIn = <?php echo is_user_logged_in() ? 'true' : 'false'; ?>;
</script>