@extends('layouts.admin')
@section('content')
<style>
    /*td.state span {
        position: relative;
        border-radius: 30px;
        padding: 4px 10px 4px 25px;
    }

    td.state span:after {
        position: absolute;
        top: 9px;
        left: 10px;
        width: 10px;
        height: 10px;
        content: '';
        border-radius: 50%;
    }

    td.state .active {
        background: #cff6dd;
        color: #1fa750;
    }

    td.state .active:after {
        background: #23bd5a;
    }

    td.state .waiting {
        background: #fdf5dd;
        color: #cfa00c;
    }

    td.state .waiting:after {
        background: #f2be1d;
    }*/

    tbody {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 4rem 0;
        font-family: -system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    }
    .scheduleContainer {
        display: grid;
        grid-gap: 0.2rem;
        grid-template-columns: 5rem repeat(4, 1fr);
        grid-template-rows: repeat(28, 1fr);
        grid-template-areas: "time0800 stage stage stage stage" "time0830 stage stage stage stage" "time0900 stage stage stage stage" "time0930 stage stage stage stage" "time1000 stage stage stage stage" "time1030 stage stage stage stage" "time1100 stage stage stage stage" "time1130 stage stage stage stage" "time1200 stage stage stage stage" "time1230 stage stage stage stage" "time1300 stage stage stage stage" "time1330 stage stage stage stage" "time1400 stage stage stage stage" "time1430 stage stage stage stage" "time1500 stage stage stage stage" "time1530 stage stage stage stage" "time1600 stage stage stage stage" "time1630 stage stage stage stage" "time1700 stage stage stage stage" "time1730 stage stage stage stage" "time1800 stage stage stage stage" "time1830 stage stage stage stage" "time1900 stage stage stage stage" "time1930 stage stage stage stage" "time2000 stage stage stage stage" "time2030 stage stage stage stage" "time2100 stage stage stage stage" "time2130 stage stage stage stage";
    }
    /** * Time */
    .time {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border-top: thin dotted #ccc;
        height: 100%;
        padding: 0 0.5rem;
    }
    .time.start-0800 {
        grid-area: time0800;
    }
    .time.start-0830 {
        grid-area: time0830;
    }
    .time.start-0900 {
        grid-area: time0900;
    }
    .time.start-0930 {
        grid-area: time0930;
    }
    .time.start-1000 {
        grid-area: time1000;
    }
    .time.start-1030 {
        grid-area: time1030;
    }
    .time.start-1100 {
        grid-area: time1100;
    }
    .time.start-1130 {
        grid-area: time1130;
    }
    .time.start-1200 {
        grid-area: time1200;
    }
    .time.start-1230 {
        grid-area: time1230;
    }
    .time.start-1300 {
        grid-area: time1300;
    }
    .time.start-1330 {
        grid-area: time1330;
    }
    .time.start-1400 {
        grid-area: time1400;
    }
    .time.start-1430 {
        grid-area: time1430;
    }
    .time.start-1500 {
        grid-area: time1500;
    }
    .time.start-1530 {
        grid-area: time1530;
    }
    .time.start-1600 {
        grid-area: time1600;
    }
    .time.start-1630 {
        grid-area: time1630;
    }
    .time.start-1700 {
        grid-area: time1700;
    }
    .time.start-1730 {
        grid-area: time1730;
    }
    .time.start-1800 {
        grid-area: time1800;
    }
    .time.start-1830 {
        grid-area: time1830;
    }
    .time.start-1900 {
        grid-area: time1900;
    }
    .time.start-1930 {
        grid-area: time1930;
    }
    .time.start-2000 {
        grid-area: time2000;
    }
    .time.start-2030 {
        grid-area: time2030;
    }
    .time.start-2100 {
        grid-area: time2100;
    }
    .time.start-2130 {
        grid-area: time2130;
    }
    .time[class*="30"]:not(.start-1300) {
        font-size: 0.8rem;
        color: #ccc;
    }
    /** * Event */
    .event {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 0.5rem 1rem;
        background-color: orange;
        border-radius: 0.2rem;
        font-size: 0.8rem;
        font-weight: bold;
        line-height: 1.4;
    }
    .event span {
        display: block;
        width: 100%;
        font-size: 0.8em;
        font-weight: normal;
    }
    .event.start-0800 {
        grid-row-start: time0800;
    }
    .event.start-0830 {
        grid-row-start: time0830;
    }
    .event.start-0900 {
        grid-row-start: time0900;
    }
    .event.start-0930 {
        grid-row-start: time0930;
    }
    .event.start-1000 {
        grid-row-start: time1000;
    }
    .event.start-1030 {
        grid-row-start: time1030;
    }
    .event.start-1100 {
        grid-row-start: time1100;
    }
    .event.start-1130 {
        grid-row-start: time1130;
    }
    .event.start-1200 {
        grid-row-start: time1200;
    }
    .event.start-1230 {
        grid-row-start: time1230;
    }
    .event.start-1300 {
        grid-row-start: time1300;
    }
    .event.start-1330 {
        grid-row-start: time1330;
    }
    .event.start-1400 {
        grid-row-start: time1400;
    }
    .event.start-1430 {
        grid-row-start: time1430;
    }
    .event.start-1500 {
        grid-row-start: time1500;
    }
    .event.start-1530 {
        grid-row-start: time1530;
    }
    .event.start-1600 {
        grid-row-start: time1600;
    }
    .event.start-1630 {
        grid-row-start: time1630;
    }
    .event.start-1700 {
        grid-row-start: time1700;
    }
    .event.start-1730 {
        grid-row-start: time1730;
    }
    .event.start-1800 {
        grid-row-start: time1800;
    }
    .event.start-1830 {
        grid-row-start: time1830;
    }
    .event.start-1900 {
        grid-row-start: time1900;
    }
    .event.start-1930 {
        grid-row-start: time1930;
    }
    .event.start-2000 {
        grid-row-start: time2000;
    }
    .event.start-2030 {
        grid-row-start: time2030;
    }
    .event.start-2100 {
        grid-row-start: time2100;
    }
    .event.start-2130 {
        grid-row-start: time2130;
    }
    .event.end-0800 {
        grid-row-end: time0800;
    }
    .event.end-0830 {
        grid-row-end: time0830;
    }
    .event.end-0900 {
        grid-row-end: time0900;
    }
    .event.end-0930 {
        grid-row-end: time0930;
    }
    .event.end-1000 {
        grid-row-end: time1000;
    }
    .event.end-1030 {
        grid-row-end: time1030;
    }
    .event.end-1100 {
        grid-row-end: time1100;
    }
    .event.end-1130 {
        grid-row-end: time1130;
    }
    .event.end-1200 {
        grid-row-end: time1200;
    }
    .event.end-1230 {
        grid-row-end: time1230;
    }
    .event.end-1300 {
        grid-row-end: time1300;
    }
    .event.end-1330 {
        grid-row-end: time1330;
    }
    .event.end-1400 {
        grid-row-end: time1400;
    }
    .event.end-1430 {
        grid-row-end: time1430;
    }
    .event.end-1500 {
        grid-row-end: time1500;
    }
    .event.end-1530 {
        grid-row-end: time1530;
    }
    .event.end-1600 {
        grid-row-end: time1600;
    }
    .event.end-1630 {
        grid-row-end: time1630;
    }
    .event.end-1700 {
        grid-row-end: time1700;
    }
    .event.end-1730 {
        grid-row-end: time1730;
    }
    .event.end-1800 {
        grid-row-end: time1800;
    }
    .event.end-1830 {
        grid-row-end: time1830;
    }
    .event.end-1900 {
        grid-row-end: time1900;
    }
    .event.end-1930 {
        grid-row-end: time1930;
    }
    .event.end-2000 {
        grid-row-end: time2000;
    }
    .event.end-2030 {
        grid-row-end: time2030;
    }
    .event.end-2100 {
        grid-row-end: time2100;
    }
    .event.end-2130 {
        grid-row-end: time2130;
    }
    .event.length-1 {
        grid-column-end: span 1;
    }
    .event.length-2 {
        grid-column-end: span 2;
    }
    .event.length-3 {
        grid-column-end: span 3;
    }
    .event.length-4 {
        grid-column-end: span 4;
    }
    .event.stage-earth {
        background-color: #ffa726;
    }
    .event.stage-mercury {
        background-color: #9ccc65;
    }
    .event.stage-venus {
        background-color: #ff8a65;
    }
    .event.stage-mars {
        background-color: #b3e5fc;
    }
    .event.stage-jupiter {
        background-color: #81d4fa;
    }
    .event.stage-saturn {
        background-color: #26c6da;
    }
    
