@extends('user.layouts')
@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
<style>
  .ad-upload-wrapper {
    border: 2px dashed #c7d2fe;
    border-radius: 16px;
    padding: 50px 20px;
    cursor: pointer;
    background: #fff;
    transition: 0.3s;
  }

  .preview-image {
    width: 342px;
    height: 170px;
    object-fit: cover;
    border-radius: 10px;
    margin: auto;
    display: block;
  }

  .ad-upload-wrapper:hover {
    border-color: #4f46e5;
  }

  .upload-icon {
    font-size: 40px;
    color: #1e3a8a;
  }

  .click-to-upload {
    font-size: 18px;
    font-weight: 500;
    color: #1f2937;
  }

  .feature-btn {
    border-radius: 12px;
    padding: 12px 30px;
    font-weight: 600;
  }
</style>
@section('content')
<div class="container-fluid page-wrapper">
  <div class="row">
    <div class="">
      <h3 class="page-top-heading">Advertisement</h3>
    </div>
  </div>
  <div class="row justify-content-center mt-4">
    <div class="col-xl-11 col-lg-11 col-md-12">

      <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-4 p-lg-5">

          <h2 class="fw-bold mb-4">Add Advertisement</h2>

          <form action="{{ route('add_advertisement') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <!-- Title -->
            <div class="mb-4">
              <label class="mb-2 filter-by-p">Advertisement Title</label>

              <input
                type="text"
                name="title"
                class="form-control filter-input @error('title') is-invalid @enderror"
                placeholder="Enter Advertisement Title"
                value="{{ old('title') }}"
                required>

              @error('title')
              <div class="invalid-feedback">
                {{ $message }}
              </div>
              @enderror
            </div>

            <!-- Upload -->
            <div class="mb-4">

              <label class="mb-2 filter-by-p">
                Image
                <small class="text-muted">
                  (342px × 170px)
                </small>
              </label>

              <div class="ad-upload-wrapper text-center"
                id="ad-upload-wrapper">

                <div id="ad-upload-conditions">

                  <div class="mb-3">
                    <i class="fa-solid fa-file-arrow-up upload-icon"></i>
                  </div>

                  <p class="click-to-upload mb-2">
                    Click to Upload
                  </p>

                  <small class="text-muted">
                    ( Max file size: 2048 jpeg,png,jpg,gif,svg )
                  </small>

                </div>

                <!-- Preview -->
                <img
                  src=""
                  id="ad-img-view"
                  class="img-fluid rounded d-none preview-image">

                <!-- File Input -->
                <input
                  type="file"
                  name="image"
                  id="upload-ad-img"
                  class="d-none"
                  accept="image/jpeg,image/jpg,image/png">

              </div>

              @error('image')
              <div class="text-danger mt-2">
                {{ $message }}
              </div>
              @enderror

            </div>

            <!-- Button -->
             <div class="text-center mt-3">
    <button type="submit"
        id="addAdvertisementBtn"
        class="btn btn-primary feature-btn px-4">
        <i class="fa-solid fa-plus me-2"></i>
        Add Advertisement
    </button>
</div>

          </form>

        </div>
      </div>

    </div>
  </div>
  <!-- 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>
            @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>
                  @if ($advertise->image)
                  <img src="{{ $advertise->image }}" class="preview-td-img" alt="preview-image">
                  @else
                  <p>Null</p>
                  @endif
                </td>
                <td>
                  @if ($advertise->is_active == 0)
                  <span class="active-status">Inactive</span>
                  @else
                  <span class="active-status">Active</span>
                  @endif
                </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>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </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_advertisement') }}" 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" id="hideSubmitBtn" 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_advertisement') }}" 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" id="deleteSubmitBtn" 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>
  // Add Advertisement Submit
  document.addEventListener("DOMContentLoaded", function() {

    const addForm = document.querySelector('form[action="{{ route("add_advertisement") }}"]');
    const addBtn = document.getElementById('addAdvertisementBtn');

    if (addForm) {
      addForm.addEventListener('submit', function() {

        addBtn.disabled = true;

        addBtn.innerHTML = `
                    <span class="spinner-border spinner-border-sm me-2"></span>
                    Submitting...
                `;
      });
    }

  });
</script>

<script>
  // Hide/Unhide Submit
  document.addEventListener("DOMContentLoaded", function() {

    const hideForm = document.querySelector('form[action="{{ route("hide_advertisement") }}"]');
    const hideBtn = document.getElementById('hideSubmitBtn');

    if (hideForm) {
      hideForm.addEventListener('submit', function() {

        hideBtn.disabled = true;

        hideBtn.innerHTML = `
                    <span class="spinner-border spinner-border-sm me-2"></span>
                    Processing...
                `;
      });
    }

  });
</script>

<script>
  // Delete Submit
  document.addEventListener("DOMContentLoaded", function() {

    const deleteForm = document.querySelector('form[action="{{ route("delete_advertisement") }}"]');
    const deleteBtn = document.getElementById('deleteSubmitBtn');

    if (deleteForm) {
      deleteForm.addEventListener('submit', function() {

        deleteBtn.disabled = true;

        deleteBtn.innerHTML = `
                    <span class="spinner-border spinner-border-sm me-2"></span>
                    Deleting...
                `;
      });
    }

  });
</script>

@endsection
@section('footer')

<script>
  document.addEventListener("DOMContentLoaded", function() {

    const uploadInput = document.getElementById('upload-ad-img');
    const imgView = document.getElementById('ad-img-view');
    const uploadConditions = document.getElementById('ad-upload-conditions');
    const uploadWrapper = document.getElementById('ad-upload-wrapper');

    // Click wrapper to open file chooser
    uploadWrapper.addEventListener('click', function() {
      uploadInput.click();
    });

    // Preview selected image
    uploadInput.addEventListener('change', function(e) {

      const file = e.target.files[0];

      if (file) {

        const reader = new FileReader();

        reader.onload = function(event) {

          imgView.src = event.target.result;

          imgView.classList.remove('d-none');

          uploadConditions.classList.add('d-none');
        };

        reader.readAsDataURL(file);
      }
    });

  });
</script>
<!-- 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