@extends('layouts.app')

@section('styles')

            <style>
.switch {
  po  sition: relative;
  display: inline-block;
  width: 60px;
  he  ight: 34px;
}

.swi  tch input { 
  opacity: 0;
  width: 0;
  he  ight: 0;
}

.sli  der {
  position: absolute;
  cursor: pointer;
  to  p: 0;
  left: 0;
  right: 0;
  bo  ttom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  tr  ansition: .4s;
}

.sli  der:before {
  position: absolute;
  content: "";
  he  ight: 26px;
  width: 26px;
  left: 4px;
  bo  ttom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  tr  ansition: .4s;
}

inpu  t:checked + .slider {
  background-color: #1c1c1c;
}
  
input:focus + .slider {
  box-shadow: 0 0 1px #1c1c1c;
}  

input:checked + .slider:before {
  -w  ebkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}  

/* Rounded sliders */
.sli  der.round {
  border-radius: 34px;
}
  
.slider.round:before {
  border-radius: 50%;
}  
</style>

@endsection

@section('content')

                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Test</h1>
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Test</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                            <!-- ROW-1 OPEN -->
                            @canany(['test-create','test-edit'])
                            <div class="row" id="add_sec" style="display:none;">
                                <div class="col-lg-12 col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title"><span id="change_stat">Add New</span> Test</h3>
                                        </div>
                                        <div class="card-body">
                                                <form method="POST" id="createForm" class="myform" enctype="multipart/form-data">  
                                                    <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                                                    <input id="test_id" name="test_id" type="hidden" value="">
                                                    
                                                    @csrf
                                                <div class="form-row">
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Test Number*</label>
                                                        <select onchange="get_test_details(this.value)" class="form-control" data-parsley-required-message="Test Name Required"  name="test" id="test" required>
                                                            <option selected disabled value="">Select Test</option>
                                                            @foreach($tests as $tet)
                                                                <option value="{{ $tet->test_id }}">{{ $tet->test_number }} - {{ $tet->test_name }}</option>
                                                            @endforeach
                                                        </select>
                                                            
                                                    </div>

                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Test Name *</label>
                                                        <input readonly type="text" class="form-control" maxlength="40" type="text" class="form-control" name="test_name" id="test_name"
                                                            value="" required>
                                                            
                                                    </div>
                                                    <div class="col-xl-12 mb-3" style="display:none;" id="item_main_div">
                                                        <label for="validationTooltip01">Sections (Tip : Darg & Drop To Change Section Order )* &nbsp;&nbsp;&nbsp;<button type="button" onclick="save_order()" class="btn btn-info">Save Order</button></label>
                                                        <div class="row image-list" id="sections_disp">
                                                            
                                                        </div>
                                                        <input type="hidden" data-parsley-required-message="Please set section order" id="order_inp" name="order_inp" value="" required>
                                                    </div>
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">Start Date*</label>
                                                        <input data-parsley-required-message="Start Date Required" type="date" class="form-control"  maxlength="40" type="text" class="form-control" name="test_start_date" id="test_start_date"
                                                            value="" required>
                                                            
                                                    </div>
                                                    <div class="col-xl-6 mb-3">
                                                        <label for="validationTooltip01">End Date*</label>
                                                        <input data-parsley-required-message="End Date Required" type="date" class="form-control"  maxlength="40" type="text" class="form-control" name="test_end_date" id="test_end_date"
                                                            value="" required>
                                                            
                                                    </div>
                                                    
                                                 
                                                    
                                                </div>
                                                @can('test-create')
                                                <a id="create_btn" href="#" onclick="createOrUpdate('{{url('/add_test_settings')}}', 'createForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Save</a>
                                                @endcan
                                                @can('test-edit')
                                                <a  id="update_btn" style="display: none" href="#" onclick="createOrUpdate('{{url('/update_test_settings')}}', 'createForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Update</a>
                                                <a onclick="$('#createForm')[0].reset();$('.newsummernote').summernote('reset');window.scrollTo(0, 0);" style="margin-left:10px;" id="clear_btn" class="text-white btn custom-btn-info"><i class="fa fa-ban"></i> Clear</a><a onclick="$('#createForm')[0].reset();$('.newsummernote').summernote('reset');$('#add_sec').css('display','none');$('#change_stat').text('Add New');" style="margin-left:10px;" id="cancel_btn" class="text-white btn custom-btn-danger"><i class="fa fa-times"></i> Cancel</a>
                                                @endcan
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             @endcanany
                            <!-- /ROW-1 CLOSED -->

                               <!-- Row -->
                        @can('test-list')
                        <div class="row row-sm">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <div class="row w-100">
                                            <div class="col-lg-4">
                                                <h3 class="card-title">View Tests</h3>
                                            </div>
                                            <div class="col-lg-4">
                                                        <div>
                                                            <label for="randomize_order" style="color: #d70000;font-weight: bold;">Randomize the Question Order? </label>&nbsp;
                                                            <input @if($customer_details->random_ques == 1) {{'checked'}} @endif onclick="if(this.checked===true){change_question_random(1);}else{change_question_random(0);}" type="checkbox" id="randomize_order" name="">
                                                        </div>
                                                    </div>
                                            <div class="col-lg-4 position-relative">
                                                        <button style="position: absolute;right: -20px;top: -10px;" type="button" class="btn custom-btn-success pull-right" onclick="$('#add_sec').css('display','flex');$('#clear_btn').css('display','inline-block');window.scrollTo(0, 0);$('#createForm')[0].reset();$('#create_btn').css('display','inline-block');$('#update_btn').css('display','none');$('#change_stat').text('Add New');">Add New</button>
                                                        <button style="position: absolute;right: 80px;top: -10px;" type="button" class="btn custom-btn-warning pull-right" onclick="$('#date_set_modal').modal('show');">Set Dates</button>
                                                        <button style="position: absolute;right: 185px;top: -10px;" type="button" class="btn custom-btn-danger pull-right" id="reset_login_btn" onclick="reset_login_fn()">Reset All Login Flags</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                             <table  class="table table-bordered text-nowrap border-bottom dataTable no-footer " style="width: 100% !important;" id="table_datatable">
                                                <thead class="text-center">
                                                    <tr>
                                                        <th class="wd-15p border-bottom-0">#</th>
                                                        <th class="wd-15p border-bottom-0">Test Number</th>
                                                        <th class="wd-15p border-bottom-0">Test Name</th>
                                                        <th class="wd-15p border-bottom-0">Sections</th>
                                                        <th class="wd-15p border-bottom-0">Start Date</th>
                                                        <th class="wd-15p border-bottom-0">End Date</th>
                                                        <th class="wd-15p border-bottom-0">Show Buttons</th>
                                                        <th class="wd-10p border-bottom-0">Actions</th>
                                                    </tr>
                                                </thead>
                                               
                                            </table>
                                    
                                            <div class="col-sm-12 col-md-12">                                             
                                        </div>
                                        </div>
                                    </div>
                        

                                </div>
                               
                            </div> 
                        </div> 
                        @endcan
                        <!-- End Row -->

                         <!-- Modal -->
               


                        <div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Delete</h5>
                                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Do you want to delete the Test : <span id="name_delete"></span>, <span id="email_delete"></span>... ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button onclick="delete_item()" class="btn custom-btn-danger">Delete</button>
                                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">No</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                                  {{-- #########################View Modal################################### --}}
            <div class="modal fade" id="scrollingmodal" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">View Sections</h5>
                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body"  id="view_modal_body">
                        
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of View Modal############################ --}}
            
        {{-- #########################Info Modal################################### --}}
            <div class="modal fade" id="infomodal" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Info</h5>
                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body"  id="view_modal_body">
                        <h5>Added By : <span id="added_user_info"></span></h5>
                        <h5>Added Date : <span id="added_date_info"></span></h5>
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of Info Modal############################ --}}


            {{-- #########################Set Dates Modal################################### --}}
            <div class="modal fade" id="date_set_modal" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Set Dates</h5>
                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body"  id="view_modal_body">
                        <form method="POST" action="">
                            <div class="row">
                                <div class="col-lg-12 mb-3">
                                    <label>Start Date</label>
                                    <input type="date" name="start_date_set" id="start_date_set" class="form-control">
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label>End Date</label>
                                    <input type="date" name="end_date_set" id="end_date_set" class="form-control">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-success" onclick="set_dates_function()">Save</button>
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of Set Dates Modal############################ --}}
                        

                        
                        

            @endsection
              @section('scripts')  
{{-- ################################Jquery Datatable########################### --}}
   {{-- <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script> --}}
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}


    <!-- INTERNAL SUMMERNOTE Editor JS -->
    <script src="{{asset('assets/plugins/summernote/summernote1.js')}}"></script>


    <script type="text/javascript">
        jQuery((function(e){"use strict";
            $(document).ready((function(){
                $('.newsummernote').summernote({
                    height: 200,
                    callbacks: {
                        onImageUpload: function(files) {
                            var current_id = $(this).attr('id');
                            uploadImage(files[0], current_id);
                        }
                    }
                });
            }))
        }));
    </script>
    



        <script>
    var token = $("meta[name=csrf-token]").attr("content");  
    var datatable_name="table_datatable";
    $('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": true,
       "info":false,
       "bSort": true,
       "order": [
           [1, 'ASC']
       ],
       "columnDefs": [{
               "targets": [0,1,2,3,4],
               "orderable": true
           },
           {"className": "text-center", "targets": [0,1,2,3,4,5,6,7]},
           {"className": "text-left", "targets": []}
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  "/test_settings_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns": [
                  {"data": "test_id", "name": "test_id"},
                  {"data": "test_number", "name": "test_number"},
                  {"data": "test_name", "name": "test_name"},
                  {"data": "test_id", "name": "test_id"},
                  {"data": "start_date", "name": "start_date"},
                  {"data": "end_date", "name": "end_date"},
                  {"data": "test_id", "name": "test_id"},
                  {"data": "test_id", "name": "test_id"},
                   ],
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";
          var shw_btns = "";


          if(aData.shw_btns!=0){
            shw_btns = '<input type="checkbox" onclick="shw_btn_fn('+aData.test_set_id+',0)" checked>'
          }
          else
          {
            shw_btns = '<input type="checkbox" onclick="shw_btn_fn('+aData.test_set_id+',1)">'
          }

          //category Icon Section
          
          var section_view = '<button title="View" onclick=view_sections('+aData.test_id+','+aData.test_set_id+') id="bvSec" type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-eye"></span> View</button>'
        
         
            //Edit Action
            @can('test-edit')
            var action=action+'&nbsp;<button title="Edit" onclick=edit('+aData.test_set_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-edit"></span> Set Date</button>';
            @endcan
            //Delete Action
            @can('test-delete')
            var action=action+'&nbsp;<button title="Delete" onclick="delete_modal('+aData.test_set_id+',`'+aData.test_number+'`,`'+aData.test_name+'`)" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';
            @endcan
            var action=action+'&nbsp;<a href="/test_settings/view_section/'+aData.test_set_id+'" title="View Sections" class="btn btn-sm custom-btn-info text-white">View Section</a>';
            //info action
            var action=action+'&nbsp;<button title="Info" onclick="show_info_rprt(`'+aData.name+'`,`'+aData.created_at+'`)" id="binfo" type="button" class="btn  btn-sm custom-btn-info"><span class="fe fe-info"> </span></button>';




            $('td:eq(0)', nRow).html(index);
            $('td:eq(3)', nRow).html(section_view);
            $('td:eq(6)', nRow).html(shw_btns);
            $('td:eq(7)', nRow).html(action);
 }
 });

       // #################### Edit Section ############################
                function edit(id){
                    $('#add_sec').css('display','flex');
                    $('#change_stat').text('Edit');
                $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id},
                    url: '/edit_test_settings',
                    success: function (result) {
                        $('#test_id').val(result.test_setting.test_set_id);
                        $('#test').val(result.test_setting.test_id);
                        $('#test_name').val(result.test_setting.test_name);
                        $('#test_start_date').val(result.test_setting.start_date);
                        $('#test_end_date').val(result.test_setting.end_date);
                        $('#order_inp').val(result.test_setting.section_order);
                        var current_ord = result.test_setting.section_order;
                        var order_arr = result.test_setting.section_order.split(',');
                        var order_arr_cnt = order_arr.length;
                        for (var i = 0; i < order_arr_cnt; i++)
                        {
                            get_test_details_edit(order_arr[i]);
                        }
                        $('#create_btn').hide();
                        $('#update_btn').show();
                        $('#back-to-top').click();
                        
                        }
                })
                }
      // #################### End Of Edit Section ####################
     // #################### Delete Section ##########################
                    function delete_modal(id,name,email){
                    $('#test_id').val(id);
                    $("#name_delete").text(name);
                    $("#email_delete").text(email);
                    $('#smallmodal').modal('show');
                    }
                    function delete_item(){
                    var id=$('#test_id').val();
                    $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/delete_test_settings',
                        success: function (result) {
                        $('#smallmodal').modal('hide');
                        toast(result,datatable_name);
                        }
                    })
                    }
     // #################### End Of Delete Section ##################


