@extends('admin.layouts.app')



@section('styles')

<link href="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />

<link href="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />

<link href="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />

<style type="text/css">

    table td .view{

        color: #4677ff;

        border: 1px solid #4677ff;

        padding: 2px 3px;

        border-radius: 3px;

        margin-right: 5px;

    }

    table td .edit{

        color: #0f9c0d;

        border: 1px solid #0f9c0d;

        padding: 2px 3px;

        border-radius: 3px;

    }

</style>

<style type="text/css">
div#datatable_wrapper {
            padding: 22px 16px 0px;
        }

        .page-item.active .page-link {
            z-index: 3;
            color: #fff;
            background-color: #19A887;
            border-color: #19A887;
        }

        .sc_table {
            border-bottom: solid 1px rgba(10, 80, 80, 0.2) !important;
            margin: 8px 0px 24px;
        }
    </style>

@endsection



@section('header')

	@include('admin.layouts.header')

@endsection



@section('sidemenu')

	@include('admin.layouts.sidemenu')

@endsection



@section('content')

<div class="content-page">

<div class="content">

                    <div class="page-content-wrapper">

                        <div class="container-fluid">

                            <div class="row">

                                <div class="col-sm-12">

                                    <div class="page-title-box">

                                        <div class="float-right">

                                            <ol class="breadcrumb p-0 m-0">

                                                <li class="breadcrumb-item"><a href="">Admin</a></li>

                                                <li class="breadcrumb-item"><a href="">Topics</a></li>

                                                <li class="breadcrumb-item active">Active Topic</li>

                                            </ol>

                                        </div>

                                        <h4 class="page-title">Activate Topic</h4>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div> 

                    <div class="row">

                        <div class="col-md-12 col-lg-12 col-xl-1"></div>

                        <div class="col-md-12 col-lg-12 col-xl-10">

                            @if(session()->has('success-message'))

                                <div class="alert alert-success text-center">{{ session()->get('success-message') }}</div>

                            @endif

                            @if(session()->has('error-message'))

                                <div class="alert alert-danger text-center">{{ session()->get('error-message') }}</div>

                            @endif



                            <div class="card m-b-20">

                                <div class="card card-body">

                                    <h3 class="card-title font-20 mb-4 text-primary text-center">All Topics</h3>



                                    <div class="row" id="div-single-registration">

                                        <div class="col-sm-1"></div>

                                        <div class="col-sm-10">

                                            <form id="ActivateTopicForm" name="ActivateTopicForm">

                                                <div class="row">



                                                <label class="col-sm-4 col-form-label">Select Day <span class="required">*</span></label>

                                                    <div class="col-sm-8">

                                                    <select class="form-control" name="dayDD" id="dayDD" required  onchange="fetchHalls()">   

                                                    <option value="" disabled selected> ---Select Day---</option>

                                                    <option value="2024-05-22">2024-05-22</option>
                                                    <option value="2024-05-23">2024-05-23</option>
                                                    <option value="2024-05-24">2024-05-24</option>
                                                    <option value="2024-05-25">2024-05-25</option>
                                                    

                                                    </select> 

                                                    </div>

                                                    

                                                    <label class="col-sm-4 col-form-label">Select Hall <span class="required">*</span></label>

                                                    <div class="col-sm-8">

                                                    <select class="form-control" id="conference_type" name="conference_type" required onchange="myFunction()">

                                                        

                                                        
                                                        

                                                    </select>

                                                    </div>

												

												    <label class="col-sm-4 col-form-label">Select Session <span class="required">*</span></label>

                                                    <div class="col-sm-8">

                                                    <select class="form-control" name="changeSession" id="changeSession" required onchange="myFunctiontopic()">   

                                                    

                                                    <!--<option value="" disabled selected> ---Select Session---</option>-->

                                                    <!--@foreach ( $session_name as $key=> $value )-->

                                                    <!--@foreach ($value as $val)-->

                                                    <!--<option value="{{$val}}" name="{{$val}}">{{$val}}</option>-->

                                                    <!--@endforeach-->

                                                    <!--@endforeach-->

                                                    </select> 

                                                    </div>

												

                                                    <!--<label class="col-sm-4 col-form-label">Select Day <span class="required">*</span></label>-->

                                                    <!--<div class="col-sm-8">-->

                                                    <!--<select class="form-control" name="changeday" id="changeday" required> -->

                                                    <!--<option value="" selected>---Select Day---</option>-->

                                                    <!--<option value="day1" selected>Day1</option>-->

                                                    <!--<option value="day2" selected>Day2</option>-->

                                                    <!--<div></div>-->

                                                   

                                                    <!--</select> -->

                                                    <!--</div>												-->

												

                                                    <label class="col-sm-4 col-form-label">Select Topic <span class="required">*</span></label>

                                                    <div class="col-sm-8">

                                                    <select class="form-control" name="changeTopic" id="changeTopic" required> 

                                                    <!--<option value="" disabled selected>---Select topic---</option>-->

                                                    <div></div>

                                                   

                                                    </select> 

                                                    </div>

                                                    

                                                    <!--label class="col-sm-4 col-form-label">Select Session <span class="required">*</span></label>

                                                    <div class="col-sm-8">

                                                     <select class="form-control" name="session_id" id="session_id">

                                                           

                                                     </select>   

                                                    </div-->	

                                                </div>

                                                <div class="col-sm-12 mt-4 text-center">

                                                   <button type="submit" class="btn btn-primary" name="view_topics">Activate topic</button>

                                                </div>

                                            </form>

                                        </div>

                                    </div>

                                    

                                </div>

                                

                                <div class="card card-body">

                                    <div class="sc_table_div sc_mt16 sc_mb40">
                                        <h4 class="mt-0 m-b-20 header-title">Active Session and Topic</h4>
                    <table id="datatable" class="table table-hover sc_table">
                        <thead>
                            <tr>
                                <th>Sr.No.</th>
                                <th>Hall</th>
                                <th>Session Name</th>
                                <th>Session Title</th>
                                <th>Topic Name</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                             @php $i = 1; @endphp

                                                @foreach($results as $row)

                                                <tr>

                                                    <td>{{ $i }}</td>
                                                    <td>{{ $row->hall }}</td>
                                                    <td>{{ $row->session_name }}</td>
                                                    <td>{{ $row->title }}</td>
                                                    <td>{{ $row->topic }}</td>

                                                   

                                                </tr>

                                                @php $i++; @endphp

                                                @endforeach
                        </tbody>
                    </table>
                </div>

                                </div>    

                                

                            </div>



                        </div> <!-- end col -->

                    </div> <!-- end row -->



                </div> <!-- content -->

