@include('admin.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row py-3">
        <div class="col-lg-4 my-auto col-md-4 col-sm-4">
            <h2>Manage Activity</h2>
        </div>
        <div class="col-lg-8 text-end col-md-8 col-sm-8">
            <div class="row justify-content-end">
                <div class="col-lg-auto col-md-5 col-sm-6">
                    {{-- <button type="button" class="btn btn-primary"><i class="fa-solid fa-file-excel me-2"></i>Download
                        Report</button> --}}
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_table">
                <table id="activityDataTable" class="table table-striped datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Activity Name</th>
                            <th>Action</th>
                            <th>Status</th>
                            <th>Date & Time</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="edit_activity" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title fs-5" id="exampleModalLabel">Edit Activity</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                        class="fa-solid fa-xmark"></i></button>
            </div>
            {!! Form::open([
                'url' => '#',
                'name' => 'edit_activity_form',
                'id' => 'edit_activity_form',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <input type="hidden" id="activityID" name="activityID">
            <div class="modal-body">
                <div class="col-12">
                    <div class="mb-3">
                        <label for="" class="form-label">Activity Name</label>
                        <input type="text" class="form-control" id="activityName" name="activityName"
                            placeholder="Enter Activity Name">
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button id="submit" class="btn btn-primary">Submit</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancel</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>




@include('admin.footer')

<script>
    $(document).ready(function() {

        $("#edit_activity_form").validate({
            ignore: ".ignore",
            rules: {
                activityName: {
                    required: true,
                    maxlength: 40
                },
                activityID: {
                    required: true,
                },
            },
            messages: {},
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                // return false;
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData($("#edit_activity_form")[0]);
                $.ajax({
                    url: "{{ route('updateActivity') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response, textStatus, xhr) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        if (response.status == 1) {
                            $.notify(response.message, "success");
                            $("#edit_activity_form")[0].reset();
                            $("#edit_activity").modal('hide');
                            $("#activityDataTable").DataTable().ajax.reload(null,
                                false);
                        } else {
                            $("#submit").html('Submit');
                            $("#submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // if (jqXHR.status == 422) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        $.notify(jqXHR.responseJSON.message, "error");
                        // }
                    }

                }); //ajax
            }
        });

        var i = 1;
        var table = $('#activityDataTable').DataTable({
            scrollX: true,
            destroy: true,
            processing: true,
            serverSide: true,
            // responsive: true,
            // autoWidth: true,
            ajax: {
                url: "{{ route('manageActivityPagination') }}",
                data: function(d) {
                    d._token = "{{ csrf_token() }}"
                    // d.userStatus = $('#userStatus option:selected').val()
                    // d.division = $('#division option:selected').val()
                },
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                },
                {
                    data: 'activityName',
                    searchable: true,
                    orderable: false,
                },
                {
                    data: 'action',
                    searchable: true,
                    orderable: false,
                },
                {
                    data: 'activityStatus',
                    searchable: true,
                    orderable: false,
                },
                {
                    data: 'created_at',
                    searchable: true,
                    orderable: false,
                }

            ],
            columnDefs: [{
                "aTargets": [1, 2, 3, 4], // Column to target
                "mRender": function(data, type, full) {
                    if (data != null) {
                        return data;
                    } else {
                        return '-';
                    }
                }
            }, ],
        });
    });
</script>

<script>
    function status(id) {
        $.ajax({
            url: "{{ route('activityStatusChange') }}",
            type: 'POST',
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $.notify(response.message, "success");
                } else
                    $.notify(response.message, "error");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }

    function getData(id) {
        $("#edit_activity_form")[0].reset();
        $("#edit_activity_form").validate().resetForm();
        $.ajax({
            url: "{{ route('getActivityDetail') }}",
            type: 'POST',
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $("#activityID").val(response.data.activityID);
                    $("#activityName").val(response.data.activityName);
                    // $("#activityStatus").val(response.data.status).select2();
                    $("#edit_activity").modal('show');
                } else
                    $.notify(response.message, "error");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        }); //ajax
    }
</script>