@extends('frontend::layouts.master')
@section('style')
    <link rel="stylesheet" href="/frontend/assets/css/custom-style.css">
    <link rel="stylesheet" href="{{ mix('css/frontend.css') }}">
    <link rel="stylesheet" href="/frontend/assets/css/stage-style.css">
@endsection
@section('content')
    {{-- <livewire:frontend::component.stage.top-menu /> --}}
    <livewire:frontend::component.stage.top-menu />

    <!-- Start Main Page Wrapper -->
    <main class="main-page-wrapper">
        <livewire:frontend::component.stage.event-bar :event="$event" />

        <!-- Start Service Area -->
        <div class="rn-service-area rn-section-gap section-separator" id="features">
            <div class="container">
                <div class="row row--25 mt_md--10 mt_sm--10">
                    <livewire:frontend::component.stage.stage-map />
                    <livewire:frontend::component.stage.ticket-list :event="$event" :timeId="$timeId" :minRange="0" :soodSeller="1" :customerSeller="1" :quantity="1" :wire:key="$timeId"/>
                </div>
                <div class="row row--25 mt_md--10 mt_sm--10">
                    <div class="col-5">
                        {{-- event image --}}
                        <div id="carouselExample" class="carousel slide">
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                <img src="..." class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                <img src="..." class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                <img src="..." class="d-block w-100" alt="...">
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                            </div>

                    </div>
                    <div class="col-7">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="section-title text-center mt--20">
                                    <span class="subtitle"></span>
                                    <h2 class="title">ชื่อกิจกรรม</h2>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <br>รายละเอียดกิจกรรม
                                <br>รอบการแสดง
                            </div>
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Service Area  -->


        <!-- Back to  top Start -->
        <div class="backto-top">
            <div>
                <i data-feather="arrow-up"></i>
            </div>
        </div>
        <!-- Back to top end -->
    </main>

    <livewire:frontend::component.footer />
@endsection
@section('script')
    
    @livewireScripts

    <script src="{{ mix('js/frontend.js') }}"></script>

    <script>
        let nextRoute = "{{ route('frontend.order.ticket',['slug'=> $slug]) }}";
    </script>

@endsection