@extends('frontend.layouts.app')

@section('title')

@endsection

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

@section('content')
<div class="row mb-5">
    <!-- Side Nav Menu -->
    <div class="col-12 col-md-12 col-xl-3">
        <div class="bg-darkbrown navigation">
            <!-- Menu Large-->
            <div class="d-lg-block d-xl-block d-md-none d-none">
                <div class="d-flex justify-content-end">
                    <div class="d-flex flex-column">
                        <a href="{{ url('member-dashboard') }}">
                            <div class="p-3 mt-5 mb-4" id="navItem" style="background-color: #f3e6de; border-radius: 40px 0 0 40px; width: 400px;" data-aos="fade-down" data-aos-duration="900">
                                <span class="color-mid fw-bold ps-2">Dashboard</span>
                            </div>
                        </a>

                        <a href="{{ url('member-profile') }}">
                            <div class="p-3 my-4" id="navItem" style="background-color: white; border-radius: 40px 0 0 40px; width: 400px;" data-aos="fade-down" data-aos-duration="700">
                                <span class="color-mid fw-bold ps-2">Profile</span>
                            </div>
                        </a>
                        
                        <a href="{{ url('member-book') }}">
                            <div class="p-3 my-4" id="navItem" style="background-color: white; border-radius: 40px 0 0 40px; width: 400px;" data-aos="fade-down" data-aos-duration="700">
                                <span class="color-mid fw-bold ps-2">Book Now</span>
                            </div>
                        </a>

                        <form action="{{ url('logout') }}" method="POST">@csrf
                            <input type="hidden" name="role" value="member">
                            <button type="submit" class="p-3 my-4 border-0 text-start" id="navItem" style="background-color: #f3e6de; border-radius: 40px 0 0 40px; width: 400px;" data-aos="fade-down" data-aos-duration="500">
                                <span class="color-mid fw-bold ps-2">Logout</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <!-- Menu Small-->
            <div class="d-sm-block d-xl-none d-lg-none d-md-block p-3">
                <a href="{{ url('member-dashboard') }}">
                    <div class="p-3 mt-5 mb-4 rounded-4" id="navItem" style="background-color: #f3e6de; width: 400px;" data-aos="fade-down" data-aos-duration="900">
                        <span class="color-mid fw-bold ps-2">Dashboard</span>
                    </div>
                </a>

                <a href="{{ url('member-profile') }}">
                    <div class="p-3 my-4 rounded-4" id="navItem" style="background-color: white; width: 400px;" data-aos="fade-down" data-aos-duration="700">
                        <span class="color-mid fw-bold ps-2">Profile</span>
                    </div>
                </a>
                
                <a href="{{ url('member-book') }}">
                    <div class="p-3 my-4 rounded-4" id="navItem" style="background-color: white; width: 400px;" data-aos="fade-down" data-aos-duration="700">
                        <span class="color-mid fw-bold ps-2">Book Now</span>
                    </div>
                </a>

                <form action="{{ url('logout') }}" method="POST">@csrf
                    <input type="hidden" name="role" value="member">
                <div>
                    <button class="p-3 rounded-4 border-0 text-start" id="navItem" style="background-color: #f3e6de; width: 400px;" data-aos="fade-down" data-aos-duration="500">
                        <span class="color-mid fw-bold ps-2">Logout</span>
                    </butto>
                </div>
            </div>
        </div>
    </div>

    <!-- Profile Settings -->
    <div class="col-12 col-md-12 col-xl-6">
        @if (session('success'))
            <div class="alert alert-success mt-2">
                {{ session('success') }}
            </div>
        @elseif (session('error'))
            <div class="alert alert-danger mt-2">
                {{ session('error') }}
            </div>
        @endif
        <!-- Member Tier & QR Large-->
        <div class="d-lg-block d-xl-block d-md-block d-none p-2">
            <div class="row my-5">
                <div class="col-md-2">
                    <div>
                        <p class="color-mid">Membership Tier:</p>
                        <img src="{{ asset('images/' . $tiers->image) }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="col-md-7 d-flex justify-content-start align-items-center text-start text-sm-center">

                    <h1 class="fw-bold color-mid tier-name">{{ $tiers->name }}</h1>

                </div>
                <div class="col-md-3 d-flex justify-content-end">
                    <div>
                        <img src="{{ asset('QR/' . $user->qr_code) }}" class="img-fluid" alt="">
                        <p class="color-mid text-center mt-2">Personal QR Code</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <button class="btn bg-color-light p-3 ms-3 w-50" data-bs-toggle="modal" data-bs-target="#upgradeModal">Upgrade Membership</button>
            </div>
        </div>
        <!-- Member Tier & QR Small-->
        <div class="d-sm-block d-xl-none d-lg-none d-md-none mt-3 p-3">
            <div class="col-md-12">
                <div class="text-center">
                    <p class="color-mid">Membership Tier:</p>
                    <img src="{{ asset('images/' . $tiers->image) }}" class="img-fluid" alt="">
                    <h1 class="fw-bold color-mid" style="font-size:4rem">{{ $tiers->name }}</h1>
                </div>
            </div>
            <div class="col-md-3 d-flex justify-content-center">
                <div>
                    <img src="{{ asset('QR/' . $user->qr_code) }}" class="img-fluid" alt="">
                    <p class="color-mid text-center mt-2">Personal QR Code</p>
                </div>
            </div>

            <div class="row">
                <button class="btn bg-color-light p-2 w-100" data-bs-toggle="modal" data-bs-target="#upgradeModal">Upgrade Membership</button>
            </div>
        </div>


        <div class="modal fade" id="upgradeModal" tabindex="-1" aria-labelledby="upgradeModalLabel" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title color-mid" id="upgradeModalLabel">Upgrade Membership</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <span class="color-mid">Would you like to upgrade your membership?</span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">No</button>
                        <form action="{{ url('upgrade-inquiry') }}" method="POST">
                            @csrf
                            <input type="hidden" name="member_no" value="{{ $user->member_no }}">
                            <input type="hidden" name="first_name" value="{{ $user->first_name }}">
                            <input type="hidden" name="last_name" value="{{ $user->last_name }}">
                            <input type="hidden" name="mobile" value="{{ $user->mobile }}">
                            <input type="hidden" name="email" value="{{ $user->email }}">
                            <input type="hidden" name="tier" value="{{ $user->tier }}">
                            <button type="submit" class="btn btn-success" data-bs-dismiss="modal">Yes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="my-2" id="liveAlertPlaceholder"></div>

        <div class="col-12 col-md-12 col-xl-12 my-5 p-2">
            <h1 class="text-center fw-bold color-mid">Profile Settings</h1>

            <form action="{{ url('edit-profile/' . $user->id) }}" enctype="multipart/form-data" method="POST">@csrf @method('PUT')

                <div class="d-flex flex-wrap gap-3 align-items-center justify-content-center my-5">
                    @if ($user->dp == null)
                        <div>
                            <label class="custum-file-upload" for="file">
                                <div class="icon">
                                <svg width="256px" height="256px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.77778 21H14.2222C17.3433 21 18.9038 21 20.0248 20.2646C20.51 19.9462 20.9267 19.5371 21.251 19.0607C22 17.9601 22 16.4279 22 13.3636C22 10.2994 22 8.76721 21.251 7.6666C20.9267 7.19014 20.51 6.78104 20.0248 6.46268C19.3044 5.99013 18.4027 5.82123 17.022 5.76086C16.3631 5.76086 15.7959 5.27068 15.6667 4.63636C15.4728 3.68489 14.6219 3 13.6337 3H10.3663C9.37805 3 8.52715 3.68489 8.33333 4.63636C8.20412 5.27068 7.63685 5.76086 6.978 5.76086C5.59733 5.82123 4.69555 5.99013 3.97524 6.46268C3.48995 6.78104 3.07328 7.19014 2.74902 7.6666C2 8.76721 2 10.2994 2 13.3636C2 16.4279 2 17.9601 2.74902 19.0607C3.07328 19.5371 3.48995 19.9462 3.97524 20.2646C5.09624 21 6.65675 21 9.77778 21ZM12 9.27273C9.69881 9.27273 7.83333 11.1043 7.83333 13.3636C7.83333 15.623 9.69881 17.4545 12 17.4545C14.3012 17.4545 16.1667 15.623 16.1667 13.3636C16.1667 11.1043 14.3012 9.27273 12 9.27273ZM12 10.9091C10.6193 10.9091 9.5 12.008 9.5 13.3636C9.5 14.7192 10.6193 15.8182 12 15.8182C13.3807 15.8182 14.5 14.7192 14.5 13.3636C14.5 12.008 13.3807 10.9091 12 10.9091ZM16.7222 10.0909C16.7222 9.63904 17.0953 9.27273 17.5556 9.27273H18.6667C19.1269 9.27273 19.5 9.63904 19.5 10.0909C19.5 10.5428 19.1269 10.9091 18.6667 10.9091H17.5556C17.0953 10.9091 16.7222 10.5428 16.7222 10.0909Z" fill="#ffffff"></path> </g></svg>
                                </div>
                                <input type="file" name="dp" id="file" onchange="updateFileName()">
                            </label>
                        </div>
                        <span id="file-name" class="color-mid">Set Profile Picture</span>
                    @else
                        <div class="row">
                            <div class="col-12 col-md">
                                <img src="{{ asset('uploads/' . $user->dp) }}" class="border-circle img-fluid" alt="">
                            </div>
                            <div class="col-12 col-md">
                                <div>
                                    <label for="formFile" class="form-label">Change Profile Picture</label>
                                    <input class="form-control" type="file" name="dp">
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                    
                <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" value="{{ $user->first_name }}" 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" value="{{ $user->last_name }}" 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" value="{{ $user->designation }}" 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" value="{{ $user->company_name }}" 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 1</label>
                            <input type="text" class="form-control rounded mb-3" name="address" id="address" value="{{ $user->address }}" style="border:1px solid #b19357;">
                            @error('address')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                            <label for="address" class="form-label fw-bold color-mid">Address 2</label>
                            <input type="text" class="form-control rounded mb-3" name="alt_address" id="address2" value="{{ $user->alt_address }}" style="border:1px solid #b19357;">
                        </div>
                        <div class="row g-2">
                            <div class="col-12 col-md-3 col-xl-3">
                                <label for="address" class="form-label fw-bold color-mid">City</label>
                                <input type="text" class="form-control rounded" name="city" id="city" value="{{ $user->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">
                                <label for="address" class="form-label fw-bold color-mid">Region</label>
                                <input type="text" class="form-control rounded" name="region" id="region" value="{{ $user->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">
                                <label for="address" class="form-label fw-bold color-mid">Postal Code / ZIP</label>
                                <input type="number" class="form-control rounded" name="zip" id="postal" value="{{ $user->zip }}" 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">
                                <label for="address" class="form-label fw-bold color-mid">Country</label>
                                <select type="text" class="form-control form-select rounded" name="country" id="country" style="border:1px solid #b19357;">
                                    <option selected>{{ $user->country }}</option>
                                </select>
                                @error('country')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </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" value="{{ $user->telephone }}" 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" value="{{ $user->mobile }}" style="border:1px solid #b19357;">
                            @error('mobile')
                                <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">Password</label>
                            <input type="password" class="form-control rounded" name="password" style="border:1px solid #b19357;">
                            @error('password')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
    
                    <div class="text-center">
                        <button type="submit" class="btn bg-color-light px-5">Save</button>
                    </div>
    
                </div>
            </form>
        </div>



    </div>
    <!-- Spacer -->
    <div class="col-12 col-md-3 col-xl-3">

    </div>
