@extends('admin.layouts.master')

@section('title', $product->name_ar)
@section('page_title', $product->name_ar)

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.products.index') }}">{{ __('admin.products') }}</a></li>
    <li class="breadcrumb-item active">{{ $product->sku }}</li>
@endsection

@section('content')
<div class="row">
    {{-- Left column: media --}}
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body text-center">
                <img src="{{ $product->main_image_url }}" class="img-fluid rounded mb-2" id="mainPreview"
                     style="max-height:380px;object-fit:contain">
                <h5 class="mt-3">{{ $product->name_ar }}</h5>
                @if($product->name_en)<p class="text-muted">{{ $product->name_en }}</p>@endif
                <span class="badge badge-primary">{{ $product->sku }}</span>
                @if($product->barcode)<span class="badge badge-secondary">{{ $product->barcode }}</span>@endif
                <span class="badge badge-{{ $product->status === 'active' ? 'success' : 'secondary' }}">
                    {{ $product->status === 'active' ? __('admin.active') : __('admin.inactive') }}
                </span>
                @if($product->is_featured)<span class="badge badge-warning"><i class="fas fa-star"></i> مميز</span>@endif
            </div>

            @php $gallery = $product->getMedia('gallery'); @endphp
            @if($gallery->count())
                <div class="card-body border-top">
                    <h6>معرض الصور</h6>
                    <div class="row">
                        @foreach($gallery as $img)
                            <div class="col-4 mb-2">
                                <a href="{{ $img->getUrl() }}" target="_blank">
                                    <img src="{{ $img->getUrl('thumb') }}" class="img-thumbnail">
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- Right column: details + tabs --}}
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">تفاصيل المنتج</h3>
                <div class="card-tools">
                    @can('products.edit')
                        <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-info btn-sm">
                            <i class="fas fa-edit"></i> {{ __('admin.edit') }}
                        </a>
                    @endcan
                    @can('products.delete')
                        <button type="button" class="btn btn-danger btn-sm crud-delete-btn"
                                data-url="{{ route('admin.products.destroy', $product) }}">
                            <i class="fas fa-trash"></i>
                        </button>
                    @endcan
                </div>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <tr><th width="180">{{ __('admin.categories') }}</th><td>{{ $product->category?->name_ar ?? '—' }}</td></tr>
                    <tr><th>{{ __('admin.brands') }}</th><td>{{ $product->brand?->name ?? '—' }}</td></tr>
                    <tr><th>{{ __('admin.units') }}</th><td>{{ $product->unit?->name ?? '—' }}</td></tr>
                    <tr><th>النوع</th><td>{{ ['finished' => 'منتج جاهز', 'manufactured' => 'تصنيع', 'service' => 'خدمة'][$product->type] ?? $product->type }}</td></tr>
                    <tr><th>الأبعاد (ط×ع×ا)</th><td>{{ $product->length_cm ?? '—' }} × {{ $product->width_cm ?? '—' }} × {{ $product->height_cm ?? '—' }} سم</td></tr>
                    <tr><th>الوزن</th><td>{{ $product->weight_kg ?? '—' }} كجم</td></tr>
                    <tr><th>الخامات</th><td>
                        @forelse($product->materials as $m)
                            <span class="badge badge-secondary mx-1">{{ $m->name_ar ?: $m->name }}</span>
                        @empty —
                        @endforelse
                    </td></tr>
                    <tr><th>الألوان</th><td>
                        @forelse($product->colors as $c)
                            <span class="badge mx-1" style="background:{{ $c->hex_code ?? '#888' }};color:#fff">{{ $c->name }}</span>
                        @empty —
                        @endforelse
                    </td></tr>
                </table>

                <h6 class="mt-3">الأسعار</h6>
                <table class="table table-sm table-striped">
                    <tr><td>سعر التكلفة</td><td>{{ format_money($product->cost_price) }}</td></tr>
                    <tr><td>سعر البيع</td><td><b>{{ format_money($product->sale_price) }}</b></td></tr>
                    <tr><td>أقل سعر بيع</td><td>{{ $product->min_sale_price !== null ? format_money($product->min_sale_price) : '—' }}</td></tr>
                    <tr><td>سعر الجملة</td><td>{{ $product->wholesale_price !== null ? format_money($product->wholesale_price) : '—' }}</td></tr>
                    <tr><td>هامش الربح</td><td>{{ number_format($product->profit_margin, 2) }}%</td></tr>
                </table>

                <h6 class="mt-3">المخزون والضمان</h6>
                <table class="table table-sm table-striped">
                    <tr><td>تتبع المخزون</td><td>{{ $product->track_stock ? 'نعم' : 'لا' }}</td></tr>
                    <tr><td>الحد الأدنى</td><td>{{ $product->min_stock }}</td></tr>
                    <tr><td>الحد الأقصى</td><td>{{ $product->max_stock ?? '—' }}</td></tr>
                    <tr><td>الضمان</td><td>{{ $product->warranty_months ? $product->warranty_months.' شهر' : '—' }}</td></tr>
                    <tr><td>مدة التوريد</td><td>{{ $product->lead_time_days ? $product->lead_time_days.' يوم' : '—' }}</td></tr>
                </table>

                @if($product->description)
                    <h6 class="mt-3">الوصف</h6>
                    <div>{!! nl2br(e($product->description)) !!}</div>
                @endif
            </div>
        </div>

        {{-- Variants --}}
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-layer-group"></i> متغيرات المنتج</h3>
                @can('products.edit')
                    <div class="card-tools">
                        <button type="button" class="btn btn-primary btn-sm" id="addVariantBtn">
                            <i class="fas fa-plus"></i> إضافة variant
                        </button>
                    </div>
                @endcan
            </div>
            <div class="card-body p-0">
                @if($product->variants->count() === 0)
                    <p class="text-center text-muted p-4">لا توجد متغيرات بعد.</p>
                @else
                    <table class="table table-sm m-0">
                        <thead>
                            <tr>
                                <th>صورة</th>
                                <th>SKU</th>
                                <th>الاسم</th>
                                <th>اللون</th>
                                <th>المقاس</th>
                                <th>سعر البيع</th>
                                <th>الحالة</th>
                                <th>{{ __('admin.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($product->variants as $v)
                                <tr>
                                    <td>
                                        @if($v->image)
                                            <img src="{{ asset('storage/'.$v->image) }}" style="width:32px;height:32px;object-fit:cover;" class="rounded">
                                        @else —
                                        @endif
                                    </td>
                                    <td><code>{{ $v->sku }}</code></td>
                                    <td>{{ $v->name ?? '—' }}</td>
                                    <td>
                                        @if($v->color)
                                            <span class="badge" style="background:{{ $v->color->hex_code ?? '#888' }};color:#fff">{{ $v->color->name }}</span>
                                        @else —
                                        @endif
                                    </td>
                                    <td>{{ $v->size ?? '—' }}</td>
                                    <td>{{ $v->sale_price !== null ? format_money($v->sale_price) : '—' }}</td>
                                    <td>
                                        @if($v->is_active)
                                            <span class="badge badge-success">{{ __('admin.active') }}</span>
                                        @else
                                            <span class="badge badge-secondary">{{ __('admin.inactive') }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @can('products.edit')
                                            <button type="button" class="btn btn-info btn-sm edit-variant-btn" data-id="{{ $v->id }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button type="button" class="btn btn-danger btn-sm crud-delete-btn"
                                                    data-url="{{ route('admin.products.variants.destroy', [$product, $v]) }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        @endcan
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>
</div>

@include('admin.products._variant_modal', ['product' => $product])
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    $('#addVariantBtn').on('click', function () {
        $('#variantForm').trigger('reset')[0].action = '{{ route('admin.products.variants.store', $product) }}';
        $('#variantMethod').val('POST');
        $('input[name=is_active]').prop('checked', true);
        $('#variantModalLabel').text('إضافة variant');
        $('#variantModal').modal('show');
    });

    $('.edit-variant-btn').on('click', function () {
        const id = $(this).data('id');
        $.get('{{ url('admin/products/'.$product->id.'/variants') }}/' + id, function (v) {
            OFP.populateForm($('#variantForm'), v);
            $('#variantForm')[0].action = '{{ url('admin/products/'.$product->id.'/variants') }}/' + v.id;
            $('#variantMethod').val('PUT');
            $('#variantModalLabel').text('تعديل ' + (v.name || v.sku));
            $('#variantModal').modal('show');
        });
    });

    @if($errors->any()) $('#variantModal').modal('show'); @endif
});
</script>
@endpush