@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">
 <!-- Content Header (Page header) -->
 <section class="content-header">
   <div class="container-fluid">
     <div class="row mb-2">
       <div class="col-sm-6">
         <h1>Carousel</h1>
       </div>
       <div class="col-sm-6">
         <ol class="breadcrumb float-sm-right">
           {{-- <li class="breadcrumb-item"><a href="#">Home</a></li> --}}
           <li class="breadcrumb-item active"></li>
         </ol>
       </div>
     </div>
   </div><!-- /.container-fluid -->
 </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('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">Carousel 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>Image</th>
                 <th>Title</th>
                 <th>Sub-title</th>
                 <th>Status</th>
                 <th>Action</th>
               </tr>
               </thead>
               <tbody>
                                  @foreach ($carousel as $data)
                     <tr>
                        <td>{{$slno}} </td>
                        <td> <img src="{{asset('image/'.$data->image)}}" alt="car" height="50" ></td>
                        <td>{{$data->title }}</td>
                        <td>{{$data->subtitle }}</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('view', ['id' => $data->id]) }}" class="btn btn-primary-outline"><i class="fa fa-eye" style="color:blue;"></i></a>
                                <a href="{{ route('edit', ['id' => $data->id]) }}" class="btn btn-success-outline"><i class="fa fa-edit" style="color:green;"></i></a>
                                <a href="{{ route('delete', ['id' => $data->id]) }}" onclick="confirmation(event)" class="btn btn-danger-outline"><i class="fa fa-trash"style="color:red;"></i></a>
                           
                         </td>
                         </tr>
                                                  @endforeach
               </tbody>

             </table>
           </div>
           <!-- /.card-body -->
         </div>
         <!-- /.card -->
       </div>
       <!-- /.col -->
     </div>
     <!-- /.row -->
   </div>
   <!-- /.container-fluid -->
 </section>
 <!-- /.content -->
</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: 'status_check',
      data: {"id":id},
      success: function(data) {
         if(data['status']==1){
            alert("Publish Successfully!")
          }else{
            alert("Unpublish Successfully!")
          }
        }
    });
  };
  </script>
@endsection