@extends('frontend.layouts.app')
@php
    $company_info = session('company_info');
@endphp

@section('style')
    <style>
        .card-header {
            background: white;
            display: flex;
            justify-content: space-between;
        }

        .card-title {
            margin: 0px;
            font-size: 20px;
            font-weight: bold;
            color: darkgreen;
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="titlepage text_align_center">
                    <h2>Our Games</h2>
                </div>
            </div>
            <div class="col-md-12">
                @foreach ($infos as $value)
                    <div class="mb-4">
                        <h1 style="border-bottom: 4px solid #000000;margin-bottom: 14px;font-weight: bold;"><i class="fa fa-star" aria-hidden="true"></i> {{ $value->name }}</h1>

                        {{-- <div id="bookingList{{$value->id}}">
                            {!! bookinglist($value->id, date('Y-m-d'), 0) !!}
                        </div> --}}

                        <div class="row" style="margin: 15px 0px; padding-bottom: 10px;">
                            <div class="col-md-6" style="padding: 0px;">
                                <p style="text-align: justify; font-size: 18px;">{{ $value?->description }}</p>
                            </div>
                            <div id="gameCarousel{{$value->id}}" class="col-md-6 carousel slide c-carousel" data-ride="carousel">
                                <div class="carousel-inner">
                                    @foreach (json_decode($value->images) as $img)
                                        <div class="carousel-item {{$loop->iteration == 1 ? 'active' : ''}}">
                                            <figure style="display: flex; justify-content: center;" ><img src="{{ asset($img->image) }}" alt="#" style="height: 400px;"/></figure>
                                        </div>
                                    @endforeach
                                </div>
                                <a class="carousel-control-prev" href="#gameCarousel{{$value->id}}" role="button" data-slide="prev">
                                    <i class="fa fa-angle-left" aria-hidden="true"></i>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#gameCarousel{{$value->id}}" role="button" data-slide="next">
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                            {{-- @if ($value->video)
                                <div class="col-md-12">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        {!! $value->video !!}
                                    </div>
                                </div>
                            @endif --}}
                        </div>
                        <div class="d-flex" style="margin: 15px 0px;">
                            <h1 style="border-bottom: 2px solid #767ef5;margin-right: 14px;font-weight: bold;">Facilities</h1>
                            <div class="d-flex flex-wrap" style="gap: 5px">
                                @foreach ($value->facilities as $fas)
                                    <div class="d-flex align-items-center" style="background: beige;padding: 5px; border-radius: 5px;">
                                        <img src=" {{asset($fas->icon)}} " alt="icon" width="20px">
                                        <p style="margin: 0px; padding: 0px 5px;">{{$fas->name}}</p>
                                        <span class="badge badge-info">{{($fas->price > 0 ? '৳ '.$fas->price : 'Free')}}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modal-show">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div id="modal-data">
                </div>
            </div>
        </div>
    </div>
    <!-- /.modal -->
@endsection