function show_info_rprt(og_name,og_date){
        $(`#infomodal`).modal(`show`);
        $(`#added_user_info`).text(og_name);
        $(`#added_date_info`).text(format_date_fn(og_date));
    }
    
    function format_date_fn(og_date_frmt)
    {
        const today = new Date(og_date_frmt);
        const yyyy = today.getFullYear();
        let mm = today.getMonth() + 1; // Months start at 0!
        let dd = today.getDate();
        
        if (dd < 10) dd = '0' + dd;
        if (mm < 10) mm = '0' + mm;
        
        const formattedToday = dd + '-' + mm + '-' + yyyy;
        
        return formattedToday;
    }

function get_test_details(test_id){
    $.ajax({
        type: 'POST',
        data: {"_token": token,"id": test_id},
        url: '/test_details_settngs',
        success: function (result) {
            if(result.test_details=="")
            {
                toast(result.test_toast,datatable_name);   
            }
            else
            {
                var result_cnt = result.test_details.length;
                var secton_html = "";
                var ord_inp = "";
                $("#test_name").val(result.test_main.test_name);
                for(var qq=0; qq<result_cnt; qq++)
                {
                    if (secton_html=="") {
                        secton_html = '<div class="col-md-3 mb-3 mt-3" id="test_shw_'+result.test_details[qq].test_sec_id+'"><section class="bg-dark text-center p-4"><p style="margin:0;color:#fff;">'+result.test_details[qq].section_name+'</p></section></div>';
                        ord_inp = result.test_details[qq].test_sec_id;
                    }
                    else
                    {
                        secton_html = secton_html+'<div class="col-md-3 mb-3 mt-3" id="test_shw_'+result.test_details[qq].test_sec_id+'"><section class="bg-dark text-center p-4"><p style="margin:0;color:#fff;">'+result.test_details[qq].section_name+'</p></section></div>';
                        ord_inp = ord_inp+','+result.test_details[qq].test_sec_id;
                    }
                }
                $('#sections_disp').html(secton_html);
                $('#order_inp').val(ord_inp);
                $('#item_main_div').css('display','block');
            }
        }
    })
}
function get_test_details_edit(section_id)
{
    $.ajax({
        type: 'POST',
        data: {"_token": token,"id": section_id},
        url: '/test_details_settngs_edt',
        success: function (result) {
            $('#sections_disp').append('<div class="col-md-3 mb-3 mt-3" id="test_shw_'+result.test_details.test_sec_id+'"><section class="bg-dark text-center p-4"><p style="margin:0;color:#fff;">'+result.test_details.section_name+'</p></section></div>');
            $('#item_main_div').css('display','block');
        }
    })
}
   
    
    
        </script>



