@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;
    }

    .size-badge.person {
        background-color: #f3e5f5;
        color: #7b1fa2;
        border-color: #ce93d8;
    }

    .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>
                                            @if($product->getMedia('images')->count())
                                                @foreach($product->getMedia('images')->take(2) as $image)
                                                    <img src="{{ $image->getUrl() }}" class="product-image" alt="Product Image">
                                                @endforeach
                                            @else
                                                <img src="{{ asset('storage/products/default.jpg') }}" class="product-image" alt="Default Image">
                                            @endif
                                        </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>
                                            @php
                                                // حساب أقل سعر محسوب بناءً على الأحجام المتاحة
                                                $minPrice = null;
                                                $minPriceAfterDiscount = null;
                                                
                                                if($product->sizes->count()) {
                                                    $prices = [];
                                                    $discountedPrices = [];
                                                    
                                                    foreach($product->sizes as $size) {
                                                        $basePrice = 0;
                                                        
                                                        if($size->size_type === 'meter' && $size->length && $size->width) {
                                                            $area = $size->length * $size->width;
                                                            $basePrice = $product->price_per_unit * $area;
                                                        } elseif($size->size_type === 'person') {
                                                            $persons = $size->number_of_person ?? 1;
                                                            $basePrice = $product->price_per_unit * $persons;
                                                        }
                                                        
                                                        if($basePrice > 0) {
                                                            $prices[] = $basePrice;
                                                            
                                                            if($product->price_after_discount && $product->price_after_discount < $product->price_per_unit) {
                                                                if($size->size_type === 'meter' && $size->length && $size->width) {
                                                                    $area = $size->length * $size->width;
                                                                    $discountedPrices[] = $product->price_after_discount * $area;
                                                                } elseif($size->size_type === 'person') {
                                                                    $persons = $size->number_of_person ?? 1;
                                                                    $discountedPrices[] = $product->price_after_discount * $persons;
                                                                }
                                                            }
                                                        }
                                                    }
                                                    
                                                    $minPrice = $prices ? min($prices) : null;
                                                    $minPriceAfterDiscount = $discountedPrices ? min($discountedPrices) : null;
                                                }
                                            @endphp
                                            
                                            @if($minPrice)
                                                <div class="price-container">
                                                    @if($minPriceAfterDiscount && $minPriceAfterDiscount < $minPrice)
                                                        <span class="price-original">{{ number_format($minPrice, 2) }}</span>
                                                        <span class="price-discounted">{{ number_format($minPriceAfterDiscount, 2) }}</span>
                                                    @else
                                                        <span>{{ number_format($minPrice, 2) }}</span>
                                                    @endif
                                                    {{-- <small class="text-muted">من</small> --}}
                                                </div>
                                            @else
                                                —
                                            @endif
                                        </td>
                                        <td>
                                            <div class="sizes-list">
                                                @forelse($product->sizes as $size)
                                                    @if($size->size_type === 'meter')
                                                        <span class="size-badge meter">
                                                            {{ $size->length }}×{{ $size->width }}م
                                                        </span>
                                                    @elseif($size->size_type === 'person')
                                                        <span class="size-badge person">
                                                            {{ $size->number_of_person }} أشخاص
                                                        </span>
                                                    @endif
                                                @empty
                                                    <small class="text-muted">{{ __('admin.no_sizes') }}</small>
                                                @endforelse
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                {{-- <a href="{{ route('admin.products.show', $product->id) }}" class="btn btn-info btn-sm" title="{{ __('admin.view') }}"> --}}
                                                    {{-- <i class="fa fa-eye"></i> --}}
                                                {{-- </a> --}}
                                                <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 viewButton = this.querySelector('a[href*="/show"]');
                    if (viewButton) {
                        window.location.href = viewButton.href;
                    }
                });
                
                // إضافة tooltip للتفسير
                row.title = '{{ __("admin.double_click_to_view") }}';
            }
        });
    });
</script>
@endsection