@extends('layouts.admin')

@section('title', 'Admin - Products')

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white">{{ __('admin.product_management') }}</h1>
        <div class="flex items-center gap-2">
            <a href="{{ route('admin.products.create') }}" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-lg transition duration-200">
                {{ __('admin.add_new_product') }}
            </a>
            <button type="button" id="bulk-delete-btn" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-200 hidden">
                {{ __('admin.delete_selected') }}
            </button>
        </div>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
        <div class="px-6 py-4 flex flex-col md:flex-row md:items-center gap-4">
            <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 flex-1">{{ __('admin.all_products') }}</h2>
            <div class="flex flex-col sm:flex-row flex-wrap items-stretch gap-2 md:justify-end w-full md:w-auto">
                <form method="GET" action="" class="flex flex-col sm:flex-row flex-wrap items-stretch gap-2 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm px-4 py-2 w-full md:w-auto">
                    <div class="flex flex-col sm:flex-row gap-2 w-full">
                        <label for="admin-sort" class="text-sm font-medium text-gray-700 dark:text-white whitespace-nowrap flex items-center">{{ __('admin.sort_by') }}</label>
                        <select id="admin-sort" name="sort" onchange="this.form.submit()" class="text-sm border border-gray-300 rounded-md px-3 py-1 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 w-full sm:w-auto">
                        <option value="latest" {{ request('sort', 'latest') == 'latest' ? 'selected' : '' }}>{{ __('admin.latest') }}</option>
                        <option value="name" {{ request('sort') == 'name' ? 'selected' : '' }}>{{ __('admin.name_a_z') }}</option>
                        <option value="name_desc" {{ request('sort') == 'name_desc' ? 'selected' : '' }}>{{ __('admin.name_z_a') }}</option>
                        <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>{{ __('admin.price_low_to_high') }}</option>
                        <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>{{ __('admin.price_high_to_low') }}</option>
                        <option value="featured" {{ request('sort') == 'featured' ? 'selected' : '' }}>{{ __('admin.featured') }}</option>
                    </select>
                    </div>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ __('admin.search_by_name_or_description') }}" class="text-sm border border-gray-300 rounded-md px-3 py-1 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 w-full sm:w-56" />
                    <button type="submit" class="px-4 py-1.5 bg-orange-500 hover:bg-orange-600 text-white rounded-md text-sm font-medium shadow w-full sm:w-auto">{{ __('admin.search') }}</button>
                </form>
            </div>
        </div>
        <div class="overflow-x-auto">
            <div class="block md:hidden text-xs text-gray-400 mb-2">← Sürüşdürərək cədvəli tam baxın</div>
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800 text-sm">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="py-3 px-4 text-center">
                            <input type="checkbox" id="select-all-products" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        </th>
                        <th class="py-3 px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('admin.image') }}</th>
                        <th class="py-3 px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('admin.name') }}</th>
                        <th class="py-3 px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden sm:table-cell">{{ __('admin.category') }}</th>
                        <th class="py-3 px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('admin.price') }}</th>
                        <th class="py-3 px-6 text-center text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">{{ __('admin.stock') }}</th>
                        <th class="py-3 px-6 text-center text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">{{ __('admin.status') }}</th>
                        <th class="py-3 px-6 text-center text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">{{ __('admin.view') }}</th>
                        <th class="py-3 px-6 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('admin.actions') }}</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($products as $product)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700" data-product-id="{{ $product->id }}">
                            <td class="py-4 px-4 text-center">
                                <input type="checkbox" class="product-checkbox rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" value="{{ $product->id }}">
                            </td>
                            <td class="py-4 px-6 whitespace-nowrap">
                                <img src="{{ $product->mainImage ? asset('storage/' . $product->mainImage->image_path) : ($product->images->first() ? asset('storage/' . $product->images->first()->image_path) : 'https://via.placeholder.com/80') }}" alt="{{ $product->name }}" class="w-16 h-16 object-cover rounded">
                            </td>
                            <td class="py-4 px-6 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $product->name }}</div>
                            </td>
                            <td class="py-4 px-6 whitespace-nowrap text-sm text-gray-500 hidden sm:table-cell">
                                {{ $product->category->name ?? 'N/A' }}
                            </td>
                            <td class="py-4 px-6 whitespace-nowrap text-sm text-gray-500">
                                @php
                                    $symbol = get_currency_symbol('AZN');
                                @endphp
                                @if($product->isDiscounted())
                                    <span class="line-through text-gray-500">{{ $symbol }}{{ number_format($product->price, 2) }}</span>
                                    <span class="text-red-600 font-bold">{{ $symbol }}{{ number_format($product->final_price, 2) }}</span>
                                @else
                                    <span>{{ $symbol }}{{ number_format($product->price, 2) }}</span>
                                @endif
                            </td>
                            <td class="py-4 px-6 whitespace-nowrap text-sm text-gray-500 text-center hidden md:table-cell">
                                {{ $product->stock_quantity }}
                            </td>
                            <td class="py-4 px-6 whitespace-nowrap text-center hidden md:table-cell">
                                @if($product->is_active)
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                        {{ __('admin.active') }}
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                        {{ __('admin.inactive') }}
                                    </span>
                                @endif
                            </td>
                            <td class="py-4 px-2 whitespace-nowrap text-center hidden md:table-cell">
                                <a href="{{ route('products.show', $product) }}" target="_blank" title="{{ __('admin.view_product') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 text-gray-500 hover:text-indigo-600 inline-block align-middle">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    <span class="sr-only">{{ __('admin.view_product') }}</span>
                                </a>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <a href="{{ route('admin.products.edit', $product) }}" class="text-orange-600 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300">{{ __('admin.edit') }}</a>
                                    <button type="button" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 delete-product-btn" data-url="{{ route('admin.products.destroy', $product) }}">{{ __('admin.delete') }}</button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                                {{ __('admin.no_products_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($products->hasPages())
        <div class="px-6 py-4">
            {{ $products->links() }}
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const serverAlert = document.querySelector('.bg-green-100[role="alert"]');
    if (serverAlert) {
        setTimeout(() => serverAlert.remove(), 500);
    }

    const selectAll = document.getElementById('select-all-products');
    const checkboxes = document.querySelectorAll('.product-checkbox');
    const bulkDeleteBtn = document.getElementById('bulk-delete-btn');

    function updateBulkDeleteBtn() {
        const anyChecked = Array.from(checkboxes).some(cb => cb.checked);
        bulkDeleteBtn.classList.toggle('hidden', !anyChecked);
    }

    if (selectAll) {
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(cb => { cb.checked = selectAll.checked; });
            updateBulkDeleteBtn();
        });
    }
    checkboxes.forEach(cb => {
        cb.addEventListener('change', function() {
            if (!cb.checked && selectAll.checked) selectAll.checked = false;
            updateBulkDeleteBtn();
        });
    });

    bulkDeleteBtn.addEventListener('click', function() {
        const selected = Array.from(checkboxes).filter(cb => cb.checked).map(cb => cb.value);
        if (selected.length === 0) return;
        if (!confirm('{{ __('admin.are_you_sure_you_want_to_delete_the_selected_products') }}')) return;
        fetch("{{ route('admin.products.bulk-action') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ action: 'delete', products: selected })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success !== false) {
                selected.forEach(id => {
                    const row = document.querySelector(`tr[data-product-id='${id}']`);
                    if (row) row.remove();
                });
                showProductSuccess('{{ __('admin.selected_products_deleted_successfully') }}');
                selectAll.checked = false;
                updateBulkDeleteBtn();
            } else {
                alert(data.message || '{{ __('admin.failed_to_delete_selected_products') }}');
            }
        })
        .catch(() => alert('{{ __('admin.failed_to_delete_selected_products') }}'));
    });

    document.querySelectorAll('.delete-product-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const url = this.getAttribute('data-url');
            const row = this.closest('tr');
            fetch(url, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    row.remove();
                    showProductSuccess('{{ __('admin.product_deleted_successfully') }}');
                } else {
                    alert(data.message || '{{ __('admin.failed_to_delete_product') }}');
                }
            })
            .catch(() => alert('{{ __('admin.failed_to_delete_product') }}'));
        });
    });

    function showProductSuccess(msg) {
        let alert = document.createElement('div');
        alert.className = 'bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4';
        alert.role = 'alert';
        alert.innerHTML = `<p>${msg}</p>`;
        document.querySelector('.container').prepend(alert);
        setTimeout(() => alert.remove(), 500);
    }
});
</script>
@endpush
@endsection