@extends('layouts.app')

@section('title', 'إدارة المنتجات')

@if (!Auth::check())
    <script>
        window.location.href = "{{ route('home') }}";
    </script>
@endif

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<div class="container mt-4">
    <div class="card shadow-sm">
        <div class="card-header bg-gradient-primary text-white p-3" style="background: linear-gradient(45deg, #4b6cb7, #182848);">
            <div class="d-flex justify-content-between align-items-center">
                <h3 class="mb-0">إدارة المنتجات</h3>
                <div class="d-flex gap-2">
                    <a href="{{ route('items.create') }}" class="btn btn-light btn-sm">
                        <i class="fas fa-plus me-1"></i>
                        إضافة منتج جديد
                    </a>
                    <a href="{{ route('admin') }}" class="btn btn-light btn-sm">
                        <i class="fas fa-home me-1"></i>
                        العودة للوحة التحكم
                    </a>
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="py-3 px-4">#</th>
                            <th>صورة المنتج</th>
                            <th>اسم المنتج</th>
                            <th>السعر القديم</th>
                            <th>السعر الجديد</th>
                            <th>الفئة</th>
                            <th>الحالة</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($items as $item)
                            <tr>
                                <td class="px-4 fw-bold">#{{ $item->id }}</td>
                                <td>
                                    <img src="{{ asset($item->main_img) }}"
                                         alt="{{ $item->item_name }}"
                                         class="rounded-3"
                                         style="width: 50px; height: 50px; object-fit: cover;">
                                </td>
                                <td>{{ $item->item_name }}</td>
                                <td>
                                    @if($item->old_price)
                                        <span class="text-decoration-line-through text-muted">
                                            {{ number_format($item->old_price) }} د.ع
                                        </span>
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    <span class="text-success fw-bold">
                                        {{ number_format($item->new_price) }} د.ع
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-info text-white">
                                        {{ $item->category->category_name }}
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        @if($item->trend)
                                            <span class="badge bg-success-subtle text-success px-2">رائج</span>
                                        @endif
                                        @if($item->new)
                                            <span class="badge bg-primary-subtle text-primary px-2">جديد</span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('items.edit', $item->id) }}"
                                           class="btn btn-sm btn-outline-primary me-2">
                                            <i class="fas fa-edit"></i>
                                            تعديل
                                        </a>
                                        <form action="{{ route('items.destroy', $item->id) }}"
                                              method="POST"
                                              style="display:inline;"
                                              onsubmit="return confirm('هل أنت متأكد من حذف هذا المنتج؟');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                                <i class="fas fa-trash"></i>
                                                حذف
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
.bg-gradient-primary {
    background: linear-gradient(45deg, #4b6cb7, #182848);
}
.card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
}
.table th {
    font-weight: 600;
    color: #495057;
}
.table td {
    vertical-align: middle;
}
.btn-group .btn {
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-group .btn:hover {
    transform: translateY(-1px);
}
.badge {
    font-weight: 500;
}
.table-responsive {
    border-radius: 0 0 10px 10px;
}
</style>

@endsection