@extends('layouts.app')

@section('content')
<main class="listings-main">
  <div class="container">
    <div class="choose-listing-type mb-4 d-flex justify-content-between align-items-center flex-wrap">
      <div class="user-count mt-2 mt-md-0">
        <div class="d-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-light shadow-sm border border-info" style="min-width: 200px;">
          <div class="d-flex flex-column">
            <span class="text-muted" style="font-size: 0.95rem;">
              <i class="bi bi-stars text-info me-1"></i>
              <span>
                {!! __('messages.thanks_for_joining_x_others_on_nazzela', ['count' => '<span class="fw-bold text-info">'.($totalUsers ?? 0).'</span>']) !!}
              </span>
            </span>
          </div>
        </div>
      </div>
      
      <div class="invite-link-group d-flex align-items-center mt-2 mb-2 mt-md-0">
        <div class="input-group">
          <span class="input-group-text">{{ __('messages.invite_link') }}</span>
          <input type="text" class="form-control" id="inviteUrlInput" value="{{ $inviteUrl }}" readonly style="max-width: 320px;">
          <button class="btn " type="button" id="copyInviteUrlBtn" title="{{ __('messages.copy_link') }}">
            <i class="bi bi-clipboard"></i>
          </button>
          <button class="btn" type="button" data-bs-toggle="modal" data-bs-target="#qrCodeModal" title="{{ __('messages.show_qr_code') }}">
            <i class="bi bi-qr-code"></i>
          </button>
        </div>
      </div>
      <button class="btn btn-primary-custom" data-bs-toggle="modal" data-bs-target="#chooseListingTypeModal">
        <i class="bi bi-plus-lg"></i>
        {{ __('messages.create_new_listing') }}
      </button>
    </div>
    
    <!-- Page Header -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <i class="bi bi-grid-3x3-gap-fill me-3"></i>
          {{ __('messages.my_listings') }}
        </h1>
        <p class="page-subtitle">{{ __('messages.manage_services_goods') }}</p>
      </div>
      <div class="header-stats">
        <div class="stat-card">
          <div class="stat-number">{{ count($data['items']) + count($data['services'])}}</div>
          <div class="stat-label">{{ __('messages.total_listings') }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">
            {{ collect($data['items'])->merge($data['services'])->where('status', 1)->count() }}
          </div>
          <div class="stat-label">{{ __('messages.active') }}</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-number">
            {{ $customerBalance['total_balance'] ?? 0 }} {{ $customerBalance['token_currency'] ?? '' }}
          </div>
          <div class="stat-label">{{ __('messages.total_balance') }}</div>
        </div>
      </div>
    </div>

    <div class="filters-section">
      <div class="category-tabs">
        <button class="tab-btn active" data-category="all">
          <i class="bi bi-grid-3x3-gap"></i>
          {{ __('messages.all_items') }}
        </button>
        <button class="tab-btn" data-category="services">
          <i class="bi bi-tools"></i>
          {{ __('messages.services') }}
        </button>
        <button class="tab-btn" data-category="goods">
          <i class="bi bi-box-seam"></i>
          {{ __('messages.goods') }}
        </button>
      </div>

      <!-- Search and Status Filter -->
      <div class="filter-controls">
        <div class="search-container">
          <i class="bi bi-search"></i>
          <input type="text" class="search-input" placeholder="{{ __('messages.search_listings') }}" id="searchInput">
        </div>
        <div class="status-filter">
          <select class="status-select" id="statusFilter">
            <option value="all">{{ __('messages.all_status') }}</option>
            <option value="active">{{ __('messages.active') }}</option>
            <option value="draft">{{ __('messages.draft') }}</option>
          </select>
          <i class="bi bi-chevron-down"></i>
        </div>
      </div>
    </div>

    <!-- Listings Grid -->
    <div class="listings-container">
      <div class="listings-grid" id="listingsGrid">
        @foreach ($data as $key => $listings)
        @foreach ($listings as $item)
        <div class="listing-item" data-id="1">
          <div class="listing-image">
            <img src="{{ asset($item['image']) }}" alt="{{ $item['name'] }}">
            <i class="bi bi-tools" style="display: none;"></i>
          </div>
          <div class="listing-content">
            <div class="listing-header">
              <h3 class="listing-title">
                {{ $item['name'] }}
                <span class="category-badge" data-categoryType="{{ $item['type'] == 'service' ? 'services' : 'goods' }}">
                  <i class="bi {{ $item['type'] == 'service' ? 'bi-tools' : 'bi-box-seam' }}"></i>
                  {{ $item['type'] == 'service' ? __('messages.services') : __('messages.goods') }}
                </span>
              </h3>
              <span class="listing-status status-{{ $item['status'] == 1 ? 'active' : 'draft' }}" data-status="{{ $item['status'] == 1 ? 'active' : 'draft' }}">
                {{ $item['status'] == 1 ? __('messages.active') : __('messages.draft') }}
              </span>
            </div>
            <div class="listing-meta">
              <div class="listing-date">
                <i class="bi bi-calendar3"></i>
                <span>{{ \Carbon\Carbon::parse($item['created_at'])->format('M d, Y') }}</span>
              </div>
              <div class="listing-price">{{ $item['currency_sign'] }}{{ $item['new_price'] ?? $item['price']  }}</div>
            </div>
          </div>
          <div class="listing-actions">
            <a class="action-btn edit-btn" data-id="1" title="Edit listing" href="{{ route('web.marketplace.viewItem', ['item_hashcode' => $item['hashcode']]) }}">
              <i class="bi bi-pencil"></i>
            </a>
            <!-- <button class="action-btn delete-btn" data-id="1" title="Delete listing">
              <i class="bi bi-trash"></i>
            </button> -->
          </div>
        </div>
        @endforeach
        @endforeach

      </div>
      <!-- Empty State -->
      <div class="empty-state" id="emptyState" style="display: none;">
        <div class="empty-icon">
          <i class="bi bi-inbox"></i>
        </div>
        <h3>{{ __('messages.no_listings_found') }}</h3>
        <p>{{ __('messages.try_adjusting_search_filter') }}</p>
        
        <button class="btn btn-primary-custom" data-bs-toggle="modal" data-bs-target="#chooseListingTypeModal">
            <i class="bi bi-plus-lg"></i>
            {{ __('messages.create_new_listing') }}
        </button>
      </div>
    </div>
  </div>
  <div class="modal fade" id="qrCodeModal" tabindex="-1" aria-labelledby="qrCodeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-center">
          <div class="modal-header">
            <h5 class="modal-title" id="qrCodeModalLabel">{{ __('messages.share_invitation_link') }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
            <div class="modal-body d-flex flex-column align-items-center justify-content-center">
            <div id="qrCodeContainer" class="mb-3 d-flex justify-content-center"></div>
            <button class="btn btn-primary-custom" id="saveQrBtn">
              <i class="bi bi-download"></i> {{ __('messages.save_qr_code') }}
            </button>
            </div>
        </div>
      </div>
    </div>
</main>

@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Tab switching animation and filtering
    const tabBtns = document.querySelectorAll('.tab-btn');
    const listings = document.querySelectorAll('.listing-item');
    const searchInput = document.getElementById('searchInput');
    const statusFilter = document.getElementById('statusFilter');
    const emptyState = document.getElementById('emptyState');

    function filterListings() {
      const category = document.querySelector('.tab-btn.active').dataset.category;
      const search = searchInput.value.trim().toLowerCase();
      const status = statusFilter.value;

      let visibleCount = 0;

      listings.forEach(item => {
        const title = item.querySelector('.listing-title').textContent.toLowerCase();
        const cat = item.querySelector('.category-badge').getAttribute('data-categoryType');
        const stat = item.querySelector('.listing-status').getAttribute('data-status');

        let show = true;
        if (category !== 'all' && !cat.includes(category)) show = false;
        if (status !== 'all' && stat !== status) show = false;
        if (search && !title.includes(search)) show = false;

        if (show) {
          item.style.display = '';
          item.classList.add('animate__animated', 'animate__fadeIn');
          visibleCount++;
        } else {
          item.style.display = 'none';
          item.classList.remove('animate__animated', 'animate__fadeIn');
        }
      });

      emptyState.style.display = visibleCount === 0 ? '' : 'none';
    }

    tabBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        tabBtns.forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        filterListings();
      });
    });

    searchInput.addEventListener('input', filterListings);
    statusFilter.addEventListener('change', filterListings);

    // Initial filter
    filterListings();

    // Copy to clipboard
      document.getElementById('copyInviteUrlBtn').addEventListener('click', function() {
        const input = document.getElementById('inviteUrlInput');
        input.select();
        input.setSelectionRange(0, 99999);
        document.execCommand('copy');
        this.innerHTML = '<i class="bi bi-clipboard-check"></i>';

        // Create tooltip
        let tooltip = document.createElement('span');
        tooltip.className = 'copy-tooltip';
        tooltip.textContent = 'Copied!';
        tooltip.style.position = 'absolute';
        tooltip.style.top = '-28px';
        tooltip.style.left = '50%';
        tooltip.style.transform = 'translateX(-50%)';
        tooltip.style.background = '#222';
        tooltip.style.color = '#fff';
        tooltip.style.padding = '2px 8px';
        tooltip.style.borderRadius = '4px';
        tooltip.style.fontSize = '12px';
        tooltip.style.zIndex = '10';
        tooltip.style.pointerEvents = 'none';

        this.style.position = 'relative';
        this.appendChild(tooltip);

        setTimeout(() => {
          this.innerHTML = '<i class="bi bi-clipboard"></i>';
          if (tooltip && tooltip.parentNode) {
        tooltip.parentNode.removeChild(tooltip);
          }
        }, 1200);
      });

      // Generate QR code on modal show
      let qr;
      const qrModal = document.getElementById('qrCodeModal');
      qrModal.addEventListener('show.bs.modal', function () {
        const url = document.getElementById('inviteUrlInput').value;
        const qrContainer = document.getElementById('qrCodeContainer');
        qrContainer.innerHTML = '';
        qr = new QRCode(qrContainer, {
          text: url,
          width: 200,
          height: 200,
          correctLevel: QRCode.CorrectLevel.H
        });
      });

      // Save QR code as image
      document.getElementById('saveQrBtn').addEventListener('click', function() {
        const img = document.querySelector('#qrCodeContainer img');
        if (img) {
          const a = document.createElement('a');
          a.href = img.src;
          a.download = 'invite-qr.png';
          a.click();
        }
      });
  });
</script>
@endpush