@extends('layouts.bootstrap')

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

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-arrow-down-up me-2"></i>Merge Products
    </h1>
    <div>
        <a href="{{ route('products.index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Products
        </a>
        <a href="{{ route('products.merge.history') }}" class="btn btn-info">
            <i class="bi bi-clock-history me-1"></i>Merge History
        </a>
    </div>
@endsection

@section('content')
<div class="container-fluid">
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="bi bi-check2-square me-2"></i>Select Products to Merge
            </h5>
            <small class="text-muted">Select 2 or more products to merge into a single consolidated product</small>
        </div>
        <div class="card-body">
            <!-- Search and Filter Form -->
            <form method="GET" class="mb-4">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" class="form-control" name="search" 
                                   value="{{ request('search') }}" placeholder="Search products...">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <select name="category_id" class="form-select">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" 
                                        {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-funnel me-1"></i>Filter
                        </button>
                    </div>
                </div>
            </form>

            <!-- Merge Form -->
            <form id="mergeForm" method="POST" action="{{ route('products.merge.confirm') }}">
                @csrf
                
                <!-- Selection Controls -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <button type="button" id="selectAll" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-check-all me-1"></i>Select All
                        </button>
                        <button type="button" id="clearAll" class="btn btn-sm btn-outline-secondary">
                            <i class="bi bi-x-square me-1"></i>Clear All
                        </button>
                        <span id="selectedCount" class="badge bg-info ms-2">0 selected</span>
                    </div>
                    <button type="submit" id="mergeButton" class="btn btn-success" disabled>
                        <i class="bi bi-arrow-down-up me-1"></i>Proceed to Merge
                    </button>
                </div>

                <!-- Products Table -->
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th width="50">
                                    <input type="checkbox" id="masterCheckbox" class="form-check-input">
                                </th>
                                <th>Product Name</th>
                                <th>Category</th>
                                <th>Country</th>
                                <th>Price</th>
                                <th>Unit</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($products as $product)
                                <tr>
                                    <td>
                                        <input type="checkbox" name="product_ids[]" 
                                               value="{{ $product->id }}" 
                                               class="form-check-input product-checkbox">
                                    </td>
                                    <td>
                                        <strong>{{ $product->name }}</strong>
                                        @if($product->description)
                                            <br><small class="text-muted">{{ Str::limit($product->description, 50) }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        @if($product->category)
                                            <span class="badge bg-primary">{{ $product->category->name }}</span>
                                            @if($product->subcategory)
                                                <br><small class="text-muted">{{ $product->subcategory->name }}</small>
                                            @endif
                                        @else
                                            <span class="text-muted">Not set</span>
                                        @endif
                                    </td>
                                    <td>{{ $product->country_of_origin ?? 'Not set' }}</td>
                                    <td>
                                        @if($product->price)
                                            ৳{{ number_format($product->price, 2) }}
                                        @else
                                            <span class="text-muted">Not set</span>
                                        @endif
                                    </td>
                                    <td>{{ $product->measurement_unit ?? 'Not set' }}</td>
                                    <td>
                                        @if($product->isComplete())
                                            <span class="badge bg-success">Complete</span>
                                        @else
                                            <span class="badge bg-warning">Incomplete</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-4">
                                        <i class="bi bi-inbox display-4 text-muted"></i>
                                        <p class="text-muted mt-2">No products found matching your criteria.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Enhanced Pagination -->
                @if($products->hasPages())
                    <div class="row mt-4">
                        <div class="col-md-6 d-flex align-items-center">
                            <!-- Results Info -->
                            <div class="pagination-info">
                                <span class="text-muted">
                                    Showing
                                    <strong>{{ $products->firstItem() ?? 0 }}</strong>
                                    to
                                    <strong>{{ $products->lastItem() ?? 0 }}</strong>
                                    of
                                    <strong>{{ $products->total() }}</strong>
                                    products
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6 d-flex align-items-center justify-content-end">
                            <!-- Per Page Selector -->
                            <div class="d-flex align-items-center">
                                <label for="per_page" class="form-label mb-0 me-2 text-muted">Show:</label>
                                <select id="per_page" class="form-select form-select-sm" style="width: auto;" onchange="changePerPage(this.value)">
                                    <option value="10" {{ request('per_page', 20) == 10 ? 'selected' : '' }}>10</option>
                                    <option value="20" {{ request('per_page', 20) == 20 ? 'selected' : '' }}>20</option>
                                    <option value="50" {{ request('per_page', 20) == 50 ? 'selected' : '' }}>50</option>
                                    <option value="100" {{ request('per_page', 20) == 100 ? 'selected' : '' }}>100</option>
                                </select>
                                <small class="text-muted ms-2">per page</small>
                            </div>
                        </div>
                    </div>

                    <!-- Custom Pagination Links -->
                    <div class="row">
                        <div class="col-12">
                            <nav aria-label="Products pagination" class="d-flex justify-content-center">
                                <ul class="pagination pagination-lg shadow-sm">
                                    {{-- First Page Link --}}
                                    @if ($products->currentPage() > 3)
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $products->appends(request()->query())->url(1) }}"
                                               title="First Page">
                                                <i class="bi bi-chevron-double-left"></i>
                                            </a>
                                        </li>
                                    @endif

                                    {{-- Previous Page Link --}}
                                    @if ($products->onFirstPage())
                                        <li class="page-item disabled">
                                            <span class="page-link">
                                                <i class="bi bi-chevron-left"></i>
                                            </span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $products->appends(request()->query())->previousPageUrl() }}"
                                               title="Previous Page">
                                                <i class="bi bi-chevron-left"></i>
                                            </a>
                                        </li>
                                    @endif

                                    {{-- Pagination Elements --}}
                                    @foreach ($products->appends(request()->query())->getUrlRange(max(1, $products->currentPage() - 2), min($products->lastPage(), $products->currentPage() + 2)) as $page => $url)
                                        @if ($page == $products->currentPage())
                                            <li class="page-item active">
                                                <span class="page-link bg-primary border-primary">
                                                    {{ $page }}
                                                    <span class="visually-hidden">(current)</span>
                                                </span>
                                            </li>
                                        @else
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                            </li>
                                        @endif
                                    @endforeach

                                    {{-- Next Page Link --}}
                                    @if ($products->hasMorePages())
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $products->appends(request()->query())->nextPageUrl() }}"
                                               title="Next Page">
                                                <i class="bi bi-chevron-right"></i>
                                            </a>
                                        </li>
                                    @else
                                        <li class="page-item disabled">
                                            <span class="page-link">
                                                <i class="bi bi-chevron-right"></i>
                                            </span>
                                        </li>
                                    @endif

                                    {{-- Last Page Link --}}
                                    @if ($products->currentPage() < $products->lastPage() - 2)
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $products->appends(request()->query())->url($products->lastPage()) }}"
                                               title="Last Page">
                                                <i class="bi bi-chevron-double-right"></i>
                                            </a>
                                        </li>
                                    @endif
                                </ul>
                            </nav>
                        </div>
                    </div>
                @endif
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const masterCheckbox = document.getElementById('masterCheckbox');
    const productCheckboxes = document.querySelectorAll('.product-checkbox');
    const selectedCount = document.getElementById('selectedCount');
    const mergeButton = document.getElementById('mergeButton');
    const selectAllBtn = document.getElementById('selectAll');
    const clearAllBtn = document.getElementById('clearAll');

    function updateUI() {
        const checkedBoxes = document.querySelectorAll('.product-checkbox:checked');
        const count = checkedBoxes.length;

        selectedCount.textContent = `${count} selected`;
        mergeButton.disabled = count < 2;

        if (count === 0) {
            masterCheckbox.indeterminate = false;
            masterCheckbox.checked = false;
        } else if (count === productCheckboxes.length) {
            masterCheckbox.indeterminate = false;
            masterCheckbox.checked = true;
        } else {
            masterCheckbox.indeterminate = true;
        }
    }

    // Master checkbox functionality
    masterCheckbox.addEventListener('change', function() {
        productCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        updateUI();
    });

    // Individual checkbox functionality
    productCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateUI);
    });

    // Select all button
    selectAllBtn.addEventListener('click', function() {
        productCheckboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
        updateUI();
    });

    // Clear all button
    clearAllBtn.addEventListener('click', function() {
        productCheckboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
        updateUI();
    });

    // Initial UI update
    updateUI();
});

// Per page functionality
function changePerPage(perPage) {
    const url = new URL(window.location);
    url.searchParams.set('per_page', perPage);
    url.searchParams.delete('page'); // Reset to first page
    window.location.href = url.toString();
}
</script>
@endpush

@push('styles')
<style>
/* Enhanced Pagination Styles */
.pagination-lg .page-link {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    margin: 0 0.125rem;
    transition: all 0.2s ease-in-out;
}

.pagination-lg .page-item.active .page-link {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
    transform: translateY(-1px);
}

.pagination-lg .page-link:hover:not(.disabled) {
    background-color: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-lg .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}

.pagination-info {
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.pagination {
    margin-bottom: 0;
}

/* Responsive pagination */
@media (max-width: 768px) {
    .pagination-lg .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        margin: 0 0.05rem;
    }

    .pagination-info {
        text-align: center;
        margin-bottom: 1rem;
    }

    /* Hide some pagination elements on mobile */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
        display: none;
    }
}

@media (max-width: 576px) {
    .pagination-lg {
        justify-content: center;
    }

    .pagination-lg .page-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
}
</style>
@endpush
@endsection