@extends('frontend.layouts.app')

@section('title')
@endsection

@section('seo')
    <title>Dashboard | 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="Dashboard | 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="Dashboard | 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="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: white; 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: #f3e6de; 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>

                            @if ($user->uid != null)
                                <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">Membership Subscription</span>
                                    </div>
                                </a>
                                <a href="{{ url('/transaction-history') }}">
                                    <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">Payment</span>
                                    </div>
                                </a>
                                <a href="{{ url('/member-files') }}">
                                    <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">Files</span>
                                    </div>
                                </a>
                            @elseif($user->user_id != null)
                                <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>
                            @endif
                            {{-- <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;">
                                    <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: white; 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: #f3e6de; 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> --}}
                    @if ($user->uid != null)
                    <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">Membership Subscription</span>
                        </div>
                    </a>
                    <a href="{{ url('/transaction-history') }}">
                        <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">Payment</span>
                        </div>
                    </a>
                    <a href="{{ url('/member-files') }}">
                        <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">Files</span>
                        </div>
                    </a>
                    @elseif($user->user_id != null)
                        <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>
                    @endif
                    <form action="{{ url('logout') }}" method="POST">@csrf
                        <input type="hidden" name="role" value="member">
                        <div>
                            <button type="submit" 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>
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>

        <!-- Dashboard -->
        <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> --}}
            <!-- Member Tier & QR Small-->
            {{-- <div class="d-sm-block d-xl-none d-lg-none d-md-none mt-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> --}}

            <div id="liveAlertPlaceholder"></div>

            <!-- Member Info -->
            <div class="row g-2 mb-5 mt-2 p-2">

                <div class="col-md-8">
                    <div class="row g-1 gap-2 justify-content-center">
                        <div class="col-md-12 bg-darkbrown rounded-4 p-5">
                            <div class="d-flex align-items-center mb-3">
                                <img src="{{ asset('uploads/' . $user->dp) }}" class="border-circle" alt="">
                                <h1 class="text-white fw-bold mb-4 ms-3 text-capitalize">{{ $user->fname }}
                                    {{ $user->lname }}</h1>
                            </div>


                            <p class="text-white mb-0">Membership Number</p>
                            <span class="text-white fw-bold">{{ $user->member_no }}</span>

                            {{-- <p class="text-white mt-4"><i class="fa-solid fa-wallet"></i> BALANCE</p>
                            <span class="text-white fw-bold fs-2"
                                style="letter-spacing: 5px;">{{ number_format($user->balance, 2) }}</span> --}}
                        </div>
                    </div>
                </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="modal fade" id="modalQR" tabindex="-1" aria-labelledby="upgradeModalLabel"
                aria-hidden="true" style="display: none;">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header border-bottom-0">
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="text-center">
                                <h1 class="mb-5 fw-bold font-size-header color-mid">Account Details</h1>

                                <div class="text-center mb-3">
                                    <img src="{{ asset('uploads/' . $user->dp) }}" class="img-fluid" alt="">
                                </div>

                                <p class="color-mid mb-3">Member Name</p>
                                <p class="fs-2 color-mid big-p text-uppercase">{{ $user->first_name }}
                                    {{ $user->last_name }}</p>

                                <div style="margin-bottom: 4rem"></div>

                                <p class="color-mid mb-3">Membership No.</p>
                                <p class="fs-2 color-mid big-p mb-5">{{ $user->member_no }}</p>

                                <p class="color-mid mb-3">Membership Tier</p>
                                {{-- <p class="fs-2 color-mid big-p mb-5 text-uppercase">{{ $tiers->name }}</p>

                                <img src="{{ asset('images/' . $tiers->image) }}" class="img-fluid" alt=""> --}}
                            </div>
                        </div>
                        <div class="modal-footer border-top-0">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bookings -->



        </div>

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

    </div>
    </div>

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

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

        .tier-name {
            font-size: 50px;
        }
    </style>
@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>
        function showModal() {
            $('#modalQR').modal('show');
        }
        $(document).ready(function() {
            const urlParams = new URLSearchParams(window.location.search);
            const modalParam = urlParams.get('modal');

            if (modalParam === 'modalQR') {
                showModal();
            }
        });
    </script>

    <script>
        $('.table-bookings').DataTable({
            "order": [
                [3, "desc"]
            ]
        });
    </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