@extends('dashboard.layouts.master')

@section('css')
<!-- Sweet Alert -->
    <link href="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css">
<style type="text/css">
    .bg-easy{
        background-color: #F0ECE2 !important;
        /*border: 1px solid !important;*/
    }
    .bg-mid{
        background-color: #ACDBDF !important;
    }

    .bg-good{
        background-color: #dfdfe4 !important;
    }

    .text-black{
        color: #000000 !important;
    }
    .template{
        margin: 10px;
        padding: 10px;
        border: 1px solid gray;
        border-radius: 10px;
        cursor: pointer;
    }
    .template:hover{
        background-color: #c1185b;
        color: white;
    }
    .lecture{
        margin: 10px;
        padding: 10px;
        border: 1px solid gray;
        border-radius: 10px;
        cursor: pointer;
    }
    .lecture:hover{
        background-color: #c1185b;
        color: white;
    }
    .selected{
        background-color: #c1185b;
        color: #fff;
    }
</style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">شيفتاتي</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">شيفتاتي</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">عرض الشيفتات</div>
                <div class="card-body">
                    <table id="datatable-buttonss" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <td>الصف الدراسي</td>
                                <td>الاسم</td>
                                <td>اليوم</td>
                                <td>الفترة</td>
                                <td>البداية والنهاية</td>
                                <td>العدد</td>
                                
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($shifts as $shift)
                            <tr>
                                <td>{{$shift->level->title}}</td>
                                 <td>{{$shift->admin->name}}</td>
                                <td>{{Carbon\Carbon::parse($shift->date)->locale('ar')->dayName}} {{$shift->date}}</td>
                                <td>{{$shift->from_time}} - {{$shift->to_time}}</td>
                                <td>{{$shift->started_at??'لم يبدا'}} - {{$shift->ended_at ?? 'لم ينتهي'}}</td>
                                <td>{{$shift->questionsCount()}}</td>
                                
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')

<script type="text/javascript">

    $('.lecture').on('click', function(){
        url = $(this).data('url');
        lectureId = $(this).attr('id');

        $.ajax({
            type: 'post',
            url: url,
            data: {
                "_token": "{{ csrf_token() }}",
                'lecture_id': lectureId,
                '_method': 'PATCH'
            },
            dataType: 'json',
            success: function (data) {
                $('.lecture').removeClass('selected');
                $(`#${data.lecture_id}`).addClass('selected');
            },
            error: function (data) {
                // alert('some');
            }
        });
    })
</script>

<script type="text/javascript">
    $('.template').on('click', function($query){
        $('#replyText').val($(this).data('content'));
    });
</script>
@endsection