@extends('layouts.app')
@php
$table = "yes";
@endphp
@section('content')
<style type="text/css">
.form-check {
  display: flex;
  align-items: center;
}

.form-check-input {
  order: 2; /* move checkbox to the end */
  margin-left: auto; /* space between text and checkbox */
}

.form-check-label::before {
  font-weight: bold;
}

.bg-light {
    background-color: rgb(223 229 255) !important;
}

</style>
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-2 page-header-breadcrumb">
        <div>
        </div>
        <div class="main-dashboard-header-right">

        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <form id="searchForm">
                        <div class="row">
                            <div class="col-xl-9">
                                <div class="row">
                                    <div class="col-xl-2">
                                        <p class="text-muted">From Date:</p>
                                        <input type="date" name="from_date" class="form-control" id="input">  
                                    </div>

                                    <div class="col-xl-2">
                                        <p class="text-muted">To Date:</p>
                                        <input type="date" name="to_date" class="form-control" id="">  
                                    </div>

                                    <div class="col-xl-2">
                                        <p class="text-muted">Search:</p>
                                        <input type="text" name="searchtext" class="form-control" placeholder="Ex- RT003434, retailer name etc."> 
                                    </div>

                                    <div class="col-xl-2 mt-3"><br>
                                        <button type="submit" class="btn btn-sm btn-primary-gradient waves-light">Search</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3">
                                <div class="btn-list text-end" style="margin-top: 36px;">
                                   
                                    <button class="btn btn-sm btn-orange-gradient waves-light">Export Excel</button>
                                    <button class="btn btn-sm btn-purple-gradient waves-light">Export PDF</button> 
                                </div>

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

    <!-- End Page Header -->
    <div class="row">
    <div class="col-xl-12">
        <div class="card custom-card">
            <div class="card-header justify-content-between">
               <div class="card-title">
                  <h5>News Notification List</h5>
               </div>
               <div class="prism-toggle">
                   <button type="button" class="btn btn-sm btn-orange-gradient waves-light" data-bs-toggle="modal" data-bs-target="#postNewsModal">Post News</button>
               </div>
            </div>
            <div class="card-body">
               <div class="table-responsive custom-scroll">
                  <table class="table text-nowrap table-bordered" id="datatable">
                     <thead>
                        <tr>
                           <th scope="col">Sr No</th>
                           <th scope="col">Created Date</th>
                           <th scope="col">Created By</th>
                           <th scope="col">Service</th>
                           <th scope="col">Status</th>
                           <th scope="col">Remark</th>
                        </tr>
                     </thead>
                     <tbody>
                     </tbody>
                  </table>
               </div>
            </div>
        </div>
    </div>
    </div> 

     <div class="modal fade" id="postNewsModal"
        aria-labelledby="postNewsModalLabel" tabindex="-1" aria-hidden="true"
        style="display: none;">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="staticBackdropLabel1">News Notifications
                  </h6>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formdata" action="{{ route('savepostdata') }}" method="post" novalidate>
                <div class="modal-body">
                  <div class="formerror"></div>
                   @csrf
                   <input type="hidden" name="posttype" value="companynews">
                   <div class="row">
                      <div class="col-md-12 mb-3">
                          <p class="text-muted">Api Services:</p>
                          <select name="service" class="form-control" required>
                              <option value="">Select</option>
                              <option value="Payment Gateway Api">Payment Gateway Api</option>
                              <option value="Bill Payment Api">Bill Payment Api</option>
                              <option value="Money Transfer Api">Money Transfer Api</option>
                              <option value="Payout Api">Payout Api</option>
                              <option value="Recharge Api">Recharge Api</option>
                              <option value="Commission">Commission</option>
                              <option value="Charges">Charges</option>
                              <option value="Technical Issues">Technical Issues</option>
                              <option value="Other">Other</option>
                          </select> 
                      </div>

                      <div class="col-md-12 mb-3">
                          <p class="text-muted">Notification Duration:</p>
                          <select name="duration" class="form-control" required>
                              <option value="">Select</option>
                              <option value="1hrs">1 Hrs</option>
                              <option value="2hrs">2 Hrs</option>
                              <option value="5hrs">5Hrs</option>
                              <option value="24hrs">24 Hrs</option>
                              <option value="2days">2 Days</option>
                              <option value="3days">3 Days</option>
                          </select> 
                      </div>

                      <div class="col-md-12 mb-3">
                         <label class="form-label">News Remark</label>
                         <textarea rows="2" cols="3" name="news" class="form-control" placeholder="Remark here...." required></textarea>
                      </div>

                   </div>
                </div>
                <div class="modal-footer">
                   <input type="hidden" name="type" value="request">
                  <button type="submit" class="btn btn-sm btn-purple-gradient waves-light">Post News</button> 
                  <button class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
                </div>
                </form> 
            </div>
        </div>
    </div>   
</div>

@endsection

@section('scripts')
<script type="text/javascript">
$(document).ready(function() {
    var url = "{{url('statement/fetchdata')}}/companynewslist/0";
 
    var onDraw = function() {

    };
    var options = [
        { "data" : "name",
            render:function(data, type, full, meta){
                return `#` + (meta.row + 1);
            }
        },
        { "data" : "created_at" },
        { "data" : "membercode" },
        { "data" : "service" },
        { "data" : "status",
            render:function(data, type, full, meta){
               if(full.status == 'active'){
                   return `<span class="badge bg-success"><i class="fa fa-check-circle"></i> Active</span>`;
               }else{
                   return `<span class="badge bg-warning text-dark"><i class="fa fa-clock"></i> Inactive</span>`;

               }
                
            }
        },
        { "data" : "news" }

        
    ];

    datatableSetup(url, options, onDraw);

    $("#formdata").validate({
        rules: {
            supportnumber: {
                required: true
            }
        },
        messages: {
            supportnumber: {
                required: "Please enter valid value",
            }
        },
        errorElement: "p",
        errorPlacement: function ( error, element ) {
            if ( element.prop("tagName").toLowerCase() === "select" ) {
                error.insertAfter( element.closest( ".form-group" ).find(".select2") );
            } else {
                error.insertAfter( element );
            }
        },
        submitHandler: function () {
            var form = $('#formdata');
            form.ajaxSubmit({
                dataType:'json',
                beforeSubmit:function(){
                    form.find('button:submit').button('loading');
                },
                complete: function () {
                    form.find('button:submit').button('reset');
                },
                success:function(data){
                    if(data.status == "success"){
                        form[0].reset();
                        form.find('select').val('').trigger('change');
                        msgalert('success', data.message);
                        $('#datatable').dataTable().api().ajax.reload();
                    }else if(data.status == "failed"){
                        msgalert('warning', data.message);
                    }else{
                         msgalert('warning', data.status);
                    }
                },
                error: function(errors) {
                    showError(errors, form);
                }
            });
        }
    });

});

</script>
@endsection