@extends('admin.layout.dashboard-template')
  @section('content')
  <div class="db-info-wrap db-package-wrap">
      <div class="dashboard-box table-opp-color-box">
          <h4>Promotional Video</h4>
          <div class="text-right">
              <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#categoryModal">
                  Add Category
              </button>

              <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#videoModal">
                  Upload Video
              </button>
              <div class="modal fade" id="categoryModal">
                  <div class="modal-dialog">
                      <form method="POST" action="{{route('admin.video.category.store')}}">
                          @csrf
                          <div class="modal-content">
                              <div class="modal-header">
                                  <h5>Add Category</h5>
                              </div>
                              <div class="modal-body">
                                  <input type="text" name="name" class="form-control" placeholder="Category Name" required>
                              </div>
                              <div class="modal-footer">
                                  <button class="btn btn-success">Save</button>
                              </div>
                          </div>
                      </form>
                  </div>
              </div>
              <div class="modal fade" id="videoModal">
                  <div class="modal-dialog">
                      <form method="POST" action="{{route('admin.video.store')}}" enctype="multipart/form-data">
                          @csrf
                          <div class="modal-content">
                              <div class="modal-header">
                                  <h5>Upload Video</h5>
                              </div>
                              <div class="modal-body">

                                  <input type="text" name="title" class="form-control mb-2" placeholder="Video Title" required>

                                  <select name="category_id" class="form-control mb-2" required>
                                      <option value="">Select Category</option>
                                      @foreach($categories as $cat)
                                      <option value="{{$cat->id}}">{{$cat->name}}</option>
                                      @endforeach
                                  </select>

                                  <input type="file" name="video" class="form-control" required>

                              </div>
                              <div class="modal-footer">
                                  <button class="btn btn-primary">Upload</button>
                              </div>
                          </div>
                      </form>
                  </div>
              </div>
          </div>
          @if(\Session::get('success'))
          <div class="alert alert-success alert-dismissible fade show" role="alert">
              <div class="alert-body">
                  {{ \Session::get('success') }}
              </div>
              <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
          </div>
          @endif
          {{ \Session::forget('success') }}
          @if(\Session::get('error'))
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <div class="alert-body">
                  {{ \Session::get('error') }}
              </div>
              <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
          </div>
          @endif
          <div class="table-responsive">
              <table id="videoTable" class="table table-bordered">
                  <thead>
                      <tr>
                          <th>#</th>
                          <th>Title</th>
                          <th>Category</th>
                          <th>Video</th>
                          <th>Action</th>
                      </tr>
                  </thead>
                  <tbody>
                      @foreach($videos as $key => $video)
                      <tr>
                          <td>{{$key+1}}</td>
                          <td>{{$video->title}}</td>
                          <td>{{$video->category->name}}</td>
                          <td>
                              <video width="120" controls>
                                  <source src="{{asset('storage/'.$video->video)}}" type="video/mp4">
                              </video>
                          </td>
                          <td>
                              <a href="{{route('admin.video.download',$video->id)}}" class="btn btn-success btn-sm">
                                  Download
                              </a>
                          </td>
                      </tr>
                      @endforeach
                  </tbody>
              </table>


          </div>
      </div>

  </div>




  <script type="text/javascript">
      $(document).ready(function() {
          $('#videoTable').DataTable();
      });

      $(document).on('click', '#getDeleteId', function(e) {
          var answer = confirm("Are you sure you want to delete from this item?");
          if (answer) {
              id = $(this).data('id');
              e.preventDefault();
              $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              });
              $.ajax({
                  url: "{{ route('admin.delete-banner') }}",
                  method: "GET",
                  data: {
                      'id': id
                  },
                  success: function(result) {
                      $('.table').DataTable().ajax.reload();
                      if (result == 1) {
                          $(".alert-success").text("Service Deleted successfully.");
                      } else {
                          $(".alert-danger").text("Something went wrong.");
                      }

                      $('.data-table').DataTable().ajax.reload();

                  }
              });
          }
      });

      $(document).on('click', '#status', function(e) {
          id = $(this).data('id');
          status = $(this).data('value');
          e.preventDefault();
          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
          $.ajax({
              url: "{{ route('admin.change-banner-status') }}",
              method: "GET",
              data: {
                  'id': id,
                  'status': status
              },
              success: function(result) {
                  $('.table').DataTable().ajax.reload();
                  if (result == 1) {
                      $(".alert-success").text("Status Changed successfully.");
                  } else {
                      $(".alert-danger").text("Something went wrong.");
                  }

                  $('.data-table').DataTable().ajax.reload();

              }
          });
      });
  </script>
  @endsection