@extends('layouts.master')
@section('title', 'Station : List')
@section('content')
    <div class="middle-part-wrap location-list-page-wrap list_view">
        <div class="leadership-list-wrap location-list-wrap">
            <div class="leadership-top-header">
                <h3>Notification List</h3>
                <a href="javascript::void()" class="common-btn notifyTouser">Send Notification</a>
            </div>
            <div id="errormsg" class="text-center animated fadeIn" style="display: none; color:red">
                <strong class="errormsg"></strong>
            </div>
            <div id="successMsg" class="text-center animated fadeIn" style="display: none; color:green">
                <strong class="successMsg"></strong>
            </div>
            <div class="leadership-list-data scroll">
                <ul class="listRecordsUl">
                    <div class="card">
                        <div class="card-body">
                            <table id="list" class="table table-striped table-bordered viewdatatable dt-responsive nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th>Created At</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>
    <div class="commanpopup dltuser" style="display: none;">
        <div class="overlaybg"></div>
        <div class="main-box">
            <p class="titlemsg mt-0">Are you sure you want to <br><span class="warning_text">delete this notfication?</span></p>
            <button class="rejectbtn yesbtn common-btn" data-id="18">Yes</button>
            <button class="cancelbtn">Cancel</button>
        </div>
    </div>

    <div class="middle-part-wrap location-list-page-wrap form_view" style="display:none">
        <div class="leadership-list-wrap location-list-wrap">
            <div class="leadership-top-header">
                <h3>Notification</h3>
                <a href="javascript::void()" class="backBtn common-btn">Back</a>
            </div>
            <div class="leadership-list-data scroll">
                <ul class="listRecordsUl">
                    <div class="card">
                        <div class="card-body">
                            <div class="container">
                                <div id="errormsg_notify" class="text-center animated fadeIn" style="display: none; color:red">
                                    <strong class="errormsg_notify"></strong>
                                </div>
                                <div id="successMsg_notify" class="text-center animated fadeIn" style="display: none; color:green">
                                    <strong class="successMsg_notify"></strong>
                                </div>
                                <form class="needs-validation" id="notificationForm">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12 order-md-1">
                                            <div class="row justify-content-center">
                                                <div class="col-md-8 mb-3">
                                                    <label for="title">Title</label>
                                                    <input type="text" class="form-control" id="title" name="title"
                                                        placeholder="" value="" required>
                                                </div>
                                            </div>
                                            <div class="row justify-content-center">
                                                <div class="col-md-8 mb-3">
                                                    <label for="description">Description</label>
                                                    <textarea type="text" class="form-control" id="description" name="description" placeholder="" rows="10"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                 
                                    <div class="service-save-button">
                                        <button class="btn btn-primary btn-lg btn-block common-btn"
                                            type="submit">Send Notification</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>

    <link rel="stylesheet" type="text/css" media="screen" href="{!! asset('plugin/datatable/dataTables.bootstrap5.css') !!}">
    <script type="text/javascript" src="{!! asset('plugin/datatable/dataTables.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('plugin/datatable/dataTables.bootstrap5.js') !!}"></script>
   
    <script>
    
    $(document).ready(function () {
        $(".alert-success, .alert-danger").delay(5000).fadeOut();     
        $('#notifyClass').addClass('active'); 
        fill_datatable();
        $('#notificationForm').validate({
                rules: {
                    title: {
                        required: true
                    },
                    description: {
                        required: true
                    },
                },
                messages: {
                    title: {
                        required: "Please enter title"
                    },
                    description: {
                        required: "Please enter description"
                    },
                },
                submitHandler: function(form) {
                    $('body').prepend('<div class="loader"></div>');
                    sendNotification();
                    return false;
                }
            });
    });
   
    function fill_datatable(){
      var table = $('#list').DataTable({
            scrollX: true,
            lengthMenu: [
                [10, 25, 50],
                [10, 25, 50],
            ],
            "order": [[0, "desc"]],
            "columnDefs": [
                  {
                        "targets": [0],
                        "visible": false,
                        "searchable": false
                    },
                {
                    "targets": [],
                    "searchable": false
                }
            ],
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{url('admin/notification/fetch')}}",
                "dataType": "json",
                "type": "POST",
                "data": {'_token': "{{csrf_token()}}"}
            },
            "columns": [
                {"data": "id", "sortable": false},
                {"data": "title", "className": "text-center"},
                {"data": "description", "className": "text-center"},
                {"data": "created_at",  "className": "text-center"},
                {"data": "action", "sortable": false, "className": "text-center"}
            ],
      });
    }
    var notificationId;
    $(document).on('click', '.deleteNotification', function(){
        notificationId = $(this).attr('data-id');
        $(".rejectbtn").attr('data-id', notificationId);
        $('.rejectbtn').addClass('notificationDelete');
        $('.commanpopup').show();
    })
    $(document).on('click', '.notificationDelete', function() {
        $('.commanpopup').hide();
        $('body').prepend('<div class="loader"></div>');
        $.ajax({
            url: "{{ url('admin/notification/delete') }}",
            type: 'POST',
            data: {notificationId, _token:"{{csrf_token()}}"},
            success: function(response) {
                $('.successMsg').text(response.message);
                $("#successMsg").show().delay(3000).fadeOut();
                $('.loader').remove();
                $("#list").DataTable().ajax.reload(null, false )
            },
            error: function(error) {
                $('.errormsg').text('Failed to delete notification. Please try again.');
                $("#errormsg").show().delay(3000).fadeOut();
                $('.loader').remove();
                $("#list").DataTable().ajax.reload(null, false )
            },
        });
    });
    $(document).on('click', '.cancelbtn', function(){
        $('.commanpopup').hide();
    });
    $(document).on('click', '.notifyTouser', function(){
        $('.list_view').hide();
        $('.form_view').show();
    });
    $(document).on('click', '.backBtn', function(){
        resetForm();
        
    });
    function resetForm(){
        $("#notificationForm")[0].reset();
        $('.form_view').hide();
        $('.list_view').show();
        $("#list").DataTable().ajax.reload(null, false )
    }
    function sendNotification(){
        const data = $("#notificationForm").serialize();
        $.ajax({
            url: "{{ url('admin/notification/send') }}",
            type: 'POST',
            data: data,
            success: function(response) {
                $("#notificationForm")[0].reset();
                $('.successMsg_notify').text(response.message);
                $("#successMsg_notify").show().delay(3000).fadeOut();
                $('.loader').remove();
                $("#list").DataTable().ajax.reload(null, false )
            },
            error: function(error) {
                $('.errormsg_notify').text('Failed to delete notification. Please try again.');
                $("#errormsg_notify").show().delay(3000).fadeOut();
                $('.loader').remove();
                $("#list").DataTable().ajax.reload(null, false )
            },
        });
    }
    </script>
@stop