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

{# custom form #}

{% form_theme form _self %}

{% block _worktop_plates_entry_row %}
    <div class="grid grid-cols-1 md:grid-cols-4 px-2 py-2 mt-2" id="{{ form.vars.id}}">
        <div class="form-group mt-2 mb-2 md:mb-0 md:mt-0">
            {{ form_widget(form.length, { 'attr': {'class': 'w-full md:w-32 h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
            <div class="text-xs text-red-400">
                {{ form_errors(form.length)}}
            </div>
        </div>
        <div class="form-group mb-2 md:mb-0">
            {{ form_widget(form.width, { 'attr': {'class': 'w-full md:w-32 h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
            <div class="text-xs text-red-400">
                {{ form_errors(form.width)}}
            </div>
        </div>
        <div class="form-group">
            {{ form_widget(form.thickness, { 'attr': {'class': 'w-full md:w-32 h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
            <div class="text-xs text-red-400">
                {{ form_errors(form.thickness)}}
            </div>
        </div>  
        <div class="form-group flex justify-between md:justify-start items-center order-first md:order-last">
            <span class="fa fa-trash text-gray-500 cursor-pointer" id="{{ form.vars.id ~ '_remove'}}" onclick="removeElement(this,'plate')"></span>
        </div>    
    </div>
{% endblock %}

{% block _worktop_splashbacks_entry_row %}
    <div class="grid grid-cols-1 md:grid-cols-4 px-2 py-2 mt-2" id="{{ form.vars.id}}">
        <div class="form-group mt-2 mb-2 md:mb-0 md:mt-0">
            {{ form_widget(form.length, { 'attr': {'class': 'w-full md:w-32 h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
        </div>
        <div class="form-group mb-2 md:mb-0">
            {{ form_widget(form.width, { 'attr': {'class': 'w-full md:w-32 h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
        </div>
        <div class="form-group">
            {{ form_widget(form.thickness, { 'attr': {'class': 'w-full md:w-32 h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
        </div>  
        <div class="form-group flex justify-between md:justify-start items-center order-first md:order-last">
            <span class="fa fa-trash text-gray-500 cursor-pointer" id="{{ form.vars.id ~ '_remove'}}" onclick="removeElement(this,'splashback')"></span>
        </div>   
    </div>
{% endblock %}

{# custom form #}

{% block body %}  

    <!-- Quotation total amount -->
    <div class="fixed bottom-40 right-2 md:max-xl:right-2 xl:right-60 w-48 h-32 py-5 px-5 bg-slate-700 text-slate-200 text-xl tarnsition-opacity opacity-0 duration-700 shadow-md rounded" id="quotation-total-amount">        
        <h2 class="font-bold">Prix total HT</h2>
        <div class="h-4/5 flex flex-col justify-end">
            <p class="text-2xl font-bold" id="quotation-amount">0.00€</p>
        </div>
    </div>
    <!-- Quotation total amount -->

    <div class="grid grid-cols-4">
        <div class="col-span-4 md:col-span-3">
            <div class="grid grid-cols-1">
        
                <div class="worktop-form mb-20">
                    {{ form_start(form, {'attr': {'id': 'worktop-quotation-form'}}) }}

                    <!-- material -->

                    <section class="mb-24" id="worktop">
                        <h2 class="leading-tight md:text-xl lg:text-2xl font-bold my-3">Mon plan de travail</h2>
                        <div class="grid grid-cols-1">
                            <div class="form-group my-2" id="worktop-material">
                                <div class="w-[20%] inline-block">{{ form_label(form.material.name) }}</div>
                                {{ form_widget(form.material.name, {'attr':{'class': 'w-full md:w-48 h-10 text-xs border-slate-200 rounded bg-slate-100'}}) }}
                                <div class="text-xs text-red-400">
                                    {{ form_errors(form.material.name)}}
                                </div>
                            </div>
                            <div class="form-group my-2" id="worktop-material-colour">
                                <div class="w-[20%] inline-block">{{ form_label(form.material.colour) }}</div>
                                {{ form_widget(form.material.colour, {'attr':{'class': 'w-full md:w-48 h-10 text-xs border-slate-200 rounded bg-slate-100'}}) }}
                                <div class="text-xs text-red-400">
                                    {{ form_errors(form.material.colour)}}
                                </div>
                            </div>
                        </div>
                        <div class="grid grid-cols-1"> 
                            <div class="form-group my-2" id="worktop-material-finish">
                                <div class="w-[20%] inline-block">{{ form_label(form.material.finish) }}</div>
                                {{ form_widget(form.material.finish, {'attr':{'class': 'w-full md:w-48 h-10 text-xs border-slate-200 rounded bg-slate-100'}}) }}
                                <div class="text-xs text-red-400">
                                    {{ form_errors(form.material.finish)}}
                                </div>
                            </div>                            
                        </div>
                    </section>

                    <!-- material -->

                    <hr class="h-px my-8 bg-slate-100 border-0">

                    <!-- worktop PLates -->

                    <section class="mb-24">
                        <h2 class="leading-tight md:text-xl lg:text-2xl font-bold my-3">Plaque</h2>
                        <div id="plate-quantity-controls">
                            <span class="text-sm">Quantité</span>
                            <span class="cursor-pointer" onclick="removeElement(this, 'plate')" id="remove-plate">-</span>
                                <input type="text" class="w-10 h-8 border-slate-200 bg-slate-100 text-center rounded" id="plate-quantity" value=0>
                            <span class="cursor-pointer" onclick="addElement('plate')" id="add-plate">+</span>
                        </div>

                        {{ form_row(form.plates) }}

                    </section>            

                    <!-- worktop Plates -->

                    <hr class="h-px my-8 bg-slate-100 border-0">

                    <!-- Splashback -->

                    <section class="mb-24">
                        <h2 class="leading-tight md:text-xl lg:text-2xl font-bold my-3">Crédence</h2>
                        <div id="splashback-quantity-controls">
                            <span class="text-sm">Quantité</span>
                            <span class="cursor-pointer" onclick="removeElement(this, 'splashback')" id="remove-splashback">-</span>
                                <input type="text"  class="w-10 h-8 border-slate-200 bg-slate-100 text-center rounded" id="splashback-quantity" value=0>
                            <span class="cursor-pointer" onclick="addElement('splashback')" id="add-splashback">+</span>
                        </div>               

                        {{ form_row(form.splashbacks) }}
                    </section>

                    <!-- Splashback -->

                    <hr class="h-px my-8 bg-slate-100 border-0">

                    <!-- EdgeShape -->

                    <section class="mb-24">
                        <h2 class="leading-tight md:text-xl lg:text-2xl font-bold">Style de chanfrein</h2>
                        <div class="grid grid-cols-1">
                            <div class="form-group flex items-center justify-between min-h-[8rem]" id="worktop-edgeshape">
                                {{ form_widget(form.edgeShape, { 'attr': {'class': 'w-32 h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
                            </div>
                            <div class="text-xs text-red-400">
                                {{ form_errors(form.edgeShape)}}
                            </div> 

                        </div>
                    </section>
                    <!-- EdgeShape -->

                    <hr class="h-px my-8 bg-slate-100 border-0">

                    <!-- Options -->

                    <section class="mb-24">
                        <h2 class="leading-tight md:text-xl lg:text-2xl font-bold my-3">Options</h2>
                        <div class="grid grid-cols-1">
                            <div class="form-group" id="worktop-option">  

                            <!-- options custom form -->                 

                                    <table class="w-full">

                                        <tbody>
                                            {% for choice in form.option.vars.choices %}                            
                                                <tr>
                                                    <td class="flex items-center">
                                                        <div class="w-24 inline-block text-xs md:text-sm">{{ choice.label}}</div>
                                                        <select onchange="addOption(this)" name="option[{{ choice.value }}][]" id="option_quantity_{{ choice.data.id }}" data-splashback-price={{ choice.data.price }} class="w-30 h-10 text-xs border-slate-200 rounded bg-slate-100">
                                                            <option value="">Quantité</option>
                                                            <option value=0>0</option>
                                                            <option value=1>1</option>
                                                            <option value=2>2</option>
                                                            <option value=3>3</option>
                                                            <option value=4>4</option>
                                                            <option value=5>5</option>
                                                            <option value=6>6</option>
                                                        </select>                                        
                                                    </td>
                                                    <td class="px-10 lg:px-20 text-center">                                        
                                                        <img src="{{ asset('/uploads/images/' ~ choice.data.imageFileName) }}" alt="option" class="w-24 md:w-32">                                        
                                                    </td>
                                                    <td class="text-xs md:text-sm font-bold text-start">
                                                        Prix HT: <span class="option-price">{{ choice.data.price | format_currency('EUR') }}</span>
                                                    </td>
                                                </tr>                                              
                                            {% endfor %}
                                        </tbody>

                                    </table>

                                <!-- options custom form -->

                                {% do form.option.setRendered() %}
                                <!-- custom form -->
                            </div>
                        </div>
                    </section>

                    <!-- Options -->

                    <hr class="h-px my-8 bg-slate-100 border-0">

                    <!-- Contact form -->
                    <section class="mb-24">
                        <h2 class="leading-tight md:text-xl lg:text-2xl font-bold">Contact</h2>
                        <div class="" id="contact-form">                   

                            <div class="grid grid-cols-1 my-3">
                                <div class="form-group my-2 col-span-2 flex items-center" id="contact-type">
                                    {{ form_widget(contactForm.isPro, { 'attr': {'class': 'border-slate-200 rounded bg-slate-100'} }) }}
                                    <div class="inline-block text-xs md:text-sm ml-5">{{ form_label(contactForm.isPro) }}</div>                        
                                </div>                    
                            </div>

                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 my-6">
                                <div class="form-group my-2" id="conatct-email">
                                    <div class="text-xs md:text-sm">{{ form_label(contactForm.lastname) }}</div>
                                    {{ form_widget(contactForm.lastname, { 'attr': {'class': 'w-full h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
                                    <div class="text-xs text-red-400">
                                        {{ form_errors(contactForm.lastname)}}
                                    </div>
                                </div>
                                <div class="form-group my-2 col-span" id="contact-phone">
                                    <div class="text-xs md:text-sm">{{ form_label(contactForm.firstname) }}</div>
                                    {{ form_widget(contactForm.firstname, { 'attr': {'class': 'w-full h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
                                    <div class="text-xs text-red-400">
                                        {{ form_errors(contactForm.firstname)}}
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 my-6">
                                <div class="form-group my-2" id="conatct-email">
                                    <div class="text-xs md:text-sm">{{ form_label(contactForm.email) }}</div>
                                    {{ form_widget(contactForm.email, { 'attr': {'class': 'w-full h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
                                    <div class="text-xs text-red-400">
                                        {{ form_errors(contactForm.email)}}
                                    </div>
                                </div>
                                <div class="form-group my-2 col-span" id="contact-phone">
                                    <div class="text-xs md:text-sm">{{ form_label(contactForm.phone) }}</div>
                                    {{ form_widget(contactForm.phone, { 'attr': {'class': 'w-full h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
                                    <div class="text-xs text-red-400">
                                        {{ form_errors(contactForm.phone)}}
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 my-6">
                                <div class="form-group my-2" id="contact-zipcode">
                                    <div class="text-xs md:text-sm">{{ form_label(contactForm.zipcode) }}</div>
                                    {{ form_widget(contactForm.zipcode, { 'attr': {'class': 'w-full h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
                                    <div class="text-xs text-red-400">
                                        {{ form_errors(contactForm.zipcode)}}
                                    </div>
                                </div>
                                <div class="form-group my-2" id="contact-city">
                                    <div class="text-xs md:text-sm">{{ form_label(contactForm.city) }}</div>
                                    {{ form_widget(contactForm.city, { 'attr': {'class': 'w-full h-10 text-xs border-slate-200 rounded bg-slate-100'} }) }}
                                    <div class="text-xs text-red-400">
                                        {{ form_errors(contactForm.city)}}
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 my-3">
                                <div class="form-group my-2" id="contact-comment">
                                    <div class="inline-block text-xs md:text-sm">{{ form_label(contactForm.comment) }}</div>
                                    {{ form_widget(contactForm.comment, { 'attr': {'class': 'w-full text-xs border-slate-200 rounded bg-slate-100', 'rows': '3'} }) }}
                                </div>
                            </div>

                        </div>
                        <!-- Contact form csrf_token -->
                        {{ form_widget(contactForm._token) }}
                        <!-- Contact form csrf_token -->
                    </section>
                    <!-- Contact form -->

                    <button type="submit" class="bg-teal-300 hover:bg-teal-600 hover:text-white text-gray-600 text-xs px-4 py-2 font-bold shadow">Envoyer le devis</button>            
                    {{ form_end(form) }} 
                </div>        
            </div>
        </div>
        <!-- Form -->
        <div class="col-span-0">
        </div>
    </div>
            
                 
    
{% endblock %}
{% block javascripts %}
<script>

const domQuotationAmount = document.getElementById('quotation-total-amount');
const navbarMain = document.getElementById('navbar-main');
const imageHeader = document.getElementById('image-header');

window.addEventListener('scroll', function() {
    // Shrink navbar when scroll down.
    navbarMain.style.height = (window.pageYOffset > 120) ? '50px' : '80px';
    imageHeader.style.width = (window.pageYOffset > 120) ? '50px' : '80px';

    // Display quotation amount when scroll down. 
    domQuotationAmount.style.opacity = (window.pageYOffset >= 600) ? 0.75 : 0;
});

// TODO Transform to object.
let quotationAmount = 0;
let platePrice = 0;
let splashbackPrice = 0;
let edgeShapePrice = 0;
let optionsPrice = 0;
let totalPlatePerimeter = 0;

let previousElements = [];

// Add plate or splashback
const addElement = (formType) => {

    if(document.getElementById(`${formType}-quantity`).value) {
        
        let formQuantity = document.getElementById(`${formType}-quantity`).value;    

        formQuantity++;
        document.getElementById(`${formType}-quantity`).value = formQuantity;    
        
        const collectionHolder = document.getElementById(`worktop_${formType}s`);
        const newForm = collectionHolder.dataset.prototype.replace(/__name__/g, formQuantity);
        document.getElementById(`add-${formType}`).insertAdjacentHTML('afterend', newForm);

        displayElementPriceInformation(formType, formQuantity, 0);

        // Get inputs values
        const lengthElement = document.getElementById(`worktop_${formType}s_${formQuantity}_length`);
        const widthElement = document.getElementById(`worktop_${formType}s_${formQuantity}_width`);

        lengthElement.addEventListener('input', (event) => {
            handleSizeChange(formType, formQuantity);            
        });

        widthElement.addEventListener('input', (event) => {            
            handleSizeChange(formType, formQuantity);
        });

        fetchMaterialPrice(formType, formQuantity);
    }
}

const handleSizeChange = (formType, formQuantity) => {

    const thicknessElement = document.getElementById(`worktop_${formType}s_${formQuantity}_thickness`);            
    thicknessElement.dispatchEvent(new window.Event('change'))

    if (formType === 'plate') {
        const edgeShapeElement = document.getElementById(`worktop_edgeShape`);
        edgeShapeElement.value = 26;
        edgeShapeElement.dispatchEvent(new window.Event('change'));
    }
}

// Remove plate or splashback
const removeElement = (element, formType) => {
    
    // User decrease quantity
    if (element.getAttribute('id') === `remove-${formType}`) {

        let elementId = document.getElementById(`${formType}-quantity`).value;
             

        if (document.getElementById(`${formType}-quantity`).value >= 2) {

            document.getElementById(`${formType}-quantity`).value--;
            const element = document.getElementById(`${formType}s_${elementId}_price`);        

            if (element) {

                const elementPrice = parseFloat(element.textContent.replace(/Prix HT: ([0-9]+),([0-9]+)/, "$1.$2").replace('€', ''));

                if (formType === 'plate') {
                    platePrice = platePrice - elementPrice;
                }

                if (formType === 'splashback') {
                    splashbackPrice = splashbackPrice - elementPrice;	
                }  

                updateQuotationAmount();

            }
            document.getElementById(`worktop_${formType}s_${elementId}`).remove();
        } 
        
    } else {
        
        // user click on remove plate/splashback trash button
        if (document.getElementById(`${formType}-quantity`).value >= 2 || formType === 'splashback') {

            document.getElementById(`${formType}-quantity`).value--;

            if (element.previousElementSibling) {

                const elementPrice = parseFloat(element.previousElementSibling.textContent.replace(/Prix HT: ([0-9]+),([0-9]+)/, "$1.$2").replace('€', ''));

                if (formType === 'plate') {
                    platePrice = platePrice - elementPrice;
                }

                if (formType === 'splashback') {
                    splashbackPrice = splashbackPrice - elementPrice;	
                }  

                updateQuotationAmount();        
            }

            element.parentNode.parentNode.remove();
        }
    }
}

const addOption = (element) => {
    
    if (element.getAttribute('id') in previousElements) {
        optionsPrice = optionsPrice - previousElements[element.getAttribute('id')];
    }
    optionsPrice += parseFloat(element.dataset.splashbackPrice * element.value);
    previousElements[element.getAttribute('id')] = element.dataset.splashbackPrice * element.value;

    updateQuotationAmount();
}

const fetchMaterialPrice = (formType, elementId) => {

    document.getElementById(`worktop_${formType}s_${elementId}_thickness`).addEventListener('change', async (event) => {

        // Get name, Colour, finish from form value and construct object.
        const materialNameElement = document.getElementById('worktop_material_name');
        const materialNameValue = materialNameElement.options[materialNameElement.selectedIndex].value;

        const materialColourElement = document.getElementById('worktop_material_colour')
        const materialColourValue = materialColourElement.options[materialColourElement.selectedIndex].value;

        const materialFinishElement = document.getElementById('worktop_material_finish')
        const materialFinishValue = materialFinishElement.options[materialFinishElement.selectedIndex].value;

        const materialData = {
            name: materialNameValue,
            colour: materialColourValue,
            finish: materialFinishValue,
            thickness: event.target.value
        }

        const payload = JSON.stringify(materialData);
        const url = `{{ path('plate_price')}}`;

        const response = await fetch(url, {
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json"
            },
            method: 'POST',            
            body: payload
        });

        const data = await response.json();
        updateElementPrice(formType, elementId, data, event);
    })
}

const updateQuotationAmount = () => {
    quotationAmount = platePrice + splashbackPrice + edgeShapePrice + optionsPrice;
    const quotationAmountElement = document.getElementById('quotation-amount');
    quotationAmountElement.textContent = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR'}).format(quotationAmount);
}

const updateElementPrice = (formType, elementId, data, event) => {

    const lengthElement = document.getElementById(`worktop_${formType}s_${elementId}_length`);
    const widthElement = document.getElementById(`worktop_${formType}s_${elementId}_width`);

    const length = parseFloat(lengthElement.value);
    const width = parseFloat(widthElement.value);

    // remove message error if exist.
    const sizeErrorElement = document.getElementById('size-error');
    if(sizeErrorElement) {
        sizeErrorElement.remove();
    }

    if (length && width) {   

        const elementPriceKey = `${formType}s_${elementId}_price`;
        const elementPerimeterKey = `${formType}s_${elementId}_perimeter`;

        // Compute element price.
        const elementPrice = parseFloat((((length * width)/1000000) * data.price).toFixed(2));

        displayElementPriceInformation(formType, elementId, elementPrice);

        if (formType === 'plate') {

            let platePerimeter = ((length + width) * 2)/1000;
            totalPlatePerimeter += platePerimeter;                            
            
            if (elementPriceKey in previousElements && elementPerimeterKey in previousElements) {

                platePrice = platePrice - previousElements[`${formType}s_${elementId}_price`];
                totalPlatePerimeter = totalPlatePerimeter - previousElements[elementPerimeterKey];
            }

            platePrice += elementPrice;

            // Store current element perimeter into array
            previousElements[elementPerimeterKey] = platePerimeter;                       
        }
        if (formType === 'splashback') {

            if (elementPriceKey in previousElements) {
                splashbackPrice = splashbackPrice - previousElements[`${formType}s_${elementId}_price`];                
            }

            splashbackPrice += elementPrice;                
        }

        // Store current element price into array
        previousElements[elementPriceKey] = elementPrice;    
        updateQuotationAmount();
        
    } else {

        // Display Error message if length or width are empty and reset thickness value.
        event.target.value = '';
        lengthElement.parentNode.parentNode.insertAdjacentHTML('afterend', `<div class='text-xs md:text-sm' id='size-error' style='color: red;' >Saisir une valeur</div>`);            
    }

}

const displayElementPriceInformation = (formType, elementId, elementPrice) => {

    // Display Price to Dom document
    const domElementPrice = document.getElementById(`${formType}s_${elementId}_price`);

    // Delete previous price if exist.
    if ( domElementPrice !== null) {
        domElementPrice.remove();
    }

    const trashElement = document.getElementById(`worktop_${formType}s_${elementId}_remove`);

    const currentElementPrice = document.createElement('span');
    currentElementPrice.setAttribute('id', `${formType}s_${elementId}_price`);
    currentElementPrice.setAttribute('class', 'text-xs md:text-sm font-bold mx-2');
    currentElementPrice.textContent = 'Prix HT: ' + new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR'}).format(elementPrice);
    trashElement.parentNode.insertBefore(currentElementPrice, trashElement);
} 

addElement('plate');
</script>
{% endblock %}