@extends('layouts.seller')

@section('title', 'Ajouter un produit')
@section('page-title', 'Nouveau Produit')

@push('styles')
<style>
    .create-header {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
        border-radius: 24px;
        padding: 40px;
        color: white;
        position: relative;
        overflow: hidden;
        margin-bottom: 30px;
    }
    .create-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 60%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    }
    .create-header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
    .create-header p { opacity: 0.9; margin: 0; }
    .header-icon {
        width: 80px; height: 80px;
        background: rgba(255,255,255,0.2);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        display: flex; align-items: center; justify-content: center;
        font-size: 2.5rem;
    }
    .form-card {
        background: white;
        border-radius: 24px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.05);
        margin-bottom: 24px;
    }
    .form-card-header {
        padding: 24px 30px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        display: flex; align-items: center; gap: 16px;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    }
    .form-card-header .icon-box {
        width: 50px; height: 50px; border-radius: 14px;
        display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    }
    .form-card-header .icon-box.primary { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
    .form-card-header .icon-box.success { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
    .form-card-header .icon-box.warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
    .form-card-header h5 { margin: 0; font-weight: 700; font-size: 1.1rem; }
    .form-card-header p { margin: 0; font-size: 0.85rem; color: #64748b; }
    .form-card-body { padding: 30px; }
    .modern-input-group { margin-bottom: 24px; }
    .modern-input-group label {
        display: block; font-weight: 600; font-size: 0.9rem;
        color: #374151; margin-bottom: 10px;
    }
    .modern-input-group label .required { color: #ef4444; }
    .modern-input-group .form-control,
    .modern-input-group .form-select {
        border: 2px solid #e5e7eb; border-radius: 14px;
        padding: 14px 18px; font-size: 0.95rem;
        transition: all 0.3s ease; background: #fafafa;
    }
    .modern-input-group .form-control:focus,
    .modern-input-group .form-select:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        background: white;
    }
    .modern-input-group .input-hint { font-size: 0.8rem; color: #6b7280; margin-top: 6px; }
    .modern-input-group .error-text { font-size: 0.8rem; color: #ef4444; margin-top: 6px; }
    .ai-generate-btn {
        background: linear-gradient(135deg, #8b5cf6, #6366f1);
        color: white; border: none; border-radius: 12px;
        padding: 10px 20px; font-weight: 600; font-size: 0.85rem;
        display: inline-flex; align-items: center; gap: 8px;
        transition: all 0.3s ease; cursor: pointer;
    }
    .ai-generate-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); color: white; }
    .ai-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .ai-generate-btn .sparkle { animation: sparkle 1.5s ease-in-out infinite; }
    @keyframes sparkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2) rotate(15deg); } }
    .image-upload-zone {
        border: 3px dashed #e5e7eb; border-radius: 20px; padding: 40px;
        text-align: center; cursor: pointer; transition: all 0.3s ease;
        background: linear-gradient(135deg, #fafafa, #f5f5f5);
        position: relative;
    }
    .image-upload-zone:hover { border-color: #6366f1; background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05)); }
    .image-upload-zone.dragover { border-color: #6366f1; background: rgba(99, 102, 241, 0.1); transform: scale(1.02); }
    .image-upload-zone .upload-icon {
        width: 80px; height: 80px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        margin: 0 auto 20px; font-size: 2rem; color: white;
    }
    .image-upload-zone h4 { font-weight: 700; margin-bottom: 8px; color: #374151; }
    .image-upload-zone p { color: #6b7280; margin: 0; font-size: 0.9rem; }
    .image-upload-zone input[type="file"] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }
    .image-preview { position: relative; display: inline-block; margin-top: 20px; }
    .image-preview img { width: 200px; height: 200px; object-fit: cover; border-radius: 16px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
    .image-preview .remove-btn {
        position: absolute; top: -10px; right: -10px; width: 32px; height: 32px;
        background: #ef4444; color: white; border: none; border-radius: 50%;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .image-preview .remove-btn:hover { transform: scale(1.1); background: #dc2626; }
    .price-input-wrapper { position: relative; }
    .price-input-wrapper .currency-badge {
        position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: white; padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 0.8rem;
    }
    .price-input-wrapper .form-control { padding-right: 80px; }
    .form-actions { display: flex; justify-content: flex-end; gap: 16px; padding-top: 20px; border-top: 1px solid #e5e7eb; margin-top: 30px; }
    .btn-cancel { padding: 14px 28px; border-radius: 14px; font-weight: 600; background: #f3f4f6; color: #374151; border: 2px solid #e5e7eb; }
    .btn-cancel:hover { background: #e5e7eb; }
    .btn-submit {
        padding: 14px 32px; border-radius: 14px; font-weight: 700;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: white; border: none; display: inline-flex; align-items: center; gap: 10px;
    }
    .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4); color: white; }
    .ai-alert {
        border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 12px;
        margin-bottom: 16px; font-size: 0.85rem;
    }
    .ai-alert.info { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); color: #1e40af; }
    .ai-alert.warning { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); color: #92400e; }
    .ai-alert .alert-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    .ai-alert.info .alert-icon { background: rgba(59, 130, 246, 0.2); }
    .ai-alert.warning .alert-icon { background: rgba(245, 158, 11, 0.2); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }
</style>
@endpush

@section('content')
<div class="create-header">
    <div class="d-flex align-items-center gap-4 flex-wrap">
        <div class="header-icon"><i class="bi bi-box-seam"></i></div>
        <div>
            <h1>Ajouter un nouveau produit</h1>
            <p>Creez une fiche produit attrayante pour booster vos ventes</p>
        </div>
    </div>
</div>

<form action="{{ route('seller.products.store') }}" method="POST" enctype="multipart/form-data" id="productForm">
    @csrf
    <div class="form-card">
        <div class="form-card-header">
            <div class="icon-box primary"><i class="bi bi-info-circle"></i></div>
            <div><h5>Informations de base</h5><p>Les details essentiels de votre produit</p></div>
        </div>
        <div class="form-card-body">
            <div class="modern-input-group">
                <label>Nom du produit <span class="required">*</span></label>
                <input type="text" name="name" id="product-name" class="form-control" value="{{ old('name') }}" placeholder="Ex: Robe elegante en soie" required>
                @error('name')<p class="error-text"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</p>@enderror
            </div>
            <div class="modern-input-group">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="mb-0">Description <span class="required">*</span></label>
                    <button type="button" id="generate-ai-description" class="ai-generate-btn">
                        <i class="bi bi-stars sparkle"></i> Generer avec IA
                    </button>
                </div>
                <div class="ai-alert warning" id="ai-warning" style="display:none;">
                    <div class="alert-icon"><i class="bi bi-lightbulb"></i></div>
                    <div><strong>Option basique:</strong> Description basee sur le nom, categorie et prix.</div>
                </div>
                <div class="ai-alert info" id="ai-vision-info" style="display:none;">
                    <div class="alert-icon"><i class="bi bi-eye"></i></div>
                    <div><strong>Vision IA:</strong> L'image sera analysee pour une description ultra-precise.</div>
                </div>
                <textarea name="description" id="product-description" class="form-control" rows="5" placeholder="Decrivez votre produit en detail..." required>{{ old('description') }}</textarea>
                <p class="input-hint" id="ai-status"></p>
                @error('description')<p class="error-text"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</p>@enderror
            </div>
            <div class="modern-input-group">
                <label>Categorie <span class="required">*</span></label>
                <select name="category_id" id="product-category" class="form-select" required>
                    <option value="">Selectionnez une categorie</option>
                    @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
                @error('category_id')<p class="error-text"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</p>@enderror
            </div>
        </div>
    </div>
    <div class="form-card">
        <div class="form-card-header">
            <div class="icon-box success"><i class="bi bi-currency-exchange"></i></div>
            <div><h5>Prix et Inventaire</h5><p>Definissez le prix et gerez votre stock</p></div>
        </div>
        <div class="form-card-body">
            <div class="form-row">
                <div class="modern-input-group">
                    <label>Prix de vente <span class="required">*</span></label>
                    <div class="price-input-wrapper">
                        <input type="number" name="price" id="product-price" class="form-control" value="{{ old('price') }}" min="0" placeholder="25000" required>
                        <span class="currency-badge">XOF</span>
                    </div>
                    @error('price')<p class="error-text"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</p>@enderror
                </div>
                <div class="modern-input-group">
                    <label>Quantite en stock <span class="required">*</span></label>
                    <input type="number" name="stock" class="form-control" value="{{ old('stock', 1) }}" min="0" placeholder="10" required>
                    <p class="input-hint">Nombre d'unites disponibles</p>
                    @error('stock')<p class="error-text"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</p>@enderror
                </div>
            </div>
        </div>
    </div>
    <div class="form-card">
        <div class="form-card-header">
            <div class="icon-box warning"><i class="bi bi-image"></i></div>
            <div><h5>Image du produit</h5><p>Une belle image augmente vos chances de vente</p></div>
        </div>
        <div class="form-card-body">
            <div class="image-upload-zone" id="uploadZone">
                <div class="upload-icon"><i class="bi bi-cloud-arrow-up"></i></div>
                <h4>Glissez votre image ici</h4>
                <p>ou cliquez pour parcourir - JPG, PNG - Max 5MB</p>
                <input type="file" name="image" id="product-image" accept="image/*">
            </div>
            <div class="image-preview" id="imagePreviewContainer" style="display:none;">
                <img id="imagePreview" src="" alt="Apercu">
                <button type="button" class="remove-btn" id="removeImage"><i class="bi bi-x"></i></button>
            </div>
        </div>
    </div>
    <div class="form-actions">
        <a href="{{ route('seller.products.index') }}" class="btn-cancel"><i class="bi bi-x-lg me-2"></i>Annuler</a>
        <button type="submit" class="btn-submit"><i class="bi bi-check2-circle"></i>Creer le produit</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
let imageBase64 = null;
const uploadZone = document.getElementById('uploadZone');
const fileInput = document.getElementById('product-image');

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => uploadZone.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); }));
['dragenter', 'dragover'].forEach(e => uploadZone.addEventListener(e, () => uploadZone.classList.add('dragover')));
['dragleave', 'drop'].forEach(e => uploadZone.addEventListener(e, () => uploadZone.classList.remove('dragover')));
uploadZone.addEventListener('drop', e => { if (e.dataTransfer.files.length) { fileInput.files = e.dataTransfer.files; handleImagePreview(e.dataTransfer.files[0]); } });
fileInput.addEventListener('change', e => { if (e.target.files.length) handleImagePreview(e.target.files[0]); });

function handleImagePreview(file) {
    const reader = new FileReader();
    reader.onload = e => {
        imageBase64 = e.target.result;
        document.getElementById('imagePreview').src = imageBase64;
        document.getElementById('imagePreviewContainer').style.display = 'inline-block';
        uploadZone.style.display = 'none';
    };
    reader.readAsDataURL(file);
}
document.getElementById('removeImage').addEventListener('click', () => {
    fileInput.value = ''; imageBase64 = null;
    document.getElementById('imagePreviewContainer').style.display = 'none';
    uploadZone.style.display = 'block';
});

document.getElementById('generate-ai-description').addEventListener('click', function() {
    const btn = this, name = document.getElementById('product-name').value;
    const categoryId = document.getElementById('product-category').value;
    const price = document.getElementById('product-price').value;
    const descriptionField = document.getElementById('product-description');
    const statusField = document.getElementById('ai-status');
    if (!name) { Swal.fire({ icon: 'warning', title: 'Champ requis', text: 'Entrez le nom du produit', confirmButtonColor: '#6366f1' }); return; }
    btn.disabled = true; btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Generation...';
    statusField.innerHTML = '<i class="bi bi-hourglass-split text-primary me-1"></i>L\'IA genere une description...';
    fetch('/api/test-generate-description', {
        method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({ name, category_id: categoryId, price, image_base64: imageBase64 })
    }).then(r => r.json()).then(data => {
        if (data.success && data.description) {
            descriptionField.value = data.description;
            statusField.innerHTML = '<i class="bi bi-check-circle text-success me-1"></i>Description generee !';
            if (data.vision_used) { document.getElementById('ai-vision-info').style.display = 'flex'; document.getElementById('ai-warning').style.display = 'none'; }
            else { document.getElementById('ai-warning').style.display = 'flex'; document.getElementById('ai-vision-info').style.display = 'none'; }
        } else throw new Error(data.error || 'Erreur');
    }).catch(e => { statusField.innerHTML = '<i class="bi bi-exclamation-circle text-danger me-1"></i>' + e.message; })
    .finally(() => { btn.disabled = false; btn.innerHTML = '<i class="bi bi-stars sparkle"></i> Generer avec IA'; });
});
</script>
@endpush
