@layout('promotions/layout')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="d-flex align-items-center mb-4">
            <a href="/admin-ui/promotions" class="btn btn-outline-secondary me-3"><i
                    class="fa-solid fa-arrow-left"></i></a>
            <div>
                <h2 class="fw-bold mb-0">Nouvelle Campagne</h2>
                <p class="text-muted mb-0">Configurez votre publicité en quelques étapes.</p>
            </div>
        </div>

        <form action="/promotions" method="POST" enctype="multipart/form-data" id="createForm">
            <!-- 1. General Info -->
            <div class="card mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0 fw-bold text-primary"><i class="fa-solid fa-layer-group me-2"></i>Informations
                        Générales</h5>
                </div>
                <div class="card-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Titre de la campagne <span
                                class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control form-control-lg" required
                            placeholder="Ex: Offre Spéciale Tabaski">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="2"
                            placeholder="Détails visibles par l'utilisateur..."></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Type d'affichage</label>
                            <select name="type" class="form-select">
                                <option value="banner">🖼️ Bannière (Classique)</option>
                                <option value="flash_sale">⚡ Vente Flash (Urgent)</option>
                                <option value="popup">🛑 Popup (Interstitial)</option>
                                <option value="sponsored_place">⭐ Lieu Sponsorisé</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Emplacement</label>
                            <select name="placement" class="form-select">
                                <option value="home_feed">🏠 Fil d'actualité</option>
                                <option value="search_result">🔍 Résultats de recherche</option>
                                <option value="app_launch">🚀 Au lancement de l'app</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-0">
                        <label class="form-label fw-bold">Destination (Action URL)</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa-solid fa-link"></i></span>
                            <input type="text" name="actionUrl" class="form-control"
                                placeholder="https://site.com ou myapp://produit/123">
                        </div>
                        <div class="form-text">Lien vers lequel l'utilisateur sera redirigé au clic.</div>
                    </div>
                </div>
            </div>

            <!-- 2. Ciblage -->
            <div class="card mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0 fw-bold text-primary"><i class="fa-solid fa-crosshairs me-2"></i>Ciblage (Audience)
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="d-flex gap-3 mb-4">
                        <div class="form-check card-radio w-50 p-0">
                            <input class="btn-check" type="radio" name="targetType" id="targetZone" value="zone" checked
                                onchange="toggleTarget('zone')">
                            <label class="btn btn-outline-primary w-100 p-3 text-start" for="targetZone">
                                <i class="fa-solid fa-map mb-2 d-block fs-4"></i>
                                <span class="fw-bold d-block">Par Zone Géographique</span>
                                <small class="text-muted">Cibler tout un pays ou une région.</small>
                            </label>
                        </div>
                        <div class="form-check card-radio w-50 p-0">
                            <input class="btn-check" type="radio" name="targetType" id="targetProximity"
                                value="proximity" onchange="toggleTarget('proximity')">
                            <label class="btn btn-outline-primary w-100 p-3 text-start" for="targetProximity">
                                <i class="fa-solid fa-location-dot mb-2 d-block fs-4"></i>
                                <span class="fw-bold d-block">Par Proximité GPS</span>
                                <small class="text-muted">Rayon précis autour d'un point.</small>
                            </label>
                        </div>
                    </div>

                    <!-- Zone Inputs -->
                    <div id="zoneInputs" class="bg-light p-3 rounded border">
                        <label class="form-label fw-bold">Code Pays (ISO)</label>
                        <select id="targetCountry" class="form-select">
                            <option value="BJ">🇧🇯 Bénin (BJ)</option>
                            <option value="TG">🇹🇬 Togo (TG)</option>
                            <option value="CI">🇨🇮 Côte d'Ivoire (CI)</option>
                            <option value="SN">🇸🇳 Sénégal (SN)</option>
                        </select>
                    </div>

                    <!-- Proximity Inputs -->
                    <div id="proximityInputs" class="bg-light p-3 rounded border" style="display:none;">
                        <div class="alert alert-info py-2 small"><i class="fa-solid fa-info-circle"></i> Utilisez Google
                            Maps pour trouver les coordonnées.</div>
                        <div class="row g-2">
                            <div class="col-md-4">
                                <label class="small text-muted">Latitude</label>
                                <input type="number" step="any" id="lat" class="form-control" placeholder="6.3654">
                            </div>
                            <div class="col-md-4">
                                <label class="small text-muted">Longitude</label>
                                <input type="number" step="any" id="lng" class="form-control" placeholder="2.4183">
                            </div>
                            <div class="col-md-4">
                                <label class="small text-muted">Rayon (km)</label>
                                <div class="input-group">
                                    <input type="number" id="radius" class="form-control" value="5">
                                    <span class="input-group-text">km</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" name="targeting" id="targetingInput">
                </div>
            </div>

            <!-- 3. Budget & Dates -->
            <div class="card mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0 fw-bold text-primary"><i class="fa-solid fa-coins me-2"></i>Budget & Période</h5>
                </div>
                <div class="card-body p-4">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Date de début</label>
                            <input type="datetime-local" name="startDate" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Date de fin</label>
                            <input type="datetime-local" name="endDate" class="form-control">
                        </div>
                    </div>

                    <div class="bg-light p-3 rounded border">
                        <div class="row align-items-end">
                            <div class="col-md-4 mb-3 mb-md-0">
                                <label class="form-label fw-bold">Facturation</label>
                                <select id="budgetMode" class="form-select">
                                    <option value="CPM">👁️ Coût par 1000 Vues (CPM)</option>
                                    <option value="CPC">🖱️ Coût par Clic (CPC)</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-3 mb-md-0">
                                <label class="form-label fw-bold">Coût Unitaire</label>
                                <div class="input-group">
                                    <input type="number" id="costPerUnit" class="form-control" value="50">
                                    <span class="input-group-text">FCFA</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Plafond (Limite)</label>
                                <div class="input-group">
                                    <input type="number" id="budgetLimit" class="form-control" value="10000">
                                    <span class="input-group-text">FCFA</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="budgetConfig" id="budgetConfigInput">
                </div>
            </div>

            <!-- 4. Media -->
            <div class="card mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0 fw-bold text-primary"><i class="fa-solid fa-image me-2"></i>Visuel</h5>
                </div>
                <div class="card-body p-4">
                    <div class="mb-3">
                        <label class="form-label">Image ou Vidéo</label>
                        <input type="file" name="media" class="form-control" accept="image/*,video/*">
                        <div class="form-text">Formats acceptés: JPG, PNG, MP4. Max 10Mo.</div>
                    </div>
                </div>
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-success btn-lg py-3 fw-bold shadow">
                    <i class="fa-solid fa-paper-plane me-2"></i> PUBLIER LA CAMPAGNE
                </button>
            </div>
        </form>
    </div>
