@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">Own Business</h3>
      </div>
    </div>
    <form action="{{ route('own_business_post') }}" method="POST" enctype="multipart/form-data" class="row gy-3 align-items-center">
      @csrf

      <div class="col-12">
        <label class="form-label">URL</label>
        <input type="text" name="url" class="form-control" placeholder="Enter your business URL" required>
        @error('url')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>
    

      <div class="col-12">
        <label class="form-label">Image <small class="ms-1" style="color:#979797;">(size 342px - 170px, Max 5MB, JPG Only)</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>
            <img src="" id="ad-img-view" class="img-fluid img-responsive" style="display: none;">
            <input style="display:none;" name="image" class="upload-ads-img" type="file" id="upload-ad-img" accept="image/jpeg">
        </div>
        @error('image')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>
      <div class="col-12 mt-3">
          <button type="submit" class="btn btn-primary submit-btn">
              <i class="fa-regular fa-circle-check me-2"></i>Submit
          </button>
      </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>CREATED ON</th>
                  <th>PREVIEW</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>
    @php
        $advertisementImageUrl = 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://'
                )
            ) {
                $advertisementImageUrl =
                    $storedImage;

            /*
            |--------------------------------------------------------------------------
            | DigitalOcean paths
            |--------------------------------------------------------------------------
            | icons/image.jpg
            | advertisement/image.jpg
            |--------------------------------------------------------------------------
            */
            } elseif (
                str_starts_with(
                    $storedImage,
                    'icons/'
                ) ||
                str_starts_with(
                    $storedImage,
                    'advertisement/'
                )
            ) {
                $advertisementImageUrl =
                    rtrim(
                        $digitalOceanBaseUrl,
                        '/'
                    ) .
                    '/' .
                    $storedImage;

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

    @if($advertisementImageUrl)

        <img src="{{ $advertisementImageUrl }}"
             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>
                      @if ($advertise->is_active == 0)
                        <span class="active-status">Inactive</span>
                      @else
                        <span class="active-status">Active</span>
                      @endif
                    </td>
                    <td>
                      <!-- Delete Button -->
                      <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>
                    
                      <!-- Toggle Status Button -->
                      <button type="button" data-bs-toggle="modal" data-bs-target="#StatusModal"
                        class="btn transparent-btn" data-id="{{ $advertise->id }}"
                        data-status="{{ $advertise->is_active }}" onclick="setStatusId(this)">
                        @if ($advertise->is_active == 1)
                          <i class="fa-solid fa-eye"></i>
                        @else
                          <i class="fa-solid fa-eye-slash"></i>
                        @endif
                      </button>
                    </td>
                    
                  </tr>
                @endforeach

              </tbody>


            </table>

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

  

    <!--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" 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-->
<!-- Status Modal -->
<div class="modal fade zoom-in" id="StatusModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body text-center">
        <img class="mb-3" src="{{ asset('/assets/images/icons/info-icon.svg') }}">
        <p class="my-4">Do you want to change the status?</p>
        <form action="{{ route('otoggle_status') }}" method="POST">
          @csrf
          <input type="hidden" name="status_id" id="status_id">
          <input type="hidden" name="current_status" id="current_status">
          <div class="d-flex justify-content-center mt-4">
            <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Yes, Change</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

  </div>
  <!-- end container fluid -->

  <script>
   function setDeleteId(button) {
  var id = button.getAttribute('data-user-id');
  document.getElementById('delete_id').value = id;
}

function setStatusId(button) {
  document.getElementById('status_id').value = button.getAttribute('data-id');
  document.getElementById('current_status').value = button.getAttribute('data-status');
}

  </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');

      document.getElementById('ad-upload-wrapper').addEventListener('click', function() {
          uploadInput.click();
      });

      uploadInput.addEventListener('change', function() {
          const file = this.files[0];
          if (file && file.type === 'image/jpeg' && file.size <= 5 * 1024 * 1024) {
              const reader = new FileReader();
              reader.onload = function() {
                  adImageView.src = reader.result;
                  uploadConditions.classList.add('d-none');
                  uploadWrapper.style.padding = '0';
                  adImageView.style.display = 'block';
              }
              reader.readAsDataURL(file);
          } else {
              alert('Please upload a JPG image with a maximum size of 5MB.');
              uploadInput.value = ''; 
              adImageView.src = '';
              adImageView.style.display = 'none';
              uploadConditions.classList.remove('d-none');
              uploadWrapper.style.padding = '';
          }
      });
  });
</script>

<script>
  const getDistrictsURL = "{{ url('/get-districts') }}";
  const getTaluksURL = "{{ url('/get-taluks') }}";
</script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
      const stateDropdown = document.getElementById('state_id');
      const districtDropdown = document.getElementById('district_id');
      const talukDropdown = document.getElementById('taluk_id');

      stateDropdown.addEventListener('change', function () {
          const stateId = this.value;
          districtDropdown.innerHTML = '<option value="">-- Select District --</option>';
          talukDropdown.innerHTML = '<option value="">-- Select Taluk --</option>';

          if (stateId) {
              fetch(`${getDistrictsURL}?state_id=${stateId}`)
                  .then(response => response.json())
                  .then(data => {
                      data.forEach(district => {
                          const option = document.createElement('option');
                          option.value = district.id;
                          option.textContent = district.district_name;
                          districtDropdown.appendChild(option);
                      });
                  });
          }
      });

      districtDropdown.addEventListener('change', function () {
          const districtId = this.value;
          talukDropdown.innerHTML = '<option value="">-- Select Taluk --</option>';

          if (districtId) {
              fetch(`${getTaluksURL}?district_id=${districtId}`)
                  .then(response => response.json())
                  .then(data => {
                      data.forEach(taluk => {
                          const option = document.createElement('option');
                          option.value = taluk.id;
                          option.textContent = taluk.taluk_name;
                          talukDropdown.appendChild(option);
                      });
                  });
          }
      });
  });
</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