@extends('common.master')
@section('content')
<script>
    var pg_id = 3;
    var pgnm = 7;
</script>


<div class="modal fade" id="day_filter_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <div class="modal-body">
                <div id="pickyDate"></div>
                <br>
                <div>
                    Selected Date: <input type="text" placeholder="No date selected" id="showDate" />

                </div>
                <!-- Testing here -->

            </div>
            <div class="modal-footer" style="display: none;" id="show_footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Confirm</button>

            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="week_filter_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <div class="modal-body">
                <div id="pickyDate1"></div>
                <br>
                <div>
                    Selected Date: <input type="text" placeholder="No date selected" id="showWeek" />

                </div>
                <!-- Testing here -->

            </div>
            <div class="modal-footer" style="display: none;" id="show_footer1">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Confirm</button>

            </div>
        </div>
    </div>
</div>
<!-- Container-fluid starts-->
<div class="container-fluid">
    <div class="row widget-grid">
        <div class="product-wrapper-grid">
            <div class="row">

                <div class="col-xl-12" id="show_form">
                    <div class="card" style="height: 85px;">
                        <div class="card-header card-no-border" style="padding:10px; background-color:#7EC0EE; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
                            <div class="col-md-12 row">

                                <div style="display:none;" id="sel_day"></div>
                                <div style="display:none;" id="sel_week"></div>
                                <div style="display:none;" id="sel_month"></div>
                                <div style="display:none;" id="sel_custom"></div>
                                <!-- <div style="display:none;" id="sel_hr">wew</div> -->

                                <!-- Modal -->


                                <input type="hidden" id="dateinput_from" />
                                <input type="hidden" id="dateinput_to" />

                                <div class="col-md-2">
                                    <div class="inputtt" id="dateInput" data-toggle="modal" data-target="#day_filter_modal" style="font-size:0.7rem; color:black;">
                                        Day
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="inputtt" id="dateInput2" data-toggle="modal" data-target="#week_filter_modal" style="font-size:0.7rem; color:black;">
                                        Week
                                    </div>
                                </div>

                                
                                <div class="col-md-2" id="show_month">
                                    <select class="inputtt" id="sell3" style="color:black; font-size:0.7rem; background-color:#7EC0EE;">
                                        <option value="00">Month</option>
                                        <option value='01'>January</option><option value='02'>February</option><option value='03'>March</option><option value='04'>April</option>
                                    </select>
                                    <div id="dateinput5" style="display: none;"></div>
                                </div>

                                <div class="col-md-2" onclick="customClick();" id="show_cust_d">

                                    <div class="inputtt" id="cust_date" style="font-size:0.7rem; color:black;">
                                        Custom

                                    </div>
                                </div>

                                <div class="col-md-1" id="show_hr">
                                    <select class="inputtt" id="sell4" style="color:black; font-size:0.7rem; background-color:#7EC0EE;">
                                        <option value="">Intervel</option>
                                        <option value="1MIN">1 Min</option>
                                        <option value="5MIN">5 Min</option>
                                        <option value="15MIN">15 Min</option>
                                        <option value="1H">1h</option>
                                    </select>
                                    <div id="dateinput6" style="display: none;"></div>
                                </div>

                                <div class="col-md-1">

                                </div>

                                <div class="col-md-2" id="show_hre">
                                    <button type="button" id="btn_search" style="color: black;" class="btn btn-primary" style="line-height:1.8em;" onclick="genDetails()">Search</button>
                                </div>


                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="col-md-12 row" style="margin-top: 30px;"></div>
                                    </div>
                                </div>


                                <div class="col-md-12">
                                    <!-- <button type="button" class="btn btn-outline-danger" style="line-height:1.8em;" id="btn_pdf" style="display: none">Export To Pdf</button> -->

                                    <button type="button" class="btn btn-outline-success" style="line-height:1.8em;" id="btn_excel" style="display: none">Export To Excel</button>
                                </div>


                            </div>
                            </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>


            <div class="col-sm-12" id="show_id" style="display: none">
                <div class="card" style="margin-top: 50px;">
                    <div class="card-header pb-0 card-no-border" style="padding:15px; text-align: center; height: 55px; background-color: #16C7F9;">
                        <h3 style="font-size:20px; color:#fff;">Engine Details</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="display" id="tbl_display" style="min-width: 845px">
                                <thead>
                                    <tr>
                                        <th>SI NO.</th>
                                        <th>Time</th>
                                        <th>VoltageL1-N</th>
                                        <th>VoltageL2-N</th>
                                        <th>VoltageL3-N</th>
                                        <th>VoltageL1-L2</th>
                                        <th>VoltageL2-L3</th>
                                        <th>VoltageL3-L1</th>
                                        <th>Current L1</th>
                                        <th>Current L2</th>
                                        <th>Current L3</th>
                                        <th>Load KW L1</th>
                                        <th>Load KW L2</th>
                                        <th>Load KW L3</th>
                                        <th>Total KW</th>
                                        <th>Total Load KW</th>
                                        <th>Total Apparent Power</th>
                                        <th>Total Load KVA</th>

                                    </tr>
                                </thead>
                                <tbody>


                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12" id="resultn" style="display: none">
                <div class="card">
                    <div class="card-body">
                        <p> No data Found </p>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-xl-12">
                    <div class="col-md-12 row" style="margin-top: 300px;"></div>
                </div>
            </div>

            <div id="load" class="loadder1" style="display: none">
                <p>Loading...</p>
            </div>

        </div>

    </div>
