@extends('admin.layouts.dashbord_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>
@endsection

@section('content')
@if(session('alert'))
    <script>
        alert("{{ session('alert') }}");
    </script>
@endif
<!--<div class="content-page">-->
<!--    <div class="content">-->
        <!--<div class="page-content-wrapper">-->
            <div class="container-fluid mt-5">
            <!--<div class="container mt-5">-->
               

                <div class="container-fluid">
                    <form id="notifi" name="sendNotification" method="POST" action="notification" enctype="multipart/form-data" >
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="staticEmail" class="form-label">Title*</label>
                                    <input type="text" class="form-control" name="title" id="title" placeholder="Notification Title" required>
                                </div>
                                
                            </div>
                            <!--<div class="col-md-4">-->
                            <!--    <div class="row">-->
                            <!--        <label for="staticEmail" class="form-label">Attachment(jpg,png,pdf,jpeg 2mb)</label>-->
                            <!--        <div class="input-group mb-3">-->
                            <!--            <input type="file" class="form-control" name="attachment" id="inputGroupFile01">-->
                            <!--        </div>-->
                                    
                            <!--    </div>-->
                            <!--</div>-->
                            <div class="col-md-4">
                                <div class="row">
                                    <!--<label for="staticEmail" class="form-label">Attachment (jpg, jpeg, png, pdf - Max: 2MB)</label>-->
                                    <!--<div class="input-group mb-3">-->
                                    <!--    <input type="file" class="form-control" name="attachment" id="inputGroupFile01" -->
                                    <!--           accept=".jpg,.jpeg,.png,.pdf" onchange="validateFile(this)">-->
                                    <!--</div>-->
                                     <label for="staticEmail" class="form-label">Attachment (jpg, jpeg, png, pdf - Max: 2MB mp4,gif 5MB )</span></label>
                                                         <div class="input-group mb-3">
                                                            <input type="file" class="form-control mb-4" name="attachment" id="inputGroupFile01" onchange="validateSize(this)">
                                                        </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="staticEmail" class="form-label">Link to</label>
                                    <select  class="form-control" name="link_to" id="link_to" >
                                        <option>Select Notification about</option>
                                        <option value="Scientifc Program">Scientifc Program</option>
                                        <option value="Workshop">Workshop</option>
                                        <option value="Registration">Registration</option>
                                        <option value="Faculty">Faculty</option>
                                        <option value="Events">Events</option>
                                    </select>
                                </div>
                                
                            </div>
                            <div class="col-md-4" style="display:none" id="session_div">
                                <div class="mb-3">
                                    <label for="staticEmail" class="form-label">Session</label>
                                    <select  class="form-control" name="changed_session" id="changed_session">
                                        <option>Select Session</option>
                                        @foreach($get_all_sessions as $session)
                                             <br />
<b>Warning</b>:  Undefined variable $session in <b>/home/telemeduser/public_html/WFNR-2024/resources/views/admin/notification_send.blade.php</b> on line <b>90</b><br />
<br />
<b>Warning</b>:  Attempt to read property "start_date" on null in <b>/home/telemeduser/public_html/WFNR-2024/resources/views/admin/notification_send.blade.php</b> on line <b>90</b><br />
<br />
<b>Warning</b>:  Undefined variable $session in <b>/home/telemeduser/public_html/WFNR-2024/resources/views/admin/notification_send.blade.php</b> on line <b>93</b><br />
<br />
<b>Warning</b>:  Attempt to read property "start_date" on null in <b>/home/telemeduser/public_html/WFNR-2024/resources/views/admin/notification_send.blade.php</b> on line <b>93</b><br />
<br />
<b>Warning</b>:  Undefined variable $session in <b>/home/telemeduser/public_html/WFNR-2024/resources/views/admin/notification_send.blade.php</b> on line <b>96</b><br />
<br />
<b>Warning</b>:  Attempt to read property "start_date" on null in <b>/home/telemeduser/public_html/WFNR-2024/resources/views/admin/notification_send.blade.php</b> on line <b>96</b><br />
<br />
<b>Warning</b>:  Undefined variable $session in <b>/home/telemeduser/public_html/WFNR-2024/resources/views/admin/notification_send.blade.php</b> on line <b>99</b><br />
<br />
<b>Warning</b>:  Attempt to read property "start_date" on null in <b>/home/telemeduser/public_html/WFNR-2024/resources/views/admin/notification_send.blade.php</b> on line <b>99</b><br />
                                        <option value="{{$session->session_id }}" >{{$day}} {{$session->hall}} {{ $session->session_name.': [ '.$session->start_time.' - '.$session->end_time }}]</option>

                                        @endforeach
                                    </select>
                                </div>
                                
                            </div>
                            <div class="col-md-4" style="display:none" id="topic_div">
                                <div class="mb-3">
                                    <label for="staticEmail" class="form-label">Select Topic</label>
                                    <select  class="form-control" name="changed_topic" id="changed_topic" >
                                        <option>Select Topic</option>
                                    </select>
                                </div>
                                
                            </div>

                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label">Content <span class="word-count" id="word-count">0/200 words</span></label>
                                    <textarea class="form-control" id="content" name="content" style="height:100px;" placeholder="Enter Notification Content (max 200 words)"></textarea>
                                </div>
                                <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input" id="isSchedule" name="isSchedule" value="">
                                        <label class="form-check-label" for="exampleCheck1">&nbsp;Schedule for Later</label>
                                </div>
                            </div>
                            <div class="row" id="scheduleBox">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Shedule Time</label>
                                        <input type="time" class="form-control" id="time" name="time" placeholder="Time">
                                      </div>
                                </div>
    
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="col-form-label">Schedule Date</label>
                                        <input class="form-control" type="date" name="date" id="date" min="2026-02-05" placeholder="date">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-sm-12 mt-4 text-center">
                            <button class="form-control col-md-4 btn btn-success" type="submit" name="submit">Send Notification</button>
                        </div>
                    </form>
                </div>
                <hr>
                <div class="col-lg-12" style="overflow-x:auto;">
                    <div class="card m-b-20">
                    <div class="card-body">

                            <h4 class="mt-0 m-b-20 header-title">Sent Notification</h4>
                            <table id="datatable2" class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Title</th>
                                        <th>Content</th>
                                        <th>Attachment</th>
                                        <th>Date/Time</th>
                                        <!--<th>Sent to Android</th>-->
                                        <!--<th>Sent to iOS</th>-->
                                        <th>Sent to Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $i = 1; @endphp
                                        @foreach ($get_notifications as $row)
                                        <tr>
                                            <td>{{ $i }}</td>
                                            <td>{{ $row->title }}</td>
                                            <td>{{ $row->content }}</td>
                                            @if($row->attachment)
                                            <td><a href="/WFNR-2024/public/uploads/notification_attachments/{{ $row->attachment }}" target="_blank">View File</a></td>
                                            @else
                                            <td>No attachment</td>
                                            @endif
                                            <td>{{ \Carbon\Carbon::parse($row->date1)->format('d-m-Y') }} {{ $row->time1 }}</td>
                                            <!--<td>{{ $row->sent_to_android }}</td>-->
                                            <!--<td>{{ $row->sent_to_ios }}</td>-->
                                            <td>{{ $row->sent_to_android + $row->sent_to_ios }}</td>
                                        </tr>
                                        @php $i++; @endphp
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                    </div>
                </div>
                
                <div class="col-lg-12">
                    <div class="card m-b-20">
                    <div class="card-body">

                            <h4 class="mt-0 m-b-20 header-title">Scheduled Notification</h4>
                            <table id="datatable" class="table table-hover table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Title</th>
                                        <th>Content</th>
                                        <th>Attachment</th>
                                        <th>Scheduled at</th>
                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $i = 1; @endphp
                                        @foreach ($schd_notifications as $row)
                                        <tr>
                                            <td>{{ $i }}</td>
                                            <td>{{ $row->title }}</td>
                                            <td>{{ $row->content }}</td>
                                            @if($row->attachment)
                                            <td><a href="/WFNR-2024/public/uploads/notification_attachments/{{ $row->attachment }}" target="_blank">View File</a></td>
                                            @else
                                            <td>No attachment</td>
                                            @endif                                            
                                            <td>{{ \Carbon\Carbon::parse($row->date1)->format('d-m-Y') }} {{ $row->time1 }}</td>
                                            
                                        </tr>
                                        @php $i++; @endphp
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                    </div>
                </div>
                
            </div>
        <!--</div>-->
