@extends('layouts.app')
@section('title','Agenda')
@section('heading','Agenda')
@section('actions')
    @if($googleConnected)
        <span class="inline-flex items-center gap-1.5 rounded-lg bg-emerald-50 text-emerald-700 px-3 py-2 text-sm">🟢 Google Agenda connecté</span>
        <form method="POST" action="{{ route('google.disconnect') }}">@csrf<x-btn variant="secondary" type="submit">Déconnecter</x-btn></form>
    @elseif($googleConfigured)
        <x-btn :href="route('google.connect')">🔗 Connecter Google Agenda</x-btn>
    @endif
    <x-btn onclick="window.dispatchEvent(new CustomEvent('agenda-new'))">➕ Nouvel événement</x-btn>
@endsection

@section('content')
<div x-data="agenda()" x-init="init()">

    @unless($googleConfigured)
        <div class="mb-4 rounded-lg bg-amber-50 border border-amber-200 text-amber-800 px-4 py-3 text-sm">
            ℹ️ Synchronisation Google Agenda disponible : renseignez <code>GOOGLE_CLIENT_ID</code> et <code>GOOGLE_CLIENT_SECRET</code> dans <code>.env</code>, puis cliquez sur « Connecter ». La synchronisation est <b>à sens unique</b> (application → Google).
        </div>
    @endunless

    <x-card :padded="true">
        <div id="calendar"></div>
    </x-card>

    {{-- Modale création / édition --}}
    <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4" style="background:rgba(15,23,42,.5)" @keydown.escape.window="open=false">
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg" @click.outside="open=false">
            <div class="px-6 py-4 border-b flex items-center justify-between">
                <h3 class="font-semibold text-lg" x-text="mode==='edit' ? 'Modifier l\'événement' : 'Nouvel événement'"></h3>
                <button @click="open=false" class="text-slate-400 hover:text-slate-600">✕</button>
            </div>
            <form @submit.prevent="save()" class="p-6 space-y-3">
                <template x-if="form.related_label">
                    <div class="rounded-lg bg-brand-50 border border-brand-100 px-3 py-2 text-sm flex items-center gap-2">
                        <span class="text-slate-500">🔗 Lié à</span>
                        <a :href="form.related_url" class="font-medium text-brand-600 hover:underline" x-text="form.related_label"></a>
                    </div>
                </template>
                <label class="text-sm block">Titre *
                    <input x-model="form.title" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                </label>
                <div class="grid grid-cols-2 gap-3">
                    <label class="text-sm block">Type
                        <select x-model="form.type" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                            <option value="rendez-vous">Rendez-vous</option>
                            <option value="intervention">Intervention</option>
                            <option value="echeance">Échéance</option>
                            <option value="tache">Tâche</option>
                        </select>
                    </label>
                    <label class="text-sm block">Assigné à
                        <select x-model="form.user_id" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                            <option value="">—</option>
                            @foreach($users as $u)<option value="{{ $u->id }}">{{ $u->name }}</option>@endforeach
                        </select>
                    </label>
                </div>
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" x-model="form.all_day" class="rounded"> Journée entière</label>
                <div class="grid grid-cols-2 gap-3">
                    <label class="text-sm block">Début *
                        <input type="datetime-local" x-model="form.starts_at" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    </label>
                    <label class="text-sm block">Fin
                        <input type="datetime-local" x-model="form.ends_at" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    </label>
                </div>
                <label class="text-sm block">Lieu
                    <input x-model="form.location" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                </label>
                <label class="text-sm block">Description
                    <textarea x-model="form.description" rows="2" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"></textarea>
                </label>
                <label class="text-sm flex items-center gap-2">Couleur
                    <input type="color" x-model="form.color" class="h-9 w-14 rounded border border-slate-300">
                </label>
                <div class="flex items-center gap-2 pt-2">
                    <x-btn type="submit">💾 Enregistrer</x-btn>
                    <button type="button" @click="open=false" class="px-3.5 py-2 text-sm rounded-lg border border-slate-300 hover:bg-slate-50">Annuler</button>
                    <template x-if="mode==='edit'">
                        <button type="button" @click="remove()" class="ml-auto px-3.5 py-2 text-sm rounded-lg bg-rose-600 hover:bg-rose-700 text-white">🗑️ Supprimer</button>
                    </template>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
