@extends('admin.master')

@section('title', 'All Products')

@push('styles')
    <style>
        .catalog-page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 22px;
        }

        .catalog-page-header h1 {
            margin: 0 0 6px;
            font-size: 22px;
        }

        .catalog-page-header p {
            margin: 0;
            color: #8a94a6;
        }

        .product-count-badge {
            padding: 7px 13px;
            border-radius: 20px;
            background: #ecfdf3;
            color: #16a34a;
            font-size: 12px;
            font-weight: 700;
        }

        .catalog-search-card {
            margin-bottom: 22px;
            padding: 18px;
            border: 1px solid #dfe5ec;
            border-radius: 12px;
            background: #fff;
        }

        .catalog-search-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 10px;
        }

        .search-input-wrap {
            position: relative;
        }

        .search-input-wrap svg {
            position: absolute;
            top: 50%;
            left: 14px;
            width: 18px;
            color: #94a3b8;
            transform: translateY(-50%);
        }

        .catalog-search-input {
            width: 100%;
            height: 44px;
            padding: 10px 15px 10px 43px;
            border: 1px solid #dfe5ec;
            border-radius: 8px;
            outline: none;
        }

        .catalog-search-input:focus {
            border-color: #16a34a;
            box-shadow: 0 0 0 3px rgba(22, 163, 74, .1);
        }

        .catalog-green-button {
            display: inline-flex;
            min-height: 44px;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 10px 18px;
            border: 0;
            border-radius: 8px;
            background: #18a44b;
            color: #fff;
            cursor: pointer;
            font-weight: 700;
        }

        .search-help {
            margin-top: 10px;
            color: #9aa4b4;
            font-size: 12px;
        }

        .catalog-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            color: #7c8798;
            font-size: 13px;
        }

        .per-page-form {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .per-page-select {
            min-width: 70px;
            height: 38px;
            padding: 7px 10px;
            border: 1px solid #dfe5ec;
            border-radius: 8px;
            background: #fff;
        }

        .product-card-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .catalog-product-card {
            position: relative;
            overflow: hidden;
            border: 1px solid #dfe5ec;
            border-radius: 12px;
            background: #fff;
            transition: .2s ease;
        }

        .catalog-product-card:hover {
            border-color: #86efac;
            box-shadow: 0 8px 25px rgba(15, 23, 42, .06);
            transform: translateY(-2px);
        }

        .catalog-image-area {
            position: relative;
            display: block;
            height: 230px;
            overflow: hidden;
            border-bottom: 1px solid #edf1f5;
            background: #f8fafc;
        }

        .catalog-image-area img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: .25s;
        }

        .catalog-product-card:hover .catalog-image-area img {
            transform: scale(1.025);
        }

        .product-active-dot {
            position: absolute;
            z-index: 4;
            top: 10px;
            right: 10px;
            width: 12px;
            height: 12px;
            border: 3px solid #dcfce7;
            border-radius: 50%;
            background: #16a34a;
        }

        .product-inactive-dot {
            background: #94a3b8;
            border-color: #e2e8f0;
        }

        .image-hover-layer {
            position: absolute;
            z-index: 3;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(22, 163, 74, .08);
            opacity: 0;
            transition: .2s;
        }

        .catalog-product-card:hover .image-hover-layer {
            opacity: 1;
        }

        .hover-view-button {
            padding: 9px 18px;
            border-radius: 20px;
            background: #16a34a;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
        }

        .catalog-product-content {
            min-height: 135px;
            padding: 16px;
        }

        .catalog-product-name {
            display: block;
            margin-bottom: 8px;
            color: #263244;
            font-weight: 700;
            line-height: 1.45;
        }

        .catalog-product-sku {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 17px;
            color: #98a2b3;
            font-size: 12px;
        }

        .catalog-product-sku strong {
            color: #16a34a;
        }

        .catalog-copy-button {
            display: inline-grid;
            width: 23px;
            height: 23px;
            place-items: center;
            border: 1px solid #dfe5ec;
            border-radius: 5px;
            background: #fff;
            color: #16a34a;
            cursor: pointer;
        }

        .catalog-price {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .current-price {
            color: #172033;
            font-size: 17px;
            font-weight: 800;
        }

        .regular-price {
            color: #a6afbd;
            font-size: 13px;
            text-decoration: line-through;
        }

        .catalog-card-footer {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
            align-items: center;
            gap: 9px;
            min-height: 58px;
            padding: 10px 13px;
            border-top: 1px solid #edf1f5;
        }

        .catalog-switch-group {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #98a2b3;
            font-size: 11px;
            line-height: 1.1;
        }

        .catalog-switch {
            position: relative;
            display: inline-block;
            width: 39px;
            height: 22px;
            flex: 0 0 auto;
        }

        .catalog-switch input {
            width: 0;
            height: 0;
            opacity: 0;
        }

        .catalog-switch-slider {
            position: absolute;
            inset: 0;
            border-radius: 30px;
            background: #d9e0e8;
            cursor: pointer;
            transition: .2s;
        }

        .catalog-switch-slider::before {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
            content: "";
            transition: .2s;
        }

        .catalog-switch input:checked+.catalog-switch-slider {
            background: #18a44b;
        }

        .catalog-switch input:checked+.catalog-switch-slider::before {
            transform: translateX(17px);
        }

        .catalog-card-actions {
            display: flex;
            gap: 6px;
        }

        .catalog-icon-button {
            display: grid;
            width: 34px;
            height: 34px;
            place-items: center;
            border: 1px solid #dfe5ec;
            border-radius: 7px;
            background: #fff;
            color: #64748b;
            cursor: pointer;
        }

        .catalog-icon-button:hover {
            border-color: #16a34a;
            color: #16a34a;
        }

        .catalog-delete-button:hover {
            border-color: #ef4444;
            color: #ef4444;
        }

        .catalog-pagination {
            margin-top: 22px;
        }

        @media (max-width: 1200px) {
            .product-card-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 900px) {
            .product-card-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .catalog-search-row {
                grid-template-columns: 1fr 1fr;
            }

            .search-input-wrap {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 600px) {

            .catalog-page-header,
            .catalog-summary {
                align-items: flex-start;
                flex-direction: column;
                gap: 12px;
            }

            .catalog-search-row,
            .product-card-grid {
                grid-template-columns: 1fr;
            }

            .catalog-search-row>* {
                width: 100%;
            }

            .catalog-image-area {
                height: 280px;
            }
        }
    </style>
@endpush

@section('content')
    <div class="catalog-page-header">
        <div>
            <h1>All Products</h1>

            <p>Manage your store’s product catalog</p>
        </div>

        <div class="product-count-badge">
            ● {{ $totalProducts }} Products
        </div>
    </div>

    <div class="catalog-search-card">
        <form class="catalog-search-row" method="GET" action="{{ route('admin.products.index') }}">
            <input type="hidden" name="per_page" value="{{ $perPage }}">

            <div class="search-input-wrap">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.35-4.35"></path>
                </svg>

                <input class="catalog-search-input" type="search" name="search" value="{{ request('search') }}"
                    placeholder="Search by name or SKU">
            </div>

            <button class="catalog-green-button" type="submit">
                Search
            </button>

            <a class="catalog-green-button" href="{{ route('admin.products.create') }}">
                ＋ Add Product
            </a>
        </form>

        <div class="search-help">
            Searches published and unpublished products.
            Click All Results to view the complete product list.

            @if (request()->filled('search'))
                <a href="{{ route('admin.products.index', [
                    'per_page' => $perPage,
                ]) }}"
                    style="color:#16a34a; font-weight:700;">
                    All Results
                </a>
            @endif
        </div>
    </div>

    <div class="catalog-summary">
        <div>
            Showing
            <strong>{{ $products->firstItem() ?? 0 }}</strong>
            to
            <strong>{{ $products->lastItem() ?? 0 }}</strong>
            of
            <strong>{{ $products->total() }}</strong>
            products · Page
            <strong>{{ $products->currentPage() }}</strong>
            of
            <strong>{{ $products->lastPage() }}</strong>
        </div>

        <form class="per-page-form" method="GET" action="{{ route('admin.products.index') }}">
            <input type="hidden" name="search" value="{{ request('search') }}">

            <span>Per page:</span>

            <select class="per-page-select" name="per_page" onchange="this.form.submit()">
                @foreach ([8, 10, 12, 16, 20, 24] as $size)
                    <option value="{{ $size }}" @selected($perPage === $size)>
                        {{ $size }}
                    </option>
                @endforeach
            </select>
        </form>
    </div>

    <div class="product-card-grid">
        @forelse($products as $product)
            @php
                $displayPrice = $product->sale_price ?? $product->regular_price;

                $hasDiscount =
                    $product->sale_price !== null && (float) $product->sale_price < (float) $product->regular_price;
            @endphp

            <article class="catalog-product-card" id="product-card-{{ $product->id }}">
                <a class="catalog-image-area" href="{{ route('admin.products.show', $product) }}">
                    @if ($product->cover_image)
                        <img src="{{ asset('storage/' . $product->cover_image) }}" alt="{{ $product->name }}">
                    @else
                        <div
                            style="
                                display:grid;
                                width:100%;
                                height:100%;
                                place-items:center;
                                color:#94a3b8;
                            ">
                            No Image
                        </div>
                    @endif

                    <span
                        class="product-active-dot
                        {{ $product->is_published ? '' : 'product-inactive-dot' }}"
                        data-status-dot="{{ $product->id }}"></span>

                    <span class="image-hover-layer">
                        <span class="hover-view-button">
                            View Product
                        </span>
                    </span>
                </a>

                <div class="catalog-product-content">
                    <a class="catalog-product-name" href="{{ route('admin.products.show', $product) }}">
                        {{ $product->name }}
                    </a>

                    <div class="catalog-product-sku">
                        <span>SKU:</span>

                        <strong>{{ $product->sku }}</strong>

                        <button class="catalog-copy-button" type="button" data-copy="{{ $product->sku }}"
                            title="Copy SKU">
                            ⧉
                        </button>
                    </div>

                    <div class="catalog-price">
                        <span class="current-price">
                            ৳{{ number_format((float) $displayPrice, 0) }}
                        </span>

                        @if ($hasDiscount)
                            <span class="regular-price">
                                ৳{{ number_format((float) $product->regular_price, 0) }}
                            </span>
                        @endif
                    </div>
                </div>

                <div class="catalog-card-footer">
                    <div class="catalog-switch-group">
                        <label class="catalog-switch">
                            <input class="published-toggle" type="checkbox"
                                data-url="{{ route('admin.products.toggle-published', $product) }}"
                                data-product="{{ $product->id }}" @checked($product->is_published)>

                            <span class="catalog-switch-slider"></span>
                        </label>

                        <span data-published-label="{{ $product->id }}">
                            {{ $product->is_published ? 'Published' : 'Unpublished' }}
                        </span>
                    </div>

                    <div class="catalog-switch-group">
                        <label class="catalog-switch">
                            <input class="inventory-toggle" type="checkbox"
                                data-url="{{ route('admin.products.toggle-inventory', $product) }}"
                                data-product="{{ $product->id }}" @checked($product->track_stock)>

                            <span class="catalog-switch-slider"></span>
                        </label>

                        <span data-inventory-label="{{ $product->id }}">
                            Track Inventory
                            {{ $product->track_stock ? 'On' : 'Off' }}
                        </span>
                    </div>

                    <div class="catalog-card-actions">
                        <a class="catalog-icon-button" href="{{ route('admin.products.edit', $product) }}" title="Edit">
                            ✎
                        </a>

                        <form action="{{ route('admin.products.destroy', $product) }}" method="POST"
                            onsubmit="
                                return confirm(
                                    'Are you sure you want to delete this product?'
                                );
                            ">
                            @csrf
                            @method('DELETE')

                            <button
                                class="
                                    catalog-icon-button
                                    catalog-delete-button
                                "
                                type="submit" title="Delete">
                                ♙
                            </button>
                        </form>
                    </div>
                </div>
            </article>
        @empty
            <div
                style="
                    grid-column:1/-1;
                    padding:50px;
                    border:1px solid #dfe5ec;
                    border-radius:12px;
                    background:#fff;
                    text-align:center;
                    color:#94a3b8;
                ">
                No products found.
            </div>
        @endforelse
    </div>

    <div class="catalog-pagination">
        {{ $products->links() }}
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const csrfToken = document
                .querySelector('meta[name="csrf-token"]')
                .getAttribute('content');

            async function updateToggle(input, type) {
                const previousValue = !input.checked;

                input.disabled = true;

                try {
                    const response = await fetch(input.dataset.url, {
                        method: 'PATCH',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        }
                    });

                    const data = await response.json();

                    if (!response.ok || !data.success) {
                        throw new Error(data.message || 'Update failed');
                    }

                    const productId = input.dataset.product;

                    if (type === 'published') {
                        const label = document.querySelector(
                            `[data-published-label="${productId}"]`
                        );

                        const dot = document.querySelector(
                            `[data-status-dot="${productId}"]`
                        );

                        label.textContent = data.is_published ?
                            'Published' :
                            'Unpublished';

                        dot.classList.toggle(
                            'product-inactive-dot',
                            !data.is_published
                        );
                    }

                    if (type === 'inventory') {
                        const label = document.querySelector(
                            `[data-inventory-label="${productId}"]`
                        );

                        label.textContent = data.track_stock ?
                            'Track Inventory On' :
                            'Track Inventory Off';
                    }
                } catch (error) {
                    input.checked = previousValue;
                    alert(error.message);
                } finally {
                    input.disabled = false;
                }
            }

            document
                .querySelectorAll('.published-toggle')
                .forEach(function(input) {
                    input.addEventListener('change', function() {
                        updateToggle(this, 'published');
                    });
                });

            document
                .querySelectorAll('.inventory-toggle')
                .forEach(function(input) {
                    input.addEventListener('change', function() {
                        updateToggle(this, 'inventory');
                    });
                });

            document
                .querySelectorAll('[data-copy]')
                .forEach(function(button) {
                    button.addEventListener('click', async function() {
                        try {
                            await navigator.clipboard.writeText(
                                this.dataset.copy
                            );

                            const oldText = this.textContent;

                            this.textContent = '✓';

                            setTimeout(() => {
                                this.textContent = oldText;
                            }, 1200);
                        } catch (error) {
                            alert('SKU copy করা যায়নি.');
                        }
                    });
                });
        });
    </script>
@endpush