@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">Category AD</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">Category AD</h6>
                <hr>
                <form action="{{ route('Category_addpost') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-lg-12">
                        
                          <div class="form-group mb-3">
                            <label for="subcategory_id" class="form-label">Select Subcategory</label>
                            <select name="category_id" id="category_id" class="form-select">
                                <option value="">-- Select category --</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </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-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-3">
    <label class="mb-2">WhatsApp Number</label>
    <input type="text"
           name="whatsapp_number"
           class="form-control"
           value="{{ old('whatsapp_number') }}" maxlength="10"
           oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10)"
           placeholder="Enter WhatsApp Number">
</div>

<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-3">
    <label class="mb-2">Phone Number</label>
    <input type="text"
           name="phone_number"
           class="form-control"
           value="{{ old('phone_number') }}" maxlength="10"
           oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10)"
           placeholder="Enter Phone Number">
</div>

<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-3">
    <label class="mb-2">Link URL</label>
    <input type="url"
           name="link"
           class="form-control"
           value="{{ old('url') }}"
           placeholder="https://example.com">
</div>
                            <input type="hidden" name="type" value="category">
                
                            <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>
                </form>
                
                
            </div>
        </div>
    </div>
    
    <!-- Notification Table -->
    <div class="row mt-3">
        <div class="col-lg-12">
            <h5>History</h5>
            <div class="card p-2 mt-2">
                <div class="table-responsive mt-3">
                  <table id="data-table" class="table nowrap align-middle" style="width:100%">
                    <thead>
                      <tr>
                        <th>SN</th>
                        <th>CREATED ON</th>
                        <th>SUBCATEGORY</th>
                        <th>PREVIEW</th>
                        <th>WHATSAPP NO.</th>
                                    <th>PHONE NO.</th>
                                    <th>LINK</th>
                        <th>STATUS</th>
                        <th>ACTION</th>
                      </tr>
                    </thead>
                    @php
                      $sn = 1; 
                    @endphp
                    <tbody>
                      @foreach ($advertisement as $advertise)
                        <tr>
                          <td>{{ $loop->iteration }}</td>
                          <td>{{ $advertise->created_at ->format('Y-m-d') }}</td>
                          <td>{{ $advertise->subcategory}}</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/'
                )
            ) {
                $advertiseImageUrl =
                    rtrim(
                        $digitalOceanBaseUrl,
                        '/'
                    ) .
                    '/' .
                    $storedImage;

            /*
            |--------------------------------------------------------------------------
            | Old local image 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->whatsapp_number ?: '-' }}</td>
<td>{{ $advertise->phone_number ?: '-' }}</td>
<td>{{ $advertise->link ?: '-' }}</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" 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('deleteadvertisement') }}" 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>

<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