<link rel="stylesheet" href="{{asset('vendor/jquery/jquery-ui/jquery-ui.css')}}">
<script src="{{asset('vendor/jquery/jquery-ui/jquery-ui.js')}}" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
    $(document).ready(function () {
        var dropIndex;
        $("#sections_disp").sortable({
                update: function(event, ui) { 
                    dropIndex = ui.item.index();
            }
        });
    });
    function save_order(){
            var ord_inp = "";
            $("div.image-list div").each(function() {
                if(ord_inp=="")
                {
                    ord_inp = $(this).attr('id').substr(9);
                }
                else
                {
                    ord_inp = ord_inp+','+$(this).attr('id').substr(9);
                }
            });
            Swal.fire({
  title: "Success!",
  text: "Section Order Set Successfully",
  icon: "success"
});
            $('#order_inp').val(ord_inp);
        }

        function shw_btn_fn(test_set_id,status)
        {
            $.ajax({
                type: 'POST',
                data: {"_token": token,"id": test_set_id,"status": status},
                url: '/shw_btn_test',
                success: function (result) {
                    toast(result,datatable_name);   
                }
            })
        }

        function view_sections(test_id,setting_id){
            $.ajax({
                type: 'POST',
                data: {"_token": token,"id": test_id,"set_id": setting_id},
                url: '/view_test_sections',
                success: function (result) {
                    $('#view_modal_body').html(result);
                    $('#scrollingmodal').modal('show');
                }
            })
        }
        
        function change_question_random(get_val) {
            $.ajax({
                type: 'POST',
                data: {"_token": token,"get_val": get_val},
                url: '/change_question_random',
                success: function (result) {
                    toast(result,datatable_name);   
                }
            })
        }

        function set_dates_function()
        {
            var start_date = $("#start_date_set").val();
            var end_date = $("#end_date_set").val();
            $.ajax({
                type: 'POST',
                data: {"_token": token,"start_date": start_date,"end_date": end_date},
                url: '/set_exam_dates',
                success: function (result) {
                    $('#date_set_modal').modal('hide');
                    toast(result,datatable_name);   
                }
            })
        }


        function reset_login_fn()
        {
            $("#reset_login_btn").text('Reseting..');
            $.ajax({
                type: 'POST',
                data: {"_token": token},
                url: '/reset_login_flags',
                success: function (result) {
                    $("#reset_login_btn").text('Reset Login Flags');
                    toast(result,datatable_name);   
                }
            })
        }



</script>




        @endsection