@extends('dashboard.layouts.master')
@section('title', __('backend.event'))
@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="padding website-label">
        <div class="success_message" style="margin-bottom: 10px;"></div>
        <div id="success_file_popup" style="margin-bottom: 10px;"></div>
        <div class="box">
            <div class="box-header">
                <div class="box-header-left">
                    <h3>{{ __('backend.event') }}</h3>
                    <small>
                        <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                        <span>{{ __('backend.event') }}</span>
                    </small>
                </div>
            </div>

            {{ Form::open(['route' => 'eventUpdateAll', 'method' => 'post', 'id' => 'updateAll']) }}
            <div class="loader"></div>
            <div class="row">
                <div class="col-xl-9">
                    <div class="row align-items-end">
                        <div class="col-xl-3 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-3 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-4 col-md-6" style="display: none;">
                            <div class="form-group">
                                <label>{{ __('backend.approval_status') }}</label>
                                <select name="user_status" id="user_status" class="form-control">
                                    <option value="">Select Approval Status</option>
                                    <option value="0">Pending</option>
                                    <option value="1">Approved</option>
                                    <option value="2">Rejected</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 clear_button">
                            <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 class="col-xl-3">
                    <div class="bulk-action">
                        <select name="action" id="action" class="form-control c-select w-sm inline v-middle" required>
                            <option value="no">{{ __('backend.bulkAction') }}</option>
                            {{-- <option value="approve">Approve Selected</option>
                            <option value="reject">Reject Selected</option> --}}
                            <option value="1">{{ __('backend.activeSelected') }}</option>
                            <option value="0">{{ __('backend.deactive') }}</option>
                            @if (isset($event_owner_management_module_permission) && $event_owner_management_module_permission->delete == 1)
                                <option value="2">{{ __('backend.deleteSelected') }}</option>
                            @endif
                        </select>
                        <button type="submit" id="submit_all" class="border-btn">{{ __('backend.apply') }}</button>
                    </div>
                </div>
            </div>
            <div class="table-responsive table_data">
                <table class="table table-bordered m-a-0" id="client">
                    <thead class="dker">
                        <tr>
                            <th class="width20 dker 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.event_name') }}</th>
                            <th>{{ __('backend.business_name') }}</th>
                            <th>{{ __('backend.category_name') }}</th>
                            <th>{{ __('backend.location') }}</th>
                            <th>{{ __('backend.event_date') }}</th>
                            <th>{{ __('backend.status') }}</th>
                            <th>{{ __('backend.approval_status') }}</th>
                            <th>{{ __('backend.options') }}</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

            </div>
            {{ Form::close() }}
        </div>
    </div>

    <!-- Reject Modal -->
    <!-- Reject Modal -->
    <div id="rejectModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('event.approve_reject') }}" method="POST" id="rejectForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Reject Event</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" name="event_ids_text" id="reject_event_ids" value="">
                        <input type="hidden" name="action" value="reject">

                        <div class="form-group">
                            <label for="reject_reason">Reason for Rejection</label>
                            <textarea class="form-control" name="reject_reason" id="reject_reason" rows="3" required></textarea>
                        </div>

                        <p>An email will be sent to the owner detailing the rejection.</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger">Confirm Reject</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('after-scripts')
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.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://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(document).on('click', '.status_active', function(e) {
            var event_id = $(this).attr('data-id');
            swal({
                    title: "Deactive",
                    text: "Are you sure you want to deactive this event?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#BF0A30",
                    confirmButtonText: "Deactive",
                    closeOnConfirm: false
                },
                function() {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('event.status_active') }}",
                        type: 'POST',
                        data: 'event_id=' + event_id,
                        success: function(response) {
                            window.location.href = "{{ route('event') }}";
                        },
                        error: function(response) {
                            alert(response.responseText);
                        }
                    });
                }
            );
        });

        $(document).on('click', '.status_inactive', function(e) {
            var event_id = $(this).attr('data-id');
            swal({
                    title: "Active",
                    text: "Are you sure you want to active this event?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#002868",
                    confirmButtonText: "Active",
                    closeOnConfirm: false
                },
                function() {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('event.status_inactive') }}",
                        type: 'POST',
                        data: 'event_id=' + event_id,
                        success: function(response) {
                            window.location.href = "{{ route('event') }}";
                        },
                        error: function(response) {
                            alert(response.responseText);
                        }
                    });
                }
            );
        });

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

            function load_data() {
                var action_url = "{!! route('event.anyData') !!} ";
                var dataTable = $('#client').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(),
                                "user_status": $("#user_status").val().toLowerCase(),
                                "business_id": "{{ $business_id ?? '' }}"
                            });
                        }
                    },
                    columns: [{
                        data: 'checkbox',
                        orderable: false,
                        searchable: false,
                    }, {
                        data: 'event_name',
                        name: 'event_name',
                    }, {
                        data: 'business_name',
                        name: 'business_name',
                    }, {
                        data: 'category_name',
                        name: 'category_name',
                    }, {
                        data: 'location',
                        name: 'location',
                    }, {
                        data: 'event_date',
                        name: 'event_date',
                    }, {
                        data: 'status',
                        name: 'status',
                    }, {
                        data: 'approvalstatus',
                        name: 'approvalstatus',
                    }, {
                        data: 'options',
                        orderable: false,
                        searchable: false
                    }],
                    order: ['0', 'DESC']
                });

                $('#startdate, #enddate').change(function() {
                    dataTable.draw();
                });
                $('#user_status').change(function() {
                    dataTable.draw();
                });
            }
        });

        $("#startdate").datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true
        }).on('changeDate', function(selected) {
            var minDate = new Date(selected.date);
            $('#enddate').datepicker('setStartDate', minDate);
        });
        $("#enddate").datepicker({
            format: 'dd-mm-yyyy',
            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);
        });
        $("#action").change(function() {
            if (this.value == "delete") {
                $("#submit_all").css("display", "none");
                $("#submit_show_msg").css("display", "inline-block");
            } else {
                $("#submit_all").css("display", "inline-block");
                $("#submit_show_msg").css("display", "none");
            }
        });
        $(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;
            }
        });

        $(document).on('submit', '#updateAll', function(e) {
            e.preventDefault();
            var allVals = [];
            var check = false;

            var select_row = "{{ __('backend.select_row') }}";
            var select_status = "{{ __('backend.select_status') }}";

            var type = $(document).find('#action').val();
            if (type == 'no') {
                $(document).find('#alert_confirm').modal('show');
                $(document).find('#alert_confirm').find('.alert_dynamic_message').text(select_status);

            } else {
                $(".has-value:checked").each(function() {
                    var idvalue = $(this).attr(
                        'value'); // For business list it's value, not data-id unless specifically added
                    if (typeof idvalue === "undefined" || idvalue === "") {
                        idvalue = $(this).attr('data-id');
                    }
                    if (typeof idvalue !== "undefined" && idvalue !== "") {
                        allVals.push(idvalue);
                    }
                });

                if (allVals.length <= 0) {
                    $(document).find('#alert_confirm').modal('show');
                    $(document).find('#alert_confirm').find('.alert_dynamic_message').text(select_row);
                } else {
                    var join_selected_values = allVals.join(",");

                    if (type === 'approve') {
                        swal({
                            title: "Are you sure?",
                            text: "Are you sure you want to approve these selected event?",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#28a745",
                            confirmButtonText: "Yes, approve!",
                            cancelButtonText: "Cancel",
                            closeOnConfirm: true
                        }, function(isConfirm) {
                            if (isConfirm) {
                                ajaxApproveReject(join_selected_values, 'approve', '');
                            }
                        });
                        return false;
                    } else if (type === 'reject') {
                        $('#reject_event_ids').val(join_selected_values);
                        $('#rejectModal').modal('show');
                        return false;
                    }

                    var msg = "";
                    if (type == 0) {
                        msg = "Are you sure you want to deactivate these event?";
                    } else if (type == 1) {
                        msg = "Are you sure you want to activate these event?";
                    } else {
                        msg = "Are you sure you want to delete these event?";
                    }

                    $(document).find('#default_confirm').modal('show');
                    $(document).find('#default_confirm').find('.dynamic_message').text(msg);
                    $(document).find('#default_confirm').find('.checkbox_data').val(join_selected_values);
                    $(document).find('#default_confirm').find('.checkbox_type').val(type);

                }

            }
        });

        $(document).on('click', '.yes_click', function(e) {
            var join_selected_values = $(document).find('#default_confirm').find('.checkbox_data').val();
            var type = $(document).find('#default_confirm').find('.checkbox_type').val();
            var csrf = "{{ csrf_token() }}";
            ajaxUpdateAll(csrf, join_selected_values, type);
            $("#default_confirm").modal('hide');
        });

        function ajaxUpdateAll(csrf, join_selected_values, type) {
            $.ajax({
                url: "{{ route('eventUpdateAll') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrf
                },
                data: 'ids=' + join_selected_values + '&status=' + type,
                beforeSend: function() {
                    $('.loader').css("visibility", "visible");
                },
                success: function(data) {

                    if (data.success == true) {
                        $('.loader').css("visibility", "hidden");
                        $('#success_file_popup').append(messages('alert-success', data.msg));
                        setTimeout(function() {
                            $('#success_file_popup').empty();
                        }, 5000);

                        $(document).find('#default_confirm').modal('hide');
                        var tabe = $('#client').DataTable();
                        $(document).find('#action').prop('selectedIndex', 0);
                        tabe.ajax.reload(null, false);
                        $("#checkAll").prop('checked', false);

                    } else {
                        $('.loader').css("visibility", "hidden");
                        $('#success_file_popup').append(messages('alert-danger', data.error || data.msg));

                        setTimeout(function() {
                            $('#success_file_popup').empty();
                        }, 5000);
                    }
                },
                error: function(data) {
                    alert(data.responseText);
                }
            });
        }

        function messages(classname, msg) {
            return '<div class="alert ' + classname +
                ' m-b-0"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>' +
                msg + '</div>';
        }
        setTimeout(function() {
            $('#topmsgall').hide();
        }, 5000);

        function ajaxApproveReject(join_selected_values, action, reject_reason) {
            $.ajax({
                url: "{{ route('event.approve_reject') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                data: {
                    event_ids: join_selected_values.split(','),
                    action: action,
                    reject_reason: reject_reason
                },
                beforeSend: function() {
                    $('.loader').css("visibility", "visible");
                },
                success: function(data) {
                    $('.loader').css("visibility", "hidden");

                    if (data.success == true) {
                        $('#success_file_popup').append(messages('alert-success', data.msg));

                        setTimeout(function() {
                            $('#success_file_popup').empty();
                        }, 5000);

                        var tabe = $('#client').DataTable();
                        $('#action').prop('selectedIndex', 0);
                        tabe.ajax.reload(null, false);
                        $("#checkAll").prop('checked', false);
                        $('#rejectModal').modal('hide');
                        $('#reject_reason').val('');
                        $('#reject_event_ids').val('');
                    } else {
                        $('#success_file_popup').append(messages('alert-danger', data.error || data.msg));
                        setTimeout(function() {
                            $('#success_file_popup').empty();
                        }, 5000);
                    }
                },
                error: function(xhr) {
                    $('.loader').css("visibility", "hidden");

                    if (xhr.responseJSON && xhr.responseJSON.msg) {
                        $('#success_file_popup').append(messages('alert-danger', xhr.responseJSON.msg));
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        $('#success_file_popup').append(messages('alert-danger', xhr.responseJSON.message));
                    } else {
                        $('#success_file_popup').append(messages('alert-danger', 'Something went wrong.'));
                    }

                    setTimeout(function() {
                        $('#success_file_popup').empty();
                    }, 5000);
                }
            });
        }

        $(document).ready(function() {
            $('#rejectForm').on('submit', function(e) {
                e.preventDefault();
                var reason = $('#reject_reason').val().trim();

                if (reason === '') {
                    alert('Please enter rejection reason.');
                    $('#reject_reason').focus();
                    return false;
                }

                var join_selected_values = $('#reject_event_ids').val();
                if (join_selected_values === '') {
                    alert('No event selected.');
                    return false;
                }
                ajaxApproveReject(join_selected_values, 'reject', reason);
            });
        });
    </script>
@endpush