@extends('layouts.app')

@section('content')
<div class="container-fluid my-5 px-0">
	<div class="contants_top_img">
		<picture>
            <source srcset="{{ asset('storage/main/TL11_bg_sp.png') }}" media="(max-width: 575px)">
            <img style="width: 100%;" src="{{ asset('storage/main/TL11_bg.png') }}" alt="" />
        </picture>
<!-- 		<img src="img/TL11_bg.png" class="main_visual_pc">
		<img src="img/TL11_bg_sp.png" class="main_visual_sp"> -->
		<h2>プログラム詳細</h2>
	</div>
	<div class="container my-5 px-3">
		<div class="mt-5">
			<ul class="nav nav-tabs">
			    @foreach ($program_date as $key => $program_date_list)
			        <li class="nav-item">
			            <a href="#photo{{ $program_date_list->id }}" class="nav-link mx-0 px-3 day-btn @if($key == 0) active @endif" data-toggle="tab">{{ $program_date_list->date }}</a>
			        </li>
			    @endforeach
			</ul>
			<div class="tab-content border border-top-0 p-4">
			@foreach ($program_date as $key => $program_date_list)
			    <div id="photo{{ $program_date_list->id }}" class="tab-pane @if($key == 0) fade show active @endif">
			        <div class="">
			            <div>{{ $program_date_list->notice }}</div>
			        </div>
			        <div class="mt-4 px-1">
			        	<button type="button" class="btn btn-all btn-sm day-btn mb-1" data-target="all">　ALL　</button>
			            @foreach(\App\ProgramRoom::where('date_id', $program_date_list->id)->get() as $key => $program_room_list)
			                <a href="javascript:void(0)" class="btn btn-room{{$program_room_list->room}} btn-sm switch-display mb-1" data-target="room{{$program_room_list->room}}">ROOM {{$program_room_list->room}}</a>
			            @endforeach
			        </div>
			        <div class="px-3 mb-5">
			        	<p class="text-right mb-1">2021年3月8日現在</p>
			        	
				            @foreach(\App\ProgramItem::where('date_id', $program_date_list->id)->get() as $key => $program_item_list)
				                <div class="row border p-1 mb-2 is-room room{{ \App\ProgramRoom::find($program_item_list->room_id)->room }}">
				                	<div class="col-3 col-md-2 room{{ \App\ProgramRoom::find($program_item_list->room_id)->room }}_time">
				                		{{ substr($program_item_list->start_time, 0, 5) }}-{{ substr($program_item_list->end_time, 0, 5) }}
				                	</div>
				                	<div class="col-9 col-md-10">
					                	<h5 class="text_room{{ \App\ProgramRoom::find($program_item_list->room_id)->room }} f14 pt-1">{{$program_item_list->discription}}</h5>
	                                    <h4 class="f16 font-weight-bold">{{$program_item_list->title}}</h4>
	                                    <p class="text_room{{ \App\ProgramRoom::find($program_item_list->room_id)->room }} lh_1 mb-1">Room {{ \App\ProgramRoom::find($program_item_list->room_id)->room }}</p>
					                    <div>{{$program_item_list->sponsor}}</div>
					                    @if($program_item_list->pdf != null)
					                        <div>
					                            <a href="{{ asset('storage/program_detail/'.$program_item_list->id.'/'.$program_item_list->pdf) }}">PDF</a>
					                        </div>
					                    @endif
					                    <div class="row mt-3">
						                    @foreach(\App\ProgramItemDetail::where('item_id', $program_item_list->id)->get() as $key => $program_item_detail_list)
						                        <div class="col-md-3 font-weight-bold">{{ $program_item_detail_list->title }}</div>
						                        <div class="col-md-9 mb-3">{{ $program_item_detail_list->discription }}</div>
						                    @endforeach
					                	</div>
					                </div>
				                </div>
				            @endforeach
				        
			        </div>
			    </div>
			@endforeach
		</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$('.day-btn').on('click', function() {
	$(".is-room").hide().fadeIn(1500, 'swing');
})
$(document).on('click', '.switch-display', function(event) {
    var target = $(this).data('target');
    console.log(target,$("."+target))
    $(".is-room").hide();
    $("." + target).hide().fadeIn(1500, 'swing');
});
</script>
@endsection