@extends('admin.layout')

@section('content')
<div class="content-card">
    
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px;">
    <!-- Card 1 -->
    <div style="background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; align-items: center; border-left: 5px solid #0170B9; border: 1px solid #eee; border-left-width: 5px; border-left-color: #0170B9;">
        <div style="width: 50px; height: 50px; background: rgba(1, 112, 185, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
            <i class="fa-solid fa-box-open" style="font-size: 22px; color: #0170B9;"></i>
        </div>
        <div>
            <h4 style="margin: 0; font-size: 24px; font-weight: 700; color: #333;">{{ $totalProducts }}</h4>
            <p style="margin: 5px 0 0; font-size: 14px; color: #666; font-weight: 500;">Total Products</p>
        </div>
    </div>

    <!-- Card 2 -->
    <div style="background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; align-items: center; border-left: 5px solid #2e7d32; border: 1px solid #eee; border-left-width: 5px; border-left-color: #2e7d32;">
        <div style="width: 50px; height: 50px; background: rgba(46, 125, 50, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
            <i class="fa-solid fa-tags" style="font-size: 22px; color: #2e7d32;"></i>
        </div>
        <div>
            <h4 style="margin: 0; font-size: 24px; font-weight: 700; color: #333;">{{ $productsWithPrice }}</h4>
            <p style="margin: 5px 0 0; font-size: 14px; color: #666; font-weight: 500;">Priced Products</p>
        </div>
    </div>

    <!-- Card 3 -->
    <div style="background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; align-items: center; border-left: 5px solid #e65100; border: 1px solid #eee; border-left-width: 5px; border-left-color: #e65100;">
        <div style="width: 50px; height: 50px; background: rgba(230, 81, 0, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
            <i class="fa-solid fa-comment-slash" style="font-size: 22px; color: #e65100;"></i>
        </div>
        <div>
            <h4 style="margin: 0; font-size: 24px; font-weight: 700; color: #333;">{{ $productsWithoutPrice }}</h4>
            <p style="margin: 5px 0 0; font-size: 14px; color: #666; font-weight: 500;">Unpriced Products</p>
        </div>
    </div>

    <!-- Card 4 -->
    <div style="background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; align-items: center; border-left: 5px solid #673ab7; border: 1px solid #eee; border-left-width: 5px; border-left-color: #673ab7;">
        <div style="width: 50px; height: 50px; background: rgba(103, 58, 183, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
            <i class="fa-solid fa-clock-rotate-left" style="font-size: 22px; color: #673ab7;"></i>
        </div>
        <div>
            <h4 style="margin: 0; font-size: 24px; font-weight: 700; color: #333;">{{ $recentProducts }}</h4>
            <p style="margin: 5px 0 0; font-size: 14px; color: #666; font-weight: 500;">Added This Week</p>
        </div>
    </div>
