@extends('admin.layout')
@section('title', 'youtube screen')
@section('content')
<!-- DataTable CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<style>
.upload-box {
    border: 2px dashed #ccc;
    width: 342px;
    height: 170px;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upload-box:hover {
    background-color: #f9f9f9;
    border-color: #999;
}
.upload-box img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
    .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: #0f1f3e; /* Matching dark navy */
        border-color: #0f1f3e;
        color: #ffffff;
        border-radius: 6px;
        padding: 10px 24px;
        font-weight: 500;
    }
    .btn-primary.submit-btn:hover {
        background-color: #0c1a35;
        border-color: #0c1a35;
    }
    .card {
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    }
    .form-label {
        font-weight: 600;
        font-size: 14px;
    }
    .form-control {
        border-radius: 6px;
        font-size: 14px;
    }
    .page-title {
        font-size: 20px;
        font-weight: 600;
    }
</style>
<div class="container-fluid content-inner pb-0">
    <div class="page-header d-flex justify-content-between">
        <h1 class="page-title mb-0">Breaking NEWS </h1>
    </div>
    <!-- Create Notification Form -->
    <div class="row justify-content-center mt-3">
        <div class="col-lg-6">
            <div class="card p-4">
                <h6 class="card-title">Create Breaking News</h6>
                <hr>
                <form action="{{ route('add_breaking_new') }}" method="POST">
                    @csrf
                    <div class="form-group mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea name="description" class="form-control" id="description" rows="4">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                
                    <div class="text-end mt-4">
                        <button type="submit" class="btn btn-primary submit-btn">
                            <i class="fa-regular fa-circle-check me-2"></i>Submit
                        </button>
                    </div>
                </form>
                
                
            </div>
        </div>
    </div>
    <!-- Notification Table -->
    <div class="row mt-4">
        <div class="col-lg-12">
            <h5> History</h5>
            <div class="card p-3 mt-2">
                <div class="table-responsive mt-3">
                    <table class="table table-no-border" id="notificationTable">
                        <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Description</th>
                                <th>CREATED ON</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        @php
                        $sn = 1; // Initialize serial number
                      @endphp
                      <tbody>
                        @foreach ($advertisement as $advertise)
                          <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $advertise->title }}</td>
                            <td>{{ $advertise->created_at ->format('Y-m-d') }}</td>
                            <td>
                              <button type="button" data-bs-toggle="modal" data-bs-target="#Delete2Modal"
                                class="btn transparent-btn me-1" data-user-id="{{ $advertise->id }}"
                                onclick="setDeleteId(this)"><i class="fa-regular fa-trash-can delete-icon"></i></button>
                              <button type="button" data-bs-toggle="modal" data-bs-target="#Hide3Modal"
                                class="btn transparent-btn"data-user-id="{{ $advertise->id }}" onclick="setHideId(this)">
                                @if ($advertise->is_active == 0)
                                  <i class="fa-regular fa-eye-slash eye-icon"></i>
                                @else
                                  <i class="fa-regular fa-eye eye-icon"></i>
                                @endif
                                </i>
                              </button>
                              <button type="button" data-bs-toggle="modal" data-bs-target="#UpdateBreakingModal"
    class="btn transparent-btn me-1"
    data-user-id="{{ $advertise->id }}"
    data-description="{{ $advertise->title }}"
    onclick="setUpdateBreaking(this)">
    <i class="fa-regular fa-pen-to-square"></i>
</button>

                            </td>
                          </tr>
                        @endforeach
        
                      </tbody>
                        <!-- Optional body -->
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Update Breaking News Modal -->
<div class="modal fade zoom-in" id="UpdateBreakingModal" tabindex="-1" aria-labelledby="updateBreakingLabel" 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/update.svg') }}">
                                <p class="my-4 are-you-sure">Update Breaking News</p>
                            </div>
                            <form action="{{ route('update_breaking_news') }}" method="POST">
                                @csrf
                                <input type="hidden" id="update_breaking_id" name="update_id">

                                <div class="mb-3">
                                    <label for="update_description" class="form-label">Description</label>
                                    <textarea name="description" id="update_description" class="form-control" rows="3" required></textarea>
                                </div>

                                <div class="d-flex align-items-center mt-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>Update
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <!--Hide Modal  Starts-->
    <div class="modal fade zoom-in" id="Hide3Modal" 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/hide.svg">
                      <p class="my-4 are-you-sure"></p>
                      <p class="text-muted my-2 are-you-sure-subtext">Are you sure want to hide/unhide Status?</p>
                    </div>
                    <form action="{{ route('hide_youtube') }}" method="POST" enctype="multipart/form-data">
                      @csrf
                      <input type="hidden" id="hide_id" name="hide_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,
                        </button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Hide Modal Ends-->
  
      <!--Delete Modal  Starts-->
      <div class="modal fade zoom-in" id="Delete2Modal" 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_youtube') }}" method="POST" enctype="multipart/form-data">
                      @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-->
  
    </div>
    <!-- end container fluid -->
  
    <script>
      function setHideId(button) {
        var hideId = button.getAttribute('data-user-id');
        document.getElementById('hide_id').value = hideId;
      }
    </script>
  
    <script>
      function setDeleteId(button) {
        var deleteId = button.getAttribute('data-user-id');
        document.getElementById('delete_id').value = deleteId;
      }
    </script>
  
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const uploadWrapper = document.getElementById('ad-upload-wrapper');
        const uploadInput = document.getElementById('upload-ad-img');
        const adImageView = document.getElementById('ad-img-view');
        const uploadConditions = document.getElementById('ad-upload-conditions');
  
        // Clicking anywhere within the wrapper triggers file upload
        document.getElementById('ad-upload-wrapper').addEventListener('click', function() {
          uploadInput.click();
        });
  
        uploadInput.addEventListener('change', function() {
          const file = this.files[0];
          if (file) {
            const reader = new FileReader();
            reader.onload = function() {
              adImageView.src = reader.result;
              uploadConditions.classList.add('d-none');
              uploadWrapper.style.padding = '0';
            }
            reader.readAsDataURL(file);
          }
        });
      });
    </script>
  
  <script>
function setUpdateBreaking(button) {
    var updateId = button.getAttribute('data-user-id');
    var description = button.getAttribute('data-description');
    document.getElementById('update_breaking_id').value = updateId;
    document.getElementById('update_description').value = description;
}
</script>
  
  
  @endsection
  @section('footer')
  
  
    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  
    <!-- Datatable JS -->
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/datatables.init.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>
  
  
  
  @endsection