@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


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

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

                <table class="table-files">
                    <thead>
                        <tr>
                            <th class="d-none">
                                ID
                            </th>
                            <th>
                                File
                            </th>
                            <th>
                                Action
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($files as $file)
                        <tr>
                            <td class="d-none">
                                {{$file->id}}
                            </td>
                            <td>
                                <a href="{{$file->file_path}}" target="__blank">{{$file->file_name}}</a>
                            </td>
                            <td>
                                <a href="{{$file->file_path}}" target="__blank" class="btn btn-primary">View</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

            </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>
                        <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-files').DataTable({
            "order": [
                [1, "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