@extends('dashboard.layouts.master')
@section('title', __('backend.event_report'))
@section('content')
    @include('sweetalert::alert')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
    <div class="loader" id="loader"></div>
    <div class="padding website-label">
        <div class="success_message" style="margin-bottom: 10px;"></div>
        <div id="success_file_popup" style="margin-bottom: 10px;"></div>
        @if (isset($event_report_module_permission) && $event_report_module_permission->read == 1)
            <div class="box">
                <div class="box-header m-b-1">
                    <div class="box-header-left">
                        <h3 class="d-block">{{ __('backend.event_report') }}</h3>
                        <small class="d-inline-block">
                            <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                            {{ __('backend.report') }} /
                            {{ __('backend.event_report') }}

                        </small>
                    </div>
                    <div class="box-header-right">
                        <div class="box-tool">
                            <ul class="nav">
                                <li class="nav-item inline">
                                    {{ Form::open(['route' => 'export_eventdatareport', 'method' => 'post', 'style="background :none !important;"', 'id' => 'export']) }}

                                    <input type="hidden" name="startdate" value="{{ isset($startdate) ? $startdate : '' }}"
                                        id="export_start_date">
                                    <input type="hidden" name="enddate" value="{{ isset($enddate) ? $enddate : '' }}"
                                        id="export_end_date">
                                    <a class="solid-button export-form"
                                        href="javascript:void(0)">{{ __('backend.export_csv') }}</a>
                                    {{ Form::close() }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-9">
                            <div class="row">
                                <div class="col-xl-4 col-lg-4 col-md-6">
                                    <div class="form-group">
                                        <label for="startdate">{{ __('backend.start_date') }}</label>
                                        <input type="text" class="form-control" name="startdate" id="startdate"
                                            placeholder="DD-MM-YYYY" readonly>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-6">
                                    <div class="form-group">
                                        <label for="enddate">{{ __('backend.end_date') }}</label>
                                        <input type="text" class="form-control" name="enddate" id="enddate"
                                            placeholder="DD-MM-YYYY" readonly>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-2 col-md-6 clear_button" style="margin-top: 35px;">
                                    <div class="form-group">
                                        <a onclick="location.reload();" class="clear-btn-link">
                                            <button type="button" class="btn btn-danger mr-2 mb-5">Clear</button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive table_data">
                        <div class="table-scrollable">
                            <table class="table table-bordered m-a-0 manage-space" id="label">
                                <thead class="dker">
                                    <tr>
                                        <th class="width20 no-sort">
                                            <label class="ui-check m-a-0" for="checkAll" style="position: relative;">
                                                <input id="checkAll" type="checkbox" aria-label="Select all items"
                                                    style="position: absolute; opacity: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer;">
                                                <i aria-hidden="true"></i>
                                            </label>

                                        </th>
                                        <th>{{ __('backend.transaction_id') }}</th>
                                        <th>{{ __('backend.event_name') }}</th>
                                        <th>{{ __('backend.business_name') }}</th>
                                        <th>{{ __('backend.plan_name') }}</th>
                                        <th>{{ __('backend.amount') }}</th>
                                        <th>{{ __('backend.payment_status') }}</th>
                                        <th>{{ __('backend.sponsorship_status') }}</th>
                                        <th>{{ __('backend.start_date') }}</th>
                                        <th>{{ __('backend.end_date') }}</th>
                                        <th>{{ __('backend.purchase_date') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="bannerTable"> </tbody>
                            </table>
                        </div>
                    </div>
                    <footer class="dker p-a">
                        <div class="row">
                            <div class="col-sm-3 hidden-xs">
                                <!-- .modal -->
                                <div id="m-all" class="modal fade" data-backdrop="true">
                                    <div class="modal-dialog" id="animate">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">{{ __('backend.confirmation') }}</h5>
                                            </div>
                                            <div class="modal-body text-center p-lg">
                                                <p>
                                                    {{ __('backend.confirmationDeleteMsg') }}
                                                </p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn dark-white p-x-md"
                                                    data-dismiss="modal">{{ __('backend.no') }}</button>
                                                <button type="submit"
                                                    class="btn danger p-x-md">{{ __('backend.yes') }}</button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 text-right text-center-xs">

                            </div>
                        </div>
                    </footer>
                    {{ Form::close() }}
                </div>
            </div>
        @endif

    @endsection
    @push('after-scripts')
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
        <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
        <script>
            var show = true;
            var check = true;
            var sort = [0];
        </script>
        <script type="text/javascript">
            function isNumberKey(evt) {
                //var e = evt || window.event;
                var keyCode = (evt.which) ? evt.which : evt.keyCode;
                if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 123) && keyCode != 32)

                    return false;
                return true;

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

                function load_data(startdate, enddate, status) {

                    var action_url = "{!! route('admin.event.report.data') !!} ";

                    var dataTable = $('#label').DataTable({
                        processing: true,
                        serverSide: true,
                        responsive: true,
                        ordering: true,
                        columnDefs: [{
                            'bSortable': false,
                            'aTargets': [0, 6, 7]
                        }],
                        ajax: {
                            url: action_url,
                            type: 'POST',
                            data: function(d) {
                                return $.extend({}, d, {
                                    "startdate": $("#startdate").val().toLowerCase(),
                                    "enddate": $("#enddate").val().toLowerCase(),
                                });
                            }
                        },
                        columns: [{
                            data: 'checkbox',
                            orderable: false,
                            searchable: false,
                            visible:false,
                        }, {
                            data: 'transaction_id',
                            name: 'transaction_id',
                        }, {
                            data: 'event_name',
                            name: 'event_name',
                        }, {
                            data: 'business_name',
                            name: 'business_name',
                            visible:false,
                        }, {
                            data: 'plan_name',
                            name: 'plan_name',
                        }, {
                            data: 'amount',
                            name: 'amount',
                        }, {
                            data: 'payment_status',
                            name: 'payment_status',
                        }, {
                            data: 'sponsorship_status',
                            name: 'sponsorship_status',
                        }, {
                            data: 'start_date',
                            name: 'start_date',
                        }, {
                            data: 'end_date',
                            name: 'end_date',
                        }, {
                            data: 'purchase_date',
                            orderable: false,
                            searchable: false
                        }],
                        order: ['4', 'DESC']
                    });

                    $('#startdate, #enddate').change(function() {

                        $("#export_start_date").val($("#startdate").val().toLowerCase());
                        $("#export_end_date").val($("#enddate").val().toLowerCase());

                        dataTable.draw();
                    });

                    $(".export-form").click(function() {
                        $('#export').submit();
                    });
                }

            });

            $(document).ready(function() {
                if ($('.no-sort').hasClass('sorting_disabled')) {
                    $('.no-sort').removeClass('sorting_asc')
                }
            });

            $("#submit_show_msg").click(function() {
                var numberOfChecked = $('input:checkbox:checked').length;
                if (numberOfChecked == '') {
                    alert("Please select row.");
                    return false;
                }
            });

            $("#startdate").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "1000:2100", // Adjust year range to start from 1000
                startDate: new Date(1000, 0, 1), // Set the minimum date to January 1, 1000
                // endDate: '+0d', // Disable selecting future dates
                format: 'dd-mm-yyyy', // Use 'dd-mm-yyyy' format
                todayHighlight: true,
                orientation: "bottom",
                autoclose: true
            }).on('changeDate', function(selected) {
                var minDate = new Date(selected.date);
                // Set the minimum start date for the end date picker
                $('#enddate').datepicker('setStartDate', minDate);
            });
            $("#enddate").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "1000:2100", // Adjust year range to start from 1000
                startDate: new Date(1000, 0, 1), // Set the minimum date to January 1, 1000
                // endDate: '+0d', // Disable selecting future dates
                format: 'dd-mm-yyyy', // Use 'dd-mm-yyyy' format
                todayHighlight: true,
                orientation: "bottom",
                autoclose: true
            }).on('changeDate', function(selected) {
                var minDate = new Date(selected.date);
                if (minDate instanceof Date && !isNaN(minDate)) {
                    $('#startdate').datepicker('setEndDate', minDate);
                }
            });

            $("#checkAll").click(function() {
                $('input:checkbox').not(this).prop('checked', this.checked);
            });

            $("#filter_btn").click(function() {
                $("#filter_div").slideToggle();
            });

            $("#find_q").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#doctorTypeTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        </script>
    @endpush