</style>
<div class="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    Calendário
                </div>

                <div class="card-body">
                    @if(session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    <table class="table table-bordered">
                        {{--<thead>
                            <th width="125">Hora</th>
                            @foreach($weekDays as $day)
                                <th>{{ $day }}</th>
                            @endforeach
                        </thead>--}}
                        {{--<tbody>
                            @foreach($calendarData as $time => $days)
                                <tr>
                                    <td>
                                        {{ $time }}
                                    </td>
                                    @foreach($days as $value)
                                        @if (is_array($value))
                                            <td class="state">
                                                @foreach($value['data'] as $val)
                                                    <div class="box" style="display: flex; ">     
                                                        @foreach($val as $v)
                                                            <div class="france">
                                                                <span class="waiting align-middle text-center" style="background-color:#f0f0f0; margin-right:10px;"> 
                                                                    {{$v['class_name']}}<br>
                                                                    Hóspede: {{$v['teacher_name']}}
                                                                </span>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endforeach
                                            </td>
                                        @elseif ($value === 1)
                                            <td></td>
                                        @endif
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>--}}
                        
                        <!--tbody-->
                            <div class="scheduleContainer">

                                <!-- TIMES -->
                                <div class="time start-0800">8:00</div>
                                <div class="time start-0830">8:30</div>
                                <div class="time start-0900">9:00</div>
                                <div class="time start-0930">9:30</div>
                                <div class="time start-1000">10:00</div>
                                <div class="time start-1030">10:30</div>
                                <div class="time start-1100">11:00</div>
                                <div class="time start-1130">11:30</div>
                                <div class="time start-1200">12:00</div>
                                <div class="time start-1230">12:30</div>
                                <div class="time start-1300">13:00</div>
                                <div class="time start-1330">13:30</div>
                                <div class="time start-1400">14:00</div>
                                <div class="time start-1430">14:30</div>
                                <div class="time start-1500">15:00</div>
                                <div class="time start-1530">15:30</div>
                                <div class="time start-1600">16:00</div>
                                <div class="time start-1630">16:30</div>
                                <div class="time start-1700">17:00</div>
                                <div class="time start-1730">17:30</div>
                                <div class="time start-1800">18:00</div>
                                <div class="time start-1830">18:30</div>
                                <div class="time start-1900">19:00</div>
                                <div class="time start-1930">19:30</div>
                                <div class="time start-2000">20:00</div>
                                <div class="time start-2030">20:30</div>
                                <div class="time start-2100">21:00</div>
                                <div class="time start-2130">21:30</div>
                                
                                <!-- EVENTS -->
                                <!--div class="event stage-saturn start-800 end-930 length-4">Arrival and registration 		
                                    <span>Registration Area</span>
                                </div-->
                                
                                <!--tr>
                                    <td-->
                                        @foreach($calendarData as $time => $days)
                                            @foreach($days as $value)
                                                @if (is_array($value))
                                                    @foreach($value['data'] as $val)
                                                        @foreach($val as $v)
                                                            <div class="event stage-saturn start-{{$v['start']}} end-{{$v['end']}} length-4">
                                                                {{$v['class_name']}}		
                                                                <span> <br>
                                                                    Hóspede: {{$v['room_name']}}
                                                                </span>
                                                            </div>
                                                                
                                                        @endforeach
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        @endforeach
                                    <!--/td>
                                </tr-->
                            </div>
                        <!--/tbody-->
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
@parent

@endsection