@extends('layouts.app')

@section('title', __('dashboard.product_details'))
@section('page_heading', __('dashboard.product_details'))

@section('breadcrumb')
    <li class="app-breadcrumb__item text-slate-500">
        <a href="{{ route('dashboard.home') }}" class="text-slate-500 hover:text-emerald-700">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="app-breadcrumb__item text-slate-500">
        <a href="{{ route('dashboard.products.index') }}" class="text-slate-500 hover:text-emerald-700">{{ __('dashboard.Products') }}</a>
    </li>
    <li class="app-breadcrumb__item text-slate-500">{{ $product->name }}</li>
@endsection

@section('content')
@include('dashboard.partials.audit-log-styles')
<style>
.product-show-stack { display: grid; gap: 1.75rem; }
.product-show-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}
.product-show-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}
.product-show-card__title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 900;
}
.product-show-card__toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.product-show-card__body { padding: 1.5rem; }
.product-show-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.product-show-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-show-grid--maintenance { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.75rem; }
.product-show-field { margin-bottom: 1.25rem; }
.product-show-label {
    margin: 0 0 .45rem;
    color: var(--text-secondary);
    font-size: .9rem;
    font-weight: 700;
}
.product-show-value {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 800;
}
.product-show-value--sm { font-size: .875rem; font-weight: 700; }
.product-show-muted { color: var(--text-secondary); font-size: .78rem; font-weight: 600; }
.product-show-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}
.product-show-pill--primary { background: var(--c-primary-bg); color: var(--c-primary-darker); }
.product-show-pill--info { background: #eff6ff; color: #1d4ed8; }
.product-show-pill--success { background: #f0fdf4; color: #15803d; }
.product-show-pill--danger { background: #fef2f2; color: #dc2626; }
.product-show-pill--warning { background: #fef3c7; color: #b45309; }
.product-show-pill--dark { background: var(--text-primary); color: var(--text-muted); }
.product-show-image-list { display: flex; flex-wrap: wrap; gap: 1rem; }
.product-show-image-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.product-show-image-frame { width: 125px; height: 125px; }
.product-show-image { width: 100%; height: 100%; object-fit: cover; border-radius: .475rem; }
.product-show-action--info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.product-show-action--success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.product-show-icon-btn { width: 32px; height: 32px; padding: 0; }
.product-show-hidden { display: none; }
@media (max-width: 991.98px) {
    .product-show-grid,
    .product-show-grid--two,
    .product-show-grid--maintenance { grid-template-columns: minmax(0, 1fr); }
}
</style>
<div class="product-show-stack">

        @if(is_array($product->images) && count($product->images) > 0)
        <div class="product-show-card">
            <div class="product-show-card__header">
                <h2 class="product-show-card__title">{{ __('dashboard.Product Images') }}</h2>
                <div class="product-show-card__toolbar">
                    @can('edit products')
                    <a href="{{ route('dashboard.products.edit', $product->id) }}" class="app-btn app-btn--sm app-btn--secondary">
                        <i class="fa-solid fa-pen"></i>
                        {{ __('dashboard.Edit') }}
                    </a>
                    @if(!$product->is_scrapped)
                    <button type="button" class="app-btn app-btn--sm app-btn--danger" data-modal-open="scrapProductModal">
                        تحويل إلى هالك
                    </button>
                    @endif
                    @endcan
                </div>
            </div>
            <div class="product-show-card__body">
                <div class="product-show-image-list">
                    @foreach($product->images as $img)
                        <div class="product-show-image-tile">
                            <div class="product-show-image-frame">
                                <img src="{{ asset('storage/'.$img) }}" class="product-show-image" alt="Product Image"/>
                            </div>
                            @if($product->main_image == $img)
                                <div class="mt-2">
                                    <span class="product-show-pill product-show-pill--success">{{ __('dashboard.Main') }}</span>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        <div class="product-show-card">
            <div class="product-show-card__header">
                <h2 class="product-show-card__title">{{ __('dashboard.product_information') }}</h2>
                <div class="product-show-card__toolbar">
                    @can('edit products')
                    <a href="{{ route('dashboard.products.edit', $product->id) }}" class="app-btn app-btn--sm app-btn--secondary">
                        <i class="fa-solid fa-pen"></i>
                        {{ __('dashboard.Edit') }}
                    </a>
                    @endcan
                </div>
            </div>
            <div class="product-show-card__body">
                <div class="product-show-grid">
                    <div>
                        <div class="product-show-field">
                            <h5 class="product-show-label">{{ __('dashboard.Name') }}</h5>
                            <p class="product-show-value">{{ $product->name }}</p>
                        </div>
                        <div class="product-show-field">
                            <h5 class="product-show-label">{{ __('dashboard.SKU') }}</h5>
                            <p class="product-show-value">{{ $product->sku }}</p>
                        </div>
                        <div class="product-show-field">
                            <h5 class="product-show-label">{{ __('dashboard.Type') }}</h5>
                            <p class="product-show-value"><span class="product-show-pill product-show-pill--info">{{ __($product->type) }}</span></p>
                        </div>
                    </div>
                    <div>
                        <div class="product-show-field">
                            <h5 class="product-show-label">{{ __('dashboard.Category') }}</h5>
                            <p class="product-show-value">{{ $product->category->name ?? 'N/A' }}</p>
                        </div>
                        <div class="product-show-field">
                            <h5 class="product-show-label">{{ __('dashboard.Price') }}</h5>
                            <p class="product-show-value">{{ number_format($product->price, 2) }}</p>
                        </div>
                        <div class="product-show-field">
                            <h5 class="product-show-label">تكلفة الاقتناء</h5>
                            <p class="product-show-value">{{ number_format((float) $product->acquisition_cost, 2) }}</p>
                        </div>
                        <div class="product-show-field">
                            <h5 class="product-show-label">{{ __('dashboard.Stock') }}</h5>
                            <p class="product-show-value">{{ $product->stock }}</p>
                        </div>
                        <div class="product-show-field">
                            <h5 class="product-show-label">حالة الأصل</h5>
                            <p class="product-show-value">
                                <span class="product-show-pill {{ $product->is_scrapped ? 'product-show-pill--dark' : ($product->inventory_status === 'maintenance' ? 'product-show-pill--danger' : 'product-show-pill--success') }}">
                                    {{ $product->is_scrapped ? 'هالك' : ($product->inventory_status === 'maintenance' ? 'في الصيانة' : 'متاح') }}
                                </span>
                            </p>
                        </div>
                        @if($product->is_scrapped)
                        <div class="product-show-field">
                            <h5 class="product-show-label">سبب الهالك</h5>
                            <p class="product-show-value product-show-value--sm">{{ $product->scrap_reason ?: '-' }}</p>
                            <div class="product-show-muted">
                                {{ optional($product->scrapped_at)->format('Y-m-d H:i') ?? '-' }} بواسطة {{ $product->scrapper?->name ?? '-' }}
                            </div>
                        </div>
                        @endif
                    </div>
                    <div>
                         @if($product->selectedOptions->count() > 0)
                            <h5 class="product-show-label mb-3">{{ __('dashboard.Product Options') }}</h5>
                            @foreach($product->selectedOptions as $selectedOption)
                                <div class="flex mb-2">
                                    <span class="font-bold me-2">{{ $selectedOption->option->name }}:</span>
                                    <span>{{ $selectedOption->value }}</span>
                                </div>
                            @endforeach
                        @endif
                        @if($product->sourceManufacturingOrder)
                            <div class="mt-5">
                                <h5 class="product-show-label mb-2">مصدر التصنيع</h5>
                                <a href="{{ route('dashboard.manufacturing-orders.show', $product->sourceManufacturingOrder) }}" class="app-btn app-btn--sm product-show-action--info">
                                    {{ $product->sourceManufacturingOrder->reference_code }}
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="product-show-card">
            <div class="product-show-card__header">
                <h2 class="product-show-card__title">إحصائيات المنتج</h2>
            </div>
            <div class="product-show-card__body">
                <div class="product-show-grid">
                    @if($product->type == 'rent')
                        @foreach($productStats as $stat)
                            <div>
                                <div class="product-show-field">
                                    <h5 class="product-show-label">{{ $stat['label'] }}</h5>
                                    <p class="product-show-value">{{ $stat['value'] }}</p>
                                </div>
                            </div>
                        @endforeach
                    @elseif($product->type == 'sale')
                        <div>
                            <div class="product-show-field">
                                <h5 class="product-show-label">إجمالي القطع المباعة</h5>
                                <p class="product-show-value">{{ $productStats[0]['value'] }}</p>
                            </div>
                        </div>
                        <div>
                            <div class="product-show-field">
                                <h5 class="product-show-label">القيمة الإجمالية للبيع</h5>
                                <p class="product-show-value">{{ $productStats[1]['value'] }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        @if($product->type == 'rent' && $reservationCount > 0)
        <div class="product-show-card">
            <div class="product-show-card__header">
                <h2 class="product-show-card__title">الحجوزات ({{ $reservationCount }})</h2>
                <div class="product-show-card__toolbar">
                    <a href="#reservations_collapse" class="app-btn app-btn--sm app-btn--secondary" onclick="event.preventDefault();var el=document.getElementById('reservations_collapse');el.style.display=el.style.display==='none'?'block':'none'">
                        عرض / إخفاء
                    </a>
                </div>
            </div>
            <div id="reservations_collapse" class="product-show-hidden">
                <div class="product-show-card__body">
                    <div class="sf-table-wrap">
                        <table class="sf-table">
                            <thead>
                                <tr class="font-bold text-slate-500">
                                    <th>#</th>
                                    <th>العميل</th>
                                    <th>تاريخ المناسبة</th>
                                    <th>تاريخ الإرجاع</th>
                                    <th>{{ __('dashboard.status_label') }}</th>
                                    <th>الإجمالي المدفوع</th>
                                    <th>إجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($reservationRows as $reservation)
                                    <tr>
                                        <td>{{ $reservation['id'] }}</td>
                                        <td>{{ $reservation['customer_name'] }}</td>
                                        <td>{{ $reservation['event_date'] }}</td>
                                        <td>{{ $reservation['return_date'] }}</td>
                                        <td><span class="product-show-pill product-show-pill--primary">{{ $reservation['status'] }}</span></td>
                                        <td>{{ $reservation['final_total'] }}</td>
                                        <td>
                                            <a href="{{ $reservation['show_url'] }}" class="app-btn app-btn--sm product-show-action--info product-show-icon-btn" title="عرض الحجز">
                                                <i class="fa-solid fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endif

        @if($product->type == 'rent')
        <div class="product-show-card">
            <div class="product-show-card__header">
                <h2 class="product-show-card__title">الصيانة والتلفيات</h2>
            </div>
            <div class="product-show-card__body">
                <div class="product-show-grid product-show-grid--maintenance">
                    <div>
                        <form method="POST" action="{{ route('dashboard.products.maintenance.store', $product) }}">
                            @csrf
                            <div class="mb-4">
                                <label class="app-label">نوع السجل</label>
                                <select name="maintenance_type" class="app-input">
                                    <option value="routine">صيانة دورية</option>
                                    <option value="alteration">تعديل</option>
                                    <option value="damage">تلف</option>
                                </select>
                            </div>
                            <div class="mb-4">
                                <label class="app-label">العنوان</label>
                                <input type="text" name="title" class="app-input" placeholder="مثال: تعديل مقاس أو إصلاح خرز" required>
                            </div>
                            <div class="mb-4">
                                <label class="app-label">تكلفة الصيانة</label>
                                <input type="number" step="0.01" min="0" name="maintenance_cost" class="app-input" value="0" required>
                            </div>
                            <div class="mb-4">
                                <label class="app-label">الوصف</label>
                                <textarea name="description" class="app-input" rows="3"></textarea>
                            </div>
                            <div class="mb-4">
                                <label class="app-label">{{ __('dashboard.notes') }}</label>
                                <textarea name="notes" class="app-input" rows="2"></textarea>
                            </div>
                            <button type="submit" class="app-btn app-btn--primary">فتح سجل صيانة</button>
                        </form>
                    </div>
                    <div>
                        <div class="sf-table-wrap">
                            <table class="sf-table">
                                <thead>
                                    <tr class="text-slate-500 font-bold">
                                        <th>#</th>
                                        <th>العنوان</th>
                                        <th>{{ __('dashboard.type_label') }}</th>
                                        <th>{{ __('dashboard.status_label') }}</th>
                                        <th>التكلفة</th>
                                        <th>تحميل العميل</th>
                                        <th>العميل</th>
                                        <th>إجراء</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($maintenanceRows as $maintenance)
                                        <tr>
                                            <td>{{ $maintenance['id'] }}</td>
                                            <td>
                                                <div class="font-bold">{{ $maintenance['title'] }}</div>
                                                <div class="product-show-muted">{{ $maintenance['started_at'] ?? '-' }}</div>
                                            </td>
                                            <td>{{ $maintenance['type'] }}</td>
                                            <td>
                                                <span class="product-show-pill {{ $maintenance['status'] === 'completed' ? 'product-show-pill--success' : 'product-show-pill--danger' }}">
                                                    {{ $maintenance['status'] === 'completed' ? 'مكتملة' : 'مفتوحة' }}
                                                </span>
                                            </td>
                                            <td>{{ $maintenance['maintenance_cost'] }}</td>
                                            <td>{{ $maintenance['customer_charge_amount'] }}</td>
                                            <td>{{ $maintenance['customer_name'] }}</td>
                                            <td>
                                                @if($maintenance['status'] !== 'completed')
                                                    <form method="POST" action="{{ route('dashboard.products.maintenance.update', [$product, $maintenance['id']]) }}">
                                                        @csrf
                                                        @method('PATCH')
                                                        <input type="hidden" name="status" value="completed">
                                                        <button type="submit" class="app-btn app-btn--sm product-show-action--success">إنهاء</button>
                                                    </form>
                                                @else
                                                    <span class="product-show-muted">{{ $maintenance['completed_at'] ?? '-' }}</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center text-slate-500 py-8">لا توجد سجلات صيانة حتى الآن.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="app-card audit-trail">
            <div class="app-card__header">
                <h2 class="app-card__title">{{ __('dashboard.history_title') }}</h2>
                <div class="app-card__toolbar">
                    <span class="product-show-pill product-show-pill--dark">{{ __('dashboard.history_total') }}: {{ $auditSummary['total'] }}</span>
                    <span class="product-show-pill product-show-pill--success">{{ __('dashboard.history_created') }}: {{ $auditSummary['created'] }}</span>
                    <span class="product-show-pill product-show-pill--warning">{{ __('dashboard.history_updated') }}: {{ $auditSummary['updated'] }}</span>
                    <span class="product-show-pill product-show-pill--danger">{{ __('dashboard.history_deleted') }}: {{ $auditSummary['deleted'] }}</span>
                    <a href="#product_history_collapse" class="app-btn app-btn--sm app-btn--secondary" onclick="event.preventDefault();var el=document.getElementById('product_history_collapse');el.style.display=el.style.display==='none'?'block':'none'">
                        {{ __('dashboard.history_toggle') }}
                    </a>
                </div>
            </div>
            <div id="product_history_collapse" class="product-show-hidden">
                <div class="app-card__body">
                    <div class="timeline">
                        @forelse ($auditEntries as $entry)
                            <div class="timeline-item">
                                <div class="timeline-line w-40px"></div>
                                <div class="timeline-icon inline-flex rounded-full w-10 h-10 me-4">
                                    <div class="inline-flex items-center justify-center w-10 h-10 rounded-full">
                                        <i class="{{ $entry['icon'] }} text-xl text-blue-600 dark:text-blue-400"></i>
                                    </div>
                                </div>
                                <div class="timeline-content mb-10 mt-n1">
                                    <div class="pe-3 mb-5">
                                        <div class="text-base font-semibold mb-2">{{ $entry['headline'] }} {{ __('dashboard.history_event_by') }} <a href="#" class="text-blue-800 dark:text-blue-300 font-bold">{{ $entry['actor'] }}</a></div>
                                        <div class="flex items-center mt-1 text-sm">
                                            <div class="text-slate-500 dark:text-slate-400 text-xs">{{ $entry['timestamp'] }} ({{ $entry['timestamp_human'] }})</div>
                                        </div>
                                        <div class="mt-3">
                                            @foreach ($entry['changes'] as $change)
                                                <div class="flex flex-wrap">
                                                    <div class="font-bold">{{ $change['label'] }}:&nbsp;</div>
                                                    <div class="text-slate-500 dark:text-slate-400">
                                                        @if($change['has_old'])
                                                            <span class="text-red-600 dark:text-red-400 me-1"><s>{{ $change['old'] }}</s></span>
                                                        @endif
                                                        <i class="fa-solid fa-arrow-right text-slate-500 dark:text-slate-400 text-sm mx-1"></i>
                                                        <span class="text-emerald-600 dark:text-emerald-400 font-bold">{{ $change['new'] }}</span>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p>{{ __('dashboard.history_no_history_found') }}</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
</div>

@if(!$product->is_scrapped)
<div class="custom-modal" id="scrapProductModal" style="display:none;position:fixed;inset:0;z-index:1050;align-items:center;justify-content:center;background:rgba(15,23,42,.55);backdrop-filter:blur(4px)">
    <div style="width:min(560px,92vw);background:var(--bg-card);border-radius:1rem;box-shadow:0 24px 80px rgba(15,23,42,.32);overflow:hidden">
        <form method="POST" action="{{ route('dashboard.products.scrap', $product) }}">
            @csrf
            <div class="flex items-center justify-between gap-4 p-5 border-b border-slate-200">
                <h5 class="mb-0">تحويل المنتج إلى هالك</h5>
                <button type="button" class="app-btn app-btn--sm app-btn--secondary" data-modal-close aria-label="{{ __('dashboard.Close') }}">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="p-5">
                <p class="text-slate-500">سيتم استبعاد الفستان من الحجز والتتبع المتاح بعد هذه العملية.</p>
                <label class="app-label">سبب التحويل إلى هالك</label>
                <textarea name="scrap_reason" class="app-input" rows="4" placeholder="مثال: تلف نهائي غير قابل للإصلاح"></textarea>
            </div>
            <div class="flex justify-end gap-2 p-5 border-t border-slate-200">
                <button type="button" class="app-btn app-btn--secondary" data-modal-close>إلغاء</button>
                <button type="submit" class="app-btn app-btn--danger">تأكيد التحويل</button>
            </div>
        </form>
    </div>
</div>
@endif
@endsection