@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="card g-3 mt-5"> --}}
<div class="card-body row g-3">
    <div class="col-lg-8">

            <div class="d-flex justify-content-between align-items-center flex-wrap mb-2 gap-1">
                <div class="me-1">
                    <h5 class="mb-1">{{ __('messages.Basic information') }}</h5>
                    <p class="mb-1"><span class="fw-medium"> {{ $data->name }}</span></p>
                </div>
                <div class="d-flex align-items-center">
                    <a href="{{ route('admin.shows.edit.basic_info',['show_id'=>$data->id,'hall_id'=>$data->hall_id]) }}"
                        class="btn btn-outline-primary waves-effect text-primary">{{ __('messages.Edit') }}<i
                            class="ti ti-pencil"></i></a>
                </div>
            </div>
            <div class="card academy-content shadow-none border">

                <div class="card-body">
                    <h5>{{ __('messages_1.Detail') }}</h5>
                    <div class="d-flex flex-wrap">
                        <div class="me-5">

                            <p class="text-nowrap"><i
                                    class="ti ti-user ti-sm me-2 mt-n2"></i>{{ __("messages.Director's name") }}:
                                {{ $data->director }}</p>
                            <p class="text-nowrap"><i
                                    class="ti ti-flag ti-sm me-2 mt-n2"></i>{{ __('messages.Author Name') }}:
                                {{ $data->authpr }}</p>
                            <p class="text-nowrap"><i
                                    class="ti ti-file ti-sm me-2 mt-n2"></i>{{ __('messages.Type show') }}:
                                {{ __('messages.show_types.' . $data->type) }}</p>
                            <p class="text-nowrap"><i
                                    class="ti ti-file ti-sm me-2 mt-n2"></i>{{ __('messages_1.Min price') }}:
                                {{ $data->min_price }}</p>
                            <p class="text-nowrap"><i
                                    class="ti ti-file ti-sm me-2 mt-n2"></i>{{ __('messages_1.Max price') }}:
                                {{ $data->max_price }}</p>
                            <p class="text-nowrap"><i
                                    class="ti ti-file ti-sm me-2 mt-n2"></i>{{ __('messages_1.Count tickets') }}:
                                {{ $data->count_tickets }}</p>
                        </div>

                    </div>
                </div>
            </div>
    </div>
    <div class="col-lg-4">

            <div class="accordion stick-top accordion-bordered" id="courseContent">
                <div class="accordion-item active mb-0">
                    <div class="accordion-header" id="headingOne">
                        <button type="button" class="accordion-button bg-lighter rounded-0" data-bs-toggle="collapse"
                            data-bs-target="#chapterOne" aria-expanded="true" aria-controls="chapterOne">
                            <span class="d-flex flex-column">
                                <span class="h5 mb-1">{{ __('messages_1.Actors') }}</span>
                                <a href="{{ route('admin.shows.edit.team',$data->id) }}"
                                    class="btn btn-outline-primary waves-effect text-primary">{{ __('messages.Edit') }}<i
                                        class="ti ti-pencil"></i></a>
                            </span>
                        </button>
                    </div>
                    <div id="chapterOne" class="accordion-collapse collapse show" data-bs-parent="#courseContent">
                        <div class="accordion-body py-3 border-top">
                            @foreach ($data->team as $actor)
                                <div class="form-check d-flex align-items-center mb-3">
                                    <label for="defaultCheck1" class="form-check-label">
                                        <span class="mb-0 h6">{{ $loop->iteration }}. {{ $actor->name }}</span>
                                    </label>
                                </div>
                            @endforeach


                        </div>
                    </div>
                </div>



            </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