@extends('admin.layout')

@section('content')

<!-- DataTable CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">

<style>
    .table-no-border {
        border: none;
    }

    .table-no-border th,
    .table-no-border td {
        border: none;
    }

    .table-responsive .dataTables_wrapper .dataTables_length select {
        padding: 8px 48px 8px 16px !important;
    }

    .btn-primary.submit-btn {
    background-color: #1e3a8a; /* A deep blue */
    border-color: #1e3a8a;
    color: #ffffff;
}

.btn-primary.submit-btn:hover {
    background-color: #1c357d;
    border-color: #1c357d;
}

</style>


<div class="container-fluid content-inner pb-0">
    <div class="page-header d-flex justify-content-between">
        <h1 class="page-title mb-0">Add Video</h2>
    </div>
   
    <!-- Create Notification Form -->
    <div class="row justify-content-center mt-3">
        <div class="col-lg-6">
            <div class="card p-3">
                <h6 class="card-title">Add Video</h6>
                <hr>
                <form action="{{ route('add_video_post') }}" method="POST" enctype="multipart/form-data">
                  @csrf
                  <div class="row">
                      {{-- First Row: Select Channel --}}
                      <div class="col-lg-6">
                          <div class="form-group mb-3">
                              <label for="channel_id" class="form-label">Channel Name</label>
                              <select name="channel_id" class="form-control" id="channel_id">
                                  <option value="">-- Select Channel --</option>
                                  @foreach($channels as $item)
                                      <option value="{{ $item->id }}">{{ $item->channel_name }}</option>
                                  @endforeach
                              </select>
                              @error('channel_id')
                                  <div class="text-danger">{{ $message }}</div>
                              @enderror
                          </div>
                      </div>
              
                      {{-- Second Row: Link Textarea --}}
                      <div class="col-lg-12">
                          <div class="form-group mb-3">
                              <label for="link" class="form-label">Video Link</label>
                              <textarea name="link" class="form-control" id="link" rows="3">{{ old('link') }}</textarea>
                              @error('link')
                                  <div class="text-danger">{{ $message }}</div>
                              @enderror
                          </div>
                      </div>
                      {{-- Title Input --}}
        <div class="col-lg-6">
            <div class="form-group mb-3">
                <label for="title" class="form-label">Video Title</label>
                <input type="text" name="title" id="title" class="form-control" value="{{ old('title') }}">
                @error('title')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- Image Upload --}}
        <div class="col-lg-6">
            <div class="form-group mb-3">
                <label for="image" class="form-label">Thumbnail Image</label>
                <input type="file" name="image" id="image" class="form-control">
                @error('image')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
                      {{-- Submit Button --}}
                      <div class="col-lg-12">
                          <div class="form-group mb-3">
                              <div class="button-container mt-4">
                                  <button type="submit" class="btn btn-primary submit-btn">
                                      <i class="fa-regular fa-circle-check me-2"></i>Submit
                                  </button>
                              </div>
                          </div>
                      </div>
                  </div>
              </form>
              
                
            </div>
        </div>
    </div>
    
    <!-- Notification Table -->
    <div class="row mt-3">
      <div class="col-lg-12">
          <h5>Notifications</h5>
          <div class="card p-2 mt-2">
              <div class="table-responsive mt-3">
                  <table class="table table-no-border" id="notificationTable">
                      <thead>
                          <tr>
                              <th scope="col">S/N</th>
                              <th scope="col">Channel Name</th>
                              <th scope="col">VIDEO LINK</th>
                              <th scope="col">CREATED DATE</th>
                              <th scope="col">ACTION</th>
                          </tr>
                      </thead>
                      @php
                      $sn = 1;
                    @endphp
                    <tbody>
                      @foreach ($notification as $notifi)
                        <tr>
                          <td>{{ $loop->iteration }}</td>
                          <td>{{ $notifi->channel->channel_name }}</td>
                          <td>{{ $notifi->link}}</td>
                          <td>{{ $notifi->created_at->format('Y-m-d') }}</td>
                          <td>
                            <button type="button" data-bs-toggle="modal" data-bs-target="#deleteModal"
                              class="btn transparent-btn" data-user-id="{{ $notifi->id }}" onclick="setDeleteId(this)"><i
                                class="fa-regular fa-trash-can delete-icon" data-bs-toggle="tooltip" data-bs-placement="top"
                                data-bs-title="Delete"></i></button>
                          </td>
                        </tr>
                      @endforeach
                    </tbody>
                      <!--Delete Modal start-->

            <div class="modal fade zoom-in" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-body">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="p-3">
                        <div class="text-center">
                          <img class="mb-3" src="{{ asset('/assets') }}/images/icons/delete-icon.svg">
                          <p class="my-4 are-you-sure"></p>
                          <p class="text-muted my-2 are-you-sure-subtext">Are you sure
                            want to Delete this?</p>
                        </div>
                       <form action="{{ route('delete_video') }}" method="POST">
    @csrf
    <input type="hidden" id="delete_id" name="delete_id">
    <div class="d-flex align-items-center mt-5 mb-3">
        <button type="button" class="btn btn-light cancel-btn me-3" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary yes-btn">
            <i class="fa-regular fa-circle-check me-2"></i>Yes, Delete
        </button>
    </div>
</form>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--Delete Modal Ends-->
                  </table>
              </div>
          </div>
      </div>
  </div>
</div>
 
@endsection


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(document).ready(function () {
        $('#notificationTable').DataTable();
    });
</script>
<script>
    function setDeleteId(button) {
        var id = button.getAttribute('data-user-id');
        document.getElementById('delete_id').value = id;
    }
</script>