@extends('admin.layout')
@section('title', 'Adverisement')
@section('header')

  <!-- DataTable CSS -->
  <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">
  <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">

@endsection
@section('content')




  <div class="container-fluid page-wrapper">

    <div class="row">
      <div class="">
        <h3 class="page-top-heading">Advertisement</h3>
      </div>
    </div>


    <form action="" method="POST" enctype="multipart/form-data">
      @csrf
      <div class="row mt-4">
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 mb-2">
          <div class="">
            <label class="mb-2 filter-by-p">Advertisement Title</label>
            <input type="text" name="title" class="form-control filter-input" required placeholder="Enter Title">
          </div>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 mb-2">
          <label class="mb-2 filter-by-p">Image<small class="ms-1" style="color:#979797;">( size 342px - 170px
              )</small></label>
          <div class="ad-upload-wrapper" id="ad-upload-wrapper">
            <div id="ad-upload-conditions" class="ad-upload-conditions text-center">
              <div><i class="fa-solid fa-file-arrow-up upload-icon"></i></div>
              <p class="text-center click-to-upload">Click to Upload</p>
              <div class="file-size-UHGHH">( Max file size: 5 MB, JPG Only )</div>
            </div>
            <img src="" id="ad-img-view" class="img-fluid img-responsive">
            <input style="display:none;" name="image" class="upload-ads-img" type="file" id="upload-ad-img">
          </div>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 mb-2 justify-content-center align-items-center">
          <label style="visibility:hidden;" class="mb-2 filter-by-p">Add Advertisement</label>
          <button type="submit" class="btn btn-primary feature-btn"><i class="fa-solid fa-plus me-2"></i>Add
            Advertisement</button>
        </div>
      </div>
    </form>

    <!-- Table Row -->
    <div class="row mt-4">
      <div class="col-lg-12">
        <div class="card datatable-card">
          <div class="card-body">
            <table id="data-table" class="table nowrap align-middle" style="width:100%">
              <thead>
                <tr>
                  <th>SN</th>
                  <th>TITLE NAME</th>
                  <th>CREATED ON</th>
                  <th>PREVIEW</th>
                  <th>STATUS</th>
                  <th>ACTION</th>
                </tr>
              </thead>
            

              </tbody>


            </table>

          </div>
        </div>
      </div>
    </div>

   

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




@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