@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">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 News</h6>
                <hr>
                <form action="{{ route('add_youtube') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group mb-3">
                        <label for="notification_title" class="form-label">Title</label>
                        <input type="text" name="notification_title" class="form-control" id="notification_title" value="{{ old('notification_title') }}">
                        @error('notification_title')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                
                    <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="form-group mb-3">
                        <label for="image" class="form-label">
                            Image <small class="text-muted">( size 342px × 170px )</small>
                        </label>
                
                        <div class="upload-box text-center position-relative" onclick="document.getElementById('image').click()">
                            <div id="upload-content">
                                <i class="fa fa-upload fa-2x mb-2"></i>
                                <div>Click to Upload</div>
                                <small class="text-muted d-block mt-1">( Max file size: 5 MB, JPG only )</small>
                            </div>
                            <img id="preview-img" style="display: none;" />
                        </div>
                
                        <input type="file" name="image" id="image" accept="image/jpeg" style="display: none;" onchange="previewImage(event)">
                        @error('image')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                 <div class="form-group mb-3">
                        <label for="notification_title" class="form-label">Url</label>
                        <input type="one" name="one" class="form-control" id="one" value="{{ old('one') }}">
                        @error('one')
                            <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>Title</th>
                                <th>Description</th>
                                <th>PREVIEW</th>
                                 <th>URL</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->description }}</td>
                            
                           <td>
    @php
        $advertiseImageUrl = null;

        $digitalOceanBaseUrl =
            'https://dstone.sfo3.digitaloceanspaces.com';

        if (!empty($advertise->image)) {

            $storedImage = ltrim(
                trim($advertise->image),
                '/'
            );

            /*
            |--------------------------------------------------------------------------
            | Already full URL
            |--------------------------------------------------------------------------
            */
            if (
                str_starts_with(
                    $storedImage,
                    'http://'
                ) ||
                str_starts_with(
                    $storedImage,
                    'https://'
                )
            ) {
                $advertiseImageUrl =
                    $storedImage;

            /*
            |--------------------------------------------------------------------------
            | DigitalOcean paths
            |--------------------------------------------------------------------------
            */
            } elseif (
                str_starts_with(
                    $storedImage,
                    'advertisement/'
                ) ||
                str_starts_with(
                    $storedImage,
                    'icons/'
                )
            ) {
                /*
                |--------------------------------------------------------------------------
                | Encode spaces and special characters
                |--------------------------------------------------------------------------
                */
                $encodedPath = collect(
                    explode('/', $storedImage)
                )->map(
                    fn ($part) =>
                        rawurlencode($part)
                )->implode('/');

                $advertiseImageUrl =
                    rtrim(
                        $digitalOceanBaseUrl,
                        '/'
                    ) .
                    '/' .
                    $encodedPath;

            /*
            |--------------------------------------------------------------------------
            | Old local path
            |--------------------------------------------------------------------------
            */
            } else {
                $advertiseImageUrl =
                    asset($storedImage);
            }
        }
    @endphp

    @if($advertiseImageUrl)

        <img src="{{ $advertiseImageUrl }}"
             class="preview-td-img"
             alt="Advertisement image"
             loading="lazy"
             onerror="
                 this.style.display='none';
                 this.nextElementSibling.style.display='inline';
             ">

        <span class="text-danger"
              style="display:none;">

            Image not found

        </span>

    @else

        <span class="text-muted">
            Null
        </span>

    @endif
</td>
                             <td>{{ $advertise->one ?? 'N/A'}}</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="#UpdateModal"
        class="btn transparent-btn me-1" data-user-id="{{ $advertise->id }}"
        data-title="{{ $advertise->title }}"
        data-description="{{ $advertise->description }}"
        data-url="{{ $advertise->one }}"
        data-image="{{ $advertise->image }}"
        data-status="{{ $advertise->is_active }}"
        onclick="setUpdateData(this)">
    <i class="fa-regular fa-pen-to-square"></i>
</button>

                            </td>
                          </tr>
                        @endforeach
        
                      </tbody>
                        <!-- Optional body -->
                    </table>
                </div>
            </div>
        </div>
    </div>
  
<!-- Update Modal Starts -->
<div class="modal fade zoom-in" id="UpdateModal" tabindex="-1" aria-labelledby="updateModalLabel" 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 Advertisement</p>
                            </div>
                            <form action="{{ route('update_youtube') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" id="update_id" name="update_id">
                                <input type="hidden" id="update_status" name="is_active">

                                <div class="mb-3">
                                    <label for="update_title" class="form-label">Title</label>
                                    <input type="text" name="title" id="update_title" class="form-control" required>
                                </div>

                                <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="mb-3">
                                    <label for="update_url" class="form-label">URL</label>
                                    <input type="text" name="one" id="update_url" class="form-control">
                                </div>

                                <div class="mb-3">
                                    <label for="update_image" class="form-label">Image</label>
                                    <input type="file" name="image" id="update_image" class="form-control">
                                    <img id="update_img_preview" src="" class="mt-2" style="width: 100px; display:none;">
                                </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>
// Open modal and populate data
function setUpdateData(button) {
    const id = button.getAttribute('data-user-id');
    const title = button.getAttribute('data-title');
    const description = button.getAttribute('data-description');
    const url = button.getAttribute('data-url');
    const image = button.getAttribute('data-image');
    const status = button.getAttribute('data-status');

    document.getElementById('update_id').value = id;
    document.getElementById('update_title').value = title;
    document.getElementById('update_description').value = description;
    document.getElementById('update_url').value = url;
    document.getElementById('update_status').value = status;

    const preview = document.getElementById('update_img_preview');
    if (image) {
        preview.src = image;
        preview.style.display = 'block';
    } else {
        preview.src = '';
        preview.style.display = 'none';
    }
}

// Show preview of new selected image
document.getElementById('update_image').addEventListener('change', function(e){
    const [file] = this.files;
    if(file){
        const preview = document.getElementById('update_img_preview');
        preview.src = URL.createObjectURL(file);
        preview.style.display = 'block';
    }
});

</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