@extends('layouts.app')

@section('title', 'Événements')

@section('styles')
<style>
    .ev-page-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 24px;
    }
    .ev-section-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 22px; font-weight: 600; color: #2D4A5F;
    }
    .btn-primary {
        display: inline-flex; align-items: center; gap: 8px;
        background: #2D4A5F; color: #C8B47A;
        border: none; border-radius: 10px;
        padding: 11px 20px; font-size: 13px;
        font-family: 'Jost', sans-serif; font-weight: 500;
        letter-spacing: 0.06em; cursor: pointer;
        text-decoration: none; transition: background 0.2s;
    }
    .btn-primary:hover { background: #3a5f78; }
    .btn-primary svg { width: 16px; height: 16px; }

    /* Grille événements */
    .events-grid {
        margin-left: 0;
        padding-right: 8px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        max-width: 100%;
        width: 100%;
        width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        gap: 16px;
    }

    .event-card {
        min-width: 0;
        background: white; border-radius: 14px;
        border: 1px solid #dde3e8; padding: 20px;
        transition: border-color 0.2s, transform 0.15s;
        text-decoration: none; display: block;
        position: relative; overflow: hidden;
    }
    .event-card:hover { border-color: #2D4A5F; transform: translateY(-2px); }

    .event-card::before {
        content: ''; position: absolute;
        top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, #2D4A5F, #C8B47A);
    }

    .event-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }

    .event-name {
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px; font-weight: 600; color: #1e2d3a;
        line-height: 1.3;
    }

    .event-status {
        font-size: 10px; padding: 3px 10px;
        border-radius: 20px; font-weight: 500;
        letter-spacing: 0.06em; flex-shrink: 0; margin-left: 8px;
    }
    .status-a_venir { background: #E6F1FB; color: #0C447C; }
    .status-en_cours { background: #E1F5EE; color: #085041; }
    .status-termine { background: #F1EFE8; color: #444441; }

    .event-meta {
        display: flex; flex-direction: column; gap: 5px;
        margin-bottom: 14px;
    }
    .event-meta-row {
        display: flex; align-items: center; gap: 8px;
        font-size: 12px; color: #6b7c8d;
    }
    .event-meta-row svg { width: 14px; height: 14px; flex-shrink: 0; }

    .event-footer {
        display: flex; justify-content: space-between; align-items: center;
        padding-top: 12px; border-top: 1px solid #f0f2f4;
    }

    .event-produits {
        font-size: 12px; color: #6b7c8d;
    }
    .event-produits strong { color: #2D4A5F; font-size: 18px; font-family: 'Cormorant Garamond', serif; }

    .event-actions { display: flex; gap: 6px; }
    .btn-icon {
        width: 32px; height: 32px; border-radius: 8px;
        border: 1px solid #dde3e8; background: white;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: all 0.15s; color: #6b7c8d;
        text-decoration: none;
    }
    .btn-icon:hover { background: #f4f6f8; border-color: #2D4A5F; color: #2D4A5F; }
    .btn-icon svg { width: 14px; height: 14px; }

    /* Empty state */
    .empty-state {
        text-align: center; padding: 80px 20px;
        color: #6b7c8d;
    }
    .empty-state svg { width: 64px; height: 64px; margin: 0 auto 16px; display: block; opacity: 0.3; }
    .empty-state h3 { font-size: 18px; color: #2D4A5F; margin-bottom: 8px; font-family: 'Cormorant Garamond', serif; }
    .empty-state p { font-size: 13px; margin-bottom: 20px; }

    /* Modal création */
    .modal-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        display: none; align-items: center; justify-content: center;
        z-index: 1000; padding: 20px;
    }
    .modal-overlay.show { display: flex; }

    .modal {
        background: white; border-radius: 16px;
        width: 100%; max-width: 520px;
        padding: 32px; position: relative;
        max-height: 90vh; overflow-y: auto;
    }

    .modal-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 22px; font-weight: 600; color: #2D4A5F;
        margin-bottom: 24px;
    }

    .form-group { margin-bottom: 16px; }
    .form-label {
        display: block; font-size: 11px;
        letter-spacing: 0.12em; text-transform: uppercase;
        color: #6b7c8d; margin-bottom: 6px;
    }
    .form-input {
        width: 100%; padding: 11px 14px;
        border: 1px solid #dde3e8; border-radius: 8px;
        font-size: 13px; font-family: 'Jost', sans-serif;
        color: #1e2d3a; outline: none; transition: border-color 0.2s;
    }
    .form-input:focus { border-color: #3a5f78; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    .modal-footer { display: flex; gap: 10px; margin-top: 24px; }
    .btn-cancel {
        flex: 1; padding: 12px; border-radius: 10px;
        border: 1px solid #dde3e8; background: white;
        font-family: 'Jost', sans-serif; font-size: 13px;
        cursor: pointer; color: #6b7c8d;
    }
    .btn-cancel:hover { background: #f4f6f8; }
    .btn-save {
        flex: 2; padding: 12px; border-radius: 10px;
        border: none; background: #2D4A5F; color: #C8B47A;
        font-family: 'Jost', sans-serif; font-size: 13px;
        font-weight: 500; letter-spacing: 0.08em;
        text-transform: uppercase; cursor: pointer;
    }
    .btn-save:hover { background: #3a5f78; }

    .type-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .type-tag {
        padding: 5px 12px; border-radius: 20px;
        border: 1px solid #dde3e8; font-size: 12px;
        color: #6b7c8d; cursor: pointer; background: white;
        font-family: 'Jost', sans-serif; transition: all 0.15s;
    }
    .type-tag.selected { background: #2D4A5F; color: #C8B47A; border-color: #2D4A5F; }

    .alert-success {
        background: #E1F5EE; border: 1px solid #9FE1CB;
        border-radius: 10px; padding: 12px 16px;
        font-size: 13px; color: #085041; margin-bottom: 20px;
    }
</style>
@endsection

@section('content')

@if(session('success'))
<div class="alert-success">✓ {{ session('success') }}</div>
@endif

<div class="ev-page-header">
    <h1 class="ev-section-title">Événements</h1>
    <button class="btn-primary" onclick="openModal()">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
        </svg>
        Nouvel événement
    </button>
</div>

@if($evenements->count() > 0)
<div class="events-grid">
    @foreach($evenements as $evenement)
    <div class="event-card">
        <div class="event-header">
            <div class="event-name">{{ $evenement->nom }}</div>
            <span class="event-status status-{{ $evenement->statut }}">
                {{ $evenement->statut === 'a_venir' ? 'À venir' : ($evenement->statut === 'en_cours' ? 'En cours' : 'Terminé') }}
            </span>
        </div>

        <div class="event-meta">
            <div class="event-meta-row">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5"/>
                </svg>
                {{ $evenement->date->format('d/m/Y') }}
            </div>
            @if($evenement->lieu)
            <div class="event-meta-row">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
                </svg>
                {{ $evenement->lieu }}
            </div>
            @endif
            @if($evenement->nb_convives)
            <div class="event-meta-row">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
                </svg>
                {{ $evenement->nb_convives }} convives
            </div>
            @endif
        </div>

        <div class="event-footer">
            <div class="event-produits">
                <strong>{{ $evenement->produits_count }}</strong> produit(s) tracé(s)
            </div>
            <div class="event-actions">
                <a href="{{ route('evenements.show', $evenement) }}" class="btn-icon" title="Voir">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </a>
                <form method="POST" action="{{ route('evenements.destroy', $evenement) }}"
                    onsubmit="return confirm('Supprimer cet événement ?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn-icon" title="Supprimer" style="color:#c0392b;">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
                        </svg>
                    </button>
                </form>
            </div>
        </div>
    </div>
    @endforeach
</div>

@else
<div class="empty-state">
    <svg fill="none" viewBox="0 0 24 24" stroke="#2D4A5F" stroke-width="1">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5"/>
    </svg>
    <h3>Aucun événement créé</h3>
    <p>Créez votre premier événement pour organiser vos produits tracés.</p>
    <button class="btn-primary" onclick="openModal()">
        Créer un événement
    </button>
</div>
@endif

<!-- Modal création -->
<div class="modal-overlay" id="modalOverlay" onclick="closeModalOnOverlay(event)">
    <div class="modal">
        <h2 class="modal-title">Nouvel événement</h2>

        <form method="POST" action="{{ route('evenements.store') }}">
            @csrf

            <div class="form-group">
                <label class="form-label">Nom de l'événement *</label>
                <input class="form-input" type="text" name="nom"
                    placeholder="Ex : Mariage Dupont, Dîner d'entreprise…" required>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Date *</label>
                    <input class="form-input" type="date" name="date" required
                        value="{{ date('Y-m-d') }}">
                </div>
                <div class="form-group">
                    <label class="form-label">Nb convives</label>
                    <input class="form-input" type="number" name="nb_convives"
                        placeholder="Ex : 50" min="1">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Lieu</label>
                <input class="form-input" type="text" name="lieu"
                    placeholder="Ex : Versailles, Paris 8e…">
            </div>

            <div class="form-group">
                <label class="form-label">Type</label>
                <div class="type-tags">
                    <span class="type-tag" onclick="selectType(this, 'mariage')">💍 Mariage</span>
                    <span class="type-tag" onclick="selectType(this, 'corporate')">🏢 Corporate</span>
                    <span class="type-tag" onclick="selectType(this, 'prive')">🏠 Privé</span>
                    <span class="type-tag" onclick="selectType(this, 'brunch')">☕ Brunch</span>
                    <span class="type-tag" onclick="selectType(this, 'cocktail')">🥂 Cocktail</span>
                    <span class="type-tag" onclick="selectType(this, 'autre')">📋 Autre</span>
                </div>
                <input type="hidden" name="type" id="eventType" value="autre">
            </div>

            <div class="form-group">
                <label class="form-label">Mémo / Notes</label>
                <textarea class="form-input" name="memo" rows="2"
                    placeholder="Allergènes signalés, particularités du client…"
                    style="resize:vertical;"></textarea>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn-cancel" onclick="closeModal()">Annuler</button>
                <button type="submit" class="btn-save">Créer l'événement</button>
            </div>
        </form>
    </div>
</div>


@push('scripts')
<script>
function openModal() {
    document.getElementById('modalOverlay').classList.add('show');
}
function closeModal() {
    document.getElementById('modalOverlay').classList.remove('show');
}
function closeModalOnOverlay(e) {
    if (e.target === document.getElementById('modalOverlay')) closeModal();
}
function selectType(el, value) {
    document.querySelectorAll('.type-tag').forEach(t => t.classList.remove('selected'));
    el.classList.add('selected');
    document.getElementById('eventType').value = value;
}
</script>
@endpush
@endsection