@extends('admin.layout')
@section('main')
<div class="content-header row">
</div>
<div class="content-wrapper">
    <div class="content-header row">
    </div>
    <div class="content-body">
        <!-- Dashboard Ecommerce Starts -->
        <section id="dashboard-ecommerce">
            <div class="row match-height justify-content-end mb-1">
                <div class="col-lg-12 mr-auto">
                    <h2>PAN Report<a href="" class="ml-1"><i data-feather="help-circle"></i></a></h2>
                </div>


            </div>


        </section>
        <section id="column-search-datatable">
            <div class="row justify-content-end">
                <div class="col-lg-auto  col-md-6 my-1 text-right">
                    <div class="form-group">
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">

                        <div class="card-datatable p-1">


                            <form method="POST" id="report_pan_generate">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-3 col-md-6 my-1">
                                        <div class="form-group">

                                            <div id="reportrange" class="daterange">
                                                <i class="fa fa-calendar"></i>&nbsp;
                                                <span></span> <i class="fa fa-caret-down"></i>
                                                <input type="hidden" name="dtFrom" id="dtFrom">
                                                <input type="hidden" name="dtTo" id="dtTo">
                                            </div>
 <label id="dtFrom-error" class="error" for="dtFrom"></label>

                                            <!-- <select class="select2 select-label form-control w-100" id="YearFilter"
                                                    name="YearFilter">
                                                    <option value=""> Select Year</option>
                                                    <option value="2022"> 2022</option>
 <option value="2023"> 2023</option>
                                                </select> -->
                                        </div>
                                    </div>

                                    <div class="col-lg-auto col-md-6 my-1">
                                        <div class="d-lg-flex">
                                            <button type="submit" id="applyfilter" class="btn btn-primary">Submit</button>
                                        </div>
                                    </div>
                                </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">

                        <div class="card-datatable p-1 table-responsive">

                            <table class="dt-column-search table table-striped w-100 text-center display" id="dataTable">
                                <thead>
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>Dates</th>
                                        <th>zip</th>
                                        <th>Status</th>
                                        <th>Import Date & Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
</div>
@endsection
@section('scripts')
<script>
    $(function() {

        var start = moment().startOf('month');
        var end = moment();

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format(
                'MMMM D, YYYY'));
            $("#dtFrom").val(start.format('YYYY-MM-DD'));
            $("#dtTo").val(end.format('YYYY-MM-DD'));
        }

        $('#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);

    });


    $('#report_pan_generate').validate({
        ignore: ".ignore",
        rules: {
            dtFrom: {
                required: true,
            },


        },
        messages: {},
        errorPlacement: function(error, element) {
            var placement = $(element).data('error');
            if (placement) {
                $(placement).append(error)
            } else {
                error.insertAfter(element);
            }
        },

        submitHandler: function(form) {

            $("#submit").attr('disabled', true);

            var formData = new FormData($("#report_pan_generate")[0]);

            Swal.fire({
                title: 'Are you sure?',
                text: "You Want to Generate PAN report ?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ url('division/pan-report-generate') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            var flag = 0;

                            if (response == 1) {
                                $.notify("Report Updated", "success");
                                location.reload();

                            } else {
                                $.notify("Data not found !", "error");

                            }
                        }
                    });
                }
            })

        }
    });





    $(function() {
        var columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                "orderable": false,
                searchable: false
            },
            {
                data: 'Filter',
                name: 'Filter',
            },
            {
                data: 'zip_download',
                name: 'zip_download',
            },
            {
                data: 'cron_status',
                name: 'cron_status',
            },

            {
                data: 'created_at',
            },
        ];
        var columnDefs = [];
        getdatatable("{{ route('division.report.paginate') }}", columns, columnDefs);
    });

    function getdatatable(url, columns, columnDefs) {
        $('#dataTable').DataTable({
            processing: true,
            serverSide: true,
            bDestroy: true,
            order: [],
            "scrollX": true,
            columns: columns,
            columnDefs: columnDefs,
            ajax: {
                method: 'post',
                url: url,
                data: function(d) {
                    d._token = "{{ csrf_token() }}"
                }
            },
            "drawCallback": function(settings) {
                new VenoBox({
                    selector: '.venobox_img',
                });
                feather.replace();

                $('.dt-checkboxes').click(function() {
                    if ($('[name="checkbox[]"]:checked').length > 0) {
                        $('.actionBtn').show();
                    } else {
                        $('.actionBtn').hide();
                    }
                });

                $('.unlock_center_code').hide();
                $('.unlock_center').hide();
                $('.center_code_div').on('click', function() {
                    $(this).children('.unlock_center').toggle();
                    $(this).children('.lock_center').toggle();
                    $(this).children('.unlock_center_code').toggle();
                })
            }
        });
    }
</script>
@endsection