</div>
@end

@section('scripts')
<script>
    function toggleTarget(type) {
        document.getElementById('zoneInputs').style.display = type === 'zone' ? 'block' : 'none';
        document.getElementById('proximityInputs').style.display = type === 'proximity' ? 'block' : 'none';
    }

    document.getElementById('createForm').onsubmit = function (e) {
        e.preventDefault();
        const btn = this.querySelector('button[type="submit"]');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-2"></i> Publication...';

        // Construct JSONs
        const budget = {
            mode: document.getElementById('budgetMode').value,
            costPerUnit: parseFloat(document.getElementById('costPerUnit').value),
            limit: parseFloat(document.getElementById('budgetLimit').value)
        };
        document.getElementById('budgetConfigInput').value = JSON.stringify(budget);

        const type = document.querySelector('input[name="targetType"]:checked').value;
        let rules = {};

        if (type === 'zone') {
            rules = { countries: [document.getElementById('targetCountry').value] };
        } else {
            rules = {
                lat: parseFloat(document.getElementById('lat').value || 0),
                lng: parseFloat(document.getElementById('lng').value || 0),
                radiusKm: parseFloat(document.getElementById('radius').value || 0)
            };
        }

        const targeting = [{
            targetType: type,
            rules: rules
        }];
        document.getElementById('targetingInput').value = JSON.stringify(targeting);

        const formData = new FormData(this);

        fetch('/promotions', {
            method: 'POST',
            body: formData,
            headers: {
                'Accept': 'application/json'
            }
        })
            .then(response => {
                if (response.ok) {
                    // Show success styling or redirect
                    window.location.href = '/admin-ui/promotions';
                } else {
                    return response.json().then(err => { throw err; });
                }
            })
            .catch(err => {
                console.error(err);
                alert('Erreur: ' + (err.message || JSON.stringify(err)));
                btn.disabled = false;
                btn.innerHTML = originalText;
            });
    };
</script>
@end