<!--    </div>-->
<!--</div>-->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Alert</h5>
       <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">×</button>
     </div>
     <div class="modal-body">
       <p id="msgbox"></p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
       <!--<button type="button" class="btn btn-primary">Save changes</button>-->
     </div>
   </div>
 </div>
</div>
@endsection

@section('scripts')
<!-- Dashboard init js -->
<script>
    $(document).ready(function(){
        $('#scheduleBox').hide();
    })
    $('#link_to').on('change',function(){
        if($('#link_to').val()=='SP'){
            $('#session_div').show();
        }
        else{
            $('#session_div').hide();
            $('#topic_div').hide();
        }
    })
    $('#changed_session').on('change',function(){
        $('#topic_div').show();
        var session_id=$('#changed_session').val();
        $.ajax({
            method:'post',
            url:'getDetailsBySessionId',
            // headers: {
            //     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            // },
            data:{'session_id':session_id,"_token": "{{ csrf_token() }}",},
            success: function(data){
                $('#changed_topic').append(data);
            }
        })
        
    })
    $("#isSchedule").click(function() {
        if($("#isSchedule").val()==''){
            $('#scheduleBox').show();
            $("#isSchedule").val('1');
        }
        else{
            $('#scheduleBox').hide();
            $("#isSchedule").val('');
        }
        

    });
