{{-- New-Unity ERP | app/Modules/Sales/Resources/Views/activities/calendar.blade.php | v1.0 | 20/07/2026 --}}
{{-- v1.0 — Calendario de actividades usando FullCalendar de SmartAdmin. --}}

@extends('layouts.vertical', ['pageTitle' => __('activities.activity_calendar')])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-calendar"></i> {{ __('activities.activity_calendar') }}
        <small>{{ __('activities.schedule_followups') }}</small>
    </h1>
    <div class="subheader-block">
        <a href="{{ route('sales.activities.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fal fa-list me-1"></i> {{ __('activities.list_view') }}
        </a>
    </div>
</div>
@endsection

@section('content')
<div class="panel">
    <div class="panel-container show">
        <div class="panel-content">
            <div id="calendar"></div>
        </div>
    </div>
</div>

{{-- Modal: Activity Detail --}}
<div class="modal fade" id="activityDetailModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="actDetailTitle"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <table class="table table-sm small mb-0">
                    <tr><td class="fw-bold text-muted">{{ __('activities.type') }}</td><td id="actDetailType"></td></tr>
                    <tr><td class="fw-bold text-muted">{{ __('activities.status') }}</td><td id="actDetailStatus"></td></tr>
                    <tr><td class="fw-bold text-muted">{{ __('activities.customer') }}</td><td id="actDetailCustomer"></td></tr>
                    <tr><td class="fw-bold text-muted">{{ __('activities.opportunity') }}</td><td id="actDetailOpp"></td></tr>
                    <tr><td class="fw-bold text-muted">{{ __('activities.assigned_to') }}</td><td id="actDetailAssigned"></td></tr>
                    <tr><td class="fw-bold text-muted">{{ __('activities.notes') }}</td><td id="actDetailNotes"></td></tr>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left:   'prev,next today',
            center: 'title',
            right:  'dayGridMonth,timeGridWeek,listWeek'
        },
        events: function(info, successCallback, failureCallback) {
            fetch('{{ route("sales.activities.calendar-data") }}?start=' + info.startStr + '&end=' + info.endStr)
                .then(r => r.json())
                .then(data => successCallback(data))
                .catch(e => failureCallback(e));
        },
        eventClick: function(info) {
            var props = info.event.extendedProps;
            document.getElementById('actDetailTitle').textContent   = info.event.title;
            document.getElementById('actDetailType').textContent    = props.type || '—';
            document.getElementById('actDetailStatus').textContent  = props.status || '—';
            document.getElementById('actDetailCustomer').textContent= props.customer || '—';
            document.getElementById('actDetailOpp').textContent     = props.opportunity || '—';
            document.getElementById('actDetailAssigned').textContent= props.assigned || '—';
            document.getElementById('actDetailNotes').textContent   = props.notes || '—';
            new bootstrap.Modal(document.getElementById('activityDetailModal')).show();
        },
        height: 'auto',
        locale: '{{ app()->getLocale() }}',
    });
    calendar.render();
});
</script>
@endsection