@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Membership | Anisabel Suites</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Membership | Anisabel Suites" />
<meta property="og:description" content="Experience the best of luxury and hospitality at Anisabel Suites, a boutique hotel in the heart of the city. Our spacious and well-appointed suites offer everything you need for a comfortable and relaxing stay, including plush beds, modern amenities, and stunning views. With our convenient location, you'll be close to all the major attractions, restaurants, and shopping. Book your stay today and experience the difference of Anisabel Suites." />
<meta property="og:site_name" content="Membership | Anisabel Suites" />
<meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
@endsection

@section('content')
<!--<div class="bg-other" style="background-image: url('{{ asset('images/banner-store.jpg') }}')">-->
<!--</div>-->
<div class="bg-other" style="background-image: url('{{ asset('images/membership.jpg') }}')">
</div>

<div class="container mb-5">
    <div class="text-center my-5">
        <h1 class="fw-bold color-mid" style="font-size:4rem" data-aos="fade-down">Membership</h1>
    </div>
    <div class="text-center">
        <h2 class="fw-bold color-mid" data-aos="fade-down">
            Having well-curated guests can help reach your ideal customers to fit your business goals. Anisabel creates offers and packages to best deliver the solution to your business needs.
        </h2>
    </div>
</div>

<div class="container">
    <div class="row my-5">
        <div class="col-12 col-md-2 col-xl-2 d-none d-lg-block d-xl-block" id="tierTable" data-aos="fade-up">
            <h3 class="text-center fw-bold color-mid">Anisabel Membership Tiers</h3>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">NIGHTS per year</p>
            </div>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">Annual Membership Payment</p>
            </div>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">Discounted Room Rate EXECUTIVE ROOM from published rate of P3,250</p>
            </div>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">Discounted Room Rate for DELUXE & TWIN SHARING ROOM with published rate of P3,000</p>
            </div>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">Reservation Guarantee (2pm 48 hours before)</p>
            </div>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">Late Check-out</p>
            </div>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">Room Upgrade</p>
            </div>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">Complimentary Breakfast & Amenities</p>
            </div>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">Venue Access</p>
            </div>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">Dedicated 24/7 Support</p>
            </div>

            <div class="p-3" style="border:1px solid #b19357;">
                <p class="color-mid my-auto">Personal Assistance</p>
            </div>
        </div>
        <!-- Silver Tier -->
        <div class="col-12 col-md-2 col-xl-2" data-aos="fade-down">
            <div class="shadow p-3 d-flex flex-column justify-content-center">

                <div class="mx-auto mb-3">
                    <img src="{{ asset('images/silver.jpg') }}" class="img-fluid" alt="">

                    <h3 class="text-center fw-bold color-mid" style="margin-top: -45px;">Silver</h3>
                </div>

                <div class="nights">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Nights per year:</p>
                    <p class="color-mid text-center m-0">10</p>
                </div>

                <div class="annual">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Annual Membership Payment:</p>
                    <p class="color-mid text-lg-end text-center m-0">27,500.00</p>
                </div>

                <div class="exec_discount">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Discounted EXECUTIVE ROOM Rate:</p>
                    <p class="color-mid text-lg-end text-center m-0">3,000.00</p>
                </div>

                <div class="deluxe_discount">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Discounted DELUXE & TWIN ROOM Rate:</p>
                    <p class="color-mid text-lg-end text-center m-0">2,750.00</p>
                </div>

                <div class="reservation">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Reservation Guarantee:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="checkout">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Late Check-out:</p>
                    <p class="color-mid text-center m-0">priority</p>
                </div>

                <div class="room_upgrade">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Room Upgrade:</p>
                    <p class="text-danger text-center m-0"><i class="fa-solid fa-xmark"></i></p>
                </div>

                <div class="complimentary">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Complimentary Breakfast & Amenities:</p>
                    <p class="color-mid text-center m-0">1 breakfast, 1 amenity kit</p>
                </div>

                <div class="venue">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Venue Access:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="support">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Dedicated 24/7 Support:</p>
                    <p class="color-mid text-center m-0">Front Desk</p>
                </div>

                <div class="assistance">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Personal Assistance:</p>
                    <p class="color-mid text-center m-0">Front Desk</p>
                </div>

            </div>
        </div>
        <!-- Gold Tier -->
        <div class="col-12 col-md-2 col-xl-2" data-aos="fade-up">
            <div class="shadow p-3 d-flex flex-column justify-content-center">

                <div class="mx-auto mb-3">
                    <img src="{{ asset('images/gold.jpg') }}" class="img-fluid" alt="">

                    <h3 class="text-center fw-bold color-mid" style="margin-top: -45px;">Gold</h3>
                </div>

                <div class="nights">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Nights per year:</p>
                    <p class="color-mid text-center m-0">25</p>
                </div>

                <div class="annual">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Annual Membership Payment:</p>
                    <p class="color-mid text-lg-end text-center m-0">62,500.00</p>
                </div>

                <div class="exec_discount">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Discounted EXECUTIVE ROOM Rate:</p>
                    <p class="color-mid text-lg-end text-center m-0">2,750.00</p>
                </div>

                <div class="deluxe_discount">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Discounted DELUXE & TWIN ROOM Rate:</p>
                    <p class="color-mid text-lg-end text-center m-0">2,500.00</p>
                </div>

                <div class="reservation">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Reservation Guarantee:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="checkout">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Late Check-out:</p>
                    <p class="color-mid text-center m-0">2pm</p>
                </div>

                <div class="room_upgrade">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Room Upgrade:</p>
                    <p class="color-mid text-center m-0">based on availability</p>
                </div>

                <div class="complimentary">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Complimentary Breakfast & Amenities:</p>
                    <p class="color-mid text-center m-0">1 breakfast, 1 amenity kit</p>
                </div>

                <div class="venue">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Venue Access:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="support">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Dedicated 24/7 Support:</p>
                    <p class="color-mid text-center m-0">Front Desk</p>
                </div>

                <div class="assistance">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Personal Assistance:</p>
                    <p class="color-mid text-center m-0">Front Desk</p>
                </div>

            </div>
        </div>
        <!-- Platinum Tier -->
        <div class="col-12 col-md-2 col-xl-2" data-aos="fade-down">
            <div class="shadow p-3 d-flex flex-column justify-content-center">

                <div class="mx-auto mb-3">
                    <img src="{{ asset('images/platinum.jpg') }}" class="img-fluid" alt="">

                    <h3 class="text-center fw-bold color-mid" style="margin-top: -45px;">Platinum</h3>
                </div>

                <div class="nights">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Nights per year:</p>
                    <p class="color-mid text-center m-0">50</p>
                </div>

                <div class="annual">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Annual Membership Payment:</p>
                    <p class="color-mid text-lg-end text-center m-0">112,500.00</p>
                </div>

                <div class="exec_discount">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Discounted EXECUTIVE ROOM Rate:</p>
                    <p class="color-mid text-lg-end text-center m-0">2,500.00</p>
                </div>

                <div class="deluxe_discount">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Discounted DELUXE & TWIN ROOM Rate:</p>
                    <p class="color-mid text-lg-end text-center m-0">2,250.00</p>
                </div>

                <div class="reservation">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Reservation Guarantee:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="checkout">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Late Check-out:</p>
                    <p class="color-mid text-center m-0">4pm</p>
                </div>

                <div class="room_upgrade">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Room Upgrade:</p>
                    <div class="row">
                        <p class="color-mid text-center m-0">based on availability</p>
                        <p class="color-mid text-center m-0">includes suite</p>
                    </div>
                </div>

                <div class="complimentary">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Complimentary Breakfast & Amenities:</p>
                    <p class="color-mid text-center m-0">1 breakfast, 1 amenity kit</p>
                </div>

                <div class="venue">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Venue Access:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="support">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Dedicated 24/7 Support:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="assistance">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Personal Assistance:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

            </div>
        </div>
        <!-- Titanium Tier -->
        <div class="col-12 col-md-2 col-xl-2" data-aos="fade-up">
            <div class="shadow p-3 d-flex flex-column justify-content-center">

                <div class="mx-auto mb-3">
                    <img src="{{ asset('images/titanium.jpg') }}" class="img-fluid" alt="">

                    <h3 class="text-center fw-bold color-mid" style="margin-top: -45px;">Titanium</h3>
                </div>

                <div class="nights">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Nights per year:</p>
                    <p class="color-mid text-center m-0">75</p>
                </div>

                <div class="annual">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Annual Membership Payment:</p>
                    <p class="color-mid text-lg-end text-center m-0">150,000.00</p>
                </div>

                <div class="exec_discount">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Discounted EXECUTIVE ROOM Rate:</p>
                    <p class="color-mid text-lg-end text-center m-0">2,250.00</p>
                </div>

                <div class="deluxe_discount">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Discounted DELUXE & TWIN ROOM Rate:</p>
                    <p class="color-mid text-lg-end text-center m-0">2,000.00</p>
                </div>

                <div class="reservation">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Reservation Guarantee:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="checkout">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Late Check-out:</p>
                    <p class="color-mid text-center m-0">4pm</p>
                </div>

                <div class="room_upgrade">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Room Upgrade:</p>
                    <div class="row">
                        <p class="color-mid text-center m-0">based on availability</p>
                        <p class="color-mid text-center m-0">includes suite</p>
                    </div>
                </div>

                <div class="complimentary">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Complimentary Breakfast & Amenities:</p>
                    <p class="color-mid text-center m-0">1 breakfast, 1 amenity kit</p>
                </div>

                <div class="venue">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Venue Access:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="support">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Dedicated 24/7 Support:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="assistance">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Personal Assistance:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

            </div>
        </div>
        <!-- Ambassador Tier -->
        <div class="col-12 col-md-2 col-xl-2" data-aos="fade-down">
            <div class="shadow p-3 d-flex flex-column justify-content-center">

                <div class="mx-auto mb-3">
                    <img src="{{ asset('images/ambassador.jpg') }}" class="img-fluid" alt="">

                    <h3 class="text-center fw-bold color-mid" style="margin-top: -45px;">Ambassador</h3>
                </div>

                <div class="nights">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Nights per year:</p>
                    <p class="color-mid text-center m-0">100</p>
                </div>

                <div class="annual">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Annual Membership Payment:</p>
                    <p class="color-mid text-lg-end text-center m-0">175,000.00</p>
                </div>

                <div class="exec_discount">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Discounted EXECUTIVE ROOM Rate:</p>
                    <p class="color-mid text-lg-end text-center m-0">2,000.00</p>
                </div>

                <div class="deluxe_discount">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Discounted DELUXE & TWIN ROOM Rate:</p>
                    <p class="color-mid text-lg-end text-center m-0">1,750.00</p>
                </div>

                <div class="reservation">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Reservation Guarantee:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="checkout">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Late Check-out:</p>
                    <p class="color-mid text-center m-0">4pm</p>
                </div>

                <div class="room_upgrade">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Room Upgrade:</p>
                    <div class="row">
                        <p class="color-mid text-center m-0">based on availability</p>
                        <p class="color-mid text-center m-0">includes suite</p>
                    </div>
                </div>

                <div class="complimentary">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Complimentary Breakfast & Amenities:</p>
                    <p class="color-mid text-center m-0">1 breakfast, 1 amenity kit</p>
                </div>

                <div class="venue">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Venue Access:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="support">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Dedicated 24/7 Support:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

                <div class="assistance">
                    <p class="color-mid text-center m-0 fw-bold d-lg-none d-md-block d-sm-block">Personal Assistance:</p>
                    <p class="text-center m-0"><i class="fa-solid fa-check"></i></p>
                </div>

            </div>
        </div>

    </div>
    <div class="row g-3 justify-content-center my-5" data-aos="zoom-in">
        <div class="col-md-4">
            <a href="" class="btn bg-color-light w-100" data-bs-target="#kitModal" data-bs-toggle="modal">View Member Kit</a>
        </div>

        <div class="col-md-4">
            <a href="" class="btn bg-color-light w-100">Download Club Rules</a>
        </div>

        <div class="col-md-4">
            <a href="" class="btn bg-color-light w-100">Notices</a>
        </div>

        <div class="col-md-4">
            <a href="{{ url('membership-form') }}" class="btn bg-color-light w-100">Membership Inquiry <i class="fa-solid fa-arrow-right-long"></i></a>
        </div>
    </div>