</script>

<!-- Required datatable js -->
<script src="/AOCN-IANCON-2022/public/assets/admin/pages/dashboard.init.js"></script>

<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>
    $(document).ready(function () {
        $("#session_id").change(function() {
            var val = $(this).val();
            // document.location.href = '/admin/asked-questions/'+val;
        });
    })
</script>
<script>
// validate file size and type
function validateSize(input) {
    const fileSize = input.files[0].size / 1024 / 1024; // in MiB
    const fileName = input.value;
    const idxDot = fileName.lastIndexOf(".") + 1;
    const extFile = fileName.substr(idxDot, fileName.length).toLowerCase();

    if ((extFile == "jpg" || extFile == "jpeg" || extFile == "png" || extFile == "pdf") && fileSize > 2) {
        $('#exampleModal').modal('toggle');
        $('#msgbox').html("File size exceeds 2 MB");
        $(input).val(''); // Clear the input
    } else if ((extFile == "mp4" || extFile == "gif") && fileSize > 5) {
        $('#exampleModal').modal('toggle');
        $('#msgbox').html("File size exceeds 5 MB");
        $(input).val(''); // Clear the input
    } else if (extFile == "jpg" || extFile == "jpeg" || extFile == "png" || extFile == "pdf" || extFile == "mp4" || extFile == "gif") {
        // File is valid, proceed further
    } else {
        $('#exampleModal').modal('toggle');
        $('#msgbox').html("Please select a valid file type: .jpg, .jpeg, .png, .pdf (up to 2 MB), or .mp4, .gif (up to 5 MB)");
        $(input).val(''); // Clear the input
    }
}
</script>
<script>
    
    // function validateFile(input) {
    //     const file = input.files[0];
    //     const allowedExtensions = ['jpg', 'jpeg', 'png', 'pdf'];
    //     const maxSize = 2 * 1024 * 1024; // 2MB in bytes

    //     if (file) {
    //         const fileExtension = file.name.split('.').pop().toLowerCase();
    //         if (!allowedExtensions.includes(fileExtension)) {
    //             alert("Invalid file type. Only JPG, JPEG, PNG, and PDF files are allowed.");
    //             input.value = ""; // Clear the input field
    //             return;
    //         }

    //         if (file.size > maxSize) {
    //             alert("File size must be less than 2MB.");
    //             input.value = ""; // Clear the input field
    //             return;
    //         }
    //     }
    // }

</script>
<script>
    function countWords(str) {
        return str.trim().split(/\s+/).filter(word => word.length > 0).length;
    }

    $(document).ready(function() {
        $('#content').on('input', function() {
            let words = $(this).val().trim().split(/\s+/).filter(word => word.length > 0);
            const wordCount = words.length;
            const wordCountDisplay = $('#word-count');
            wordCountDisplay.text(`${wordCount}/200 words`);

            if (wordCount > 200) {
                wordCountDisplay.css('color', 'red');
                // Prevent further input
                words = words.slice(0, 200);
                $(this).val(words.join(" "));
            } else {
                wordCountDisplay.css('color', '#555');
            }
        });
    });
</script>
@endsection