@extends('layouts.app')

@section('title', 'إضافة منتج جديد')

@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="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">إضافة منتج جديد</h3>
                        <a href="{{ route('items.index') }}" class="btn btn-light btn-sm">
                            <i class="fas fa-arrow-right me-1"></i>
                            العودة للمنتجات
                        </a>
                    </div>
                </div>

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

                        <div class="row g-3">
                            <!-- اسم المنتج -->
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="item_name" class="form-label fw-bold">
                                        <i class="fas fa-tag text-primary me-1"></i>
                                        اسم المنتج
                                    </label>
                                    <input type="text"
                                        name="item_name"
                                        id="item_name"
                                        class="form-control @error('item_name') is-invalid @enderror"
                                        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">
                                        <i class="fas fa-align-left text-primary me-1"></i>
                                        وصف المنتج
                                    </label>
                                    <textarea name="description"
                                              id="description"
                                              class="form-control @error('description') is-invalid @enderror"
                                              rows="4"
                                              required></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">
                                        <i class="fas fa-tag text-primary me-1"></i>
                                        السعر القديم
                                    </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">
                                        <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">
                                        <i class="fas fa-tags text-primary me-1"></i>
                                        السعر الجديد
                                    </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"
                                               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">
                                        <i class="fas fa-folder text-primary me-1"></i>
                                        الفئة
                                    </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 }}">{{ $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">
                                                <i class="fas fa-image text-primary me-1"></i>
                                                الصورة الرئيسية
                                            </label>
                                            <input type="file"
                                                   name="main_img"
                                                   id="main_img"
                                                   class="form-control @error('main_img') is-invalid @enderror"
                                                   accept="image/*"
                                                   required>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="img_1" class="form-label fw-bold">صورة إضافية 1</label>
                                            <input type="file"
                                                   name="img_1"
                                                   id="img_1"
                                                   class="form-control"
                                                   accept="image/*">
                                        </div>

                                        <div class="col-md-4">
                                            <label for="img_2" class="form-label fw-bold">صورة إضافية 2</label>
                                            <input type="file"
                                                   name="img_2"
                                                   id="img_2"
                                                   class="form-control"
                                                   accept="image/*">
                                        </div>

                                        <div class="col-md-4">
                                            <label for="img_3" class="form-label fw-bold">صورة إضافية 3</label>
                                            <input type="file"
                                                   name="img_3"
                                                   id="img_3"
                                                   class="form-control"
                                                   accept="image/*">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- خيارات المنتج -->
                            <div class="col-12">
                                <div class="product-options p-3 bg-light rounded">
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <div class="form-check custom-check">
                                                <input type="checkbox"
                                                       name="trend"
                                                       id="trend"
                                                       class="form-check-input"
                                                       value="1">
                                                <label for="trend" class="form-check-label">
                                                    <i class="fas fa-fire text-warning me-1"></i>
                                                    منتج رائج
                                                </label>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-check custom-check">
                                                <input type="checkbox"
                                                       name="new"
                                                       id="new"
                                                       class="form-check-input"
                                                       value="1">
                                                <label for="new" class="form-check-label">
                                                    <i class="fas fa-star text-primary me-1"></i>
                                                    منتج جديد
                                                </label>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-check custom-check">
                                                <input type="checkbox"
                                                       name="exist"
                                                       id="exist"
                                                       class="form-check-input"
                                                       value="1">
                                                <label for="exist" class="form-check-label">
                                                    <i class="fas fa-check-circle text-success me-1"></i>
                                                    متوفر
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 mt-4">
                                <button type="submit" class="btn btn-primary btn-lg w-100">
                                    <i class="fas fa-save me-2"></i>
                                    حفظ المنتج
                                </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;
}
.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