</div>

<div class="modal fade" id="kitModal" tabindex="-1" aria-labelledby="kitModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-3 fw-bold color-mid" id="kitModalLabel">Member Kit Video</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <iframe id="youtubeVideo" class="w-100" width="800" height="463" src="https://www.youtube.com/embed/0nv4C58D_AI" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

            </div>
            <div class="modal-footer border-top-0">
            </div>
        </div>
    </div>
</div>


<style>
    #tierTable {
        margin-top: 160px;
    }

    @media (min-width: 1200px) {
        .nights {
            height: 58px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .annual {
            height: 82.22px;
            display: flex;
            justify-content: end;
            align-items: center;
        }

        .exec_discount {
            height: 154.25px;
            display: flex;
            justify-content: end;
            align-items: center;
        }

        .deluxe_discount {
            height: 178.26px;
            display: flex;
            justify-content: end;
            align-items: center;
        }

        .reservation {
            height: 106.23px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .checkout {
            height: 58.21px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .room_upgrade {
            height: 58.21px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
        }

        .complimentary {
            height: 106.23px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .venue {
            height: 58.21px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .support {
            height: 82.22px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .assistance {
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    }

    /* Remove Bootstrap's default styles */
    .form-check-input[type="radio"] {
        display: none;
        /* Hide the default radio input */
    }

    /* Style the custom radio container */
    .form-check-input[type="radio"]+label::before {
        content: "";
        display: inline-block;
        width: 16px;
        /* Adjust the size as needed */
        height: 16px;
        /* Adjust the size as needed */
        border: 2px solid #8b5e3b;
        /* Set the outline color */
        border-radius: 50%;
        /* Make it circular */
        margin-right: 10px;
        /* Add some spacing between the radio and label */
    }

    /* Style the custom radio dot when selected */
    .form-check-input[type="radio"]:checked+label::before {
        background-color: #8b5e3b;
        /* Set the dot color when selected */
    }

    /* Style the label text */
    .form-check-input[type="radio"]+label {
        color: #8b5e3b;
        /* Set the text color */
    }

    /* Remove Bootstrap's default styles */
    .form-check-input[type="checkbox"] {
        display: none;
    }

    /* Style the custom checkbox container */
    .form-check-input[type="checkbox"]+label::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid #8b5e3b;
        border-radius: 4px;
        /* Make it square */
        margin-right: 10px;
    }

    /* Style the custom checkmark when selected */
    .form-check-input[type="checkbox"]:checked+label::before {
        background-color: #8b5e3b;
        /* Set the background color when selected */
        border: 2px solid #8b5e3b;
    }

    /* Style the label text */
    .form-check-input[type="checkbox"]+label {
        color: #8b5e3b;
    }
</style>
@endsection

@section('js')
<script>
    $(function() {
        $('#kitModal').on('hidden.bs.modal', function(e) {
            var $iframes = $(this).find("iframe");
            $iframes.each(function(index, iframe) {
                $(iframe).attr("src", $(iframe).attr("src"));
            });
        });
    });
</script>

<script>
    const select = document.getElementById('country');
    const countries = [
        'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antigua and Barbuda',
        'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain',
        'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bhutan', 'Bolivia',
        'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso',
        'Burundi', 'Cabo Verde', 'Cambodia', 'Cameroon', 'Canada', 'Central African Republic',
        'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Congo (Congo-Brazzaville)',
        'Costa Rica', 'Croatia', 'Cuba', 'Cyprus', 'Czechia (Czech Republic)',
        'Democratic Republic of the Congo (Congo-Kinshasa)', 'Denmark', 'Djibouti', 'Dominica',
        'Dominican Republic', 'East Timor (Timor-Leste)', 'Ecuador', 'Egypt', 'El Salvador',
        'Equatorial Guinea', 'Eritrea', 'Estonia', 'Eswatini (fmr. "Swaziland")', 'Ethiopia',
        'Fiji', 'Finland', 'France', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece',
        'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Holy See', 'Honduras',
        'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy',
        'Ivory Coast', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Kuwait',
        'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein',
        'Lithuania', 'Luxembourg', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta',
        'Marshall Islands', 'Mauritania', 'Mauritius', 'Mexico', 'Micronesia', 'Moldova', 'Monaco',
        'Mongolia', 'Montenegro', 'Morocco', 'Mozambique', 'Myanmar (formerly Burma)', 'Namibia',
        'Nauru', 'Nepal', 'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'North Macedonia (formerly Macedonia)',
        'Norway', 'Oman', 'Pakistan', 'Palau', 'Palestine State', 'Panama', 'Papua New Guinea', 'Paraguay',
        'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Saint Kitts and Nevis',
        'Saint Lucia', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia',
        'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia',
        'South Africa', 'South Korea', 'South Sudan', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Sweden', 'Switzerland', 'Syria',
        'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Tuvalu',
        'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States of America', 'Uruguay', 'Uzbekistan', 'Vanuatu',
        'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe'
    ];


    countries.sort(); // Sort the countries alphabetically

    countries.forEach(country => {
        const option = document.createElement('option');
        option.value = country;
        option.textContent = country;
        select.appendChild(option);
    });
</script>
@endsection