@extends('layouts.app')
@section('content')
    <div id="hero" class="container-fluid"></div>
    <div class="container mt-3 mb-5">
        <div class="brand-800 text-center mb-2" data-aos="fade-left" data-aos-delay="300">
            Ipari hőmérséklet mérők
        </div>
        <div class="d-flex justify-content-center text-center gap-5">
            <span class="brand-300" data-aos="fade-right" data-aos-delay="400">szakértelem</span>
            <span class="brand-300 text-danger" data-aos="fade-down" data-aos-delay="600">&#8226;</span>
            <span class="brand-300" data-aos="fade-down" data-aos-delay="800">35 év tapasztalat</span>
            <span class="brand-300 text-primary" data-aos="fade-down" data-aos-delay="900">&#8226;</span>
            <span class="brand-300" data-aos="fade-left" data-aos-delay="1000">minőség</span>
        </div>
    </div>
    <div class="container mt-3 mb-5">
        <section id="search-products" class="text-center mt-3 mb-3">
            <h3>{{__('Search Products')}}</h3>
            <div class="form-floating mb-3 w-75 mx-auto">
                <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                <label for="floatingInput">Search product</label>
            </div>
        </section>
        <section id="products" class="text-center mt-5 mb-3"><h3>{{__('Products')}}</h3>
            <div class="accordion" id="productsAccordion"></div>
        </section>
        <!-- Productselector -->
        <section id="productCards" class="row row-cols-1 row-cols-auto row-cols-sm-1 row-cols-md-3 row-cols-xxl-3 g-5"></section>
        <!-- Configurator -->
        <section id="configurator" class="mt-5">
            <div id="configuratorWrapper" class="container">
                <div class="row">
                    <div id="configurationHeader" class="col-12 blue-gradient-bg text-white p-2 mt-3" style="border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; overflow: hidden;">
                        <div class="row">
                            <div id="configTitle" class="col d-flex">
                                <div class="ms-3 fs-6">
                                    <i class="bi bi-tools me-2"></i>
                                    RHODIUM Konfigurátor
                                </div>
                            </div>
                            <div id="configProductCode" class="col"><div class="ms-4 fs-6 fw-bold">Termék kód: <span id="productCode"></span></div></div>
                            <div id="configToggleBtn" class="col text-end pe-3">
                                <button id="themeToggle"
                                        class="btn btn-transparent shadow-none border-0 text-white p-0 me-3"
                                        aria-label="viewbox-theme">
                                    <i class="bi bi-sun-fill"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div id="viewContainer" class="col-md-5 col-xl-4 position-relative">
                        <div id="modelLoader" class="z-3 position-absolute center-center"
                             style="pointer-events: none; display: block">
                            <div id="spinner" class="spinner-border model-spinner" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                        <div id="productView" style="height: calc(80vh)">
                            <canvas id="dimOverlayLayer"
                                    style="position: absolute; top: 0; left: 0; z-index: 99; pointer-events: none;">
                            </canvas>
                        </div>
                        <div class="floating-icon"><img
                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAADwklEQVR4nO2Ya4hPaRzHP4NheYGZ3U3u5ZLsrrKh5LatklqXZJdc1u6YUC5JuRXviBn2hTYi3u2+WCkvkEwuu+SaS267KxNr949ZCeNODP310/fo53Hc5tacnG+dOs/3/M7z/J5zftcHUqRIkSJFihSJQUNgGfA/UAYUi0scioFscBmXOJRJ+T5AP90bV+vIqaJcmZS3TfSvjo30BrYD5cBjoBSYA+TGyA4CDkruPrAfGBwj1wBYCGSk4HVgJdD0LaZVVNlNfCWlosUuuEnXBrIjgSd69hC4pfunwKhAdp2bp9zd28brS6ahNlNWHc6+XgtscH9gslOwmbhGwFXxpuRHkl8j7rwzoR5O8enivgYeifuRGsC3wBSgo+M6a0H7+k3EDRd3E2gcmFCermgjyyX7b+Afm8SXUINooi85ENipBX92zxeJ2wp8A5wCHgCngamBwtsl+1uwxjzxV2pyIz0Dp1sd2Otq8SdkIhkXdbJy7AhHYj6EoVC8+WSNoY2czRb/RwsecmYUmUtWX9ZQD/jJOX+08QPOlzymib9HLaG5i0jmP4aZGlcEYbmF22C3IICEvlAs/kx1+MEMoJfGFgYPA8eUkCLkugi1OMb0ujjZvo5vJ26qxuZD+W6tM+It0iG/srwxW1HwrbAXxgAXNdEu96xEXEabHA9sc8pZnomwQ9xZ4AeF6YzLD/6PXhO/Dxjt/lKF+3P5Lof9B4x7U7VgNr7RKWZf/0v3vD3wd0yGNYdeEMzVEvgzRvYc0CGmArgbyFXob3kMAI47mS0K5S/hY5UTJnBDUcMcNER9ZeYilRGznJmEMBP4XkFhlZKbzysebYH5qhAsfH/xGjnTqcD55UngE//wd5d1vV3XVXSVrlnp/tzMJrg6pzXJQVtVD1n5K3s1mETyMFm677bBHQ0sgiQNedLdfOaF4yRxI/muQGWPBhYNkoZC6f4HSi5R69iK5KC1qmPTfSwKXbtcJv6Muo/PpWtWVUSOd5pTruIseI8Dg9pEDjBROkYJ8ZXsbs3+ZlcCmNCIOrKhHOkSfeysukh/QPEKClzRaNdfqqV8i1tb6KRGzNd4mffp5RvpMOByUMwdBZYCw3yNU434VHMXqWj1a19Ww1Wp05Nc9d2/ArdjqtlS/eIVaqiGqp/vpE4yT4cO0cFDGz3rIYVn6t1NmisbXLbmL9Ih7uysUrBqdgiwRLnnfszCVb3uqdxYIuXfqYmqKhqoX/kOmKtDhxKZhFWml1SIVugqF3deMiV6Z67m6K45U6RIkSJFihQfPJ4BqaBXSZhqtzAAAAAASUVORK5CYII="
                                alt="360-view--v2">
                        </div>
                        <button id="resetConfigBtn" class="btn btn-transparent shadow-none d-none" data-bs-toggle="tooltip" data-bs-title="Konfiguráció törlése">
                            <i class="bi bi-arrow-counterclockwise me-2 fw-bold"></i>
                        </button>
                    </div>
                    <div id="configurationContainer" class="col-md-7 col-xl-8 position-relative border border-end-1">
                        <div class="col-12 sticky-top border bg-white border-0 shadow-sm z-3 py-2">
                            <div id="progressBar"
                                 class="d-flex align-items-center flex-nowrap">
                            </div>
                        </div>
                        <div id="configuratorAlert" class="col-12"></div>
                        <div class="accordion accordion-custom mt-4" id="configAccordion"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 border border-1 d-flex p-2"
                         style="border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; overflow: hidden;">
                        <div class="me-auto mt-2"><label class="ms-3"><input type="checkbox" id="dimCheck" class="me-2">Méretek
                                megjelenítése</label></div>
                        <button id="dataSheet" class="me-5 btn btn-confgr btn-sm shadow-none"><i
                                class="bi bi-info-circle me-2"></i>Termék Adatlap
                        </button>
                        <button id="quotationRequest" class="me-5 btn btn-confgr btn-sm shadow-none"><i
                                class="bi bi-file-text me-2"></i>Ajánlatkérés
                        </button>
                        <button id="closeConfigurator" class="me-3 btn btn-confgr btn-sm shadow-none"><i
                                class="bi bi-box-arrow-up-right me-2"></i>Bezár
                        </button>
                    </div>
                </div>
            </div>
            <div id="standardTable" class="container mb-5"></div>
        </section>
        <section id="about" class="mt-5">

        </section>
    </div>
