@extends('layouts.app')
@section('title')
    {{ __('messages_1.Shows') }}
@endsection
@section('style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/page-profile.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/plyr/plyr.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/app-academy-details.css') }}" />
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_1.Shows') => 'active',
            ],
        ])


        <!-- Basic Bootstrap Table -->
        <div class="card">
            <!-- Navbar pills -->
            @include('admin.shows.inc.nav')

            <div class="card g-3 mt-3" id="basic_info_card">
                {{-- <div class="card g-3 mt-5"> --}}
                {{-- <div class="container-xxl flex-grow-1 container-p-y"> --}}
                <div class="p-2">
                    <div class="cursor-pointer">
                        <video class="w-100" poster="{{ asset('uploads/shows/' . $data->image) }}" id="plyr-video-player"
                            playsinline controls>
                            <source src="{{ asset('uploads/shows/' . $data->video) }}" type="video/mp4" />
                        </video>
                    </div>
                </div>
                <div class="app-academy">
                    <hr class="my-4" />


                    <div class="card mb-4">

                        <div class="card-header d-flex justify-content-between align-items-center flex-wrap mb-2 gap-1">
                            <div class="card-title mb-0 me-1">
                                <h5 class="mb-1">{{ __('messages.Media') }}</h5>
                            </div>

                            <a href="{{ route('admin.shows.edit.media', $data->id) }}"
                                class="btn btn-outline-primary waves-effect text-primary">{{ __('messages.Edit') }}<i
                                    class="ti ti-pencil"></i></a>
                        </div>
                        <div class="card-body">

                            <div class="row gy-4 mb-4">
                                @foreach ($data->photo_gallery as $item)
                                    <div class="col-sm-6 col-lg-4">
                                        <div class="card p-2 h-100 shadow-none border">
                                            <div class="rounded-2 text-center mb-3">
                                                <a href="{{ asset('uploads/shows/' . $item->image) }}"><img
                                                        class="img-fluid"
                                                        src="{{ asset('uploads/shows/' . $item->image) }}"
                                                        alt="tutor image 1" /></a>
                                            </div>
                                            <div class="card-body p-3 pt-2">
                                                <div class="d-flex flex-column flex-md-row gap-2 text-nowrap">
                                                    <a class="app-academy-md-50 btn btn-label-secondary me-md-2 d-flex align-items-center"
                                                        href="app-academy-course-details.html">
                                                        <i
                                                            class="ti ti-rotate-clockwise-2 align-middle scaleX-n1-rtl me-2 mt-n1 ti-sm"></i><span>Start
                                                            Over</span>
                                                    </a>
                                                    <a class="app-academy-md-50 btn btn-label-primary d-flex align-items-center"
                                                        href="app-academy-course-details.html">
                                                        <span class="me-2">Continue</span><i
                                                            class="ti ti-chevron-right scaleX-n1-rtl ti-sm"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                        </div>
                    </div>



                </div>
                {{-- </div> --}}

                {{-- </div> --}}

                {{-- @include('admin.shows.inc.basic_info') --}}
            </div>
            {{-- <div class="card g-3 mt-3" id="media_card" style="display:none;">
                @include('admin.shows.inc.media')
            </div>
            <div class="card g-3 mt-3" id="dates_card" style="display:none;">
                @include('admin.shows.inc.dates')
            </div> --}}



            <!--/ Navbar pills -->
        </div>
        <!--/ Basic Bootstrap Table -->

    </div>
@endsection
@section('script')
    <script src="{{ asset('assets/js/pages-profile.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/plyr/plyr.js') }}"></script>
    <script src="{{ asset('assets/js/app-academy-course-details.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Function to show the selected card and hide others


            $('.nav-link').on('click', function() {
                var page = $(this).attr('data-page');
                var newUrl = window.location.href.split('?')[0] + "?page=" + page;
                console.log(newUrl);
                window.location.href = newUrl;

            });

            // $('#media_link').on('click', function() {
            //     showCard('#media_card');
            // });

            // $('#dates_link').on('click', function() {
            //     showCard('#dates_card');
            // });

            // // Initial state: Show basic info card and hide others
            // showCard('#basic_info_card');
        });
    </script>
@endsection