@extends('admin.layouts.app')

@section('title', 'Məhsullar')

@section('content')
<div class="admin-header-row">
    <div>
        <h1 class="admin-title">Məhsullar</h1>
        <p class="admin-page-description">Bütün məhsullar. Ana səhifədə görünənləri “Ana səhifə məhsulları” bölməsindən seçin.</p>
    </div>
    <div class="admin-actions">
        <a href="{{ route('admin.homepage-products.edit') }}" class="admin-btn admin-btn-secondary">Ana səhifə məhsulları</a>
        <a href="{{ route('admin.products.create') }}" class="admin-btn admin-btn-primary">+ Yeni məhsul</a>
    </div>
</div>

<form id="bulk-delete-products-form" method="POST" action="{{ route('admin.products.bulk-destroy') }}" onsubmit="return confirm('Seçilən məhsullar silinsin?')">
    @csrf
    @method('DELETE')
</form>

<div class="admin-card" style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px">
    <div style="color:#6b625f;font-size:14px">
        Seçdiyiniz məhsulları bir kliklə silə bilərsiniz.
    </div>
    <button type="submit" form="bulk-delete-products-form" class="admin-btn admin-btn-danger" id="bulk-delete-products-button" disabled>
        Seçilənləri sil
    </button>
</div>

<div class="admin-card admin-table-wrap">
    <table class="admin-table">
        <thead>
            <tr>
                <th style="width:44px">
                    <input type="checkbox" id="select-all-products" aria-label="Hamısını seç">
                </th>
                <th>Şəkil</th>
                <th>Məhsul</th>
                <th>Kateqoriya</th>
                <th>Qiymət</th>
                <th>Ana səhifə</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @forelse($products as $product)
                <tr>
                    <td>
                        <input
                            type="checkbox"
                            name="product_ids[]"
                            value="{{ $product->id }}"
                            form="bulk-delete-products-form"
                            class="product-bulk-checkbox"
                            aria-label="{{ $product->name }} seç"
                        >
                    </td>
                    <td>
                        @if($product->image)
                            <img src="{{ asset('images/' . $product->image) }}" class="admin-product-thumb" alt="">
                        @endif
                    </td>
                    <td>
                        <strong>{{ $product->name }}</strong><br>
                        <small>{{ $product->status === 'new' ? 'Yeni' : ($product->status === 'sale' ? 'Endirimdə' : 'Satışdadır') }}</small>
                    </td>
                    <td>{{ $product->category?->name }}</td>
                    <td>{{ $product->formattedPrice() }}</td>
                    <td>{{ $product->is_featured ? '✓ Görünür' : '—' }}</td>
                    <td class="admin-actions">
                        <a href="{{ route('admin.products.edit', $product) }}" class="admin-btn admin-btn-secondary">Dəyiş</a>
                        <form method="POST" action="{{ route('admin.products.destroy', $product) }}" onsubmit="return confirm('Məhsul silinsin?')">
                            @csrf
                            @method('DELETE')
                            <button class="admin-btn admin-btn-danger">Sil</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7">Hələ məhsul yoxdur.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

{{ $products->links() }}

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const selectAll = document.getElementById('select-all-products');
        const checkboxes = [...document.querySelectorAll('.product-bulk-checkbox')];
        const deleteButton = document.getElementById('bulk-delete-products-button');

        const refreshState = () => {
            const checkedCount = checkboxes.filter((checkbox) => checkbox.checked).length;
            deleteButton.disabled = checkedCount === 0;

            if (selectAll) {
                selectAll.checked = checkedCount > 0 && checkedCount === checkboxes.length;
                selectAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
            }
        };

        selectAll?.addEventListener('change', () => {
            checkboxes.forEach((checkbox) => {
                checkbox.checked = selectAll.checked;
            });
            refreshState();
        });

        checkboxes.forEach((checkbox) => checkbox.addEventListener('change', refreshState));
        refreshState();
    });
</script>
@endsection