@extends('admin.layouts.master')

@section('title', 'تقويم التركيب')
@section('page_title', 'تقويم التركيب')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.installations.index') }}">أوامر التركيب</a></li>
    <li class="breadcrumb-item active">التقويم</li>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.css" rel="stylesheet">
<style>
    .fc-event { cursor: pointer; }
    .legend-item { display: inline-flex; align-items: center; margin-left: 12px; font-size: 12px; }
    .legend-color { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-left: 4px; }
</style>
@endpush

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-calendar-alt"></i> تقويم التركيب</h3>
        <div class="card-tools">
            <a href="{{ route('admin.installations.index') }}" class="btn btn-secondary btn-sm"><i class="fas fa-list"></i> القائمة</a>
            @can('installations.create')
                <a href="{{ route('admin.installations.create') }}" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> {{ __('admin.add') }}</a>
            @endcan
        </div>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-3">
                <label class="small mb-1">الفريق</label>
                <select id="filter_team" class="form-control form-control-sm">
                    <option value="">— الكل —</option>
                    @foreach($teams as $t)<option value="{{ $t->id }}">{{ $t->name }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="small mb-1">{{ __('admin.status') }}</label>
                <select id="filter_status" class="form-control form-control-sm">
                    <option value="">— الكل —</option>
                    <option value="scheduled">مجدول</option>
                    <option value="in_progress">قيد التنفيذ</option>
                    <option value="completed">مكتمل</option>
                    <option value="postponed">مؤجل</option>
                    <option value="cancelled">ملغي</option>
                </select>
            </div>
            <div class="col-md-6 text-left pt-3">
                <span class="legend-item"><span class="legend-color" style="background:#17a2b8"></span> مجدول</span>
                <span class="legend-item"><span class="legend-color" style="background:#ffc107"></span> قيد التنفيذ</span>
                <span class="legend-item"><span class="legend-color" style="background:#28a745"></span> مكتمل</span>
                <span class="legend-item"><span class="legend-color" style="background:#6c757d"></span> مؤجل</span>
                <span class="legend-item"><span class="legend-color" style="background:#dc3545"></span> ملغي</span>
            </div>
        </div>
        <div id="calendar"></div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/locales/ar.global.min.js"></script>
<script>
$(function () {
    const csrf = '{{ csrf_token() }}';
    @can('installations.edit')
    const canEdit = true;
    @else
    const canEdit = false;
    @endcan

    const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
        locale: 'ar',
        direction: 'rtl',
        initialView: 'dayGridMonth',
        headerToolbar: {
            left:   'prev,next today',
            center: 'title',
            right:  'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
        },
        height: 700,
        editable: canEdit,
        eventTimeFormat: { hour: '2-digit', minute: '2-digit', hour12: false },
        events: function (info, success, failure) {
            $.get('{{ route('admin.installations.calendar.data') }}', {
                start:   info.startStr,
                end:     info.endStr,
                team_id: $('#filter_team').val(),
                status:  $('#filter_status').val(),
            })
            .done(success).fail(failure);
        },
        eventClick: function (info) {
            info.jsEvent.preventDefault();
            if (info.event.url) window.location.href = info.event.url;
        },
        eventDrop: function (info) {
            if (! confirm('إعادة جدولة إلى ' + info.event.start.toLocaleString('ar-EG') + '؟')) {
                info.revert();
                return;
            }
            $.ajax({
                url: '{{ url('admin/installations') }}/' + info.event.id + '/reschedule',
                method: 'POST',
                data: { _token: csrf, scheduled_at: info.event.start.toISOString() },
            })
            .done(() => {
                Swal.fire({ icon: 'success', title: 'تم النقل بنجاح', timer: 1200, showConfirmButton: false });
            })
            .fail(xhr => {
                info.revert();
                Swal.fire({ icon: 'error', title: 'تعذر النقل', text: xhr.responseJSON?.error || 'حدث خطأ' });
            });
        },
    });

    calendar.render();

    $('#filter_team, #filter_status').on('change', () => calendar.refetchEvents());
});
</script>
@endpush