@extends('layouts.app')

@section('title', __('maintenance::lang.calendar'))

@section('content')
@include('maintenance::layouts.nav')

<section class="content no-print mt-page">
    <div class="mt-page-header">
        <h1><i class="fas fa-calendar-alt" style="color:#14b8a6;margin-left:8px;"></i> @lang('maintenance::lang.calendar')</h1>
    </div>

    <div class="mt-card">
        <div class="mt-card-header"><h3 class="mt-card-title">@lang('maintenance::lang.calendar_events')</h3></div>
        <div class="mt-card-body">
            <div id="mm_maintenance_calendar"></div>
            <div class="mm-calendar-legend" style="margin-top:16px;display:flex;gap:16px;flex-wrap:wrap;">
                <span><i class="fa fa-circle" style="color:#7c3aed;"></i> @lang('maintenance::lang.event_rebuild')</span>
                <span><i class="fa fa-circle" style="color:#0d9488;"></i> @lang('maintenance::lang.event_overhaul')</span>
                <span><i class="fa fa-circle" style="color:#2563eb;"></i> @lang('maintenance::lang.event_preventive')</span>
                <span><i class="fa fa-circle" style="color:#f59e0b;"></i> @lang('maintenance::lang.event_work_order')</span>
            </div>
        </div>
    </div>
</section>
@endsection

@section('javascript')
@include('maintenance::layouts.calendar_persian_patch')
<script type="text/javascript">
$(document).ready(function() {
    if (!$('#mm_maintenance_calendar').length || typeof $.fn.fullCalendar === 'undefined') return;

    var eventColors = { rebuild: '#7c3aed', overhaul: '#0d9488', preventive: '#2563eb', work_order: '#f59e0b' };

    $('#mm_maintenance_calendar').fullCalendar({
        header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek' },
        locale: (typeof app_locale !== 'undefined' ? app_locale : 'fa'),
        eventLimit: true,
        editable: false,
        viewRender: function(view) {
            if (typeof MmCalendarPersian !== 'undefined') {
                MmCalendarPersian.patch('#mm_maintenance_calendar');
            }
        },
        eventAfterAllRender: function(view) {
            if (typeof MmCalendarPersian !== 'undefined') {
                MmCalendarPersian.patch('#mm_maintenance_calendar');
            }
        },
        events: function(start, end, timezone, callback) {
            $.ajax({
                url: '{{ action([\Modules\Maintenance\Http\Controllers\CalendarController::class, "index"]) }}',
                dataType: 'json',
                data: { start: start.format('YYYY-MM-DD'), end: end.format('YYYY-MM-DD') },
                success: function(response) {
                    if (!response.success) { callback([]); return; }
                    var events = (response.events || []).map(function(e) {
                        var title = (e.equipment ? e.equipment + ' — ' : '') + e.title;
                        if (e.start_jalali) {
                            title += ' (' + e.start_jalali + ')';
                        }
                        return {
                            id: e.id,
                            title: title,
                            start: e.start,
                            end: e.end || e.start,
                            backgroundColor: eventColors[e.type] || '#64748b',
                            borderColor: eventColors[e.type] || '#64748b'
                        };
                    });
                    callback(events);
                }
            });
        }
    });

    if (typeof MmCalendarPersian !== 'undefined') {
        MmCalendarPersian.bind('#mm_maintenance_calendar');
    }
});
</script>
@endsection