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

{% block body %}
<div class="container text-light" id="reservation">
    <a href="{{ path('admin_client_facture_index') }}" class="p-5"><i class="fa fa-arrow-left"></i> Retour</a>
    <div class="row justify-content-center mt-5">
        <div class="col-lg-8">
            <div class="col-lg-12 text-center text-light mb-5">
                <h2>Ajouter des Factures pour Clients</h2>
            </div>
                {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }} 
                <div class="contact-form col-lg-12">
                    <div class="col-lg-12 text-center text-light">
                        {{ form_errors(form) }}
                    </div> 
                    <div class="form-group">
                        {{ form_row(form.client) }}
                    </div>
                    <div class="form-group">
                        {{ form_row(form.contact) }}
                    </div>
                    <div class="form-group">
                        {{ form_label(form.service) }}
                        {{ form_widget(form.service) }}
                    </div>
                    <div class="form-group">
                        {{ form_row(form.totalPrice, {'attr': {'readonly': 'readonly', 'id': 'total-price'}}) }}
                    </div>
                    <div class="form-group text-center mt-3">
                        {{ form_row(form.submit) }}
                    </div>
                    <div class="form-group">
                        {{ form_row(form._token) }}
                    </div>      
                </div>
                {{ form_end(form) }} 
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
    // Selectors for client and contact dropdowns
    const clientSelect = $('#{{ form.client.vars.id }}');
    const contactSelect = $('#{{ form.contact.vars.id }}');

    // Selector for service checkboxes
    const serviceCheckboxSelector = 'input[type="checkbox"][name="client_facture[service][]"]';
    const totalPriceField = $('#client_facture_totalPrice');

    // Fetch contacts dynamically based on client selection
    clientSelect.on('change', function () {
        const clientId = $(this).val();

        if (clientId) {
            $.ajax({
                url: `/admin/client-facture/contacts/${clientId}`,
                method: 'GET',
                success: function (data) {
                    // Clear current contact options
                    contactSelect.empty();
                    // Add placeholder option
                    contactSelect.append(new Option('Choisir le contact', ''));

                    // Populate with new options
                    $.each(data, function (key, contact) {
                        contactSelect.append(new Option(contact.title, contact.id));
                    });
                },
                error: function () {
                    alert('Failed to fetch contacts. Please try again.');
                }
            });
        } else {
            // Reset contact dropdown if no client selected
            contactSelect.empty();
            contactSelect.append(new Option('Select Contact', ''));
        }
    });

    // Calculate total price dynamically based on selected checkboxes
    $(document).on('change', serviceCheckboxSelector, function () {
        let totalPrice = 0;
        console.log('check');
        // Sum up the prices of checked services
        $(serviceCheckboxSelector + ':checked').each(function () {
            const price = parseFloat($(this).data('price'));
            console.log(price);
            if (!isNaN(price)) {
                totalPrice += price;
            }
        });
        console.log(totalPrice);
        // Update total price field
        totalPriceField.val(totalPrice.toFixed(2)); // Format to 2 decimal places
    });

    // Initialize total price on page load
    $(serviceCheckboxSelector).trigger('change');
});

</script>

{% endblock %}