@extends('backend.layouts.app')
@section('content')
<div class="row">
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>           
        </div>
    @elseif (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-lg-5">
                        <div class="row">
                            <div class="col-lg-4">
                                <h4 class="card-title">{{translate('All Quizzes')}}</h4>
                            </div>
                            <div class="col-lg-4">
                                <a href="{{ route('export.quiz') }}" class="btn btn-soft-warning btn-icon btn-circle btn-sm edit-button"><i class="las la-file-download"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <form class="" id="filter_query" action="" method="GET">
                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <select class="form-control rns-selectpicker" id="special" name="special" onchange="this.form.submit()">
                                            <option value="" @if ($special == "") selected @endif>{{ translate('All') }}</option>
                                            <option value="0" @if ($special == "0") selected @endif>Normal</option>
                                            <option value="1" @if ($special == "1") selected @endif>Special</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <input type="text" id="filter" class="form-control search" placeholder="{{ translate('Search...') }}">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- end card header -->
            <div class="card-body">
                <div id="customerList">
                    @if($quizzes->count())
                        <div class="table-responsive table-card mt-3 mb-1">
                            <table class="table align-middle table-nowrap" id="myTable">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>{{translate('Quiz_Number')}}</th>
                                        <th>{{translate('Description')}}</th>
                                        <th>{{translate('Starting Time')}}</th>
                                        <th>{{translate('Type')}}</th>
                                        <th>{{translate('Status')}}</th>
                                        <th>{{translate('Action')}}</th>                                  
                                    </tr>
                                </thead>
                                <tbody class="list form-check-all">
                                    @if($quizzes->count())
                                        @foreach ($quizzes as $quiz)
                                        <tr>
                                            <td class="count">{{ $loop->iteration }}</td>
                                            <td>{{$quiz->quiz_number}}</td>
                                            <td>{{$quiz->quiz_description}}</td>
                                            <td>{{ \Carbon\Carbon::parse($quiz->start_time)->format('F j, Y g:i A') }}</td>
                                            <td>
                                                @if($quiz->questions->isNotEmpty())
                                                    @if($quiz->special == 1)
                                                        <span class="text-success">{{translate('Special')}}<i class="lar la-check-circle"></i></span>
                                                    @else
                                                        <span class="text-warning">{{translate('Normal')}}<i class="lar la-times-circle"></i></span>
                                                    @endif
                                                @else
                                                    <span class="text-danger">{{translate('No Questions')}}</span>
                                                @endif
                                            </td>
                                            <td class="rtl">
                                                <div class="form-check form-switch form-switch-right form-switch-md">
                                                    <input onchange="updateRtl(this)" class="form-check-input" type="checkbox" value="{{ $quiz->id }}" @if($quiz->status == 1) checked @endif>
                                                </div>
                                            </td>
                                            
                                            <td>
                                                <div class="d-flex gap-2">
                                                    <div class="edit">
                                                        <a class="btn btn-soft-primary btn-icon btn-circle btn-sm edit-button" href="#" onclick="editModal({{$quiz->id}})">
                                                            <i class="las la-edit"></i>
                                                        </a>
                                                    </div>
                                                    
                                                    <div class="remove">
                                                        <button class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete" data-bs-toggle="modal" data-bs-target="#deleteRecordModal" data-href="{{ route('quiz.destroy', $quiz->id) }}"><i class="las la-trash"></i></button>
                                                    </div>

                                                    <div class="edit">
                                                        <a class="btn btn-soft-primary btn-icon btn-circle btn-sm"
                                                        data-toggle="modal"
                                                        data-target="#editModal" data-id="{{$quiz->id}}" data-start_time="{{ $quiz->start_time }}"
                                                        href="{{route('add.quiz', $quiz->id)}}"><i class="las la-eye"></i></a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                            <div class="pagination justify-content-center">
                                {{ $quizzes->appends(request()->input())->links() }}
                            </div>
                        </div>
                    @else
                        <p>{{translate("No quizzes available.")}}</p>
                    @endif
                </div>
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <!-- end col -->
</div>
<!--Model Form-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" id="modal-content">
            
        </div>
    </div>
</div>
@include('backend.modals.delete')
@endsection

@section('script')
<script>
    $(document).ready(function () {
        //Filter Normal/Special
        function filter_query() {
            $(this).form.submit();
        }
        //Filter Search
        $("#filter").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("table tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });


    });

    //////Update Status
    function updateRtl(el) {
        var status = el.checked ? 1 : 0;
        $.post("{{ route('quiz.update_rtl_status') }}", {
            _token: "{{ csrf_token() }}",
            id: el.value,
            status: status
        }, function (data) {
            if (data == 0) {
                RNS.plugins.notify('success', '{{ __('Quiz Status updated successfully') }}');
            } else {
                RNS.plugins.notify('danger', '{{ __('Something went wrong') }}');
            }
        });
    }

    function editModal(id){
        $.post('{{ route('quizmodel') }}',{ _token:'{{ csrf_token() }}', id: id }, function(data){
            $('#editModal .modal-content').html(data);
            $('#editModal').modal('show', { backdrop: 'static' });
        });
        $('#editModal').on('shown.bs.modal', function () {
            flatpickr("#start_time", {
                enableTime: true,
                dateFormat: "Y-m-d H:i",
            });
        });

    }








</script>
@endsection