</div>

@endsection



@section('footer')

	@include('admin.layouts.footer')

@endsection



@section('scripts')
<script type="text/javascript">
    function fetchHalls() {
        var selectedDate = $('#dayDD').val();

        $.ajax({
            url: '/WFNR-2024/server.php/admin/active-topic-session/getHallsByDate/' + selectedDate,
            type: 'GET',
            success: function(response) {
                var hallsSelect = $('#conference_type');
                hallsSelect.empty(); // Clear previous options

                // Add a default option for selecting a hall
                hallsSelect.append('<option value="">Select a Hall</option>');

                $.each(response.halls, function(key, hall) {
                    hallsSelect.append('<option value="' + hall + '">' + hall + '</option>');
                });
            }
        });
    }
</script>
// <script type="text/javascript">
//     function fetchHalls() {
//         var selectedDate = $('#dayDD').val();

//         $.ajax({
//             url: '/WFNR-2024/server.php/admin/active-topic-session/getHallsByDate/' + selectedDate,
//             type: 'GET',
//             success: function(response) {
//                 var hallsSelect = $('#conference_type');
//                 hallsSelect.empty(); // Clear previous options

//                 $.each(response.halls, function(key, hall) {
//                     hallsSelect.append('<option value="' + hall + '">' + hall + '</option>');
//                 });
//             }
//         });
//     }
// </script>

