<?php
?>
<div class="filters">
    <a href="#" onclick="toggleFiltersModal();return  false;">
        <svg class="icon icon-filter"><use xlink:href="/svg/symbol/sprite-styled.svg#filter"></use></svg>
    </a>
</div>
<div id="filters-modal">
    <form action="" method="get">
        <div class="form-group w-100">
            <div class="input-group ">
                <input type="text" name="daterange" class="selector form-control" value="<?=Yii::$app->request->get('daterange')?>">
                <input type="hidden" id="archiveFilters" name="q" class="" value="<?=Yii::$app->request->get('q')?>">
                <div class="input-group-append">
                    <label for="archiveFilters" class="input-group-text">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em"><path d="M940.218182 107.054545h-209.454546V46.545455h-65.163636v60.50909H363.054545V46.545455H297.890909v60.50909H83.781818c-18.618182 0-32.581818 13.963636-32.581818 32.581819v805.236363c0 18.618182 13.963636 32.581818 32.581818 32.581818h861.090909c18.618182 0 32.581818-13.963636 32.581818-32.581818V139.636364c-4.654545-18.618182-18.618182-32.581818-37.236363-32.581819zM297.890909 172.218182V232.727273h65.163636V172.218182h307.2V232.727273h65.163637V172.218182h176.872727v204.8H116.363636V172.218182h181.527273zM116.363636 912.290909V442.181818h795.927273v470.109091H116.363636z"></path></svg>
                    </label>
                </div>
            </div>

        </div>
        <button type="submit">Применить фильтр</button>
    </form>
</div>
<link rel="stylesheet" href="/js/flatpicker/style.css">
<script src="/js/flatpicker/script.js" async></script>
<script>
    let toggleFiltersModal = function (){
        let modal = document.getElementById("filters-modal");
        if(modal.classList.contains("active")){
            modal.classList.remove("active");
        } else{
            modal.classList.add("active");
        }
    }
    let ti = setInterval(function (){
        if(typeof window.flatpickr!=='undefined'){
            flatpickr(".selector",{mode: "range", "locale": "ru",dateFormat: "d.m.Y" })
            clearInterval(ti)
        }
    },2000);

</script>

