@extends('layouts.app')

@section('title', 'تعديل منتج')

@section('content')
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <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">تعديل المنتج #{{ $item->id }}</h3>
                        <a href="{{ route('items.index') }}" class="btn btn-light btn-sm">
                            العودة للمنتجات
                        </a>
                    </div>
                </div>

                <div class="card-body p-4">
                    <form action="{{ route('items.update', $item->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="row g-3">
                            <!-- اسم المنتج -->
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="item_name" class="form-label fw-bold">
                                        اسم المنتج
                                    </label>
                                    <input type="text"
                                           name="item_name"
                                           id="item_name"
                                           class="form-control @error('item_name') is-invalid @enderror"
                                           value="{{ old('item_name', $item->item_name) }}"
                                           required>
                                    @error('item_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- وصف المنتج -->
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="description" class="form-label fw-bold">
                                        وصف المنتج
                                    </label>
                                    <textarea name="description"
                                              id="description"
                                              class="form-control @error('description') is-invalid @enderror"
                                              rows="4"
                                              required>{{ old('description', $item->description) }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- الأسعار -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="old_price" class="form-label fw-bold">
                                        السعر القديم
                                    </label>
                                    <div class="input-group">
                                        <input type="number"
                                               step="250"
                                               name="old_price"
                                               id="old_price"
                                               class="form-control @error('old_price') is-invalid @enderror"
                                               value="{{ old('old_price', $item->old_price) }}">
                                        <span class="input-group-text">د.ع</span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="new_price" class="form-label fw-bold">
                                        السعر الجديد
                                    </label>
                                    <div class="input-group">
                                        <input type="number"
                                               step="250"
                                               name="new_price"
                                               id="new_price"
                                               class="form-control @error('new_price') is-invalid @enderror"
                                               value="{{ old('new_price', $item->new_price) }}"
                                               required>
                                        <span class="input-group-text">د.ع</span>
                                    </div>
                                </div>
                            </div>

                            <!-- الفئة -->
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="category_id" class="form-label fw-bold">
                                        الفئة
                                    </label>
                                    <select name="category_id"
                                            id="category_id"
                                            class="form-select @error('category_id') is-invalid @enderror"
                                            required>
                                        <option value="">اختر فئة</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}" {{ $item->category_id == $category->id ? 'selected' : '' }}>
                                                {{ $category->category_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- الصور -->
                            <div class="col-12">
                                <div class="image-upload-container p-3 bg-light rounded">
                                    <div class="row g-3">
                                        <!-- الصورة الرئيسية -->
                                        <div class="col-md-12">
                                            <label for="main_img" class="form-label fw-bold">
                                                الصورة الرئيسية
                                            </label>
                                            <div class="current-image mb-2">
                                                @if ($item->main_img)
                                                    <img src="{{ asset($item->main_img) }}"
                                                         alt="{{ $item->item_name }}"
                                                         class="rounded"
                                                         style="max-height: 100px;">
                                                @endif
                                            </div>
                                            <input type="file"
                                                   name="main_img"
                                                   id="main_img"
                                                   class="form-control @error('main_img') is-invalid @enderror"
                                                   accept="image/*">
                                            <small class="text-muted">اترك هذا الحقل فارغًا للاحتفاظ بالصورة الحالية</small>
                                        </div>

                                        <!-- الصور الإضافية -->
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="img_1" class="form-label fw-bold">صورة إضافية 1</label>
                                                @if ($item->img_1)
                                                    <div class="current-image mb-2">
                                                        <img src="{{ asset($item->img_1) }}"
                                                             alt="{{ $item->item_name }}"
                                                             class="rounded"
                                                             style="max-height: 100px;">
                                                        <div class="form-check mt-1">
                                                            <input type="checkbox"
                                                                   name="delete_img_1"
                                                                   value="1"
                                                                   class="form-check-input">
                                                            <label class="form-check-label text-danger">حذف الصورة</label>
                                                        </div>
                                                    </div>
                                                @endif
                                                <input type="file"
                                                       name="img_1"
                                                       id="img_1"
                                                       class="form-control"
                                                       accept="image/*">
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="img_2" class="form-label fw-bold">صورة إضافية 2</label>
                                                @if ($item->img_2)
                                                    <div class="current-image mb-2">
                                                        <img src="{{ asset($item->img_2) }}"
                                                             alt="{{ $item->item_name }}"
                                                             class="rounded"
                                                             style="max-height: 100px;">
                                                        <div class="form-check mt-1">
                                                            <input type="checkbox"
                                                                   name="delete_img_2"
                                                                   value="1"
                                                                   class="form-check-input">
                                                            <label class="form-check-label text-danger">حذف الصورة</label>
                                                        </div>
                                                    </div>
                                                @endif
                                                <input type="file"
                                                       name="img_2"
                                                       id="img_2"
                                                       class="form-control"
                                                       accept="image/*">
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="img_3" class="form-label fw-bold">صورة إضافية 3</label>
                                                @if ($item->img_3)
                                                    <div class="current-image mb-2">
                                                        <img src="{{ asset($item->img_3) }}"
                                                             alt="{{ $item->item_name }}"
                                                             class="rounded"
                                                             style="max-height: 100px;">
                                                        <div class="form-check mt-1">
                                                            <input type="checkbox"
                                                                   name="delete_img_3"
                                                                   value="1"
                                                                   class="form-check-input">
                                                            <label class="form-check-label text-danger">حذف الصورة</label>
                                                        </div>
                                                    </div>
                                                @endif
                                                <input type="file"
                                                       name="img_3"
                                                       id="img_3"
                                                       class="form-control"
                                                       accept="image/*">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- خيارات المنتج -->
                            <div class="col-12">
                                <div class="product-options p-3 bg-light rounded">
                                    <h6 class="fw-bold mb-3">
                                        خيارات المنتج
                                    </h6>
                                    <div class="d-flex flex-column gap-3">
                                        <div class="form-check custom-check w-100">
                                            <input type="checkbox"
                                                   name="trend"
                                                   id="trend"
                                                   class="form-check-input"
                                                   value="1"
                                                   {{ $item->trend ? 'checked' : '' }}>
                                            <label for="trend" class="form-check-label">
                                                منتج رائج
                                            </label>
                                        </div>

                                        <div class="form-check custom-check w-100">
                                            <input type="checkbox"
                                                   name="new"
                                                   id="new"
                                                   class="form-check-input"
                                                   value="1"
                                                   {{ $item->new ? 'checked' : '' }}>
                                            <label for="new" class="form-check-label">
                                                منتج جديد
                                            </label>
                                        </div>

                                        <div class="form-check custom-check w-100">
                                            <input type="checkbox"
                                                   name="exist"
                                                   id="exist"
                                                   class="form-check-input"
                                                   value="1"
                                                   {{ $item->exist ? 'checked' : '' }}>
                                            <label for="exist" class="form-check-label">
                                                متوفر
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 mt-4">
                                <button type="submit" class="btn btn-primary btn-lg w-100">
                                    حفظ التغييرات
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.bg-gradient-primary {
    background: linear-gradient(45deg, #4b6cb7, #182848);
}
.card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
}
.form-control, .form-select {
    border-radius: 8px;
    padding: 0.6rem 1rem;
    border: 1px solid #dee2e6;
    transition: all 0.2s;
}
.form-control:focus, .form-select:focus {
    border-color: #4b6cb7;
    box-shadow: 0 0 0 0.2rem rgba(75, 108, 183, 0.25);
}
.image-upload-container {
    border: 2px dashed #dee2e6;
    transition: all 0.3s;
}
.image-upload-container:hover {
    border-color: #4b6cb7;
}
.current-image {
    padding: 0.5rem;
    background: white;
    border-radius: 8px;
    text-align: center;
}
.product-options {
    border-radius: 8px;
}
.custom-check {
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
}
.custom-check:hover {
    background: rgba(75, 108, 183, 0.1);
}
.btn-primary {
    background: linear-gradient(45deg, #4b6cb7, #182848);
    border: none;
    transition: all 0.3s;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 108, 183, 0.3);
}
</style>

@endsection