@endsection
@section('scripts')
    <script>
        (() => {
            const toggleBtn = document.getElementById('themeToggle');
            const view = document.getElementById('viewContainer');
            const viewIcon = document.getElementsByClassName('floating-icon')[0];
            const resetIcon = document.getElementsByClassName('bi-arrow-counterclockwise')[0];
            const iconWhite = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD8UlEQVR4nO2YW4xOVxTHz9BBPQwGkbomShpUQoakQSsk0oRWpEpc2yE1SY1IE0XCG1GDBxFC6o0HTZM+IE0nLUVQ4hKXaicmhhp1ibSGMm1T0+Ynq9//mGXPp6bmG+Yk5598ybf/e52919p7r8veUZQiRYoUKVKkSAaANsAa4DpwDSgzLkoayCgeoixKGsjsgmEEMEr/rz0PRfKaIke9IWbE6002BHgN+BqoAe4DlcDHQH4W2XHAEcn9DhwG3swi9wKwHKiWgr8CG4GCJxyt1U9rxGgpFU92yQ36aSD7DvC3+v4E7uj/P8CUQHarG6fG/TfDWztnL9PONM3Zgc80wefxDgDznIIdxLUFboo3JduZPLBFXFV8hIAip3ipuDHAX+Lefypln2DIZKAEeNlx/TWhrX57cRPF3QZeDI5QJ/1iQ9ZK9ifvH8BO8eU5N8RN0l4rORbYowk3uP4V4r4ExgNngT+A74EPA4XN3ww7gjmWiL/RnIYMC5xusz+vahtO64hUu6hjWO5kj4cLYQDmir8fNReAnnK2DcBFTXg0PkbuuBiWiGsFrHPO/6/hwHexLwVzzBdf22yGBBN2dBGpRNxCtet8WAa6OQMHBwHkEV+gPtxW5MIPFgDD1W4NHANOWkJycvkuQq3McvRecbIjHd9bnPkM8qFCN1eF+C3i8ixvAIssCjbGAPtgGnBFA+11feXiqmXkTOArp9xoJ/uNuPPAewrTccI7HOzoL+IPAVPdLtW5nSt0OewyMOOx1YKdceALp5it/lDX3wf4kYYwh14WjPUScC6L7AWgb5YK4F4gV2e7Fci9AZxyMrstlIdGdFY5YbilqNEqi7G27VO0zVZGfBQfkyyylghnKShssuTm80og2wtYahWCwverj5GzoFHs/PIM0MV3fuuy7sNz3VIBDJCuSPc8I2e7OqdHlBCQ2UWrHgwzjTioxgdRwkB9rbffGnfV6BglDGTqNsOdyDlOEg0plO63rXFAjeIoYaC+JtsXKbmgwq57lBAAPaw6lu7T42y+12XigVELBzBIuqIqIs87jd0bDLVKOo16MHiWILPoc6RjnBAbZPcCYJcrAUxoUkswiIwBk9xio1tkwX99VOyKRsMPVkv5K+6zAtBPLyy+xqtu9F1eDwilwFUexQngE+DthzVObhXvqrFXq2j1uKoL1/9/PdF9w+7d24HfaIhKbfF6Xaje0n2+n26SnfToED889FRfkRReqG93aqwQNuc26ZCfq9WyanYCsEq5xx7dco1aKzc0x/hGXaJyYJit8lDgXWCxHh3KdSSsMv1ZhWidfjXiqiRTrm8Wa4whNmazK54iRYoUKVKkiFo+HgAZiskrddWouwAAAABJRU5ErkJggg==" alt="360-view--v2">`
            const iconBlack = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEl0lEQVR4nO1YW2icRRT+t4nXB7Wr7s73zewuxIgYFSxREK8oFEGtiDe09VJFhV4QQVvBvilq1IdSKhb7pg+K4EMVMbTaKloVNXhXLNZLrBdE7UXbik2l8qVnkuHviiGbxCz+Hwzsf3bmzDkz5zpZVqBAgQIFChRoD/T09BxM8iEAPwD4nmSfaFm7gWQfyX250Ze1G7D/FiT8mQDO1m/R/gtZSq3MgykiJQCc07Ii3vszSK4FsBXAHgCbSN7V29t7UJPNZwN4U/NI7iK5EcCFTdh2klxGctAE/IXkynK5fMS/mNaD41LCOXeeCRU3+yph+nhu7uUk99rcPwBst3l/ee+vSueSXB35ANia8NyYZVlH4ux9uoWWnR3A07bZM/EGANwaBezq6jpStO7u7kNI/mT01Y1G41DNB7DK1m+OJgSgNxF8kWje+/MB/Gm0G7OJhnPuCgC31Wq14yLNe3+8bbgXwOGikbzUBN4WQjgsYdFZr9dnaiSKPGzrv079g+Qao/dnkwUJrJP03l8A4CXbcEXy/72myAve+4sAfAhgN4CPSC7ICbzW1j+V22Op0X+cNEWcc6elTgfgsdRe9W30981EBpPwqbEsUeSd/EEIJG82HnuyyYL3PlgUWUHyS9vwrWhGibmIvtSWzQDwSHT+qDiAN6IvpXuQXGj0ndlUoNFoHBUjkvzHhLvdhBhKw3KlUqlGBUMIp6QBJO8LHA23n02EHyx2zp1upA4Ab5McUEKK8yRojFAA7mtieickPM9KbqpuAi+w790hhHLcSwoYfZXRSsobJO9UFByLDlpwDYBvjdHLySn1myCy+cUA5pF8MQqnPJPMXWfrP/fe32BhejDJDyM3SvJno79O8urklobizUnJmMNIfgNg7j9WC7Jxks8mpzlAclb83znXIPlpPsPKoQHck/Kq1+sg+XGTuV9UKpWu3O3PJvl7bu6QRbgROOfOBfBewut5C+WjIHm0ygmb8Kuihhy0ib4dysx2zSsB3BHNJA+ZgHPuOgUFAI8queXySrp/DcDdqhAUvqvV6slNTzvLZpCcn/jlBwCOGfkTwPqYdVO7nq5wzp1oskrm9cNm5py7PtY5IQSftQm4/xa3mezzRHjNPm7J2gywWg/AK1LkN30ogmRthnq9PtMU2Z5Fx2lHRUII5Vig6kZetZA2P2szcLQm26AbmRtbx1qtxqxNEELwqo5N9mtFKymDx0zsnOvJpjmq1epJktUsad1IlpfTqG+IFaeZ2VgfDKYSJZI3mYzDCfGA7K5mH8BzSQmgrHnZNFGoJFmSw9ZYkz5QHAArAYaLRhufqJZKW9ypQgih215Y0hpvcMy9vD0gLALwXa6Ye5fkAyTnpDXORME5d6x4Wy03kCs4JcvCcb2eqN9Q303ySZI7mlSzm+yhYLk1VJeon9dJqpM0++2MDw+i6T97PZlja5aLh/Halxs7ADwhGZq9nY0Lqma99xeTvN9yz64mG7c6dqrc0B4SfqxNVKvQC+Es7/2VJJfYo0O/dZGbAWyxBzf1FkP2OrnFqlaZTb+tWWI8TrXbK1CgQIECBQr87/E3vaH5K3LM0mcAAAAASUVORK5CYII=" alt="360-view--v2">`
            let dark = false;
            toggleBtn.addEventListener('click', () => {
                dark = !dark;
                toggleBtn.innerHTML = dark ? '<i class="bi bi-moon-stars-fill"></i>' : '<i class="bi bi-sun-fill"></i>';
                view.style.backgroundColor = dark ? 'var(--steel-blue)' : 'var(--soft-gray)';
                viewIcon.innerHTML = dark ? iconWhite : iconBlack;
                if (dark) {
                    resetIcon.classList.add('text-white');
                }
                else {
                    resetIcon.classList.remove('text-white');
                }
            });
        })();
    </script>
@endsection
@section('configurator-script')
    @vite(['resources/js/initModelViewer.js'])
@endsection