@extends('layouts.admin.admin-app')
@section('title','Payment Reports')
@section('content')
<div class="main-content">
    <div class="content_wrapper">
        <div class="content ">
            <div class="content_header">
                <!-- search -->
                <div class="search_section justify-content-between">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="page_title">
                            <h2>Payment Reports</h2>
                        </div>
                        <ul class="filter_right list-inline text-right mb-0">
                            <li class="list-inline-item">
                                <a href="javascript:void(0);" class="btn ripple-effect" onclick="getFilterOpen()" data-toggle="tooltip" data-placement="top" title="Filter"><i class="icon-filter-filled-tool-symbol" ></i> </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="javascript:void(0);" onclick="exportReportList('pdf')" class="btn ripple-effect"  data-toggle="tooltip" data-placement="top" title="PDF"><i class="flaticon-pdf" ></i> </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="javascript:void(0);" onclick="exportReportList('excel')" class="btn ripple-effect"  data-toggle="tooltip" data-placement="top" title="Excel"><i class="flaticon-excel" ></i> </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- filter  -->
                <div class="filter_form bg-white " id="filterform">
                    <div class="d-flex top_filter">
                        <div class="filter_heading">
                            <h2>Filters</h2>
                        </div>    
                        <div class="ml-auto">
                            <div class="close_btn" onclick="getFilterClose()">
                                <div class="x common rotate30 rotate45"></div>  
                                <div class="z common rotate150 rotate135"></div>
                            </div>
                        </div>
                    </div>
                    <form action="javascript:void(0);" id="frmFilter">
                        <div class="form_body ">
                            <div class="form-group">
                                <label for="">Service Number</label>
                                <input type="text" name="booking_number" class="form-control" placeholder="Service Number">
                            </div>
                            <div class="form-group">
                                <label>Employee Name</label>
                                <input type="text" name="employee_name" class="form-control" placeholder="Employee Name">
                            </div>
                            <div class="form-group">
                                <label>Customer Name</label>
                                <input type="text" name="customer_name" class="form-control" placeholder="Customer Name">
                            </div>
                            <div class="form-group">
                                <label>Select</label>
                                <select name="duration" class="selectpicker select-custom form-control" id="selectDuration" title="Select" data-size="5">
                                    <option value="">Select</option>
                                    <option value="today">Today</option> 
                                    <option value="yesterday">Yesterday</option> 
                                    <option value="previous_week">Previous Week</option> 
                                    <option value="current_week">Current Week</option> 
                                    <option value="previous_month">Previous Month</option> 
                                    <option value="current_month">Current Month</option> 
                                    <option value="current_year">Current Year</option> 
                                    <option value="duration">Select Duration</option> 
                                </select>
                            </div>
                            
                            <div class="comman_form duration-box" style="display: none;">
                                <h4 class="form_heading">By Date</h4>
                                <div class="form-group">
                                    <label class="control-label">From</label>
                                    <div class="dateIcon">
                                        <input type="text" id="FromDate" name="from_date"class="form-control datetimepicker-input" data-target="#FromDate" data-toggle="datetimepicker" placeholder="From Date">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">To</label>
                                    <div class="dateIcon">
                                        <input type="text" id="ToDate" name="to_date" class="form-control datetimepicker-input" data-target="#ToDate" data-toggle="datetimepicker"  placeholder="To Date">
                                    </div>
                                </div>
                            </div>
                            
                            
                            
                        </div>
                        <div class="form-group d-flex submit_btn btn_botttom">
                            <button type="button" onclick="resetFilter()" class="btn btn-light  ripple-effect">Reset</button>
                            <div class="ml-auto">
                                <button type="submit" class="btn btn-warning  ripple-effect" onclick="getReportList()">Apply</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="view_body">
                <div class="ajax_list_load">
                    <div id="report_list"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        getReportList();
    });

    //Ajax load content
    function getReportList(url) {
        $("#report_list").html('{{ajaxLoader()}}');
        var pageUrl = url || "{{ url('/admin/load-report-list') }}";
        var url = pageUrl;
        $.ajax({type: "GET", url: url, data: $('#frmFilter').serialize(),
            success: function (response) {
                $("#report_list").html("");
                $("#report_list").html(response);
            }
        });
    }

    function getFilterApply() {
        $(".btn_loader").css('display', 'inline-block');
        setTimeout(function () {
            $(".btn_loader").hide();
        }, 1000);
    }

    function resetFilter() {
        $('#frmFilter')[0].reset();
        $('.selectpicker').selectpicker('refresh');
        getFilterClose();
        getReportList();
    }
    
    // function to show hide duration-box on selectDuration select
    $("#selectDuration").change(function() {
        var val = $(this).val();
        if(val === "duration") {
            $(".duration-box").show();
        }
        else{                
           $(".duration-box").hide();
        }
    });
    
    $(function () {
        if ($('#FromDate').length > 0) {
            $('#FromDate').datetimepicker({
                format: '{{getDatePickerForamt()}}',
                useCurrent: false,
                maxDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000),
                minDate: '1990-01-01'
            });
            $('#ToDate').datetimepicker({
                format: '{{getDatePickerForamt()}}',
                useCurrent: false,
                maxDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000),
                minDate: '1990-01-01'
            });
            $("#FromDate").on("change.datetimepicker", function (e) {
                $('#ToDate').datetimepicker('minDate', e.date);
            });
            $("#ToDate").on("change.datetimepicker", function (e) {
                $('#FromDate').datetimepicker('maxDate', e.date);
            });
        }
    });
    
    function exportReportList(type){
       if(type == 'pdf'){
          var url =  "{{ url('admin/export-report-pdf')}}";
       }else{
          var url = "{{ url('admin/export-report-excel')}}";
       }
       var token = '{{ csrf_token() }}';
       $.ajax({
           type: "GET",
           url: url,
           data: $('#frmFilter').serialize(),
           success: function (response){
               if(response.status === false){
                   errorToaster(response.message, 'Report');
               }else{
                     saveUserActivity(type);
                }
           },
           error: function () {
           },
           complete: function () {
           }
       });
    }
    
    function saveUserActivity(type) {
        var url = "{{url('/admin/save-user-activity')}}";
        var token = '{{csrf_token()}}';
        if (type == 'pdf') {
            var message = 'Downloaded the PDF report for payment reports';
        } else {
            var message = 'Downloaded the Excel report for payment reports';
        }
        $.ajax({type: "POST", url: url, data: {type: type, _token: token, message: message},
            success: function (response) {
                if (response.status === false) {
                    errorToaster(response.message, 'Report');
                } else {
                    if (type == 'pdf') {
                        window.open("{{url('/admin/export-report-pdf')}}", '_blank');
                    } else {
                        window.open("{{url('/admin/export-report-excel')}}", '_blank');
                    }
                }
            }
        });
    }
</script>
@endsection