@extends('layouts.adminmaster')

@section('title', 'View Products | Trew India Pvt Ltd')

@section('content')
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">

                <!-- Page Title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0 font-size-18">View Products</h4>
                        </div>
                    </div>
                </div>

                <!-- Filter & Search Section -->
                <div class="card mb-4 border-0 shadow-sm rounded-4">
                    <div class="card-body py-4 px-4">
                        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
                            <h4 class="card-title mb-0 text-uppercase fw-bold text-dark">
                                <i class="mdi mdi-filter-outline text-primary me-2"></i> Manage Products
                            </h4>
                            <a href="{{ route('admin.products.create') }}"
                                class="btn btn-success btn-rounded shadow-sm px-4 py-2">
                                <i class="mdi mdi-plus-circle-outline me-1"></i> Add New Product
                            </a>
                        </div>

                        <!-- Search Bar -->
                        <div class="input-group mb-4 border rounded-pill shadow-sm overflow-hidden"
                            style="background-color:#f9fafb;">
                            <span class="input-group-text bg-transparent border-0 ps-4">
                                <i class="mdi mdi-magnify text-primary fs-5"></i>
                            </span>
                            <input type="text" id="product-search" class="form-control border-0 bg-transparent"
                                placeholder="Search products by name, keyword, or description...">
                            <button type="button" id="search-clear"
                                class="btn bg-light border-0 rounded-end-pill fw-semibold text-muted px-4">
                                <i class="mdi mdi-close-circle-outline me-1"></i> Clear
                            </button>
                        </div>

                        <div id="search-loader" class="text-center mb-3" style="display:none;">
                            <div class="spinner-border text-primary" role="status"></div>
                            <p class="small text-muted mt-2">Fetching results...</p>
                        </div>

                        <!-- Filter Section -->
                        <form method="GET" action="{{ route('products.index') }}">
                            <div class="row g-3 align-items-end">
                                <!-- Top Category -->
                                <div class="col-md-4">
                                    <label class="form-label fw-semibold text-muted">Top Category</label>
                                    <div class="input-group border rounded-pill shadow-sm overflow-hidden bg-white">
                                        <span class="input-group-text bg-light border-0">
                                            <i class="mdi mdi-view-grid-outline text-secondary"></i>
                                        </span>
                                        <select name="top_category_id" id="top-category-select"
                                            class="form-select border-0 bg-transparent">
                                            <option value="">All</option>
                                            @foreach ($topCategories as $top)
                                                <option value="{{ $top->id }}"
                                                    {{ request('top_category_id') == $top->id ? 'selected' : '' }}>
                                                    {{ $top->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Mid Category -->
                                <div class="col-md-4">
                                    <label class="form-label fw-semibold text-muted">Mid Category</label>
                                    <div class="input-group border rounded-pill shadow-sm overflow-hidden bg-white">
                                        <span class="input-group-text bg-light border-0">
                                            <i class="mdi mdi-layers-outline text-secondary"></i>
                                        </span>
                                        <select name="mid_category_id" id="mid-category-select"
                                            class="form-select border-0 bg-transparent">
                                            <option value="">All</option>
                                            @foreach ($midCategories as $mid)
                                                <option value="{{ $mid->id }}"
                                                    {{ request('mid_category_id') == $mid->id ? 'selected' : '' }}>
                                                    {{ $mid->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Buttons -->
                                <div class="col-md-4 d-flex gap-2">
                                    <div class="w-50">
                                        <label class="form-label fw-semibold text-muted">Apply</label>
                                        <button type="submit"
                                            class="btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 rounded-pill shadow-sm py-2">
                                            <i class="mdi mdi-tune-variant fs-5"></i>
                                            <span>Filter</span>
                                        </button>
                                    </div>
                                    <div class="w-50">
                                        <label class="form-label fw-semibold text-muted">Reset</label>
                                        <a href="{{ route('products.index') }}"
                                            class="btn btn-outline-secondary w-100 d-flex align-items-center justify-content-center gap-2 rounded-pill py-2 shadow-sm">
                                            <i class="mdi mdi-refresh fs-5"></i>
                                            <span>Reset</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Table Section -->
                <div class="row">
                    <div class="col-12">
                        <div class="card shadow-sm">
                            <div class="card-body">

                                <!-- Product Table -->
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover align-middle">
                                        <thead class="table-light">
                                            <tr>
                                                <th>#</th>
                                                <th>Main Image</th>
                                                <th>Mid Category</th>
                                                <th>Product Name</th>
                                                <th>Price (₹)</th>
                                                <th>Rating</th>
                                                <th>Best Seller</th>
                                                <th>Status</th>
                                                <th>Created At</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($products as $product)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>

                                                    <!-- Main Image -->
                                                    <td>
                                                        @if (!empty($product->main_image))
                                                            <img src="{{ asset('storage/uploads/products/main/' . $product->main_image) }}"
                                                                alt="Product Image" class="rounded border" width="60"
                                                                height="60" style="object-fit: cover;">
                                                        @else
                                                            <span class="text-muted">No Image</span>
                                                        @endif
                                                    </td>

                                                    <td>{{ $product->midCategory->name ?? 'N/A' }}</td>
                                                    <td>{{ $product->product_name }}</td>
                                                    <td>₹{{ number_format($product->price ?? 0, 2) }}</td>

                                                    <td>
                                                        @if ($product->rating)
                                                            ⭐ {{ $product->rating }}
                                                        @else
                                                            <span class="text-muted">N/A</span>
                                                        @endif
                                                    </td>

                                                    <td>
                                                        <input type="checkbox" class="toggle-best-seller"
                                                            data-id="{{ $product->id }}"
                                                            {{ $product->is_best_seller ? 'checked' : '' }}>
                                                    </td>

                                                    <td>
                                                        <button
                                                            class="btn btn-sm toggle-status-btn {{ $product->action === 'active' ? 'btn-success' : 'btn-secondary' }}"
                                                            data-id="{{ $product->id }}">
                                                            {{ ucfirst($product->action) }}
                                                        </button>
                                                    </td>

                                                    <td>{{ $product->created_at->format('d M, Y') }}</td>

                                                    <td class="d-flex gap-2">
                                                        <a href="{{ route('admin.products.edit', $product->id) }}"
                                                            class="btn btn-sm btn-primary">
                                                            <i class="mdi mdi-pencil"></i> Edit
                                                        </a>
                                                        <form action="{{ route('admin.products.destroy', $product->id) }}"
                                                            method="POST"
                                                            onsubmit="return confirm('Are you sure you want to delete this product?');">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-danger">
                                                                <i class="mdi mdi-delete"></i> Delete
                                                            </button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="10" class="text-center text-muted py-5">
                                                        <i class="mdi mdi-package-variant fs-1 d-block text-secondary"></i>
                                                        <p class="mt-2">No products found matching your filters.</p>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>

                                <!-- Pagination -->
                                <div class="d-flex justify-content-end mt-3">
                                    {{ $products->links('pagination::bootstrap-5') }}
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


            </div> <!-- container-fluid -->
        </div>
    </div>

    <!-- Styling -->
    <style>
        .input-group .form-select,
        .input-group .form-control {
            box-shadow: none !important;
            border-radius: 50px !important;
            background: transparent !important;
        }

        .input-group-text {
            border-right: none !important;
        }

        .input-group:focus-within {
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
        }

        .card.mb-4.border-0.shadow-sm.rounded-4 {
            position: sticky;
            top: 70px;
            z-index: 40;
            background: #fff;
        }
    </style>

    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- Live Search -->
    <script>
        $(document).ready(function() {
            let typingTimer;
            const $searchInput = $('#product-search');
            const $loader = $('#search-loader');
            const $tableBody = $('table tbody');

            // Live Search
            $searchInput.on('keyup', function() {
                clearTimeout(typingTimer);
                typingTimer = setTimeout(performSearch, 400);
            });

            // Clear Button
            $('#search-clear').on('click', function() {
                $searchInput.val('');
                performSearch();
            });

            function performSearch() {
                const query = $searchInput.val();
                $loader.show();

                $.ajax({
                    url: "{{ route('products.index') }}",
                    method: "GET",
                    data: {
                        search: query
                    },
                    success: function(response) {
                        $loader.hide();
                        const newTable = $(response).find('table tbody').html();
                        $tableBody.html(newTable);
                    },
                    error: function() {
                        $loader.hide();
                        alert("Error searching products.");
                    }
                });
            }
        });
    </script>

    <!-- Status Toggle -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.toggle-status-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.dataset.id;
                    const btn = this;

                    fetch(`/admin/products/${id}/toggle-status`, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                            }
                        })
                        .then(res => res.json())
                        .then(data => {
                            if (data.status === 'success') {
                                btn.textContent = data.action.charAt(0).toUpperCase() + data
                                    .action.slice(1);
                                btn.classList.toggle('btn-success', data.action === 'active');
                                btn.classList.toggle('btn-secondary', data.action ===
                                    'inactive');
                            } else {
                                alert('Failed to update status.');
                            }
                        })
                        .catch(() => alert('Error updating status.'));
                });
            });
        });
    </script>

    <!-- Best Seller Toggle -->
    <script>
        $('.toggle-best-seller').on('change', function() {
            const checked = $(this).is(':checked') ? 1 : 0;
            const id = $(this).data('id');

            $.ajax({
                url: '/admin/products/' + id + '/toggle-best-seller',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    is_best_seller: checked
                },
                success: function(response) {
                    alert(response.message || 'Updated successfully.');
                },
                error: function() {
                    alert('Error updating best seller status.');
                }
            });
        });
    </script>
@endsection