</div>

<style>
    @media (max-width: 767px) {
        .navigation {
            height: auto;
        }
    }

    @media (min-width: 1200px) {
        .navigation {
            height: 100svh;
        }
    }

    .tier-name {
        font-size: 50px;
    }
</style>

<link rel="stylesheet" href="{{ asset('css/icon-style.css') }}">
@endsection

@section('js')
<script>
    const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
    const appendAlert = (message, type) => {
        const wrapper = document.createElement('div')
        wrapper.innerHTML = [
            `<div class="alert alert-${type} alert-dismissible" role="alert">`,
            `   <div>${message}</div>`,
            '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            '</div>'
        ].join('')

        alertPlaceholder.append(wrapper)
    }

    const alertTrigger = document.getElementById('liveAlertBtn')
    if (alertTrigger) {
        alertTrigger.addEventListener('click', () => {
            appendAlert('Congratulations! You have upgraded your membership successfully', 'success')
        })
    }
</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>

<script>
    function updateFileName() {
        const input = document.getElementById('file');
        const fileName = input.files[0].name;
        const fileNameElement = document.getElementById('file-name');
        fileNameElement.textContent = fileName;
    }
</script>

<script>
    $(document).ready(function () {
        $('.form-member').submit(function (e) {
            e.preventDefault();
            var dataId = $(this).data('id');
            var form = $(this);
            var formData = new FormData(form[0]);

            $.ajax({
                method: "POST",
                url: '/edit-profile/' + dataId,
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    showSuccessAlert();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    showErrorAlert('Failed to submit.');
                }
            });

            function showSuccessAlert() {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    text: 'Profile Updated 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,
                });
            }
        });
    });
</script>

<script>
    $(document).ready(function () {
        $('.form-upgrade').submit(function (e) {
            e.preventDefault();
            var form = $(this);
            var formData = form.serialize();

            $.ajax({
                method: "POST",
                url: '/upgrade-inquiry',
                data: formData,
                success: function (response) {
                    if (response.success) {
                        showSuccessAlert();
                    } else {
                        showErrorAlert('You already sent an inquiry.');
                    }
                }
            });

            function showSuccessAlert() {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    text: 'Membership Upgraded Submitted!',
                    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