@extends('Admin.layout.master')
@section('content')

        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
                <!--begin::Navbar-->
                <div class="card mb-6 mb-xl-9">
                    <div class="card-body pt-9 pb-0">
                        <!--begin::Details-->
                        <div class="d-flex flex-wrap flex-sm-nowrap mb-6">
                            <!--begin::Image-->
                            <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative me-7 mb-4">
                                <img src="{{ asset(isset($game->gameGallery[0]->path) ? $game->gameGallery[0]->path : 'assets/media/svg/brand-logos/volicity-9.svg') }}" alt="image">
                            </div>
                            <!--end::Image-->
                            <!--begin::Wrapper-->
                            <div class="flex-grow-1">
                                <!--begin::Head-->
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <!--begin::Details-->
                                    <div class="d-flex flex-column">
                                        <!--begin::Status-->
                                        <div class="d-flex align-items-center mb-1">
                                            <a href="#" class="text-gray-800 text-hover-primary fs-2 fw-bolder me-3">{{$game->name}}</a>
                                            @if ($game->status == 'active' || $game->status == 'pending')
                                                <span class="badge badge-light-primary me-auto">{{ ucfirst(trans($game->status)) }}</span>
                                            @elseif ($game->status == 'canceled')
                                                <span class="badge badge-light-danger me-auto">{{ ucfirst(trans($game->status)) }}</span>
                                            @else
                                                <span class="badge badge-light-success me-auto">{{ ucfirst(trans($game->status)) }}</span>
                                            @endif
                                        </div>
                                        <!--end::Status-->
                                        <!--begin::Info-->
                                        <div class="d-flex flex-wrap fw-bold fs-6 mb-4 pe-2">
                                            <a href="#" class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
                                                <!--begin::Svg Icon | path: icons/duotune/communication/com006.svg-->
                                                <span class="svg-icon svg-icon-4 me-1">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                        <path opacity="0.3" d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z" fill="currentColor" />
                                                        <path d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z" fill="currentColor" />
                                                    </svg>
                                                </span>
                                                <!--end::Svg Icon-->Category Name: {{ ucfirst(trans(isset($game->gameCategory) ? $game->gameCategory->name : "-")) }}
                                            </a>
                                            <a href="#" class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
                                                <!--begin::Svg Icon | path: icons/duotune/communication/com011.svg-->
                                                <span class="svg-icon svg-icon-4 me-1">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                        <path opacity="0.3" d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z" fill="currentColor" />
                                                        <path d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z" fill="currentColor" />
                                                    </svg>
                                                </span>
                                                <!--end::Svg Icon-->Category Type: {{ ucfirst(trans(isset($game->gameCategory) ? $game->gameCategory->type : "-")) }}
                                            </a>
                                            <a href="#" class="d-flex align-items-center text-gray-400 text-hover-primary mb-2">
                                                <!--begin::Svg Icon | path: icons/duotune/communication/com011.svg-->
                                                <span class="svg-icon svg-icon-4 me-1">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                        <path opacity="0.3" d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z" fill="currentColor" />
                                                        <path d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z" fill="currentColor" />
                                                    </svg>
                                                </span>
                                                <!--end::Svg Icon-->Location: {{ ucfirst(trans($game->location)) }}
                                            </a>
                                        </div>
                                        <!--end::Info-->
                                    </div>
                                    <!--end::Details-->
                                    <!--begin::Actions-->
                                    <div class="d-flex mb-4">
                                        <a href="{{ route('games.gallery', $game->id) }}" class="btn btn-sm btn-primary me-3">Gallery</a>
                                    </div>
                                    <!--end::Actions-->
                                </div>
                                <!--end::Head-->
                                <!--begin::Info-->
                                <div class="d-flex flex-wrap justify-content-start">
                                    <!--begin::Stats-->
                                    <div class="d-flex flex-wrap">
                                        <!--begin::Stat-->
                                        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <!--begin::Number-->
                                            <div class="d-flex align-items-center">
                                                <div class="fs-4 fw-bolder" data-kt-countup="true" data-kt-countup-value="{{$game->number_of_player}}">0</div>
                                            </div>
                                            <!--end::Number-->
                                            <!--begin::Label-->
                                            <div class="fw-bold fs-6 text-gray-400">Total Players</div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Stat-->
                                        <!--begin::Stat-->
                                        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <!--begin::Number-->
                                            <div class="d-flex align-items-center">
                                                {{-- <div class="fs-4 fw-bolder" data-kt-countup="true" data-kt-countup-value="75">0</div> --}}
                                                <div class="fs-4 fw-bolder">{{$game->start_date_time}}</div>
                                            </div>
                                            <!--end::Number-->
                                            <!--begin::Label-->
                                            <div class="fw-bold fs-6 text-gray-400">Start Date Time</div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Stat-->
                                        <!--begin::Stat-->
                                        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <!--begin::Number-->
                                            <div class="d-flex align-items-center">
                                                {{-- <div class="fs-4 fw-bolder" data-kt-countup="true" data-kt-countup-value="0" data-kt-countup-prefix="$">0</div> --}}
                                                <div class="fs-4 fw-bolder">{{$game->end_date_time}}</div>
                                            </div>
                                            <!--end::Number-->
                                            <!--begin::Label-->
                                            <div class="fw-bold fs-6 text-gray-400">End Date Time</div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Stat-->
                                    </div>
                                    <!--end::Stats-->
                                </div>
                                <!--end::Info-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Details-->
                        <div class="separator"></div>
                        <!--begin::Nav-->
                        <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder">
                            <!--begin::Nav item-->
                            <li class="nav-item">
                                <a class="nav-link text-active-primary py-5 me-6 active" href="{{ route('games.details', $game->id) }}">Details</a>
                            </li>
                            <!--end::Nav item-->
                            <!--begin::Nav item-->
                            <li class="nav-item">
                                <a class="nav-link text-active-primary py-5 me-6" href="{{ route('games.invites', $game->id) }}">Invites</a>
                            </li>
                            <!--end::Nav item-->
                        </ul>
                        <!--end::Nav-->
                    </div>
                </div>
                <!--end::Navbar-->
                <!--begin::Row-->
                <div class="row g-6 g-xl-9">
                    <!--begin::Col-->
                    <div class="col-lg-6">
                        <!--begin::Card-->
                        <div class="card card-flush h-lg-100">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <!--begin::Card title-->
                                <div class="card-title">
                                    <h2 class="fw-bolder">Owner Details</h2>
                                </div>
                                <!--begin::Card title-->
                                <!--begin::Card toolbar-->
                                <div class="card-toolbar">
                                    <a href="{{ route('user', $game->gameOwner->id) }}" class="btn btn-bg-light btn-active-color-primary btn-sm">View Profile</a>
                                </div>
                                <!--end::Card toolbar-->
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-1">
                                <!--begin::Section-->
                                <div>
                                    <!--begin::Title-->
                                    <h5 class="mb-4">Profile:</h5>
                                    <!--end::Title-->
                                    <!--begin::Details-->
                                    <div class="d-flex flex-wrap py-5">
                                        <!--begin::Row-->
                                        <div class="flex-equal me-5">
                                            <!--begin::Details-->
                                            <table class="table fs-6 fw-bold gs-0 gy-2 gx-2 m-0">
                                                <!--begin::Row-->
                                                <tr>
                                                    <td class="text-gray-400 min-w-175px w-175px">Email:</td>
                                                    <td class="text-gray-800 min-w-200px">
                                                        <a href="../../demo1/dist/pages/apps/customers/view.html" class="text-gray-800 text-hover-primary">{{$game->gameOwner->email}}</a>
                                                    </td>
                                                </tr>
                                                <!--end::Row-->
                                                <!--begin::Row-->
                                                <tr>
                                                    <td class="text-gray-400">Name:</td>
                                                    <td class="text-gray-800">{{$game->gameOwner->name}}</td>
                                                </tr>
                                                <!--end::Row-->
                                                <!--begin::Row-->
                                                <tr>
                                                    <td class="text-gray-400">Status:</td>
                                                    <td class="text-gray-800">{{$game->gameOwner->status}}</td>
                                                </tr>
                                                <!--end::Row-->
                                                <!--begin::Row-->
                                                <tr>
                                                    <td class="text-gray-400">Phone:</td>
                                                    <td class="text-gray-800">{{$game->gameOwner->phone_number}}</td>
                                                </tr>
                                                <!--end::Row-->
                                            </table>
                                            <!--end::Details-->
                                        </div>
                                        <!--end::Row-->
                                        <!--begin::Row-->
                                        <div class="flex-equal">
                                            <!--begin::Details-->
                                            <table class="table fs-6 fw-bold gs-0 gy-2 gx-2 m-0">
                                                <!--begin::Row-->
                                                <tr>
                                                    <td class="text-gray-400 min-w-175px w-175px">Profile Type:</td>
                                                    <td class="text-gray-800 min-w-200px">
                                                        <a href="#" class="text-gray-800 text-hover-primary">
                                                            @if (isset($game->gameOwner->sub_expiry_date))
                                                                Premium
                                                            @else
                                                                Basic
                                                            @endif
                                                        </a>
                                                    </td>
                                                </tr>
                                                <!--end::Row-->
                                                <!--begin::Row-->
                                                <tr>
                                                    <td class="text-gray-400">Subscription Expiry:</td>
                                                    <td class="text-gray-800">{{ isset($game->gameOwner->sub_expiry_date) ? $game->gameOwner->sub_expiry_date : '-' }}</td>
                                                </tr>
                                                <!--end::Row-->
                                                <!--begin::Row-->
                                                <tr>
                                                    <td class="text-gray-400">Credit Points:</td>
                                                    <td class="text-gray-800">{{$credits_points}}</td>
                                                </tr>
                                                <!--end::Row-->
                                                <!--begin::Row-->
                                                <tr>
                                                    <td class="text-gray-400">Total Games:</td>
                                                    <td class="text-gray-800">{{$owner_games}}</td>
                                                </tr>
                                                <!--end::Row-->
                                            </table>
                                            <!--end::Details-->
                                        </div>
                                        <!--end::Row-->
                                    </div>
                                    <!--end::Row-->
                                </div>
                                <!--end::Section-->
                                <!--begin::Section-->
                                {{-- <div class="mb-0">
                                    <!--begin::Title-->
                                    <h5 class="mb-4">Subscribed Products:</h5>
                                    <!--end::Title-->
                                    <!--begin::Product table-->
                                    <div class="table-responsive">
                                        <!--begin::Table-->
                                        <table class="table align-middle table-row-dashed fs-6 gy-4 mb-0">
                                            <!--begin::Table head-->
                                            <thead>
                                                <!--begin::Table row-->
                                                <tr class="border-bottom border-gray-200 text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                                    <th class="min-w-150px">Product</th>
                                                    <th class="min-w-125px">Subscription ID</th>
                                                    <th class="min-w-125px">Qty</th>
                                                    <th class="min-w-125px">Total</th>
                                                    <th class="text-end min-w-70px">Actions</th>
                                                </tr>
                                                <!--end::Table row-->
                                            </thead>
                                            <!--end::Table head-->
                                            <!--begin::Table body-->
                                            <tbody class="fw-bold text-gray-800">
                                                <tr>
                                                    <td>
                                                        <label class="w-150px">Basic Bundle</label>
                                                        <div class="fw-normal text-gray-600">Basic yearly bundle</div>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-light-danger">sub_4567_8765</span>
                                                    </td>
                                                    <td>1</td>
                                                    <td>$149.99 / Year</td>
                                                    <td class="text-end">
                                                        <!--begin::Action-->
                                                        <a href="#" class="btn btn-icon btn-active-light-primary w-30px h-30px" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                            <!--begin::Svg Icon | path: icons/duotune/general/gen019.svg-->
                                                            <span class="svg-icon svg-icon-3">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                                    <path d="M17.5 11H6.5C4 11 2 9 2 6.5C2 4 4 2 6.5 2H17.5C20 2 22 4 22 6.5C22 9 20 11 17.5 11ZM15 6.5C15 7.9 16.1 9 17.5 9C18.9 9 20 7.9 20 6.5C20 5.1 18.9 4 17.5 4C16.1 4 15 5.1 15 6.5Z" fill="currentColor" />
                                                                    <path opacity="0.3" d="M17.5 22H6.5C4 22 2 20 2 17.5C2 15 4 13 6.5 13H17.5C20 13 22 15 22 17.5C22 20 20 22 17.5 22ZM4 17.5C4 18.9 5.1 20 6.5 20C7.9 20 9 18.9 9 17.5C9 16.1 7.9 15 6.5 15C5.1 15 4 16.1 4 17.5Z" fill="currentColor" />
                                                                </svg>
                                                            </span>
                                                            <!--end::Svg Icon-->
                                                        </a>
                                                        <!--begin::Menu-->
                                                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-6 w-200px py-4" data-kt-menu="true">
                                                            <!--begin::Menu item-->
                                                            <div class="menu-item px-3">
                                                                <a href="#" class="menu-link px-3">Pause Subscription</a>
                                                            </div>
                                                            <!--end::Menu item-->
                                                            <!--begin::Menu item-->
                                                            <div class="menu-item px-3">
                                                                <a href="#" class="menu-link px-3" data-kt-subscriptions-view-action="delete">Edit Subscription</a>
                                                            </div>
                                                            <!--end::Menu item-->
                                                            <!--begin::Menu item-->
                                                            <div class="menu-item px-3">
                                                                <a href="#" class="menu-link text-danger px-3" data-kt-subscriptions-view-action="edit">Cancel Subscription</a>
                                                            </div>
                                                            <!--end::Menu item-->
                                                        </div>
                                                        <!--end::Menu-->
                                                        <!--end::Action-->
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <label class="w-150px">Pro Bundle</label>
                                                        <div class="fw-normal text-gray-400">Basic yearly bundle</div>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-light-danger">sub_4567_3433</span>
                                                    </td>
                                                    <td>5</td>
                                                    <td>$949.99 / Year</td>
                                                    <td class="text-end">
                                                        <!--begin::Action-->
                                                        <a href="#" class="btn btn-icon btn-active-light-primary w-30px h-30px" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                            <!--begin::Svg Icon | path: icons/duotune/general/gen019.svg-->
                                                            <span class="svg-icon svg-icon-3">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                                    <path d="M17.5 11H6.5C4 11 2 9 2 6.5C2 4 4 2 6.5 2H17.5C20 2 22 4 22 6.5C22 9 20 11 17.5 11ZM15 6.5C15 7.9 16.1 9 17.5 9C18.9 9 20 7.9 20 6.5C20 5.1 18.9 4 17.5 4C16.1 4 15 5.1 15 6.5Z" fill="currentColor" />
                                                                    <path opacity="0.3" d="M17.5 22H6.5C4 22 2 20 2 17.5C2 15 4 13 6.5 13H17.5C20 13 22 15 22 17.5C22 20 20 22 17.5 22ZM4 17.5C4 18.9 5.1 20 6.5 20C7.9 20 9 18.9 9 17.5C9 16.1 7.9 15 6.5 15C5.1 15 4 16.1 4 17.5Z" fill="currentColor" />
                                                                </svg>
                                                            </span>
                                                            <!--end::Svg Icon-->
                                                        </a>
                                                        <!--begin::Menu-->
                                                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-6 w-200px py-4" data-kt-menu="true">
                                                            <!--begin::Menu item-->
                                                            <div class="menu-item px-3">
                                                                <a href="#" class="menu-link px-3">Pause Subscription</a>
                                                            </div>
                                                            <!--end::Menu item-->
                                                            <!--begin::Menu item-->
                                                            <div class="menu-item px-3">
                                                                <a href="#" class="menu-link px-3" data-kt-subscriptions-view-action="delete">Edit Subscription</a>
                                                            </div>
                                                            <!--end::Menu item-->
                                                            <!--begin::Menu item-->
                                                            <div class="menu-item px-3">
                                                                <a href="#" class="menu-link text-danger px-3" data-kt-subscriptions-view-action="edit">Cancel Subscription</a>
                                                            </div>
                                                            <!--end::Menu item-->
                                                        </div>
                                                        <!--end::Menu-->
                                                        <!--end::Action-->
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <!--end::Table body-->
                                        </table>
                                        <!--end::Table-->
                                    </div>
                                    <!--end::Product table-->
                                </div> --}}
                                <!--end::Section-->
                            </div>
                            <!--end::Card body-->
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-lg-6">
                        <!--begin::Tasks-->
                        <div class="card card-flush h-lg-100">
                            <!--begin::Card header-->
                            <div class="card-header">
                                <!--begin::Card title-->
                                <div class="card-title flex-column">
                                    <h3 class="fw-bolder mb-1">Game Details</h3>
                                </div>
                                <!--end::Card title-->
                                <div class="card-toolbar">
                                    <!--begin::Action-->
                                    <a href="#" class="btn btn-bg-light btn-active-color-primary btn-sm me-1 games-members" data-type='joined' data-id={{$game->id}} data-bs-toggle="modal" data-bs-target="#kt_modal_view_users">Joined</a>
                                    <!--end::Action-->
                                    <!--begin::Action-->
                                    <a href="#" class="btn btn-bg-light btn-active-color-primary btn-sm me-1 games-members" data-type='attended' data-id={{$game->id}} data-bs-toggle="modal" data-bs-target="#kt_modal_view_users">Attended</a>
                                    <!--end::Action-->
                                </div>

                                <!--begin::Modal - View Users-->
                                <div class="modal fade" id="kt_modal_view_users" tabindex="-1" aria-hidden="true">
                                    <!--begin::Modal dialog-->
                                    <div class="modal-dialog mw-650px">
                                        <!--begin::Modal content-->
                                        <div class="modal-content">
                                            <!--begin::Modal header-->
                                            <div class="modal-header pb-0 border-0 justify-content-end">
                                                <!--begin::Close-->
                                                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                                    <span class="svg-icon svg-icon-1">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                                                        </svg>
                                                    </span>
                                                    <!--end::Svg Icon-->
                                                </div>
                                                <!--end::Close-->
                                            </div>
                                            <!--begin::Modal header-->
                                            <!--begin::Modal body-->
                                            <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                                                <!--begin::Heading-->
                                                <div class="text-center mb-13">
                                                    <!--begin::Title-->
                                                    <h1 class="mb-3" id="member-title"></h1>
                                                    <!--end::Title-->
                                                </div>
                                                <!--end::Heading-->
                                                <!--begin::Users-->
                                                <div class="mb-15 members">



                                                    <!--begin::List-->

                                                    <!--end::List-->



                                                </div>
                                                <!--end::Users-->
                                            </div>
                                            <!--end::Modal body-->
                                        </div>
                                        <!--end::Modal content-->
                                    </div>
                                    <!--end::Modal dialog-->
                                </div>
                                <!--end::Modal - View Users-->

                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body pt-1">
                                <!--begin::Item-->
                                <div class="mb-8">
                                    <!--begin::Title-->
                                    <h4 class="text-gray-700 w-bolder mb-0">Game Description:</h4>
                                    <!--end::Title-->
                                    <!--begin::Section-->
                                    <div class="my-2">
                                        <!--begin::Row-->
                                        <div class="d-flex align-items-center mb-3">
                                            <!--begin::Label-->
                                            <div class="text-gray-600 fw-bold fs-6">
                                                @if(strlen($game->game_description) > 100)
                                                    {{substr($game->game_description,0,200)}}
                                                    <a class="read-more-show hide" href="#">...Read More</a>
                                                    <span class="read-more-content"> {{substr($game->game_description,100,strlen($game->game_description))}}
                                                        <a class="read-more-hide hide" href="#">...Read Less</a>
                                                    </span>
                                                @else
                                                    {{$game->game_description}}
                                                @endif
                                            </div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Row-->
                                    </div>
                                    <!--end::Section-->
                                </div>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <div class="mb-8">
                                    <!--begin::Title-->
                                    <h4 class="text-gray-700 w-bolder mb-0">Game Instructions:</h4>
                                    <!--end::Title-->
                                    <!--begin::Section-->
                                    <div class="my-2">
                                        <!--begin::Row-->
                                        <div class="d-flex align-items-center mb-3">
                                            <!--begin::Label-->
                                            <div class="text-gray-600 fw-bold fs-6">
                                                @if(strlen($game->game_instructions) > 100)
                                                    {{substr($game->game_instructions,0,200)}}
                                                    <a class="read-more-show hide" href="#">...Read More</a>
                                                    <span class="read-more-content"> {{substr($game->game_instructions,100,strlen($game->game_instructions))}}
                                                        <a class="read-more-hide hide" href="#">...Read Less</a>
                                                    </span>
                                                @else
                                                    {{$game->game_description}}
                                                @endif
                                            </div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Row-->
                                    </div>
                                    <!--end::Section-->
                                </div>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <div class="mb-8">
                                    <!--begin::Title-->
                                    <h4 class="text-gray-700 w-bolder mb-0">Game Rules:</h4>
                                    <!--end::Title-->
                                    <!--begin::Section-->
                                    <div class="my-2">
                                        <!--begin::Row-->
                                        <div class="d-flex align-items-center mb-3">
                                            <!--begin::Label-->
                                            <div class="text-gray-600 fw-bold fs-6">
                                                @if(strlen($game->game_rules) > 100)
                                                    {{substr($game->game_rules,0,200)}}
                                                    <a class="read-more-show hide" href="#">...Read More</a>
                                                    <span class="read-more-content"> {{substr($game->game_rules,100,strlen($game->game_rules))}}
                                                        <a class="read-more-hide hide" href="#">...Read Less</a>
                                                    </span>
                                                @else
                                                    {{$game->game_description}}
                                                @endif
                                            </div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Row-->
                                    </div>
                                    <!--end::Section-->
                                </div>
                                <!--end::Item-->
                            </div>
                            <!--end::Card body-->
                        </div>
                        <!--end::Tasks-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Table-->
                <div class="card card-flush mt-6 mt-xl-9">
                    <!--begin::Card header-->
                    <div class="card-header mt-5">
                        <!--begin::Card title-->
                        <div class="card-title flex-column">
                            <h3 class="fw-bolder mb-1">Game Reviews</h3>
                            <div class="fs-6 text-gray-400">Total {{$rate_count}} Ratings</div>
                        </div>
                        <!--begin::Card title-->
                        <!--begin::Card toolbar-->
                        <div class="card-toolbar my-1">
                            <!--begin::Select-->
                            <div class="me-6 my-1">
                                <select id="kt_filter_year" name="year" data-control="select2" data-hide-search="true" class="w-125px form-select form-select-solid form-select-sm d-none">
                                    <option value="All" selected="selected">All time</option>
                                    <option value="thisyear">This year</option>
                                    <option value="thismonth">This month</option>
                                </select>
                            </div>
                            <!--end::Select-->
                            <!--begin::Select-->
                            <div class="me-4 my-1">
                                <select id="kt_filter_orders" name="orders" data-control="select2" data-hide-search="true" class="w-125px form-select form-select-solid form-select-sm d-none">
                                    <option value="All" selected="selected">All Orders</option>
                                    <option value="Approved">Approved</option>
                                    <option value="Declined">Declined</option>
                                </select>
                            </div>
                            <!--end::Select-->
                            <!--begin::Search-->
                            <div class="d-flex align-items-center position-relative my-1">
                                <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                                <span class="svg-icon svg-icon-3 position-absolute ms-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
                                        <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                                <input type="text" id="kt_filter_search" class="form-control form-control-solid form-select-sm w-150px ps-9" placeholder="Search Order" />
                            </div>
                            <!--end::Search-->
                        </div>
                        <!--begin::Card toolbar-->
                    </div>
                    <!--end::Card header-->
                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <!--begin::Table container-->
                        <div class="table-responsive">
                            <!--begin::Table-->
                            <table id="kt_profile_overview_table" class="table table-row-bordered table-row-dashed gy-4 align-middle fw-bolder">
                                <!--begin::Head-->
                                <thead class="fs-7 text-gray-400 text-uppercase">
                                    <tr>
                                        <th class="min-w-25px ps-0">ID</th>
                                        <th class="min-w-300px px-0">Review</th>
                                        <th class="min-w-75px text-center">Rating</th>
                                        <th class="min-w-150px">Rated By</th>
                                        <th class="min-w-150px">Rated To</th>
                                        <th class="min-w-75px">Privacy</th>
                                        <th class="min-w-100px text-center">Total Players</th>
                                    </tr>
                                </thead>
                                <!--end::Head-->
                                <!--begin::Body-->
                                <tbody class="fs-6">
                                        @foreach ($ratings as $rating)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $rating->review }}</td>
                                            <td class="text-center">{{ $rating->rating }}</td>
                                            <td>
                                            <!--begin::User-->
                                            <div class="d-flex align-items-center">
                                                <!--begin::Info-->
                                                <div class="d-flex flex-column justify-content-center">
                                                    <a href="{{ route('user', $rating->ratedBy->id) }}" class="fs-6 text-gray-800 text-hover-primary">{{ $rating->ratedBy->name }}</a>
                                                </div>
                                                <!--end::Info-->
                                            </div>
                                            <!--end::User-->
                                            </td>
                                            <td>

                                            <!--begin::User-->
                                            <div class="d-flex align-items-center">
                                                <!--begin::Info-->
                                                <div class="d-flex flex-column justify-content-center">
                                                    <a href="{{ route('user', $rating->ratedTo->id) }}" class="fs-6 text-gray-800 text-hover-primary">{{ $rating->ratedTo->name }}</a>
                                                </div>
                                                <!--end::Info-->
                                            </div>
                                            <!--end::User-->
                                            </td>
                                            <td>
                                                @if (isset($rating->game->play_with_friends) == true)
                                                    <span class="badge badge-light-success fw-bolder px-4 py-3">Public</span>
                                                @else
                                                    <span class="badge badge-light-primary fw-bolder px-4 py-3">Private</span>
                                                @endif
                                            </td>
                                            <td class="text-center">{{ $rating->game->number_of_player }}</td>
                                        </tr>
                                        @endforeach
                                </tbody>
                                <!--end::Body-->
                            </table>
                            <!--end::Table-->
                        </div>
                        <!--end::Table container-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->

