@extends('backend.layouts.app')
@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-header border-0">
                <div class="row align-items-center gy-3">
                    <div class="col-sm">
                        <h5 class="card-title mb-0">Exams</h5>
                    </div>
                    <div class="col-sm-2 text-end">
                        <label for="randomize">Randomizing Questions ?</label>
                    </div>
                    <div class="col-sm-1">
                        <div class="form-check form-switch form-switch-right form-switch-md justify-content-center">
                            <input class="form-check-input" id="randomize"  type="checkbox" onchange="updateSettings(this, 'randomize_exam_ques')" @if( get_setting('randomize_exam_ques') == 1) checked @endif>
                        </div>
                    </div>
                    <div class="col-sm-auto">
                        <div class="d-flex gap-1 flex-wrap">
                            <a href="{{ route('exam.create') }}" class="btn btn-primary add-btn"><i class="ri-add-line align-bottom me-1"></i> Add New Exam</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body border border-dashed border-end-0 border-start-0">
                <form action="{{ route('exam.index') }}" method="GET" id="filter_form">
                    <div class="row g-3 justify-content-end">
                        <!--end col-->
                        <div class="col-xxl-2 col-sm-2 ">
                            <div>
                                <select class="form-control rns-selectpicker" name="school" onchange="submit_form()">
                                    <option value="" selected>Filter By Shcool</option>
                                    @if($schools->isNotEmpty())
                                        @foreach ($schools as $school)
                                            <option value="{{$school->id}}" @if($school->id == request('school')) selected @endif>{{$school->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-xxl-2 col-sm-2 ">
                            <div>
                                <select class="form-control rns-selectpicker" name="grade" onchange="submit_form()">
                                    <option value="" selected>Filter By Grade</option>
                                    @if(empty($grades) || $grades->isNotEmpty())
                                        @foreach ($grades as $grade)
                                            <option value="{{$grade->id}}" @if($grade->id == request('grade')) selected @endif>{{$grade->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-xxl-2 col-sm-2 ">
                            <div>
                                <select class="form-control rns-selectpicker" name="section" onchange="submit_form()">
                                    <option value="" selected>Filter By Section</option>
                                    @if(empty($sections) || $sections->isNotEmpty())
                                        @foreach ($sections as $section)
                                            <option value="{{$section->id}}" @if($section->id == request('section')) selected @endif>{{$section->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <!--end col-->
                        {{-- <div class="col-xxl-2 col-sm-2">
                            <div>
                                <select class="form-control rns-selectpicker" name="short_by_order" onchange="submit_form()">
                                    <option value="" selected>Sort By Order Lavel</option>
                                    <option value="high" @if(request('short_by_order') == 'high') selected @endif>Highest</option>
                                    <option value="low" @if(request('short_by_order') == 'low') selected @endif>Lowest</option>
                                </select>
                            </div>
                        </div> --}}
                        <div class="col-xxl-5 col-sm-3">
                            <div class="search-box">
                                <input type="text" name="search" class="form-control search"placeholder="Type name email and phone & Enter..." value="{{ request('search') }}"><i class="las la-search search-icon" ></i>
                            </div>
                        </div>
                        <!--end col-->
                        {{-- <div class="col-xxl-1 col-sm-2">
                            <div>
                                <button type="submit" class="btn btn-primary w-100"> <i class="ri-equalizer-fill me-1 align-bottom"></i>Filters </button>
                            </div>
                        </div>
                        <div class="col-xxl-1 col-sm-2">
                            <div>
                                <button type="reset" class="btn btn-danger w-100"> <i class="ri-equalizer-fill me-1 align-bottom"></i>Reset Filter </button>
                            </div>
                        </div> --}}
                        <!--end col-->
                    </div>
                    <!--end row-->
                </form>
            </div>
            <div class="card-body pt-0">
                <div>
                    <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
                       
                    </ul>

                    <div class="table-responsive table-card mb-1">
                        <table class="table table-nowrap align-middle" id="orderTable">
                            <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>#</th>
                                    <th>Name</th>
                                    @if(\Auth::user()->user_type == 'admin')
                                    <th>School Name</th>
                                    @endif
                                    <th>Grade</th>
                                    <th>Section</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all rnsTable">
                                @if($exams->isNotEmpty())
                                @foreach($exams as $key => $exam)
                                    <tr>
                                        <td class="id">{{ ($key+1) + ($exams->currentPage() - 1)*$exams->perPage() }}</td>
                                        
                                        <td>{{ $exam->title }}</td>
                                        @if(\Auth::user()->user_type == 'admin')
                                            <td>{{ ($exam->school != null) ? $exam->school->name : 'N/A' }}</td>
                                        @endif
                                        <td>{{ ($exam->grade != null) ? $exam->grade->name : 'N/A' }}</td>
                                        <td>
                                            @if($exam->section_id != null)
                                            @foreach(\App\Models\Section::whereIn('id', json_decode($exam->section_id, true))->get() as $value)
                                                <span class="badge rounded-pill bg-primary">{{$value->name}}</span>
                                                @endforeach
                                            @endif

                                        </td>
                                        <td class="status">
                                            <div class="form-check form-switch form-switch-secondary">
                                                <input class="form-check-input" onchange="updateStatus(this)" value="{{ $exam->id }}" type="checkbox" role="switch" id="SwitchCheck7" @if($exam->status ==1) checked @endif>
                                                <label class="form-check-label @if($exam->status == 1) text-success @else text-danger @endif" for="SwitchCheck2">@if($exam->status == 1) Active @else Inactive @endif</label>
                                            </div>
                                        </td>
                                        <td>
                                            <ul class="list-inline hstack gap-2 mb-0">
                                                <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="View">
                                                    <a href="{{route('exam.show', encrypt($exam->id))}}" class="text-warning d-inline-block">
                                                        <i class="ri-eye-fill fs-16"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="Copy" id="replicate_link" onClick="duplicateModal(this)" value="{{$exam->id}}" data-url="{{route('exam.duplicate', encrypt($exam->id))}}">
                                                    <a href="javascript:void(0);" class="text-info d-inline-block">
                                                        <i class=" ri-file-copy-line fs-16"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="Edit">
                                                    <a href="{{ route('exam.edit', encrypt($exam->id)) }}" class="text-primary d-inline-block edit-item-btn">
                                                        <i class="ri-pencil-fill fs-16"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="Remove">
                                                    <a class="text-danger d-inline-block remove-item-btn confirm-delete" data-bs-toggle="modal"href="#deleteRecordModal" data-href="{{route('exam.destroy', encrypt($exam->id))}}">
                                                        <i class="ri-delete-bin-5-fill fs-16"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end">
                        <div class="pagination-wrap hstack gap-2">
                            <ul class="pagination listjs-pagination mb-0">
                                {{ $exams->appends(request()->input())->links() }}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--end col-->
</div>
@endsection
@section('modal')
<!-- Grids in modals -->
<div class="modal fade" id="replicate" tabindex="-1" aria-labelledby="exampleModalgridLabel" aria-modal="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalgridLabel">Grid Modals</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="" id="duplicate_form">
                    @csrf
                    <div class="row g-3">
                        @if(Auth::user()->user_type == 'admin')
                        <div class="col-xxl-12">
                            <div>
                                <label for="school_id" class="form-label">School</label>
                                <select name="school_id" id="school_id" class="form-control rns-selectpicker @error('school_id') is-invalid @enderror"></select>
                                @error('school_id') <span class="danger" role="alert">{{$message}}</span> @enderror
                            </div>
                        </div><!--end col-->
                        @endif
                        <div class="col-xxl-12">
                            <div>
                                <label for="grade_id" class="form-label">Grade</label>
                                <select name="grade_id" id="grade_id" class="form-control rns-selectpicker @error('grade_id') is-invalid @enderror"></select>
                                @error('grade_id') <span class="danger" role="alert">{{$message}}</span> @enderror
                            </div>
                        </div><!--end col-->
                        <div class="col-xxl-12">
                            <div>
                                <label for="lastName" class="form-label">Sections</label>
                                <select name="section_ids[]" multiple id="section_id" class="form-control rns-selectpicker @error('section_ids') is-invalid @enderror"></select>
                                @error('section_ids') <span class="danger" role="alert">{{$message}}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div><!--end col-->
                    </div><!--end row-->
                </form>
            </div>
        </div>
    </div>
</div>
@include('backend.modals.delete')
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>

    <script>
        $(document).ready(function () {
            $('#duplicate_form').validate({
                rules: {
                    school_id: {
                        required: true,
                    },
                    grade_id: {
                        required: true,
                    },
                    'section_ids[]': {
                        required: true,
                        minlength: 1,
                    }
                },
                messages: {
                    school_id: {
                    required: 'Please Select School',
                    },
                    grade_id: {
                    required: 'Please Select Grade',
                    },
                    'section_ids[]': {
                    required: 'Please Section Grade',
                    minlength: 'Please Select at least one Section'
                    }
                },
                invalidHandler: function (form, validator) {
                    // Log the first error message only
                    var errors = validator.numberOfInvalids();
                    if (errors > 0) {
                        var errorText = validator.errorList[0].message;
                        RNS.plugins.notify('danger', errorText);
                    }
                },
                submitHandler: function (form) {
                    form.submit();
                }
            });
        });
         function updateStatus(el){
            if(el.checked){
                var status = 1;
            }
            else{
                var status = 0;
            }
            $.post('{{ route('exam.update-status') }}', {_token:'{{ csrf_token() }}', id:el.value, status:status}, function(data){
                if(data == 1){
                    RNS.plugins.notify('success', '{{ ('Status updated successfully') }}');
                }
                else{
                    RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
                }
            });
            if(el.checked){
                let sp = el.nextElementSibling.className = 'text-success';
                el.nextElementSibling.textContent = 'Active';
            }else{
                let sp = el.nextElementSibling.className = 'text-danger';
                el.nextElementSibling.textContent = 'Inactive';
            }
        }

        function submit_form(){
            $('#filter_form').submit();
        }

        function duplicateModal(el){
            $.post('{{ route('exam.data') }}', {_token:'{{ csrf_token() }}', id: el.value}, function(data){
                if(data){
                    var options = '<option> Select Grade </option>';
                    var sec_options = '';
                    var sections_ids = JSON.parse(data.exam.section_id);
                    var school_options = ''
                    $.each(data.grades, function(key, value) {
                        var selected = (value.id == data.exam.grade_id) ? 'selected' : '';
                        options += '<option value="' + value.id + '"'+selected+'>' + value.name + '</option>';
                    });
                    $('#grade_id').html(options);
                    $('#grade_id').attr('title', 'Select Grade')
                    $('#grade_id').selectpicker('refresh');
                    $.each(data.sections, function(key, value) {
                        var selected = sections_ids.includes(value.id) ? 'selected' : '';
                        sec_options += '<option value="' + value.id + '"'+selected+'>' + value.name + '</option>';
                    });
                        if(data.schools != null){
                            $.each(data.schools, function(key, value) {
                                var selected = (data.exam.school_id == value.id) ? 'selected' : '';
                                school_options += '<option value="' + value.id + '"'+selected+'>' + value.name + '</option>';
                            });
                            $('#school_id').html(school_options);
                            $('#school_id').selectpicker('refresh');
                        }
                    
                    

                    $('#section_id').html(sec_options);
                    $('#section_id').selectpicker('refresh');
                    $('#duplicate_form').attr('action', el.getAttribute("data-url"));
                }
            });
            $('#replicate').modal('show');
        }
        $('#school_id').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
            $('#section_id').empty();
            $('#section_id').selectpicker('refresh');
            $.post('{{ route('section.get-grade') }}', {_token:'{{ csrf_token() }}', id: $(this).val(), status: 1}, function(data){
                if(data.status == 200){
                    var options = '';
                    $.each(data.data, function(key, value) {
                        options += '<option value="' + value.id + '">' + value.name + '</option>';
                    });
                    
                    $('#grade_id').html(options);
                    $('#grade_id').selectpicker('refresh');
                }
                else{
                    RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
                }
            });
        });
        $('#grade_id').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
            $.post('{{ route('student.get-section') }}', {_token:'{{ csrf_token() }}', id: $(this).val(), status: 1}, function(data){
                console.log(data);
                if(data.status == 200){
                    var options = '';
                    $.each(data.data, function(key, value) {
                        options += '<option value="' + value.id + '">' + value.name + '</option>';
                    });
                    
                    $('#section_id').html(options);
                    $('#section_id').selectpicker('refresh');
                }
                else{
                    RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
                }
            });
        });

        function updateSettings(el, type){
            if($(el).is(':checked')){
                var value = 1;
            }
            else{
                var value = 0;
            }
            
            $.post('{{ route('update.activation-setting') }}', {_token:'{{ csrf_token() }}', type:type, value:value}, function(data){
                if(data == '1'){
                    RNS.plugins.notify('success', '{{ translate('Settings updated successfully') }}');
                }
                else{
                    RNS.plugins.notify('danger', 'Something went wrong');
                }
            });
        }
    </script>
@endsection