@extends('admin.layout.master')

@section('title', __('admin.products'))

@section('styles')
    <style>
        .product-image {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-right: 5px;
        }

        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: 600;
            display: inline-block;
            text-transform: uppercase;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .status-badge.active {
            background-color: #28a745;
            color: white;
        }

        .status-badge.inactive {
            background-color: #dc3545;
            color: white;
        }

        .size-badge {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 10px;
            color: #6c757d;
            margin: 1px;
            display: inline-block;
        }

        .size-badge.meter {
            background-color: #e3f2fd;
            color: #1976d2;
            border-color: #bbdefb;
        }

        .price-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .price-original {
            text-decoration: line-through;
            color: #6c757d;
            font-size: 12px;
        }

        .price-discounted {
            color: #dc3545;
            font-weight: bold;
        }

        table th,
        table td {
            text-align: center;
            vertical-align: middle;
        }

        table tr:hover {
            background-color: #f1f1f1;
            cursor: pointer;
        }

        .sizes-list {
            max-width: 200px;
            max-height: 60px;
            overflow-y: auto;
        }
    </style>
@endsection

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ __('admin.products') }}</h5>
                        <a href="{{ route('admin.products.create') }}" class="btn btn-primary">
                            {{ __('admin.add_product') }}
                        </a>
                    </div>

                    <div class="card-body">
                        <form action="{{ route('admin.products.index') }}" method="GET" class="row g-2 mb-3">
                            <div class="col-sm-4">
                                <input type="text" name="search" class="form-control"
                                    placeholder="{{ __('admin.search_by_name') }}" value="{{ request('search') }}">
                            </div>

                            <div class="col-sm-3">
                                <select name="category_id" class="form-select">
                                    <option value="">{{ __('admin.all_categories') }}</option>
                                    @foreach ($categories ?? [] as $category)
                                        <option value="{{ $category->id }}"
                                            {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->getTranslation('name', app()->getLocale()) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-sm-2">
                                <button type="submit" class="btn btn-secondary w-100">{{ __('admin.Filter') }}</button>
                            </div>

                            <div class="col-sm-3">
                                <a href="{{ route('admin.products.index') }}"
                                    class="btn btn-light w-100">{{ __('admin.Reset') }}</a>
                            </div>
                        </form>

                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>{{ __('admin.image') }}</th>
                                        <th>{{ __('admin.name') }}</th>
                                        <th>{{ __('admin.category') }}</th>
                                        <th>{{ __('admin.price_per_unit') }}</th>
                                        <th>{{ __('admin.min_calculated_price') }}</th>
                                        <th>{{ __('admin.sizes') }}</th>
                                        <th>{{ __('admin.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($products as $product)
                                        <tr>
                                            <td>
                                                <img src="{{ asset('storage/' . $product->image) }}"
                                                    alt="{{ $product->name }}" class="img-fluid"
                                                    style="width: 50px; height: 50px;">
                                            </td>
                                            <td>
                                                <strong>{{ $product->getTranslation('name', app()->getLocale()) }}</strong>
                                                @if ($product->getTranslation('description', app()->getLocale()))
                                                    <br>
                                                    <small
                                                        class="text-muted">{{ Str::limit($product->getTranslation('description', app()->getLocale()), 50) }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($product->category)
                                                    <span
                                                        class="badge bg-info">{{ $product->category->getTranslation('name', app()->getLocale()) }}</span>
                                                @else
                                                    —
                                                @endif
                                            </td>
                                            <td>
                                                <div class="price-container">
                                                    @if ($product->price_after_discount && $product->price_after_discount < $product->price_per_unit)
                                                        <span
                                                            class="price-original">{{ number_format($product->price_per_unit, 2) }}</span>
                                                        <span
                                                            class="price-discounted">{{ number_format($product->price_after_discount, 2) }}</span>
                                                    @else
                                                        <span>{{ number_format($product->price_per_unit, 2) }}</span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                @if ($product->has_sizes)
                                                    @if ($product->minPrice)
                                                        <div class="price-container">
                                                            @if ($product->minPriceAfterDiscount && $product->minPriceAfterDiscount < $product->minPrice)
                                                                <span
                                                                    class="price-original">{{ number_format($product->minPrice, 2) }}</span>
                                                                <span
                                                                    class="price-discounted">{{ number_format($product->minPriceAfterDiscount, 2) }}</span>
                                                            @else
                                                                <span>{{ number_format($product->minPrice, 2) }}</span>
                                                            @endif
                                                        </div>
                                                    @else
                                                        —
                                                    @endif
                                                @else
                                                    <div class="price-container">
                                                        @if ($product->price_after_discount && $product->price_after_discount < $product->price)
                                                            <span
                                                                class="price-original">{{ number_format($product->price, 2) }}</span>
                                                            <span
                                                                class="price-discounted">{{ number_format($product->price_after_discount, 2) }}</span>
                                                        @else
                                                            <span>{{ number_format($product->price, 2) }}</span>
                                                        @endif
                                                    </div>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="sizes-list">
                                                    @if ($product->has_sizes)
                                                        @forelse($product->sizes as $size)
                                                            @if ($size->size_type === 'meter')
                                                                <span class="size-badge meter">
                                                                    {{ $size->length }}×{{ $size->width }}م
                                                                </span>
                                                            @endif
                                                        @empty
                                                            <small class="text-muted">{{ __('admin.no_sizes') }}</small>
                                                        @endforelse
                                                    @else
                                                        <small class="text-muted">{{ __('admin.no_sizes') }}</small>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('admin.products.edit', $product->id) }}"
                                                        class="btn btn-primary btn-sm" title="{{ __('admin.edit') }}">
                                                        <i class="fa fa-edit"></i>
                                                    </a>
                                                    <form action="{{ route('admin.products.destroy', $product->id) }}"
                                                        method="POST" style="display:inline-block;"
                                                        onsubmit="return confirm('{{ __('admin.confirm_delete') }}')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button class="btn btn-danger btn-sm"
                                                            title="{{ __('admin.delete') }}">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center py-4">
                                                <div class="text-muted">
                                                    <i class="fa fa-box-open fa-3x mb-3"></i>
                                                    <h5>{{ __('admin.no_products_found') }}</h5>
                                                    <p>{{ __('admin.no_products_description') }}</p>
                                                    <a href="{{ route('admin.products.create') }}" class="btn btn-primary">
                                                        {{ __('admin.add_first_product') }}
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        @if ($products->hasPages())
                            <div class="d-flex justify-content-center">
                                {{ $products->appends(request()->query())->links() }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tableRows = document.querySelectorAll('tbody tr');
            tableRows.forEach(row => {
                if (!row.querySelector('td[colspan]')) {
                    row.addEventListener('dblclick', function() {
                        const editButton = this.querySelector('a[href*="/edit"]');
                        if (editButton) {
                            window.location.href = editButton.href;
                        }
                    });
                    row.title = '{{ __('admin.double_click_to_edit') }}';
                }
            });
        });
    </script>
@endsection