@endsection
@section('script')
    <script>
        // Hide the extra content initially, using JS so that if JS is disabled, no problemo:
        $('.read-more-content').addClass('hide')
        $('.read-more-show, .read-more-hide').removeClass('hide')

        // Set up the toggle effect:
        $('.read-more-show').on('click', function(e) {
        $(this).next('.read-more-content').removeClass('hide');
        $(this).addClass('hide');
        e.preventDefault();
        });

        // Changes contributed by @diego-rzg
        $('.read-more-hide').on('click', function(e) {
        var p = $(this).parent('.read-more-content');
        p.addClass('hide');
        p.prev('.read-more-show').removeClass('hide'); // Hide only the preceding "Read More"
        e.preventDefault();
        });

        $('.games-members').on('click', function () {
            // var userURL = $(this).data('url');

            var id = $(this).data('id');
            var type = $(this).data('type');
            var url = '/admin/games-members/' + id + '/' + type;

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}",
                },
                type: "GET",
                url: url,
                contentType: "application/json",
                success: function(data) {
                    $('#member-title').text(data.title);
                    $(".members").empty();
                    var result = data.members;

                    if (result.length > 0) {
                        for (let i = 0; i < result.length; i++) {
                            const element = result[i];
                            let image = element.user_image?.path ?? '/assets/media/avatars/300-1.jpg';

                            $('.members').append(`<div class="mh-375px scroll-y me-n7 pe-7 members-list">
                                                    <!--begin::User-->
                                                    <div class="d-flex flex-stack py-5">
                                                        <!--begin::Details-->
                                                        <div class="d-flex align-items-center">
                                                            <!--begin::Avatar-->
                                                            <div class="symbol symbol-35px symbol-circle">
                                                                <img src="${image}" alt="Player Avatar">
                                                            </div>
                                                            <!--end::Avatar-->
                                                            <!--begin::Details-->
                                                            <div class="ms-6">
                                                                <!--begin::Name-->
                                                                <a href="{{ url('admin/users/${element.id}') }}" class="d-flex align-items-center fs-5 fw-bolder text-dark text-hover-primary member-name">${element.name}
                                                                <span class="badge badge-light fs-8 fw-bold ms-2">${element.username}</span></a>
                                                                <!--end::Name-->
                                                                <!--begin::Email-->
                                                                <div class="fw-bold text-muted">${element.email}</div>
                                                                <!--end::Email-->
                                                            </div>
                                                            <!--end::Details-->
                                                        </div>
                                                        <!--end::Details-->
                                                        <!--begin::Stats-->
                                                        <div class="d-flex">
                                                            <!--begin::Sales-->
                                                            <div class="text-end">
                                                                <div class="fs-5 fw-bolder text-dark">${element.phone_number}</div>
                                                                <div class="fs-7 text-muted">${element.status}</div>
                                                            </div>
                                                            <!--end::Sales-->
                                                        </div>
                                                        <!--end::Stats-->
                                                    </div>
                                                    <!--end::User-->
                                                </div>`);
                        }
                    } else {
                        $('.members').append(`<h3 class="card-title text-center">
													<span class="card-label fw-bolder text-dark">No Record Found</span>
											  </h3>`);
                    }
                },

                error: function(e) {

                    var parseData = JSON.parse(e.responseText);
                    let message = parseData.data;

                    if (parseData.message) {
                        Swal.fire(
                            'Incorrect...',
                            parseData.message,
                            'error'
                        );
                    }
                }
            });
        });
    </script>
@endsection