</div>
{{-- ── Filter Bar ── --}}
<div style="background:#fff; border:1px solid #eee; border-radius:10px; padding:16px 20px; margin-bottom:20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
    <div style="position:relative; flex:1; min-width:200px;">
        <i class="fas fa-search" style="position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#bbb;"></i>
        <input type="text" id="admin-search" placeholder="Search by product name..." oninput="adminFilter()"
            style="width:100%; padding:10px 10px 10px 38px; border:1px solid #ddd; border-radius:8px; font-size:14px; font-family:inherit; box-sizing:border-box;">
    </div>
    <select id="admin-price-filter" onchange="adminFilter()" style="padding:10px 14px; border:1px solid #ddd; border-radius:8px; font-size:14px; font-family:inherit; color:#555; background:#fff; cursor:pointer;">
        <option value="all">All Products</option>
        <option value="priced">With Price</option>
        <option value="free">No Price</option>
    </select>
    <button onclick="document.getElementById('admin-search').value=''; document.getElementById('admin-price-filter').value='all'; adminFilter();"
        style="padding:10px 16px; background:#f8f9fa; border:1px solid #ddd; border-radius:8px; font-size:14px; color:#666; cursor:pointer; font-family:inherit;">
        <i class="fas fa-times"></i> Clear
    </button>
    <span id="admin-count" style="font-size:13px; color:#888; white-space:nowrap;"></span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap:wrap; gap:12px;">
        <h3 style="margin: 0; border: none; padding: 0;">Manage Products</h3>
        <div style="display:flex; align-items:center; gap:15px; flex-wrap:wrap;">
            {{-- Show Hidden Toggle --}}
            <label id="show-hidden-label" style="display:flex; align-items:center; gap:10px; cursor:pointer; background:#fff; border:1px solid #eee; padding:8px 14px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.04);">
                <span style="font-size:14px; font-weight:600; color:#555;">Show Hidden</span>
                <span style="position:relative; display:inline-block; width:44px; height:24px;">
                    <input type="checkbox" id="show-hidden-toggle" style="opacity:0; width:0; height:0; position:absolute;">
                    <span id="toggle-track" style="position:absolute; top:0; left:0; right:0; bottom:0; background:#ccc; border-radius:24px; transition:.3s; cursor:pointer;">
                        <span id="toggle-knob" style="position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.3s; display:block;"></span>
                    </span>
                </span>
            </label>
            <a href="{{ route('admin.products.create') }}" style="background-color: #2e7d32; color: white; padding: 10px 20px; text-decoration: none; border-radius: 6px; font-weight: 500;"><i class="fa-solid fa-plus"></i> Add New Product</a>
        </div>
    </div>

    @if(session('success'))
        <div style="background-color: #e8f5e9; color: #2e7d32; padding: 15px; border-radius: 6px; margin-bottom: 20px;">
            {{ session('success') }}
        </div>
    @endif

    <table style="width: 100%; border-collapse: collapse; text-align: left;">
        <thead>
            <tr style="background-color: #f9f9f9; border-bottom: 2px solid #eee;">
                <th style="padding: 15px; font-weight: 600;">Photo</th>
                <th style="padding: 15px; font-weight: 600;">Name</th>
                <th style="padding: 15px; font-weight: 600;">Price</th>
                <th style="padding: 15px; font-weight: 600;">URL (Slug)</th>
                <th style="padding: 15px; font-weight: 600;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($products as $product)
              {{-- data-hidden for JS filtering --}}
            <tr style="border-bottom: 1px solid #eee;">
                <td style="padding: 15px;">
                    @if($product->photo)
                        <img src="{{ asset('storage/' . $product->photo) }}" alt="Product" style="width: 50px; height: 50px; object-fit: cover; border-radius: 6px;">
                    @else
                        <div style="width: 50px; height: 50px; background: #eee; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #aaa;"><i class="fa-solid fa-image"></i></div>
                    @endif
                </td>
                <td style="padding: 15px; font-weight: 500;">{{ $product->name }}
                      @if($product->is_hidden)
                          <span style="background: #ffebee; color: #d32f2f; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; margin-left: 5px;">Hidden</span>
                      @endif</td>
                <td style="padding: 15px;">{{ $product->price ? '$' . $product->price : 'N/A' }}</td>
                <td style="padding: 15px; color: #666; font-size: 14px;">{{ $product->url }}</td>
                <td style="padding: 15px;">
                    <a href="{{ route('admin.products.edit', $product) }}" style="color: #1565c0; text-decoration: none; margin-right: 10px;"><i class="fa-solid fa-pen-to-square"></i> Edit</a>
                    <form action="{{ route('admin.products.destroy', $product) }}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this product?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" style="color: #d32f2f; text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; font-size: inherit; font-family: inherit;"><i class="fa-solid fa-trash"></i> Delete</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" style="padding: 30px; text-align: center; color: #777;">No products found. Add your first product!</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
<script>
    const toggle = document.getElementById('show-hidden-toggle');
    const track = document.getElementById('toggle-track');
    const knob = document.getElementById('toggle-knob');
    const hiddenRows = document.querySelectorAll('.hidden-product');

    toggle.addEventListener('change', function() {
        if (this.checked) {
            track.style.backgroundColor = '#0170B9';
            knob.style.left = '23px';
            hiddenRows.forEach(row => row.style.display = '');
        } else {
            track.style.backgroundColor = '#ccc';
            knob.style.left = '3px';
            hiddenRows.forEach(row => row.style.display = 'none');
        }
    });
</script>
<script>
function adminFilter() {
    const search = document.getElementById('admin-search').value.toLowerCase();
    const priceFilter = document.getElementById('admin-price-filter').value;
    const showHidden = document.getElementById('show-hidden-toggle') ? document.getElementById('show-hidden-toggle').checked : false;
    const rows = document.querySelectorAll('tbody tr.product-row');
    let visible = 0;
    rows.forEach(function(row) {
        const name = (row.dataset.name || row.querySelector('td:nth-child(2)')?.innerText || '').toLowerCase();
        const hasPrice = row.dataset.price === '1';
        const isHidden = row.classList.contains('hidden-product');

        const matchSearch = !search || name.includes(search);
        const matchPrice = priceFilter === 'all' || (priceFilter === 'priced' && hasPrice) || (priceFilter === 'free' && !hasPrice);
        const matchHidden = showHidden || !isHidden;

        if (matchSearch && matchPrice && matchHidden) {
            row.style.display = '';
            visible++;
        } else {
            row.style.display = 'none';
        }
    });
    const countEl = document.getElementById('admin-count');
    if (countEl) countEl.textContent = 'Showing ' + visible + ' product(s)';
}
adminFilter();
</script>
@endsection