@extends('layouts.admin-simple')

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

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Products</li>
@endsection

@section('page-actions')
    <div class="ml-auto">
        <a href="{{ route('admin.products.create') }}" class="btn btn-primary">
            <i class="material-icons">add</i> Add Product
        </a>
    </div>
@endsection

@section('content')
    <!-- Filters -->
    <div class="card mb-3">
        <div class="card-body">
            <form method="GET">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label for="search" class="form-label">Search</label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ request('search') }}" placeholder="Product name, description...">
                    </div>
                    <div class="col-md-2">
                        <label for="category" class="form-label">Category</label>
                        <select class="form-control" id="category" name="category">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="standard" class="form-label">Standard</label>
                        <select class="form-control" id="standard" name="standard">
                            <option value="">All Standards</option>
                            @foreach($standards as $standard)
                                <option value="{{ $standard->id }}" {{ request('standard') == $standard->id ? 'selected' : '' }}>
                                    {{ $standard->name }} {{ $standard->code ? '(' . $standard->code . ')' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-outline-primary">
                            <i class="material-icons">search</i> Search
                        </button>
                        <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary ml-2">
                            <i class="material-icons">clear</i> Clear
                        </a>
                    </div>
                </div>
                <div class="row align-items-end mt-2">
                    <div class="col-md-3">
                        <label for="application" class="form-label">Application</label>
                        <select class="form-control" id="application" name="application">
                            <option value="">All Applications</option>
                            <option value="none" {{ request('application') == 'none' ? 'selected' : '' }}>No Application</option>
                            @foreach($applications as $application)
                                <option value="{{ $application->id }}" {{ request('application') == $application->id ? 'selected' : '' }}>
                                    {{ $application->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-control" id="status" name="status">
                            <option value="">All</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            <option value="featured" {{ request('status') == 'featured' ? 'selected' : '' }}>Featured</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Products Table -->
    <div class="card">
        <div class="card-header card-header-large bg-white d-flex align-items-center">
            <div class="flex">
                <h4 class="card-header__title">Products</h4>
                <div class="card-subtitle text-muted">Manage product catalog and specifications</div>
            </div>
            <div class="ml-auto">
                <span class="badge badge-light">{{ $products->total() }} total products</span>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Category</th>
                        <th>Standard</th>
                        <th>Application</th>
                        <th>Specifications</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $product)
                    <tr>
                        <td>
                            <div class="media align-items-center">
                                <div class="mr-3">
                                    @if($product->image)
                                        <img src="{{ asset('storage/' . $product->image) }}" 
                                             alt="{{ $product->name }}" 
                                             class="rounded" style="width: 60px; height: 40px; object-fit: cover;">
                                    @else
                                        <div class="bg-light d-flex align-items-center justify-content-center rounded" 
                                             style="width: 60px; height: 40px;">
                                            <i class="material-icons text-muted">inventory</i>
                                        </div>
                                    @endif
                                </div>
                                <div class="media-body">
                                    <strong>{{ $product->name }}</strong>
                                    <div class="text-muted small">{{ Str::limit($product->description, 60) }}</div>
                                    @if($product->is_featured)
                                        <span class="badge badge-warning badge-sm">Featured</span>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge badge-soft-primary">
                                <i class="material-icons" style="font-size: 14px; vertical-align: middle;">category</i>
                                @if($product->application && $product->application->standard && $product->application->standard->category)
                                    {{ $product->application->standard->category->name }}
                                @elseif($product->standard && $product->standard->category)
                                    {{ $product->standard->category->name }}
                                @else
                                    N/A
                                @endif
                            </span>
                        </td>
                        <td>
                            @if($product->application && $product->application->standard)
                                <div>{{ $product->application->standard->name }}</div>
                                @if($product->application->standard->code)
                                    <div class="text-muted small">{{ $product->application->standard->code }}</div>
                                @endif
                            @elseif($product->standard)
                                <div>{{ $product->standard->name }}</div>
                                @if($product->standard->code)
                                    <div class="text-muted small">{{ $product->standard->code }}</div>
                                @endif
                            @else
                                <div>N/A</div>
                            @endif
                        </td>
                        <td>
                            @if($product->application)
                                <span class="badge badge-soft-info">{{ $product->application->name }}</span>
                            @else
                                <span class="badge badge-soft-secondary">No Application</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge badge-light">{{ $product->specifications->count() }} specs</span>
                        </td>
                        <td>
                            @if($product->is_active)
                                <span class="badge badge-soft-success">Active</span>
                            @else
                                <span class="badge badge-soft-secondary">Inactive</span>
                            @endif
                        </td>
                        <td>
                            <div class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-caret="false">
                                    <i class="material-icons">more_vert</i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="{{ route('admin.products.show', $product) }}" class="dropdown-item">
                                        <i class="material-icons mr-2">visibility</i> View Product
                                    </a>
                                    <a href="{{ route('admin.products.edit', $product) }}" class="dropdown-item">
                                        <i class="material-icons mr-2">edit</i> Edit
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="#" class="dropdown-item" onclick="toggleFeatured({{ $product->id }})">
                                        <i class="material-icons mr-2">{{ $product->is_featured ? 'star_border' : 'star' }}</i>
                                        {{ $product->is_featured ? 'Remove Featured' : 'Mark Featured' }}
                                    </a>
                                    <a href="#" class="dropdown-item" onclick="toggleActive({{ $product->id }})">
                                        <i class="material-icons mr-2">{{ $product->is_active ? 'visibility_off' : 'visibility' }}</i>
                                        {{ $product->is_active ? 'Deactivate' : 'Activate' }}
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="#" class="dropdown-item text-danger" 
                                       onclick="deleteProduct({{ $product->id }}, '{{ $product->name }}')">
                                        <i class="material-icons mr-2">delete</i> Delete
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-4">
                            <div class="empty-state">
                                <i class="material-icons mb-3" style="font-size: 48px; color: #ddd;">inventory</i>
                                <h5 class="text-muted">No products found</h5>
                                <p class="text-muted">
                                    @if(request()->hasAny(['search', 'category', 'application', 'status']))
                                        Try adjusting your search criteria or <a href="{{ route('admin.products.index') }}">clear filters</a>.
                                    @else
                                        Start by creating your first product.
                                    @endif
                                </p>
                                <a href="{{ route('admin.products.create') }}" class="btn btn-primary">
                                    <i class="material-icons">add</i> Create First Product
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($products->hasPages())
            <div class="card-footer">
                {{ $products->appends(request()->query())->links('pagination::flowdash') }}
            </div>
        @endif
    </div>
@endsection

@push('scripts')
<script>
function toggleFeatured(productId) {
    fetch(`/admin/products/${productId}/toggle-featured`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToastMessage(data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToastMessage(data.message || 'An error occurred', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToastMessage('An error occurred', 'error');
    });
}

function toggleActive(productId) {
    fetch(`/admin/products/${productId}/toggle-active`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToastMessage(data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToastMessage(data.message || 'An error occurred', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToastMessage('An error occurred', 'error');
    });
}

function deleteProduct(productId, name) {
    if (confirm(`Are you sure you want to delete the product "${name}"? This action cannot be undone.`)) {
        fetch(`/admin/products/${productId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToastMessage(data.message, 'success');
                setTimeout(() => location.reload(), 1000);
            } else {
                showToastMessage(data.message || 'Failed to delete product', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToastMessage('An error occurred', 'error');
        });
    }
}
</script>
@endpush