</div>

@endsection

@section('scripts')

<script src='https://cdn.jsdelivr.net/momentjs/latest/moment.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js'></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet" />

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.de.min.js"></script>

<script src="{{ asset('script/detailed_1.js') }}"></script>

<script>
    $(document).ready(function() {
        click_active();
        document.getElementById("btn_excel").style.cssText = "display:none";
        document.getElementById("load").style.cssText = "display:none";
        document.getElementById("resultn").style.cssText = "display:none";
        document.getElementById("show_id").style.cssText = "display:none";
    });

    function customClick() {
        $('#sel_day').empty();
        $('#sel_week').empty();
        $('#sel_month').empty();
        $('#sel_custom').empty();
        // $('#sel_hr').empty();

        $('#sel_custom').append(1);

        // $('#cust_date').empty();
        // $('#cust_date').append($('.start-day').text());

    }

    document.querySelector('#sell3').addEventListener('change', function(e) {
        //var ss = `${this.options[ this.options.selectedIndex ].text}`;
        var e = document.getElementById("sell3");
        var value = e.value;

        $('#sel_day').empty();
        $('#sel_week').empty();
        $('#sel_month').empty();
        $('#sel_custom').empty();
        // $('#sel_hr').empty();

        $('#sel_month').append(1);

        $('#dateInput').empty();
        $('#dateInput').append('Day');
        $('#dateInput2').empty();
        $('#dateInput2').append('Week');
        $('#cust_date').empty();
        $('#cust_date').append('Custom');

        $('#dateinput5').empty();
        $('#dateinput5').append(value);

    });

    document.querySelector('#cust_date').addEventListener('click', function(e) {
        $('#dateInput').empty();
        $('#dateInput').append('Day');
        $('#dateInput2').empty();
        $('#dateInput2').append('Week');
        $("#sell3 option:contains(Month)").attr('selected', 'selected');
    });

    document.querySelector('#sell4').addEventListener('change', function(e) {
        //var ss = `${this.options[ this.options.selectedIndex ].text}`;
        var e = document.getElementById("sell4");
        var value = e.value;

        // $('#sel_day').empty();
        // $('#sel_week').empty();
        // $('#sel_month').empty();
        // $('#sel_custom').empty();
        // $('#sel_hr').empty();

        // $('#sel_hr').append(1);

        // $('#dateInput').empty();
        // $('#dateInput').append('Day');
        // $('#dateInput2').empty();
        // $('#dateInput2').append('Week');
        // $('#cust_date').empty();
        // $('#cust_date').append('Custom');
        // $("#sell3 option:contains(Month)").attr('selected', 'selected');

        $('#dateinput6').empty();
        $('#dateinput6').append(value);

    });

    function genDetails() {

        document.getElementById("load").style.cssText = "display:block";
        document.getElementById("btn_excel").style.cssText = "display:none";
        document.getElementById("resultn").style.cssText = "display:none";
        document.getElementById("show_id").style.cssText = "display:none";
        document.getElementById("btn_search").disabled = true;


        var sel_day_text = $('#sel_day').text();
        var sel_week_text = $('#sel_week').text();
        var sel_month_text = $('#sel_month').text();
        var sel_custom_text = $('#sel_custom').text();
        // var sel_hr_text = $('#sel_hr').text();

        //alert(sel_day_text);

        var ok = 0;

        if (sel_day_text == "" && sel_week_text == "" && sel_month_text == "" && sel_custom_text == "") {
            alert('Selected a date.');
            var ok = 0;
        } else {
            if (sel_day_text !== "") {

                var GivenDate = $('#dateInput').text()

                var CurrentDate = new Date();
                // GivenDate = new Date(GivenDate);

                if (GivenDate > CurrentDate) {
                    alert('Selected date is greater than the current date.');
                    var ok = 0;
                } else {

                    var searchDateFrom = GivenDate;
                    var searchDateTo = GivenDate;
                    var ok = 1;

                    var hr_value = $('#dateinput6').text();
                    var custom_value = 'custom';
                    var month_value = '';
                    //alert(searchDateFrom);

                    $('#dateinput_from').empty();
                    $('#dateinput_to').empty();

                    $('#dateinput_from').val(searchDateFrom);
                    $('#dateinput_to').val(searchDateFrom);



                }
            } else if (sel_week_text !== "") {

                var searchDateFrom = $('#dateInput2').text();
                let dtFrom = $('#dateInput2').text();

                let dtTo = new Date(dtFrom);
                dtTo.setDate(dtTo.getDate() + 6);
                let sMonthTo = ((dtTo.getMonth() + 1) < 10 ? '0' + (dtTo.getMonth() + 1) : (dtTo.getMonth() + 1));
                let sDayTo = (dtTo.getDate() < 10 ? '0' + dtTo.getDate() : dtTo.getDate());
                let sYearTo = new Date().getFullYear();
                var finaldate = sYearTo + '-' + sMonthTo + '-' + sDayTo;

                var GivenDate = finaldate;
                var CurrentDate = new Date();
                // GivenDate = new Date(GivenDate);
                //alert(searchDateFrom);

                if (GivenDate > CurrentDate) {
                    alert('Select a date before a week');
                    var ok = 0;
                } else {
                    var searchDateTo = finaldate;
                    var searchDateFrom = $('#dateInput2').text();
                    var ok = 1;
                    var hr_value = $('#dateinput6').text();
                    //alert(searchDateTo);
                    //alert(searchDateFrom);
                    var custom_value = 'custom';
                    var month_value = '';

                    $('#dateinput_from').empty();
                    $('#dateinput_to').empty();

                    $('#dateinput_from').val(searchDateFrom);
                    $('#dateinput_to').val(searchDateTo);

                }
            } else if (sel_custom_text !== "") {

                var dateinput3 = $('.start-day').text();
                var dateinput4 = $('.end-day').text();

                date = new Date(dateinput3);
                year = date.getFullYear();
                month = date.getMonth() + 1;
                dt = date.getDate();

                if (dt < 10) {
                    dt = '0' + dt;
                }
                if (month < 10) {
                    month = '0' + month;
                }

                dateinput3 = year + '-' + month + '-' + dt;

                date = new Date(dateinput4);
                year = date.getFullYear();
                month = date.getMonth() + 1;
                dt = date.getDate();

                if (dt < 10) {
                    dt = '0' + dt;
                }
                if (month < 10) {
                    month = '0' + month;
                }

                dateinput4 = year + '-' + month + '-' + dt;

                //alert(dateinput3);
                //alert(dateinput4);

                var GivenDate = dateinput3;
                var CurrentDate = new Date();
                GivenDate = new Date(GivenDate);
                if (GivenDate > CurrentDate) {
                    alert('Starting date is greater than the current date.');
                    var ok = 0;
                } else {
                    var GivenDate1 = dateinput4;
                    GivenDate1 = new Date(GivenDate1);
                    if (GivenDate1 > CurrentDate) {
                        alert('End date is greater than the current date.');
                        var ok = 0;
                    } else {
                        var GivenDate2 = dateinput3;
                        var GivenDate3 = dateinput4;
                        GivenDate2 = new Date(GivenDate2);
                        GivenDate3 = new Date(GivenDate3);
                        if (GivenDate2 > GivenDate3) {
                            alert('Starting date is greater than End date.');
                            var ok = 0;
                        } else {
                            var searchDateFrom = dateinput3;
                            var searchDateTo = dateinput4;
                            var ok = 1;
                            var hr_value = $('#dateinput6').text();
                            var custom_value = 'custom';
                            var month_value = '';

                            $('#dateinput_from').empty();
                            $('#dateinput_to').empty();

                            $('#dateinput_from').val(searchDateFrom);
                            $('#dateinput_to').val(searchDateTo);

                        }
                    }
                }

            } else if (sel_month_text !== "") {

                var dateinput5 = $('#dateinput5').text();

                if (dateinput5 == '00') {
                    alert('Select a date.');
                    var ok = 0;
                } else {
                    var c_yr = new Date().getFullYear();
                    var f_date = '01';

                    var firstdate = dateinput5 + '/' + f_date + '/' + c_yr;

                    function daysInMonth(month, year) {
                        return new Date(year, month, 0).getDate();
                    }

                    var l_date = daysInMonth(dateinput5, c_yr);

                    var lastdate = dateinput5 + '/' + l_date + '/' + c_yr;

                    var searchDateFrom = '';
                    var searchDateTo = '';
                    var ok = 1;
                    var hr_value = $('#dateinput6').text();
                    var custom_value = 'month';
                    var month_value = dateinput5;
                    //alert(month_value);

                    var our_date1 = c_yr + '-' + dateinput5 + '-' + f_date;
                    var our_date2 = c_yr + '-' + dateinput5 + '-' + l_date;

                    $('#dateinput_from').empty();
                    $('#dateinput_to').empty();

                    $('#dateinput_from').val(our_date1);
                    $('#dateinput_to').val(our_date2);
                }

                var searchDateFrom = our_date1;
                var searchDateTo = our_date2;



            }



        }

        if (ok == 1) {


            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            $.ajax({
                url: '/getengineDetailed_ele',
                type: 'POST',
                dataType: 'json',
                data: {
                    "_token": "{{ csrf_token() }}",
                    "status": custom_value,
                    "intervel": hr_value,
                    "month": month_value,
                    "datefrom": searchDateFrom,
                    "dateto": searchDateTo,

                },

                success: function(data) {
                    //console.log(data.data);
                    //alert(data.data.length);
                    if (data == 0) {
                        //alert(1);
                        document.getElementById("load").style.cssText = "display:none";
                        document.getElementById("btn_excel").style.cssText = "display:none";
                        document.getElementById("resultn").style.cssText = "display:block";
                        document.getElementById("show_id").style.cssText = "display:none";
                        document.getElementById("btn_search").disabled = false;
                    } else if (data.data.length > 0) {
                        //alert(data.data[0]['time']);
                        //console.log();

                        // document.getElementById("show_form").style.cssText = "display:block";

                        $('#btn_excel').show();

                        document.getElementById("btn_excel").style.cssText = "line-height:1.8em;";

                        document.getElementById("show_id").style.cssText = "display:block";
                        document.getElementById("load").style.cssText = "display:none";
                        document.getElementById("resultn").style.cssText = "display:none";
                        document.getElementById("btn_search").disabled = false;

                        table = $('#tbl_display').DataTable({
                            data: data.data,
                            destroy: true,
                            columns: [
                                // Define your table columns here
                                {
                                    data: "i"
                                },
                                {
                                    data: "time"
                                },
                                {
                                    data: "voltageL_1_N_Parameter"
                                },
                                {
                                    data: "voltageL_2_N_Parameter"
                                },
                                {
                                    data: "voltageL_3_N_Parameter"
                                },
                                {
                                    data: "voltageL_1_L_2_Parameter"
                                },
                                {
                                    data: "voltageL_2_L_3_Parameter"
                                },
                                {
                                    data: "voltageL_3_L_1_Parameter"
                                },
                                {
                                    data: "currentL_1_Parameter"
                                },
                                {
                                    data: "currentL_2_Parameter"
                                },
                                {
                                    data: "currentL_3_Parameter"
                                },
                                {
                                    data: "loadKwL_1_Parameter"
                                },
                                {
                                    data: "loadKwL_2_Parameter"
                                },
                                {
                                    data: "loadKwL_3_Parameter"
                                },
                                {
                                    data: "totalKwParameter"
                                },
                                {
                                    data: "totalLoadKwParameter"
                                },
                                {
                                    data: "totalApPowerParameter"
                                },
                                {
                                    data: "totalLoadKvaParameter"
                                },

                            ],

                        });




                    } else {
                        //alert(3);
                        document.getElementById("load").style.cssText = "display:none";
                        document.getElementById("btn_excel").style.cssText = "display:none";
                        document.getElementById("resultn").style.cssText = "display:block";
                        document.getElementById("show_id").style.cssText = "display:none";
                        document.getElementById("btn_search").disabled = false;

                    }

                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        } else {
            document.getElementById("load").style.cssText = "display:none";
            document.getElementById("btn_excel").style.cssText = "display:none";
            document.getElementById("resultn").style.cssText = "display:none";
            document.getElementById("show_id").style.cssText = "display:none";
            document.getElementById("btn_search").disabled = false;
        }


    }
</script>

<script type="text/javascript">
    document.getElementById("btn_excel").onclick = function() {

        var date_from = $('#dateinput_from').val();
        var date_to = $('#dateinput_to').val();

        var url = "{{ url('download_eng_det_Excel_ele/') }}" + '?datefrom=' + date_from + '&dateto=' + date_to;
        window.open(url, '_blank');
    };
</script>


@endsection