@extends('admin.layouts.app')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
<style>
    .fc-event {
        cursor: pointer;
    }
    @media print {
        .no-print {
            display: none !important;
        }
        .page-content {
            margin: 0 !important;
            padding: 15px !important;
        }
    }
</style>
@endpush

@section('title', 'Calendário de Movimentações')

@section('content')
    <main class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3 no-print">
            <div class="breadcrumb-title pe-3">Calendário de Movimentações</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('inicio') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">Calendário</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <a href="{{ route('graficos') }}" class="btn btn-primary btn-sm">
                    <i class="bi bi-bar-chart-line me-1"></i> Ver Gráficos e Estatísticas
                </a>
            </div>
        </div>
        <!--end breadcrumb-->


        <!-- Calendário -->
        <div class="card radius-10">
            <div class="card-body">
                <h5 class="mb-5">
                    <i class="bi bi-calendar3"></i> Calendário de Movimentações
                </h5>
                <div id="calendar"></div>
            </div>
        </div>

    </main>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales/pt-br.js"></script>
<script>
    // Calendário
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            locale: 'pt-PT',
            height: 'auto',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,listWeek'
            },
            events: [
                @foreach($movimentacoes as $mov)
                {
                    title: '{{ $mov->item->nome ?? "N/A" }} ({{ ucfirst($mov->tipo) }})',
                    start: '{{ $mov->data_mov }}',
                    color: '{{ $mov->tipo == "entrada" ? "#28a745" : ($mov->tipo == "saida" ? "#dc3545" : "#17a2b8") }}',
                    extendedProps: {
                        quantidade: '{{ $mov->quantidade }}',
                        usuario: '{{ $mov->user->name ?? "N/A" }}'
                    }
                },
                @endforeach
            ],
            eventClick: function(info) {
                Swal.fire({
                    title: info.event.title,
                    html: `
                        <div class="text-start">
                            <p><strong>Quantidade:</strong> ${info.event.extendedProps.quantidade}</p>
                            <p><strong>Utilizador:</strong> ${info.event.extendedProps.usuario}</p>
                            <p><strong>Data:</strong> ${info.event.start.toLocaleDateString('pt-BR')}</p>
                        </div>
                    `,
                    icon: 'info',
                    confirmButtonText: 'Fechar'
                });
            }
        });
        calendar.render();
    });
</script>
@endpush