@extends('layouts/master_hf')

@php
    $pagename = 'contatti';
@endphp

@section('body')

    <!-- Rest of your existing code -->
    <div class="tm-sidebars-1 tm-isblog tm-header-wrapper">

        @include('components.breadcrumb')

        <div class="tm-page-corners"></div>

        <div id="tm-main" class="tm-block-main uk-block uk-block-default">
            <div class="tm-page-padding">
                <div class="uk-container uk-container-center">
                    <div class="tm-middle uk-grid" data-uk-grid-match data-uk-grid-margin>
                        <div class="tm-main uk-width-medium-1-1">
                            <main id="tm-content" class="tm-content">
                                <div id="system-message-container"></div>
                                <article class="uk-article tm-article">
                                    <div class="tm-article-wrapper container-fluid">
                                        <div class="tm-article">
                                            <div class="card" style="background-color: #EEEEEE;">
                                                <div class="card-body">
                                                    <h2 class="card-title">INFO CONTATTI</h2>
                                                    <p class="card-text">Costruzione e vendita al dettaglio di ricambi
                                                        agricoli, pinze per tronchi, attrezzature forestali, vomeri per
                                                        aratro.</p>
                                                    <div class="container">
                                                        <div class="row">
                                                            <div class="col-lg-4 col-md-6 col-12 mb-3">
                                                                <div class="d-flex align-items-center">
                                                                    <i class="bi bi-telephone fa-2x me-3 big-icon"></i>
                                                                    <span>+39 030 957 225</span>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-12 mb-3">
                                                                <div class="d-flex align-items-center">
                                                                    <i class="bi bi-envelope fa-2x me-3 big-icon"></i>
                                                                    <span>info@interlam.it</span>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-12 mb-3">
                                                                <div class="d-flex align-items-center">
                                                                    <i class="bi bi-geo-alt fa-2x me-3 big-icon"></i>
                                                                    <span>Via De Gasperi 28/30<br>Remedello Sopra, BS 25010,
                                                                        Italia</span>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-12 mb-3">
                                                                <div class="d-flex align-items-center">
                                                                    <i class="bi bi-instagram fa-2x me-3 big-icon"></i>
                                                                    <span>@interlam_srl<br>@interlam_agri</span>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-12 mb-3">
                                                                <div class="d-flex align-items-center">
                                                                    <i class="bi bi-whatsapp fa-2x me-3 big-icon"></i>
                                                                    <span>+39 030 957 225</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="card mt-5 mb-3">
                                                <div class="card-body">
                                                    <h3 class="card-title">Modulo di Contatto</h3>
                                                    <p class="fst-italic">Utilizza il seguente Form per contattarci</p>
                                                    <p class="fst-italic">I campi con * sono richiesti.</p>
                                                    <form id="form_342" name="default" class="mt-4" method="post"
                                                        action="{{ route('send.email') }}"
                                                        onsubmit="return validateForm(event)">
                                                        @csrf
                                                        <div class="row g-3">
                                                            <div class="col-12 input-group pt-3">
                                                                <span class="input-group-text"><i
                                                                        class="bi bi-person me-1"></i>*</span>
                                                                <input type="text" name="field1" required
                                                                    placeholder="Nome, Cognome" id="nome"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-12 input-group pt-3">
                                                                <span class="input-group-text"><i
                                                                        class="bi bi-building me-1"></i>*</span>
                                                                <input type="text" name="field2" required
                                                                    placeholder="Azienda" id="azienda"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-12 input-group">
                                                                <span class="input-group-text"><i
                                                                        class="bi bi-geo-alt me-1"></i>*</span>
                                                                <input type="text" name="field3" required
                                                                    placeholder="Indirizzo Azienda" id="indirizzo"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-12 input-group">
                                                                <span class="input-group-text"><i
                                                                        class="bi bi-file-text me-1"></i>*</span>
                                                                <input type="text" name="field4" required
                                                                    placeholder="Partita iva" id="p_iva"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-12 input-group pt-3">
                                                                <span class="input-group-text"><i
                                                                        class="bi bi-telephone me-1"></i>*</span>
                                                                <input type="text" name="field5" required
                                                                    placeholder="Telefono / Cellulare" id="tel"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-12 input-group">
                                                                <span class="input-group-text"><i
                                                                        class="bi bi-envelope-at me-1"></i>*</span>
                                                                <input type="email" name="field6" required
                                                                    placeholder="Email Personale" id="email"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-12 mb-0 input-group py-3">
                                                                <p class="mt-4 mb-3">Seleziona il settore di interesse: *</p>
                                                                <div class="w-100 px-3">
                                                                    <div class="form-check">
                                                                        <input type="radio" class="form-check-input" name="sector" id="forestale" checked onchange="sectorChange('FORESTALE')">
                                                                        <label class="form-check-label" for="forestale">FORESTALE</label>
                                                                    </div>

                                                                    <div class="form-check">
                                                                        <input type="radio" class="form-check-input" name="sector" id="agricolo" onchange="sectorChange('AGRICOLO')">
                                                                        <label class="form-check-label" for="agricolo">AGRICOLO</label>
                                                                    </div>

                                                                    <div class="form-check">
                                                                        <input type="radio" class="form-check-input" name="sector" id="altro" onchange="sectorChange('ALTRO')">
                                                                        <label class="form-check-label" for="altro">ALTRO</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <script>
                                                                function sectorChange(sector) {
                                                                    const form = document.getElementById('form_342');
                                                                    const sectors = ['FORESTALE', 'AGRICOLO', 'ALTRO'];

                                                                    let shouldReturn = false;
                                                                    sectors.forEach(s => {
                                                                        if(s != sector) {
                                                                            const sectorClass = 'settore' + s.toLowerCase();
                                                                            const sectorInputs = form.getElementsByClassName(sectorClass);

                                                                            Array.from(sectorInputs).forEach(input => {
                                                                                if(input.value.trim() != '') {
                                                                                    shouldReturn = true;
                                                                                }
                                                                            });
                                                                        }
                                                                    });
                                                                    if(shouldReturn) {
                                                                        const popup = document.createElement('div');
                                                                        popup.style.position = 'fixed';
                                                                        popup.style.top = '50%';
                                                                        popup.style.left = '50%';
                                                                        popup.style.transform = 'translate(-50%, -50%)';
                                                                        popup.style.backgroundColor = '#cce5ff';
                                                                        popup.style.color = '#004085';
                                                                        popup.style.padding = '15px';
                                                                        popup.style.borderRadius = '5px';
                                                                        popup.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
                                                                        popup.style.zIndex = '9999';
                                                                        popup.style.fontSize = '1.4rem';

                                                                        const closeButton = document.createElement('button');
                                                                        closeButton.innerHTML = '×';
                                                                        closeButton.style.position = 'absolute';
                                                                        closeButton.style.right = '5px';
                                                                        closeButton.style.top = '5px';
                                                                        closeButton.style.border = 'none';
                                                                        closeButton.style.background = 'none';
                                                                        closeButton.style.fontSize = '20px';
                                                                        closeButton.style.cursor = 'pointer';
                                                                        closeButton.onclick = () => popup.remove();

                                                                        popup.style.paddingRight = '25px';
                                                                        popup.textContent = 'Attenzione può essere selezionato solo un settore, verrà inviato il settore ' + sector;
                                                                        popup.appendChild(closeButton);
                                                                        document.body.appendChild(popup);
                                                                        setTimeout(() => popup.remove(), 4000);
                                                                        return;
                                                                    }                                                                       }                                                                </script>
                                                            </div>
                                                            <div class="card mt-0 border"
                                                            style="background-color: #EEEEEE;">
                                                            <div class="m-3" id="forestale-content">
                                                                <div class="row g-3">
                                                                    <div class="col-12 input-group">
                                                                        <input type="text" name="field1"
                                                                            placeholder="Prodotto *" required
                                                                            id="field1_341" class="form-control settoreforestale"
                                                                            oninput="filterOptions(this)" list="products">
                                                                        <datalist id="products" style="display: none;">
                                                                        </datalist>
                                                                        <div id="lista_forestale" style="display:none">
                                                                        null                                                                        </div>

                                                                        <script>
                                                                            function filterOptions(input) {
                                                                                const datalist = document.getElementById('products');
                                                                                const lista = document.getElementById('lista_forestale').textContent;
                                                                                const listaArray = JSON.parse(lista);
                                                                                const options = [];
                                                                                listaArray.forEach(item => {
                                                                                    options.push({ value: item });
                                                                                });
                                                                                const value = input.value.toLowerCase();



                                                                                const filteredOptions = options
                                                                                    .filter(option => option.value.toLowerCase().includes(value))
                                                                                    .slice(0, 5);



                                                                                datalist.innerHTML = '';
                                                                                filteredOptions.forEach(option => {
                                                                                    const optionElement = document.createElement('option');
                                                                                    optionElement.value = option.value;
                                                                                    datalist.appendChild(optionElement);
                                                                                });
                                                                            }
                                                                        </script>
                                                                    </div>
                                                                    <div class="col-12 input-group">
                                                                        <input type="text" name="field2" required
                                                                            placeholder="Peso Escavatore *" id="field1_342"
                                                                            class="form-control settoreforestale">
                                                                    </div>
                                                                    <div class="col-12 input-group ">
                                                                        <textarea name="message" required placeholder="Messaggio *" class="form-control settoreforestale" id="message_341" rows="4"></textarea>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="m-3" id="agricolo-content"
                                                                style="display: none;">
                                                                <div class="row g-3">
                                                                    <div class="col-12 input-group">
                                                                        <input type="text" name="field3"
                                                                            placeholder="Prodotto *" required
                                                                            id="field1_343" class="form-control  settoreagricolo"
                                                                            oninput="filterOptions2(this)" list="products">
                                                                        <datalist id="productsr" style="display: none;">
                                                                        </datalist>
                                                                        <div id="lista_agricolo" style="display:none">
                                                                            null                                                                            </div>

                                                                    </div>
                                                                    <div class="col-12 input-group">
                                                                        <textarea name="message" required placeholder="Messaggio *" class="form-control settoreagricolo" id="message_342" rows="6"></textarea>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="m-3" id="altro-content"
                                                                style="display: none;">
                                                                <div class="row g-3">
                                                                    <div class="col-12 input-group">
                                                                        <textarea name="message" required placeholder="Messaggio *" class="form-control settorealtro" id="message_343" rows="8"></textarea>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>

                                                        <script>
                                                            document.getElementById('forestale').addEventListener('change', function() {
                                                                document.getElementById('forestale-content').style.display = 'block';
                                                                document.getElementById('agricolo-content').style.display = 'none';
                                                                document.getElementById('altro-content').style.display = 'none';
                                                            });

                                                            document.getElementById('agricolo').addEventListener('change', function() {
                                                                document.getElementById('forestale-content').style.display = 'none';
                                                                document.getElementById('agricolo-content').style.display = 'block';
                                                                document.getElementById('altro-content').style.display = 'none';
                                                            });

                                                            document.getElementById('altro').addEventListener('change', function() {
                                                                document.getElementById('forestale-content').style.display = 'none';
                                                                document.getElementById('agricolo-content').style.display = 'none';
                                                                document.getElementById('altro-content').style.display = 'block';
                                                            });

                                                            function showBanner(message, type) {
                                                                const popup = document.createElement('div');
                                                                popup.style.position = 'fixed';
                                                                popup.style.top = '50%';
                                                                popup.style.left = '50%';
                                                                popup.style.transform = 'translate(-50%, -50%)';
                                                                popup.style.backgroundColor = type === 'success' ? '#d4edda' : '#cce5ff';
                                                                popup.style.color = type === 'success' ? '#155724' : '#004085';
                                                                popup.style.padding = '15px';
                                                                popup.style.borderRadius = '5px';
                                                                popup.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
                                                                popup.style.zIndex = '9999';
                                                                popup.style.fontSize = '1.4rem';
                                                                popup.style.paddingRight = '25px';

                                                                const closeButton = document.createElement('button');
                                                                closeButton.innerHTML = '×';
                                                                closeButton.style.position = 'absolute';
                                                                closeButton.style.right = '5px';
                                                                closeButton.style.top = '5px';
                                                                closeButton.style.border = 'none';
                                                                closeButton.style.background = 'none';
                                                                closeButton.style.fontSize = '20px';
                                                                closeButton.style.cursor = 'pointer';
                                                                closeButton.onclick = () => popup.remove();

                                                                popup.textContent = message;
                                                                popup.appendChild(closeButton);
                                                                document.body.appendChild(popup);

                                                                setTimeout(() => popup.remove(), 4000);
                                                            }
                                                            function sendEmail(event) {
                                                                event.preventDefault();

                                                                showBanner('Email inviata con successo!', 'success');
                                                                event.target.reset();

                                                                return false;
                                                            }

                                                            let hasAttemptedSubmit = false;

                                                            function doValidateSendEmail() {

                                                                if(doValidate()){

                                                                    //TODO: Real Email
                                                                    if (confirm('Sei sicuro di voler inviare questa email?')) {
                                                                        document.getElementById('form_342').reset();
                                                                        sendEmail(event);
                                                                    }
                                                                }
                                                            }


                                                            function doValidate(isRealtime = false) {

                                                                const inputs = document.querySelectorAll('input[type="text"]:not(#altro-content input):not(#agricolo-content input):not(#forestale-content input), input[type="email"], textarea:not(#altro-content textarea):not(#agricolo-content textarea):not(#forestale-content textarea)');
                                                                const inputs2 = document.querySelectorAll('input[type="text"], input[type="email"], textarea');
                                                                let isValid = true;

                                                                // Only proceed with realtime validation if there's been a submission attempt
                                                                if (isRealtime && !hasAttemptedSubmit) {
                                                                    return true;
                                                                }

                                                                const existingErrors = document.querySelectorAll('.error-message');
                                                                existingErrors.forEach(error => error.remove());

                                                                // Check base validation first
                                                                inputs.forEach(input => {
                                                                    let errorMessage = '';

                                                                    if (!input.value.trim()) {
                                                                        errorMessage = 'Per favore compila questo campo';
                                                                    }
                                                                    if (input.type == 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value.trim())) {
                                                                        errorMessage = 'Per favore inserisci un indirizzo email valido';
                                                                    }
                                                                    if (input.id == 'tel' && !/^[0-9\s\-\+\(\)]+$/.test(input.value.trim())) {
                                                                        errorMessage = 'Per favore inserisci un numero di telefono valido';
                                                                    }

                                                                    if (errorMessage) {


                                                                        isValid = false;
                                                                    } else {

                                                                    }
                                                                });

                                                                inputs2.forEach(input => {
                                                                    let errorMessage = '';

                                                                    if (!input.value.trim()) {
                                                                        errorMessage = 'Per favore compila questo campo';
                                                                    }
                                                                    if (input.type == 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value.trim())) {
                                                                        errorMessage = 'Per favore inserisci un indirizzo email valido';
                                                                    }
                                                                    if (input.id == 'tel' && !/^[0-9\s\-\+\(\)]+$/.test(input.value.trim())) {
                                                                        errorMessage = 'Per favore inserisci un numero di telefono valido';
                                                                    }

                                                                    if (errorMessage) {
                                                                        input.style.border = '1px solid red';
                                                                        const inputGroup = input.closest('.input-group');
                                                                        const span = inputGroup.querySelector('.input-group-text');
                                                                        if (span) {
                                                                            span.style.backgroundColor = '#ffebee';
                                                                            span.style.borderColor = 'red';
                                                                        }

                                                                        const errorDiv = document.createElement('div');
                                                                        errorDiv.className = 'error-message text-danger mt-1 col-12';
                                                                        errorDiv.style.fontSize = '0.875rem';
                                                                        errorDiv.textContent = errorMessage;
                                                                        input.parentNode.appendChild(errorDiv);

                                                                    } else {
                                                                        input.style.border = '1px solid #ced4da';
                                                                        const inputGroup = input.closest('.input-group');
                                                                        const span = inputGroup.querySelector('.input-group-text');
                                                                        if (span) {
                                                                            span.style.backgroundColor = '';
                                                                            span.style.borderColor = '';
                                                                        }
                                                                    }
                                                                });

                                                                // Check if at least one form area is completely filled
                                                                const forestaleInputs = document.querySelectorAll('#forestale-content input, #forestale-content textarea');
                                                                const agricoloInputs = document.querySelectorAll('#agricolo-content input, #agricolo-content textarea');
                                                                const altroInputs = document.querySelectorAll('#altro-content input, #altro-content textarea');

                                                                const isForestaleComplete = Array.from(forestaleInputs).every(input => input.value.trim() !== '');
                                                                const isAgricoloComplete = Array.from(agricoloInputs).every(input => input.value.trim() !== '');
                                                                const isAltroComplete = Array.from(altroInputs).every(input => input.value.trim() !== '');


                                                                if (!(isForestaleComplete || isAgricoloComplete || isAltroComplete)) {
                                                                    isValid = false;
                                                                }

                                                                if (!isRealtime) {
                                                                    hasAttemptedSubmit = true;

                                                                    // Add realtime validation listeners after first submit
                                                                    inputs.forEach(input => {
                                                                        input.addEventListener('input', () => doValidate(true));
                                                                    });
                                                                }

                                                                return isValid;
                                                            }                                                            // Add this after the form initialization
                                                            document.getElementById('email').addEventListener('blur', function() {
                                                                const emailInput = this;
                                                                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

                                                                // Remove any existing error messages
                                                                const existingError = emailInput.parentNode.querySelector('.error-message');
                                                                if (existingError) existingError.remove();

                                                                let errorMessage = '';
                                                                if (!emailInput.value.trim()) {
                                                                    errorMessage = 'Per favore compila questo campo';
                                                                } else if (!emailRegex.test(emailInput.value)) {
                                                                    if (!emailInput.value.includes('@')) {
                                                                        errorMessage = 'Manca il simbolo @ nell\'indirizzo email';
                                                                    } else if (!emailInput.value.includes('.')) {
                                                                        errorMessage = 'Manca il punto (.) nell\'indirizzo email';
                                                                    } else if (emailInput.value.startsWith('@')) {
                                                                        errorMessage = 'L\'indirizzo email non può iniziare con @';
                                                                    } else if (emailInput.value.endsWith('@')) {
                                                                        errorMessage = 'Manca il dominio dopo @';
                                                                    } else {
                                                                        errorMessage = 'Formato email non valido';
                                                                    }
                                                                }

                                                                if (errorMessage) {
                                                                    emailInput.style.border = '1px solid red';
                                                                    const inputGroup = emailInput.closest('.input-group');
                                                                    const span = inputGroup.querySelector('.input-group-text');
                                                                    if (span) {
                                                                        span.style.backgroundColor = '#ffebee';
                                                                        span.style.borderColor = 'red';
                                                                    }

                                                                    const errorDiv = document.createElement('div');
                                                                    errorDiv.className = 'error-message text-danger mt-1 col-12';
                                                                    errorDiv.style.fontSize = '0.875rem';
                                                                    errorDiv.textContent = errorMessage;
                                                                    emailInput.parentNode.appendChild(errorDiv);
                                                                } else {
                                                                    emailInput.style.border = '1px solid #ced4da';
                                                                    const inputGroup = emailInput.closest('.input-group');
                                                                    const span = inputGroup.querySelector('.input-group-text');
                                                                    if (span) {
                                                                        span.style.backgroundColor = '';
                                                                        span.style.borderColor = '';
                                                                    }
                                                                }
                                                            });

                                                            document.getElementById('tel').addEventListener('blur', function() {
                                                                const telInput = this;
                                                                const telRegex = /^[0-9\s\-\+\(\)]+$/;

                                                                // Remove any existing error messages
                                                                const existingError = telInput.parentNode.querySelector('.error-message');
                                                                if (existingError) existingError.remove();

                                                                let errorMessage = '';
                                                                if (!telInput.value.trim()) {
                                                                    errorMessage = 'Per favore compila questo campo';
                                                                } else if (!telRegex.test(telInput.value)) {
                                                                    errorMessage = 'Formato numero di telefono non valido';
                                                                } else if (telInput.value.trim().length < 8) {
                                                                    errorMessage = 'Il numero di telefono è troppo corto';
                                                                }

                                                                if (errorMessage) {
                                                                    telInput.style.border = '1px solid red';
                                                                    const inputGroup = telInput.closest('.input-group');
                                                                    const span = inputGroup.querySelector('.input-group-text');
                                                                    if (span) {
                                                                        span.style.backgroundColor = '#ffebee';
                                                                        span.style.borderColor = 'red';
                                                                    }

                                                                    const errorDiv2 = document.createElement('div');
                                                                    errorDiv2.className = 'error-message text-danger mt-1 col-12';
                                                                    errorDiv2.style.fontSize = '0.875rem';
                                                                    errorDiv2.textContent = errorMessage;
                                                                    telInput.parentNode.appendChild(errorDiv2);
                                                                } else {
                                                                    telInput.style.border = '1px solid #ced4da';
                                                                    const inputGroup = telInput.closest('.input-group');
                                                                    const span = inputGroup.querySelector('.input-group-text');
                                                                    if (span) {
                                                                        span.style.backgroundColor = '';
                                                                        span.style.borderColor = '';
                                                                    }
                                                                }
                                                            });
                                                        </script>



                                                        <div class="row g-3 mt-4 mb-2">
                                                            <div class="col-12 mt-4 text-end">
                                                                <button type="submit" onclick="return doValidateSendEmail()"
                                                                    class="btn btn-primary btn-lg mx-1 px-5">Invia Email <i
                                                                        class="bi bi-envelope mx-1"></i></button>
                                                            </div>
                                                        </div>
                                                </div>
                                                </form>
                                            </div>
                                        </div>

                                    </div>
                        </div>
                        </article>
                        </main>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection