@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>

                            <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: 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>

                    <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->first_name }}
                                    {{ $user->last_name }}</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 class="col-md-6 col-lg-6 bg-mid-light rounded-4 p-3" style="max-width: 340px;">
                            <img src="{{ asset('images/icon-3.png') }}" class="img-fluid" alt="">
                            <span class="text-white fw-bold fs-4">NIGHTS STAYED</span>
                            <div class="text-center">
                                <span class="text-white">{{ $user->nights_stayed }}</span>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6 bg-mid-light rounded-4 p-3" style="max-width: 340px;">
                            <img src="{{ asset('images/icon-4.png') }}" class="img-fluid" alt="">
                            <span class="text-white fw-bold fs-4">NIGHTS REMAINING</span>
                            <div class="text-center">
                                <span class="text-white">{{ $user->nights_remaining }}</span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-md-4 d-flex flex-column">

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

                    <div class="p-4 shadow rounded-4 mb-2 h-100">
                        <img src="{{ asset('images/icon-1.png') }}" class="img-fluid" alt="">
                        <span class="color-mid fw-bold">TOTAL NO. OF CHECK IN</span>
                        <div class="text-center">
                            <span class="color-mid">{{ $user->total_ins }}</span>
                        </div>
                    </div>

                    <div class="p-4 shadow-lg rounded-4 h-100">
                        <img src="{{ asset('images/icon-2.png') }}" class="img-fluid" alt="">
                        <span class="color-mid fw-bold">TOTAL NO. OF BOOKINGS</span>
                        <div class="text-center">
                            <span class="color-mid">{{ $user->total_bookings }}</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 class="col-12 col-md-12 p-5 shadow container">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h1 class="fw-bold color-mid">My Bookings</h1>
                    </div>
                    {{-- <div class="col-md-6 text-end">
                    <div class="dropdown">
                        <button class="btn btn-outline dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Sort
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" id="date-in">Date In</a></li>
                            <li><a class="dropdown-item" href="#" id="date-out">Date Out</a></li>
                            <li><a class="dropdown-item" href="#" id="room-type">Room Type</a></li>
                        </ul>
                    </div>
                </div> --}}
                </div>

                {{-- <div class="row mb-4">
                <div class="col-md-6">
                    <div class="d-flex">
                        <p class="fw-bold color-mid my-auto">Show</p>
                        <select class="form-control form-select w-auto mx-2" name="entries" id="entries" style="border:1px solid #b19357;">
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                        </select>
                        <p class="fw-bold color-mid my-auto">entries</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex justify-content-end">
                        <p class="color-mid my-auto me-2">Search:</p>
                        <input type="text" class="form-control w-25" name="search" id="search" style="border:1px solid #b19357;">
                    </div>

                </div>
            </div> --}}

                <div class="table-responsive">
                    <table class="table table-bookings">
                        <thead class="color-mid">
                            <tr>
                                <th scope="col">Order No.</th>
                                <th scope="col">Room No.</th>
                                <th scope="col">Date Checked-In</th>
                                <th scope="col">Date Checked-Out</th>
                                <th scope="col">Room Type</th>
                                <th scope="col">Status</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody class="color-mid">
                            @foreach ($user->bookings as $items)
                                <tr>
                                    <th scope="row">{{ $items->order_no }}</th>
                                    <td>{{ $items->room_no }}</td>
                                    <td>{{ date('m/d/Y', strtotime($items->check_in)) }}</td>
                                    <td>{{ date('m/d/Y', strtotime($items->check_out)) }}</td>
                                    <td>{{ $items->room_type }}</td>
                                    <td>
                                        @if ($items->status == 'Completed')
                                            <p class="text-success">{{ $items->status }}</p>
                                        @elseif ($items->status == 'Pending')
                                            <p class="color-mid">{{ $items->status }}</p>
                                        @elseif ($items->status == 'Ongoing')
                                            <p class="color-mid">{{ $items->status }}</p>
                                        @else
                                            <p class="text-danger">{{ $items->status }}</p>
                                        @endif
                                    </td>
                                    <td><button class="btn bg-color-light" data-bs-target="#modal{{ $items->id }}"
                                            data-bs-toggle="modal">View</button></td>
                                </tr>

                                <div class="modal fade" id="modal{{ $items->id }}" tabindex="-1"
                                    aria-labelledby="viewModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-xl">
                                        <div class="modal-content">
                                            <div class="modal-header text-center border-bottom-0 justify-content-end">
                                                <button class="border-0 bg-white" data-bs-dismiss="modal"
                                                    aria-label="Close" type="button"><i
                                                        class="fa-regular fa-circle-xmark color-mid fs-3"></i></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="text-center mb-5">
                                                    <h1 class="modal-title fw-bold color-mid">Booking Details</h1>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold ">Type of room</span> <br>
                                                        <span class="color-mid">{{ $items->room_type }}</span>
                                                    </div>
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold ">Nights Stayed</span> <br>
                                                        <span class="color-mid">{{ $items->nights_stay }}</span>
                                                    </div>
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold">Rate</span> <br>
                                                        <span class="color-mid">{{ $items->room_rate }}</span>
                                                    </div>
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold">Sub Total</span> <br>
                                                        <span class="color-mid">{{ $items->room_total }}</span>
                                                    </div>
                                                </div>
                                                <div class="row mb-3">
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold ">Type of Venue</span> <br>
                                                        <span class="color-mid">{{ $items->venue_type }}</span>
                                                    </div>
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold ">Hours</span> <br>
                                                        <span class="color-mid">{{ $items->hours_stay }}</span>
                                                    </div>
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold">Rate</span> <br>
                                                        <span class="color-mid">{{ $items->venue_rate }}</span>
                                                    </div>
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold">Sub Total</span> <br>
                                                        <span class="color-mid">{{ $items->venue_total }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold ">Type of Food</span> <br>
                                                        <span class="color-mid">{{ $items->food_type }}</span>
                                                    </div>
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold ">Pax</span> <br>
                                                        <span class="color-mid">{{ $items->pax }}</span>
                                                    </div>
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold">Rate</span> <br>
                                                        <span class="color-mid">{{ $items->food_rate }}</span>
                                                    </div>
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold">Sub Total</span> <br>
                                                        <span class="color-mid">{{ $items->food_total }}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-3 d-md-block d-none"></div>
                                                    <div class="col-md-3 d-md-block d-none"></div>
                                                    <div class="col-md-3 d-md-block d-none"></div>
                                                    <div class="col-12 col-md-3">
                                                        <span class="color-mid fw-bold">TOTAL</span> <br>
                                                        <span class="color-mid">{{ $items->total }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer border-top-0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </tbody>
                    </table>
                </div>


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