@extends('frontend.layouts.app')

@section('title')
@endsection

@section('seo')
    <title>Book Now | 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="Book Now  | 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="Book Now  | 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: #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: #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">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>
                            <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: #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: #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" 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('payment/membership') }}">
                        <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> 
                    <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;">
                                <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">
            <div class="d-flex my-4 align-items-center p-1">

                <h2 class="fw-bold color-mid">Membership Subscription</h2>
            </div>
            @foreach ($orders as $order)
                <div class="row p-1">
                    <div class="col-lg-6" data-aos="fade-right" data-aos-duration="500">
                        <section class="splide splide{{$order->id}}" aria-label="Splide Basic HTML Example">
                            <div class="splide__track rounded">
                                <ul class="splide__list">
                                    @foreach (json_decode($order->particulars) as $particular)
                                        @php
                                            $product = App\Models\MemberProduct::where('title', '=', $particular)
                                            ->get()
                                            ->first();
                                        @endphp
                                        @if ($product != null)
                                            <li class="splide__slide"><img
                                                    src="{{ url('uploads/' . $product->image . '') }}"
                                                    class="img-fluid h-100" alt="Product Image"></li>
                                        @endif
                                        
                                    @endforeach
                                </ul>
                            </div>
                        </section>
                    </div>
                    <div class="col-lg-6">
                        <div class="col-md-12" data-aos="fade-left" data-aos-duration="500">
                            @php
                                $index1 = 0;
                            @endphp
                            @foreach (json_decode($order->particulars) as $particular)
                                @php
                                    $product = App\Models\MemberProduct::where('title', '=', $particular)
                                        ->get()
                                        ->first();
                                    $quantity = json_decode($order->quantities);
                                @endphp
                                {{-- @if ($product != null) --}}
                                <p class="fw-bold color-mid fs-5">{{ $particular }} x {{ $quantity[$index1] }}</p>
                                {{-- @endif --}}
                                @php
                                    $index1++;
                                @endphp
                            @endforeach
                            <p class="color-mid">{{ $order->descriptions }}</p>
                            @php
                                $total = 0;
                                $index = 0;
                                $prices = json_decode($order->prices);
                                // dd($particulars[1]);
                            @endphp
                            @foreach (json_decode($order->quantities) as $quantity)
                                @php
                                    $total_a = 0;
                                    $total_a = (int) $prices[$index] * (int) $quantity;
                                    $total = $total + $total_a;
                                    $index++;
                                @endphp
                            @endforeach
                            <h1 class="fw-bold color-mid">₱ {{ number_format($total, 2) }} (Paid)</h1>
                        </div>
                    </div>
                </div>
                <script>
                    var splide{{$order->id}} = new Splide('.splide{{$order->id}}');
                    splide{{$order->id}}.mount();
                </script>
                <hr>
            @endforeach
        </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>

    <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    </script>

    <style>
        /**
                                                                                                                                                                                                                                                                                                                                                                                                                     * Tooltip Styles
                                                                                                                                                                                                                                                                                                                                                                                                                     */

        /* Add this attribute to the element that needs a tooltip */
        [data-tooltip] {
            position: relative;
            z-index: 2;
            cursor: pointer;
        }

        /* Hide the tooltip content by default */
        [data-tooltip]:before,
        [data-tooltip]:after {
            visibility: hidden;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
            opacity: 0;
            pointer-events: none;
        }

        /* Position tooltip above the element */
        [data-tooltip]:before {
            position: absolute;
            bottom: 150%;
            left: 50%;
            margin-bottom: 5px;
            margin-left: -80px;
            padding: 7px;
            width: 160px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            background-color: #000;
            background-color: hsla(0, 0%, 100%, 0.9);
            color: #b19357;
            content: attr(data-tooltip);
            text-align: center;
            font-size: 14px;
            line-height: 1.2;

            border: 1px #8b5e3b solid;
        }

        /* Triangle hack to make tooltip look like a speech bubble */
        [data-tooltip]:after {
            position: absolute;
            bottom: 150%;
            left: 50%;
            margin-left: -5px;
            width: 0;
            border-top: 5px solid #000;
            border-top: 5px solid #8b5e3b;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            content: " ";
            font-size: 0;
            line-height: 0;
        }

        /* Show tooltip content on hover */
        [data-tooltip]:hover:before,
        [data-tooltip]:hover:after {
            visibility: visible;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
            opacity: 1;
        }
    </style>
@endsection