@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">Transaction History</h2>
            </div>
            <div class="p-4">
                <h1 class="fw-bold color-mid mb-5">Welcome {{ Auth::user()->email }}!</h1>

                @if (!empty($transact))
                {{-- <form action="{{ url('pay-guest') }}" method="POST">@csrf --}}
                    <input type="hidden" name="transact_id" value="{{ $transact->id }}">
                    <div class="row justify-content-cen7ter">
                        <div class="col-12 col-md-8">
                            <div class="rounded-4 p-3" style="border: #b19357 3px solid;">
                                <h2 class="fw-bold color-mid text-center mb-5">Checkout</h2>

                                <span>Particulars: </span>
                                <div class="mb-2"></div>

                                @php
                                    $totalAmount = 0;
                                    $x = 0;
                                    $quantities = json_decode($transact->quantities);
                                    $prices = json_decode($transact->prices);
                                @endphp

                                @foreach (json_decode($transact->particulars) as $particular)
                                    @php
                                        $totalAmount += (int)$prices[$x] * $quantities[$x];
                                    @endphp
                                    <div class="row mb-1">
                                        <div class="col-12 col-md">
                                            <span>{{ $particular }} x {{ $quantities[$x] }}</span> <br>
                                            <span style="font-size: 14px">{{ $transact->description }}</span>
                                        </div>
                                        <div class="col-12 col-md text-end">
                                            <span><i class="fa-solid fa-peso-sign"></i> {{ $prices[$x] * $quantities[$x] }}</span>
                                        </div>
                                    </div>
                                    @php
                                        $x++;
                                    @endphp
                                @endforeach

                                <div class="d-flex justify-content-between mb-5 border-top py-1">
                                    <span>Total Amount:</span>
                                    <span><i class="fa-solid fa-peso-sign"></i> {{ number_format($totalAmount, 2) }}</span>
                                </div>

                                <div class="text-center">
                                    <a href="{{ url('payment/membership') }}" class="btn bg-color-light rounded py-3 px-5 mt-2">
                                        Proceed to
                                        Payment
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {{-- </form> --}}
                @else
                    <span class="fs-5 fw-bold">No Active Transaction</span>
                    <div class="mb-5"></div>
                @endif

                <div class="mt-5">
                    <h2 class="color-mid fw-bold mb-5">Transaction History</h2>

                    <table class="table table-borderless">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Transaction No.</th>
                                <th scope="col">Particular</th>
                                <th scope="col">Total Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (!empty($history))
                                @foreach ($history as $items)
                                    @php
                                        $quantities = json_decode($items->quantities);
                                        $prices = json_decode($items->prices);
                                        $total_history = 0;
                                        $is = 0;
                                    @endphp
                                    <tr>
                                        <th>{{ $items->id }}</th>
                                        <th scope="row">{{ $items->transaction_no }}</th>
                                        <td>

                                            @foreach (json_decode($items->particulars) as $particular)
                                                {{ $particular }} x {{ $quantities[$is]}}  <br>
                                                @php
                                                    $total_history += $quantities[$is] * $prices[$is];
                                                    $is++;
                                                @endphp
                                            @endforeach
                                        </td>
                                        <td><i class="fa-solid fa-peso-sign"></i> {{number_format($total_history, 2)}}</td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="4">
                                        No Transaction History
                                    </td>
                                </tr>
                            @endif
                        </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>

    <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

@section('js')
    <script>
        var splide = new Splide('.splide');
        splide.mount();

        var splide2 = new Splide('.splide2');
        splide2.mount();

        var splide3 = new Splide('.splide3');
        splide3.mount();
    </script>
    @if (!empty($history))
    <script>
        $('.table').DataTable({
            "order": [
                [0, "desc"]
            ]
        });
    </script>
    @endif
@endsection