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


<div class="modal fade" id="day_filter_modal_load" 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="pickyDate4"></div>
                <br>
                <div>
                    Selected Date: <input type="text" placeholder="No date selected" id="showDate_load" />

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

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

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

<div class="modal fade" id="week_filter_modal_load" 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="pickyDate5"></div>
                <br>
                <div>
                    Selected Date: <input type="text" placeholder="No date selected" id="showWeek_load" />

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

            </div>
            <div class="modal-footer" style="display: none;" id="show_footer5">
                <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_load"></div>
                                <div style="display:none;" id="sel_week_load"></div>
                                <div style="display:none;" id="sel_month_load"></div>
                                <div style="display:none;" id="sel_custom_load"></div>
                                <div style="display:none;" id="sel_hr_load"></div>

                                <!-- Modal -->


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

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

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

                                
                                <div class="col-md-2" id="show_month">
                                    <select class="inputtt" id="sell3_load"
                                        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_load" style="display: none;"></div>
                                </div>

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

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

                                    </div>
                                </div>

                                <!-- <div class="col-md-1" id="show_hr_load">
                                                <select class="inputtt" id="sell4_load"
                                                    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_load" style="display: none;"></div>
                                            </div> -->

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

                                </div>

                                <div class="col-md-2" id="show_hre">
                                    <button id="btn_search" type="button" 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;">Fuel Consumption</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>Start Time</th>
                                        <th>End Time</th>
                                        <th>Duration</th>
                                        <th>Total Consumed</th>
                                        <th>Total Duration In Idle</th>
                                        <th>Total Consumed In Idle</th>
                                        <th>Total Duration In Nominal</th>
                                        <th>Total Consumed In Nominal</th>
                                        <th>Total Duration In Overload</th>
                                        <th>Total Consumed In Overload</th>
                                        <th>Total Duration In Cheat</th>
                                        <th>Total Consumed In Cheat</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/fuel_summary.js') }}"></script>

<script>
    $(document).ready(function() {
        click_active();
        document.getElementById("btn_pdf").style.cssText = "display:none";
        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_load').empty();
        $('#sel_week_load').empty();
        $('#sel_month_load').empty();
        $('#sel_custom_load').empty();
        //$('#sel_hr_sum').empty();

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

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

    }

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

        $('#sel_day_load').empty();
        $('#sel_week_load').empty();
        $('#sel_month_load').empty();
        $('#sel_custom__load').empty();
        //$('#sel_hr_sum').empty();

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

        $('#dateInput_load').empty();
        $('#dateInput_load').append('Day');
        $('#dateInput2_load').empty();
        $('#dateInput2_load').append('Week');
        $('#cust_date_load').empty();
        $('#cust_date_load').append('Custom');

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

    });

    document.querySelector('#cust_date_load').addEventListener('click', function(e) {
        $('#dateInput_load').empty();
        $('#dateInput_load').append('Day');
        $('#dateInput2_load').empty();
        $('#dateInput2_load').append('Week');
        $("#sell3_load option:contains(Month)").attr('selected', 'selected');
    });

    document.querySelector('#sell4_load').addEventListener('change', function(e) {

        var e = document.getElementById("sell4_load");
        var value = e.value;
        $('#dateinput6_load').empty();
        $('#dateinput6_load').append(value);

    });


    function genDetails() {

        document.getElementById("load").style.cssText = "display:block";
        document.getElementById("btn_pdf").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 = true;

        var sel_day_text_load = $('#sel_day_load').text();
        var sel_week_text_load = $('#sel_week_load').text();
        var sel_month_text_load = $('#sel_month_load').text();
        var sel_custom_text_load = $('#sel_custom_load').text();
        //var sel_hr_text_sum = $('#sel_hr_sum').text();

        var ok = 0;

        if (sel_day_text_load == "" && sel_week_text_load == "" && sel_month_text_load == "" && sel_custom_text_load ==
            "") {
            alert('Selected a date.');
            var ok = 0;
        } else {
            if (sel_day_text_load !== "") {

                var GivenDate = $('#dateInput_load').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_load').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_load !== "") {

                var searchDateFrom = $('#dateInput2_load').text()

                let dtFrom = $('#dateInput2_load').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);

                if (GivenDate > CurrentDate) {
                    alert('Select a date before a week');
                    var ok = 0;
                } else {
                    var searchDateTo = finaldate;
                    var ok = 1;
                    // var hr_value = $('#dateinput6_load').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_custom_text_load !== "") {

                var dateinput3_load = $('.start-day').text();
                var dateinput4_load = $('.end-day').text();

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

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

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

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

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

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

                var GivenDate = dateinput3_load;
                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_load;
                    GivenDate1 = new Date(GivenDate1);
                    if (GivenDate1 > CurrentDate) {
                        alert('End date is greater than the current date.');
                        var ok = 0;
                    } else {
                        var GivenDate2 = dateinput3_load;
                        var GivenDate3 = dateinput4_load;
                        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_load;
                            var searchDateTo = dateinput4_load;
                            var ok = 1;
                            // var hr_value = $('#dateinput6_load').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_load !== "") {

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

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

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

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

                    var l_date = daysInMonth(dateinput5_load, c_yr);

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

                    var searchDateFrom = '';
                    var searchDateTo = '';
                    var ok = 1;
                    // var hr_value = $('#dateinput6_load').text();
                    var custom_value = 'month';
                    var month_value = dateinput5_load;

                    var our_date1 = c_yr + '-' + dateinput5_load + '-' + f_date;
                    var our_date2 = c_yr + '-' + dateinput5_load + '-' + 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: '/getFuelConsumption',
                type: 'POST',
                dataType: 'json',
                data: {
                    "_token": "{{ csrf_token() }}",
                    "status": custom_value,
                    "intervel": 0,
                    "month": month_value,
                    "datefrom": searchDateFrom,
                    "dateto": searchDateTo,

                },

                success: function(data) {
                    //console.log(data.data);
                    //alert(data.data);
                    if (data == 0) {
                        //alert(1);
                        document.getElementById("load").style.cssText = "display:none";
                        document.getElementById("btn_pdf").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]['startTime']);
                        //console.log();

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

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

                        document.getElementById("btn_pdf").style.cssText = "line-height:1.8em;";
                        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: "startTime"
                                },
                                {
                                    data: "endTime"
                                },
                                {
                                    data: "duration"
                                },
                                {
                                    data: "totalConsumed"
                                },

                                {
                                    data: "totalDurationInIdleValues"
                                },
                                {
                                    data: "totalConsumedIdleValues"
                                },
                                {
                                    data: "totalDurationInNominalValues"
                                },
                                {
                                    data: "totalConsumedNominalValues"
                                },
                                {
                                    data: "totalDurationInOverLoadValues"
                                },
                                {
                                    data: "totalConsumedOverLoadValues"
                                },
                                {
                                    data: "totalDurationInCheatValues"
                                },
                                {
                                    data: "totalConsumedCheatValues"
                                },

                            ],


                        });




                    } else {
                        //alert(3);
                        document.getElementById("load").style.cssText = "display:none";
                        document.getElementById("btn_pdf").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_pdf").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_pdf").onclick = function() {

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

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

    };
    document.getElementById("btn_excel").onclick = function() {

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

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

    };
</script>
@endsection