#{extends 'main.html'/}

<h1 class="page-header">${pageHeader}
    <small> ${pageHeaderDetail}</small>
</h1>

<div class="panel panel-inverse">
    <!-- begin panel-heading -->
    <div class="panel-heading">
        <h4 class="panel-title">Λίστα</h4>
    </div>
    <div class="panel-body">
        <div class="row m-b-5" >
            <div class="col-xs-6 col-md-6 col-lg-4 ">
                <div id="reportrange" class="form-control input-lg" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <i class="fa fa-caret-down"></i>
                </div>
            </div>
            <div class="col-xs-6 col-md-6 col-lg-4 ">
                <div class="controls">
                    <select id="customerId" name="customerId"
                            class="form-control input-lg">
                        <option value="0">Επιλογή πελάτη</option>
                    #{list customers}
                        <option value='${_.id}' ${lead?.customer?.id==_.id?"selected='selected'":""}>${_.financialInfo?.fullName}</option>
                    #{/list}
                    </select>
                </div>
            </div>
            <div class="col-xs-6 col-md-3 col-lg-2 ">
                <select id="status" class="form-control input-lg ">
                    <option value='0'>
                        Επιλογή κατάστασης
                    </option>
                    <option value='1'>
                        Ανοικτό
                    </option>
                    <option value='2'>
                        Ξανα ανοικτό
                    </option>
                    <option value='3'>
                        Εξέταση αργότερα
                    </option>
                    <option value='4'>
                        Κλειστό
                    </option>
                </select>

            </div>
        </div>

        <div id="listLeads"></div>

    </div>
    <div class="panel-footer">
        <div class="row">
            <a href="@{controllers.Projects.addLead()}" class="btn btn-success">Εισαγωγή lead</a>
        </div>
    </div>
    <input type="text" id="hiddenDateRange" style="display: none;"/>
    <!-- end panel-body -->
</div>


<script>
    $(function () {
        var listAction = #{jsAction @controllers.Projects.listLeads()/}
                $("#listLeads").load(listAction(), function () {
                    $("#listLeads").show();

                })

        var start = moment().subtract(1, 'years');
        var end = moment();

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            $('#hiddenDateRange').val(start.format('DD-MM-YYYY') + ' ; ' + end.format('DD-MM-YYYY'));    //hidden to take it back to server sidexxxxxx
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);

        cb(start, end);





    });

</script>

<script>
    $("#status").change(function (e) {
        onchangeSearch();
    });
    $("#reportrange").change(function (e) {
        onchangeSearch();
    });

    $("#customerId").change(function (e) {
        onchangeSearch();
    });


    var onchangeSearch = function () {
        var tmp = $("#hiddenDateRange").val();
        //must remove the spaces between dates
        tmp = tmp.replace(/\s/g, '');
        var dateRangeString = tmp;
        if ($("#hiddenDateRange").val() == "null" || $("#hiddenDateRange").val() == "") {
            dateRangeString = "-1";
        }

        $("#listLeads").hide();
        var listAction = #{jsAction @Projects.searchLeads( ":status", ":dateRangeString", ":customerId")/}
                $("#listLeads").load(listAction({
                    status: $("#status").val(),
                    dateRangeString: dateRangeString,
                    customerId: $("#customerId").val()
                }), function () {
                    $("#listLeads").show();
                })

    }
</script>