@extends('layouts.master')
@extends('sidebar.dashboard')

@section('content')





    <!-- Header -->
    <!-- Header -->
    <div class="header pb-6 d-flex align-items-center" style="min-height: 100px; background-image: url(../assets/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
      <!-- Mask -->

    </div>
    <!-- Page content -->
    <div class="container-fluid mt--6">
      <div class="row">
 
        <div class="col-xl-12 order-xl-1">
          <div class="card">
            <div class="card-header">
              <div class="row align-items-center">
                <div class="col-8">
                  <h3 class="mb-0">Manage MQTT Topics</h3>
                </div>
                <div class="col-4 text-right">
                  <!-- <a href="#!" class="btn btn-sm btn-primary">Settings</a> -->
                  <button type="button" class="btn btn-sm btn-primary" name="create_record" id="create_record"><i
                            class="fa fa-plus"></i> Publish Topic</button>
                </div>

                
              </div>
            </div>
            <div class="card-body">

              <div class="table-responsive">
              <table id="department-table" class="table ">
                <thead>
                <tr>
                    <th class="not-exported"></th>
                    <th>Topic</th>
                    <th class="not-exported">Action</th>
                </tr>
                </thead>

            </table>
              </div>

            </div>
          </div>
        </div>
      </div>
      <!-- Footer -->
      <footer class="footer pt-0">
                <div class="row align-items-center justify-content-lg-between">
                    <div class="col-lg-6">
                        <div class="copyright text-center  text-lg-left  text-muted">
                            &copy; 2022 <a href="https://escapadetechnologies.com/" class="font-weight-bold ml-1"
                                target="_blank">Escapade Technologies</a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                     
                    </div>
                </div>
            </footer>
      
    </div>


  <div id="formModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 id="exampleModalLabel" class="modal-title">Publish Topic</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <span id="form_result"></span>
                    <form method="post" id="sample_form" class="form-horizontal" enctype="multipart/form-data">

                        @csrf

                        <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="text-bold">Topic <span class="text-danger">*</span></label>
                                    <select name="topic" id="topic" required class="form-control">
                                    <option value="">--Select Topic--</option>
                                            <option value="sps_dev_chanel">sps_dev_chanel</option>
                                            <option value="sps_dev_chanel_2">sps_dev_chanel_2</option>
                                            <option value="sps_dev_chanel_3">sps_dev_chanel_3</option>
                                 
                                    </select>
                                </div>
                            </div>

                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label class="text-bold">Message<span class="text-danger">*</span></label>
                                <textarea name="message" id="message" placeholder="Message"
                                       required class="form-control"></textarea>
                            </div>
                            

                            </div>

    

                   


                            <div class="container">
                                <div class="form-group" align="center">
                                    <input type="hidden" name="action" id="action"/>
                                    <input type="hidden" name="hidden_id" id="hidden_id"/>
                                    <input type="submit" name="action_button" id="action_button" class="btn btn-warning w-100" value="Publish" />
                                </div>
                            </div>
                       

                    </form>

                </div>
            </div>
        </div>
    </div>

    <!-- https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css  -->

  <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" type="text/css">

<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

  <script>


$(document).ready(function(){

    $('#create_record').on('click', function () {
            $('#formModal').modal('show');
            $('#sample_form')[0].reset();  
    });


    $('#sample_form').on('submit', function(event) {
            event.preventDefault();

            $.ajax({
                url: "{{ route('SendMsgViaMqtt') }}",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: "json",
                success: function(data) {
                    // console.log(data);
                    let html = '';
                    if (data.errors) {
                        html = '<div class="alert alert-danger">';
                        for (let count = 0; count < data.errors.length; count++) {
                            html += '<p>' + data.errors[count] + '</p>';
                        }
                        html += '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                        $('#sample_form')[0].reset();
                    }
                    $('#form_result').html(html);
                    $(".alert").slideDown(300).delay(5000).slideUp(300);
                }
            })
        });


});

      

            


         


           






     

  </script>
   
@endsection