@extends('admin.dashboard')
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset ('plugins/fontawesome-free/css/all.min.css')}}">
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset ('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{ asset ('plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{ asset ('plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset ('dist/css/adminlte.min.css')}}">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<style>
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ca1515;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked + .slider {
      background-color: #1ab922;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }

    .slider.round:before {
      border-radius: 50%;
    }
    .action{
        display:flex !important;
    }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
@if(Session::has('status'))
<script>
    $(document).ready(function() {
        swal("success", "{{ session('status') }}", "success", { button: "Done", timer: 4000 })
    });
    </script>
@endif

@section('content')
<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>News & Event</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active"></li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <!-- Main content -->
    <section class="content">
       <div class="container-fluid">
           <div class="row">
                <div class="col-md-12 mt-2 mb-2">
                    <a href="{{ route('news_create') }}"><button type="button" class="btn btn-primary" style="float: right;"
                     style="background-color: #3181d2;"><i class="fa fa-plus"></i> ADD</button></a>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-header data_table_header">
                            <h3 class="card-title text-white">News & Event Table: </h3>
                        </div>
                       <!-- /.card-header -->
                       <div class="card-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Sl.No</th>
                                        <th>Name</th>
                                        <!--<th>Image</th>-->
                                        <th>Date</th>
                                        <!--<th>Status</th>-->
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                            @foreach ($new as $data)
                                            <tr>
                                                <td>{{$slno}} </td>
                                                <td>{{$data->name}}</td>
                                                <!--<td><img src="{{asset('image/'.$data->image)}}" height="50"></td>-->
                                                <td>{{date('d-m-Y',strtotime($data->date))}}</td>
                                                <!--<td>-->
                                                <!--    <center>-->
                                                <!--        <label class="switch">-->
                                                <!--            <input type="checkbox" value="{{$data->status}}" id="switcher" onclick="status_check({{$data->id}})" @if($data->status == 1) checked @endif>-->
                                                <!--            <span class="slider round"></span>-->
                                                <!--        </label>-->
                                                <!--    </center>-->
                                                <!--</td>-->
                                                <td class="action">
                                                    <a href="{{ route('news_view', ['id' => $data->id]) }}" class="btn btn-primary-outline"><i class="fa fa-eye" style="color:blue;"></i></a>
                                                    <a href="{{ route('news_edit', ['id' => $data->id]) }}" class="btn btn-success-outline"><i class="fa fa-edit" style="color:green;"></i></a>
                                                    <a href="{{ route('news_delete', ['id' =>$data->id]) }}" onclick="confirmation(event)" class="btn btn-danger-outline"><i class="fa fa-trash"style="color:red;"></i></a>
                                                </td>
                                            
                                                                            @endforeach
                                        </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- jQuery -->
<script src="{{ asset ('plugins/jquery/jquery.min.js')}}"></script>
<!-- Bootstrap 4 -->
<script src="{{ asset ('plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<!-- DataTables  & Plugins -->
<script src="{{ asset ('plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset ('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{ asset ('plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{ asset ('plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{ asset ('plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{ asset ('plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{ asset ('plugins/jszip/jszip.min.js')}}"></script>
<script src="{{ asset ('plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{ asset ('plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{ asset ('plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{ asset ('plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{ asset ('plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<!-- AdminLTE App -->
<script src="{{ asset ('dist/js/adminlte.min.js')}}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{{ asset ('dist/js/demo.js')}}"></script>
<!-- Page specific script -->
<script>
$(function () {
 $("#example1").DataTable({
   "responsive": true, "lengthChange": false, "autoWidth": false,
   "buttons": ["copy", "csv", "excel", "pdf", "print",]
 }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
 $('#example2').DataTable({
   "paging": true,
   "lengthChange": false,
   "searching": false,
   "ordering": true,
   "info": true,
   "autoWidth": false,
   "responsive": true,
 });
});
</script>

<script>
 function confirmation(ev){
     ev.preventDefault();
     let urlToRedirect = ev.currentTarget.getAttribute('href');
     console.log(urlToRedirect);
     swal({
         title:"Are you Sure To Delete This",
         text : "You Won't be able to revert this delete",
         icon : "warning",
         buttons:true,
         dangerMode:true,
     }).then((willCancel)=>
     {
         if(willCancel){
             window.location.href = urlToRedirect;
         }

     });
 }
</script>
<script>
    function status_check(id){
      jQuery.ajax({
      type:"get",
      dataType:"json",
      url: 'News_sta_check',
      data: {"id":id},
      success: function(data) {
         if(data['status']==1){
            alert("Publish Successfully!")
          }else{
            alert("Unpublish Successfully!")
          }
        }
    });
  };
  </script>
@endsection