@extends('layouts.seller')

@section('title', 'Creer un coupon')
@section('page-title', 'Nouveau Coupon')

@push('styles')
<style>
    .coupon-header {
        background: linear-gradient(135deg, #ec4899 0%, #f472b6 50%, #f9a8d4 100%);
        border-radius: 24px;
        padding: 40px;
        color: white;
        position: relative;
        overflow: hidden;
        margin-bottom: 30px;
    }
    .coupon-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%);
    }
    .coupon-header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
    .coupon-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(236, 72, 153, 0.05), rgba(244, 114, 182, 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.pink { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
    .form-card-header .icon-box.orange { background: rgba(249, 115, 22, 0.15); color: #f97316; }
    .form-card-header .icon-box.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
    .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: #ec4899;
        box-shadow: 0 0 0 4px rgba(236, 72, 153, 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; }
    .code-input { text-transform: uppercase; font-weight: 700; letter-spacing: 2px; font-family: 'Roboto Mono', monospace; }
    .code-preview {
        background: linear-gradient(135deg, #ec4899, #f472b6);
        border-radius: 16px; padding: 20px; text-align: center; margin-top: 12px;
        position: relative; overflow: hidden;
    }
    .code-preview::before {
        content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
        width: 20px; height: 20px; background: white; border-radius: 50%;
    }
    .code-preview::after {
        content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
        width: 20px; height: 20px; background: white; border-radius: 50%;
    }
    .code-preview .code { color: white; font-size: 1.4rem; font-weight: 800; letter-spacing: 3px; font-family: 'Roboto Mono', monospace; }
    .type-toggle { display: flex; gap: 12px; }
    .type-toggle .toggle-option {
        flex: 1; padding: 16px; border: 2px solid #e5e7eb; border-radius: 14px;
        cursor: pointer; text-align: center; transition: all 0.3s ease; background: #fafafa;
    }
    .type-toggle .toggle-option:hover { border-color: #ec4899; background: rgba(236, 72, 153, 0.05); }
    .type-toggle .toggle-option.active { border-color: #ec4899; background: rgba(236, 72, 153, 0.1); }
    .type-toggle .toggle-option .icon { font-size: 1.8rem; margin-bottom: 8px; display: block; }
    .type-toggle .toggle-option .label { font-weight: 600; color: #374151; display: block; }
    .type-toggle .toggle-option .desc { font-size: 0.8rem; color: #64748b; }
    .type-toggle input[type="radio"] { display: none; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }
    .value-input-wrapper { position: relative; }
    .value-input-wrapper .unit-badge {
        position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
        background: linear-gradient(135deg, #ec4899, #f472b6);
        color: white; padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 0.8rem;
    }
    .value-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, #ec4899, #f472b6);
        color: white; border: none; display: inline-flex; align-items: center; gap: 10px;
    }
    .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(236, 72, 153, 0.4); color: white; }
</style>
@endpush

@section('content')
<div class="coupon-header">
    <div class="d-flex align-items-center gap-4 flex-wrap">
        <div class="header-icon"><i class="bi bi-ticket-perforated"></i></div>
        <div>
            <h1>Creer un coupon promo</h1>
            <p>Boostez vos ventes avec des offres irresistibles</p>
        </div>
    </div>
</div>

<form action="{{ route('seller.coupons.store') }}" method="POST" id="couponForm">
    @csrf
    <div class="form-card">
        <div class="form-card-header">
            <div class="icon-box pink"><i class="bi bi-tag"></i></div>
            <div><h5>Code promotionnel</h5><p>Creez un code unique et memorisable</p></div>
        </div>
        <div class="form-card-body">
            <div class="modern-input-group">
                <label>Code du coupon <span class="required">*</span></label>
                <input type="text" name="code" id="couponCode" class="form-control code-input" value="{{ old('code') }}" placeholder="PROMO20" maxlength="20" required>
                <p class="input-hint">Utilisez des lettres et chiffres - sera affiche en majuscules</p>
                @error('code')<p class="error-text"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</p>@enderror
                <div class="code-preview" id="codePreview" style="display:none;">
                    <span class="code" id="previewCode">PROMO20</span>
                </div>
            </div>
            
            <div class="modern-input-group">
                <label>Nom du coupon</label>
                <input type="text" name="name" class="form-control" value="{{ old('name') }}" placeholder="Promo d'été 2024" maxlength="255">
                <p class="input-hint">Un nom descriptif pour identifier facilement ce coupon</p>
            </div>
            
            <div class="modern-input-group">
                <label>Description</label>
                <textarea name="description" class="form-control" rows="2" placeholder="Description optionnelle du coupon...">{{ old('description') }}</textarea>
            </div>
            
            <!-- Info importante sur le scope du coupon -->
            <div class="alert alert-info mt-3">
                <i class="bi bi-info-circle me-2"></i>
                <strong>Important :</strong> Ce coupon sera automatiquement valide uniquement sur vos propres produits.
            </div>
        </div>
    </div>
    
    <div class="form-card">
        <div class="form-card-header">
            <div class="icon-box orange"><i class="bi bi-percent"></i></div>
            <div><h5>Type et valeur</h5><p>Definissez la reduction offerte</p></div>
        </div>
        <div class="form-card-body">
            <div class="modern-input-group">
                <label>Type de reduction <span class="required">*</span></label>
                <div class="type-toggle">
                    <label class="toggle-option active" id="optionPercent">
                        <input type="radio" name="type" value="percentage" checked>
                        <span class="icon">%</span>
                        <span class="label">Pourcentage</span>
                        <span class="desc">Ex: -20% sur tout</span>
                    </label>
                    <label class="toggle-option" id="optionFixed">
                        <input type="radio" name="type" value="fixed">
                        <span class="icon">XOF</span>
                        <span class="label">Montant fixe</span>
                        <span class="desc">Ex: -5000 XOF</span>
                    </label>
                </div>
            </div>
            <div class="form-row">
                <div class="modern-input-group">
                    <label>Valeur de la reduction <span class="required">*</span></label>
                    <div class="value-input-wrapper">
                        <input type="number" name="value" id="couponValue" class="form-control" value="{{ old('value') }}" min="0" step="0.01" placeholder="20" required>
                        <span class="unit-badge" id="unitBadge">%</span>
                    </div>
                    @error('value')<p class="error-text"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</p>@enderror
                </div>
                <div class="modern-input-group">
                    <label>Réduction maximum (XOF)</label>
                    <input type="number" name="max_discount" class="form-control" value="{{ old('max_discount') }}" min="0" placeholder="50000">
                    <p class="input-hint">Plafond de réduction (pour les coupons en pourcentage)</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="form-card">
        <div class="form-card-header">
            <div class="icon-box blue"><i class="bi bi-sliders"></i></div>
            <div><h5>Conditions</h5><p>Parametres optionnels</p></div>
        </div>
        <div class="form-card-body">
            <div class="form-row">
                <div class="modern-input-group">
                    <label>Commande minimum (XOF)</label>
                    <input type="number" name="min_order_amount" class="form-control" value="{{ old('min_order_amount', 0) }}" min="0" placeholder="10000">
                    <p class="input-hint">Laisser 0 pour aucun minimum</p>
                </div>
                <div class="modern-input-group">
                    <label>Utilisations totales max</label>
                    <input type="number" name="usage_limit" class="form-control" value="{{ old('usage_limit') }}" min="1" placeholder="100">
                    <p class="input-hint">Laisser vide pour illimite</p>
                </div>
            </div>
            <div class="form-row">
                <div class="modern-input-group">
                    <label>Utilisations max par utilisateur</label>
                    <input type="number" name="usage_per_user" class="form-control" value="{{ old('usage_per_user') }}" min="1" placeholder="1">
                    <p class="input-hint">Combien de fois un client peut utiliser ce coupon</p>
                </div>
                <div class="modern-input-group">
                    &nbsp;
                </div>
            </div>
            <div class="form-row">
                <div class="modern-input-group">
                    <label>Date de début</label>
                    <input type="datetime-local" name="starts_at" class="form-control" value="{{ old('starts_at') }}">
                    <p class="input-hint">Laisser vide pour activer immédiatement</p>
                </div>
                <div class="modern-input-group">
                    <label>Date d'expiration</label>
                    <input type="datetime-local" name="expires_at" class="form-control" value="{{ old('expires_at') }}">
                    <p class="input-hint">Laisser vide pour aucune date limite</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="form-actions">
        <a href="{{ route('seller.coupons.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 coupon</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
const codeInput = document.getElementById('couponCode');
const previewCode = document.getElementById('previewCode');
const codePreview = document.getElementById('codePreview');
const toggleOptions = document.querySelectorAll('.toggle-option');
const unitBadge = document.getElementById('unitBadge');

codeInput.addEventListener('input', function() {
    const code = this.value.toUpperCase();
    if (code.length > 0) {
        previewCode.textContent = code;
        codePreview.style.display = 'block';
    } else {
        codePreview.style.display = 'none';
    }
});

toggleOptions.forEach(option => {
    option.addEventListener('click', function() {
        toggleOptions.forEach(o => o.classList.remove('active'));
        this.classList.add('active');
        const type = this.querySelector('input').value;
        unitBadge.textContent = type === 'percentage' ? '%' : 'XOF';
    });
});
</script>
@endpush
