{% extends 'base.html.twig' %}

{% block body %}
    {% block title %}My Timesheet{% endblock %}

    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#timesheetModal">
        Add Timesheet
    </button>

<div class="scroll-container">
    <button class="scroll-button scroll-left">←</button>
    <button class="scroll-button scroll-right">→</button>

    <div id='external-events' {#  id="project-list" #}  class="card-wrapper" {{ stimulus_controller('timesheet') }} >
        {% for project in projects %}
        <div class="project card external-event external-event" data-index="1000" style="z-index:1000">
            <div class="barra"></div>
            <div class="dati">
                <div class="name">{{ project.name }}</div>
                <div class="job_order">Job order <span class="value">[{{ project.getJobOrder() }}]</span></div>
                <div class="durata">
                    <img class="img" src="{{ asset('images/project/icona-progetto.png') }}" alt="durata progetto" title="durata progetto">
                    <div class="start">{{ project.getDateStart()|date('j M Y') }}</div>
                    <div> - </div>
                    <div class="end">{{ project.getDateEnd()|date('j M Y') }}</div>
                </div>
            </div>
        </div>
        {% endfor %}
        {#
        <div class="project card external-event" data-index="999" style="z-index:999">
            <div class="barra"></div>
            <div class="dati">
                2. PROJECT X1 PROJECT X2 PROJECT X3 PROJECT X4 PROJECT X5 PROJECT X6 PROJECT X7 PROJECT X8 PROJECT X9 PROJECT X10 PROJECT X11
            </div>
        </div>
        <div class="project card external-event" data-index="998" style="z-index:998">
            <div class="barra"></div>
            <div class="dati">
                3. PROJECT X1 PROJECT X2 PROJECT X3 PROJECT X4 PROJECT X5 PROJECT X6 PROJECT X7 PROJECT X8 PROJECT X9 PROJECT X10 PROJECT X11
            </div>
        </div>
        <div class="project card external-event" data-index="997" style="z-index:997">
            <div class="barra"></div>
            <div class="dati">
                4. PROJECT X1 PROJECT X2 PROJECT X3 PROJECT X4 PROJECT X5 PROJECT X6 PROJECT X7 PROJECT X8 PROJECT X9 PROJECT X10 PROJECT X11
            </div>
        </div>
        <div class="project card external-event" data-index="996" style="z-index:996">
            <div class="barra"></div>
            <div class="dati">
                5. PROJECT X1 PROJECT X2 PROJECT X3 PROJECT X4 PROJECT X5 PROJECT X6 PROJECT X7 PROJECT X8 PROJECT X9 PROJECT X10 PROJECT X11
            </div>
        </div>
        <div class="project card external-event" data-index="995" style="z-index:995">
            <div class="barra"></div>
            <div class="dati">
                6. PROJECT X1 PROJECT X2 PROJECT X3 PROJECT X4 PROJECT X5 PROJECT X6 PROJECT X7 PROJECT X8 PROJECT X9 PROJECT X10 PROJECT X11
            </div>
        </div>
        #}
    </div>
    <div class="scroll-indicator"></div>
</div>

    <div id='calendar'></div>

    {# Modal Container #}
    <div {{ stimulus_controller('modal') }} data-path-new="{{ path('timesheet_new') }}" data-path-create="{{ path('timesheet_create') }}"  class="modal fade" id="timesheetModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add timesheet</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {# Form will be loaded here via AJAX #}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{#
{% block javascripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('timesheetModal');

            modal.addEventListener('show.bs.modal', function() {
                fetch('{{ path('timesheet_new') }}', {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.text())
                .then(html => {
                    modal.querySelector('.modal-body').innerHTML = html;
                    initializeForm();
                });
            });

            function initializeForm() {
                const form = modal.querySelector('form');
                form.addEventListener('submit', function(e) {
                    e.preventDefault();

                    fetch('{{ path('timesheet_create') }}', {
                        method: 'POST',
                        body: new FormData(form),
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Close modal and maybe refresh list
                            bootstrap.Modal.getInstance(modal).hide();
                            window.location.reload();
                        } else {
                            // Update form with errors
                            modal.querySelector('.modal-body').innerHTML = data.html;
                            initializeForm();
                        }
                    });
                });
            }
        });
    </script>
{% endblock %}
#}