@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="" />
<meta property="og:site_name" content="Membership | Anisabel Suites" />
<meta property="og:image" content="{{ asset('images/thumbnail.png') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.png') }}" />
@endsection

@section('content')
<!--<div>-->
<!--    <img src="{{ asset('images/banner-store.jpg') }}" class="d-block align-middle img-fluid" alt="...">-->
<!--</div>-->
<div class="bg-other" style="background-image: url('{{ asset('images/membership.jpg') }}')">

</div>

<div class="container mb-5" data-aos="zoom-in">
    <div class="text-center my-5">
        <h1 class="fw-bold color-mid" style="font-size:4rem" data-aos="fade-down">Membership Application Form</h1>
    </div>

    <form action="{{ route('newMemberInquiry') }}" class="form-member" method="POST">
        @csrf
        <div class="row gy-4 mb-4">
            <div class="col-12 col-md-6 col-xl-6">
                <div>
                    <label for="fname" class="form-label fw-bold color-mid">First Name*</label>
                    <input type="text" class="form-control rounded" name="first_name" id="fullname" placeholder="" style="border:1px solid #b19357;">
                    @error('first_name')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-6">
                <div>
                    <label for="lname" class="form-label fw-bold color-mid">Last Name*</label>
                    <input type="text" class="form-control rounded" name="last_name" id="lname" placeholder="" style="border:1px solid #b19357;">
                    @error('last_name')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-6">
                <div>
                    <label for="designation" class="form-label fw-bold color-mid">Designation</label>
                    <input type="text" class="form-control rounded" name="designation" id="designation" placeholder="" style="border:1px solid #b19357;">
                    @error('designation')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-6">
                <div>
                    <label for="company" class="form-label fw-bold color-mid">Company Name</label>
                    <input type="text" class="form-control rounded" name="company_name" id="company" placeholder="" style="border:1px solid #b19357;">
                    @error('company_name')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-12 col-md-12 col-xl-12">
                <div>
                    <label for="address" class="form-label fw-bold color-mid">Address</label>
                    <input type="text" class="form-control rounded mb-3" name="address" id="address" placeholder="Street Address" style="border:1px solid #b19357;">
                    @error('address')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                    <input type="text" class="form-control rounded mb-3" name="alt_address" id="address2" placeholder="Street Address Line 2" style="border:1px solid #b19357;">
                </div>
                <div class="row g-2">
                    <div class="col-12 col-md-3 col-xl-3">
                        <input type="text" class="form-control rounded" name="city" id="city" placeholder="City" style="border:1px solid #b19357;">
                        @error('city')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-12 col-md-3 col-xl-3">
                        <input type="text" class="form-control rounded" name="region" id="region" placeholder="Region" style="border:1px solid #b19357;">
                        @error('region')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-12 col-md-3 col-xl-3">
                        <input type="number" class="form-control rounded" name="zip" id="postal" placeholder="Postal / Zip Code" style="border:1px solid #b19357;">
                        @error('zip')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-12 col-md-3 col-xl-3">
                        <select type="text" class="form-control form-select rounded" name="country" id="country" placeholder="Country" style="border:1px solid #b19357;">
                        </select>
                        @error('country')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-12 col-xl-12">
                <div>
                    <label for="email" class="form-label fw-bold color-mid">Email Address*</label>
                    <input type="email" class="form-control rounded" name="email" id="email" placeholder="" style="border:1px solid #b19357;">
                    @error('email')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-6">
                <div>
                    <label for="telephone" class="form-label fw-bold color-mid">Telephone No.</label>
                    <input type="number" class="form-control rounded" name="telephone" id="telephone" placeholder="" style="border:1px solid #b19357;">
                    @error('telephone')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-6">
                <div>
                    <label for="mobile" class="form-label fw-bold color-mid">Mobile No.*</label>
                    <input type="number" class="form-control rounded" name="mobile" id="mobile" placeholder="" style="border:1px solid #b19357;">
                    @error('mobile')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="col-12 col-md-12 col-xl-12">
                <div>
                    <label for="email" class="form-label fw-bold color-mid">Product & Category*</label>
                    <div class="form-check p-2 rounded mb-3" style="border:1px solid #b19357;">
                        <input type="text" name="product" value="{{ $product->title }} - {{ $product->package_type }}" readonly id="product" class="form-control">
                    </div>

                    @error('membership')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-12 col-md-12 col-xl-12">
                <div class="form-check">
                    <input type="checkbox" value="agree" name="terms" id="flexCheckDefault">

                    <!-- <input class="form-check-input" type="checkbox" value="agree" name="terms" id="flexCheckDefault"> -->
                    <label class="form-check-label" for="flexCheckDefault">
                        I have read, understood, and accepted the PRIVACY POLICY for membership. Terms and Conditions.
                    </label>
                </div>
            </div>
            <div class="text-center">
                <button type="submit" class="btn bg-color-light px-5">Apply</button>
            </div>

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

<style>
    /* 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>
    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>

<script>
    // $(document).ready(function() {
    //     $('.form-member').submit(function(e) {
    //         e.preventDefault();

    //         var form = $(this);
    //         var formData = form.serialize();

    //         $.ajax({
    //             method: "POST",
    //             url: "{{ url('member-inquiry') }}",
    //             data: formData,
    //             success: function(response) {
    //                 showSuccessAlert();
    //             },
    //             error: function(jqXHR, textStatus, errorThrown) {
    //                 if (jqXHR.responseJSON && jqXHR.responseJSON.errorss) {
    //                     showFieldErrors(jqXHR.responseJSON.errors);
    //                 } else {
    //                     showErrorAlert('Failed to submit.');
    //                 }
    //             }
    //         });

    //         function showSuccessAlert() {
    //             Swal.fire({
    //                 toast: true,
    //                 position: 'top-end',
    //                 icon: 'success',
    //                 text: 'Application Submitted Successfully!',
    //                 showConfirmButton: false,
    //                 timer: 1500,
    //                 timerProgressBar: true,
    //             }).then(function() {
    //                 location.reload();
    //             });
    //         }

    //         function showErrorAlert(message) {
    //             Swal.fire({
    //                 toast: true,
    //                 position: 'top-end',
    //                 icon: 'error',
    //                 text: message,
    //                 showConfirmButton: false,
    //                 timer: 3000,
    //                 timerProgressBar: true,
    //             });
    //         }

    //         function showFieldErrors(errors) {
    //             for (var key in errors) {
    //                 if (errors.hasOwnProperty(key)) {
    //                     showErrorAlert(errors[key][0]);
    //                 }
    //             }
    //         }
    //     });
    // });
</script>
@endsection