<script type="text/javascript">

    function myFunction() {

     var changeday = $('#dayDD').val();

     var conference_type = $('#conference_type').val();

     var session_id = $('#changeSession').val();

    //  alert(session_id);

          $.ajax({

          url:'/WFNR-2024/server.php/admin/active-topic-session/getsession',

          type:'get',

          data:{changeday:changeday,conference_type:conference_type,session_id:session_id},

          success: function(response){

              $('select[name="changeSession"]').empty();

              $('select[name="changeSession"]').focus;

              $('select[name="changeSession"]').append('<option>---Select Session---</option>');
              
              $.each(response, function(key, value){
    var sessionName = value.session_name ? value.session_name : '';
    var displayText = sessionName ? sessionName + ": " + value.title + " " + value.start_date + " " + value.start_time + " " + value.end_time : value.title + " " + value.start_date + " " + value.start_time + " " + value.end_time;
    
    $('select[name="changeSession"]').append('<option value="'+ value.session_id +'">' + displayText + '</option>');
});

            //   $.each(response, function(key, value){

            //     $('select[name="changeSession"]').append('<option value="'+ value.session_id +'">' + value.session_name +":" +" " +value.title+" "+value.start_date+" "+value.start_time+" "+value.end_time+  '</option>');

            //   });
              

            },

        });

        };

</script>
<script type="text/javascript">
    function myFunctiontopic() {
        var session_id = $('#changeSession').val();
        var changeTopic = $('#changeTopic').val();
        $.ajax({
            url:'/WFNR-2024/server.php/admin/active-topic-session/gettopic',
            type:'get',
            data:{session_id:session_id},
            success: function(response){
                $('select[name="changeTopic"]').empty();
                $('select[name="changeTopic"]').focus();
                
                // Check if the response array is empty
                if (response.length === 0) {
                    $('select[name="changeTopic"]').append('<option>No topic available</option>');
                } else {
                    $('select[name="changeTopic"]').append('<option>---Select Topic---</option>');
                    $.each(response, function(key, value){
                        $('select[name="changeTopic"]').append('<option value="'+ value.topic_id +'">' + value.topic + '</option>');
                    });
                }
            },
            error: function() {
                // Handle any errors that occur during the AJAX request
                $('select[name="changeTopic"]').empty();
                $('select[name="changeTopic"]').append('<option>Error loading topics</option>');
            }
        });
    }
</script>

<!--<script type="text/javascript">-->

<!--    function myFunctiontopic() {-->
<!--    var session_id = $('#changeSession').val();-->
<!--    var changeTopic = $('#changeTopic').val();-->
<!--        $.ajax({-->
<!--            url:'/WFNR-2024/server.php/admin/active-topic-session/gettopic',-->
<!--            type:'get',-->
<!--            data:{session_id:session_id},-->
<!--            success: function(response){-->
<!--                $('select[name="changeTopic"]').empty();-->
<!--                $('select[name="changeTopic"]').focus;-->
<!--                 $('select[name="changeTopic"]').append('<option>---Select Topic---</option>');-->
<!--                $.each(response, function(key, value){-->
<!--                    $('select[name="changeTopic"]').append('<option value="'+ value.topic_id +'">' + value.topic + '</option>');-->
<!--                });-->
<!--                },-->
<!--            });-->
<!--        };-->

<!--</script>-->

<script>
    $(document).ready(function () {
        $("#ActivateTopicForm").submit(function(e){
        e.preventDefault();
        var change_val = $("#changeTopic").val();
        var conference_type = $('#conference_type').val();
        var csrf_token = "{{csrf_token()}}";
        $.ajax({
            url: '/WFNR-2024/server.php/admin/active-topic-session',
            type: 'post',
            data: {changeTopic:change_val,conference_type:conference_type},
            headers: {'X-CSRF-TOKEN': csrf_token},
            success: function(response){
                console.log(response);
                response = parseInt(response);
                response == 1 ? alert("Topic activated successfully") : alert("Something gone wrong, please try again.");
                location.reload();
            },
        });
    });
});

</script>

<!-- Required datatable js -->

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/jquery.dataTables.min.js"></script>

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/dataTables.bootstrap4.min.js"></script>



<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/dataTables.buttons.min.js"></script>

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/buttons.bootstrap4.min.js"></script>

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/jszip.min.js"></script>

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/pdfmake.min.js"></script>

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/vfs_fonts.js"></script>

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/buttons.html5.min.js"></script>

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/buttons.print.min.js"></script>

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/datatables/buttons.colVis.min.js"></script>



<!-- KNOB JS -->

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/jquery-knob/excanvas.js"></script>

<script src="/AOCN-IANCON-2022/public/assets/admin/plugins/jquery-knob/jquery.knob.js"></script>



<!-- Datatable init js -->

<script src="/AOCN-IANCON-2022/public/assets/admin/pages/datatables.init.js"></script>



<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
@endsection