<script>
function agenda() {
    return {
        open: false,
        mode: 'create',
        calendar: null,
        form: {},
        csrf: document.querySelector('meta[name="csrf-token"]').content,

        blankForm() {
            return { id: null, title: '', type: 'rendez-vous', starts_at: '', ends_at: '', all_day: false, location: '', description: '', color: '#6366f1', user_id: '', related_label: null, related_url: null };
        },
        toInput(d) {
            if (!d) return '';
            const dt = (d instanceof Date) ? d : new Date(d);
            const off = dt.getTimezoneOffset() * 60000;
            return new Date(dt - off).toISOString().slice(0, 16);
        },

        init() {
            const self = this;
            this.calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
                initialView: 'dayGridMonth',
                firstDay: 1,
                height: 'auto',
                locale: 'fr',
                headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' },
                buttonText: { today: "Aujourd'hui", month: 'Mois', week: 'Semaine', day: 'Jour', list: 'Liste' },
                nowIndicator: true,
                editable: true,        // drag & resize
                selectable: true,      // sélection pour créer
                events: '{{ route('agenda.events') }}',
                select: (info) => self.openCreate(info),
                eventClick: (info) => self.openEdit(info.event),
                eventDrop: (info) => self.persistMove(info.event),
                eventResize: (info) => self.persistMove(info.event),
            });
            this.calendar.render();

            window.addEventListener('agenda-new', () => this.openCreate());
        },

        openCreate(info = null) {
            this.mode = 'create';
            this.form = this.blankForm();
            if (info) {
                this.form.all_day = info.allDay;
                this.form.starts_at = this.toInput(info.start);
                this.form.ends_at = this.toInput(info.end || info.start);
            } else {
                const now = new Date(); now.setMinutes(0);
                this.form.starts_at = this.toInput(now);
                this.form.ends_at = this.toInput(new Date(now.getTime() + 3600000));
            }
            this.open = true;
        },

        openEdit(ev) {
            this.mode = 'edit';
            const p = ev.extendedProps;
            this.form = {
                id: ev.id,
                title: ev.title,
                type: p.type || 'rendez-vous',
                all_day: ev.allDay,
                starts_at: this.toInput(ev.start),
                ends_at: this.toInput(ev.end || ev.start),
                location: p.location || '',
                description: p.description || '',
                color: ev.backgroundColor || '#6366f1',
                user_id: p.user_id || '',
                related_label: p.related_label || null,
                related_url: p.related_url || null,
            };
            this.open = true;
        },

        payload() {
            return {
                title: this.form.title,
                type: this.form.type,
                all_day: this.form.all_day,
                starts_at: this.form.starts_at,
                ends_at: this.form.ends_at,
                location: this.form.location,
                description: this.form.description,
                color: this.form.color,
                user_id: this.form.user_id || null,
            };
        },

        save() {
            const isEdit = this.mode === 'edit';
            const url = isEdit ? `/agenda/${this.form.id}` : '{{ route('agenda.store') }}';
            fetch(url, {
                method: isEdit ? 'PUT' : 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': this.csrf, 'Accept': 'application/json' },
                body: JSON.stringify(this.payload()),
            })
            .then(r => r.ok ? r.json() : Promise.reject())
            .then(() => { this.open = false; this.calendar.refetchEvents(); erpToast(isEdit ? 'Événement mis à jour' : 'Événement ajouté'); })
            .catch(() => erpToast("Erreur lors de l'enregistrement", false));
        },

        persistMove(ev) {
            fetch(`/agenda/${ev.id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': this.csrf, 'Accept': 'application/json' },
                body: JSON.stringify({ starts_at: ev.startStr, ends_at: ev.endStr || ev.startStr, all_day: ev.allDay }),
            })
            .then(r => r.ok ? r.json() : Promise.reject())
            .then(() => erpToast('Événement déplacé'))
            .catch(() => erpToast('Erreur de déplacement', false));
        },

        remove() {
            if (!confirm('Supprimer cet événement ?')) return;
            fetch(`/agenda/${this.form.id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': this.csrf, 'Accept': 'application/json' },
            })
            .then(r => r.ok ? r.json() : Promise.reject())
            .then(() => { this.open = false; this.calendar.refetchEvents(); erpToast('Événement supprimé'); })
            .catch(() => erpToast('Erreur de suppression', false));
        },
    };
}
</script>
@endpush
@endsection