var ColumnDefs = [
    { headerName: 'Id', field: 'restaurantId', width: 80 },
    { headerName: 'Restaurant Name', field: 'restaurantName', width: 235 },
    { headerName: 'Address', field: 'address', width: 150 },
    { headerName: 'Contact No', field: 'contactNo', width: 120 },
    {
        headerName: 'Active', field: 'isActive', width: 80,
        cellRenderer: (data) => {
            return data.value ? '<i class="fas fa-check text-success"></i>' : '<i class="fas fa-times text-danger"></i>';
        }
    },
    { headerName: 'Email', field: 'email', width: 150 },
    {
        headerName: 'Start Date', field: 'startDate', width: 100,
        cellRenderer: (data) => {
            return data.value ? (new Date(data.value)).toLocaleDateString() : '';
        }
    },
    {
        headerName: 'End Date', field: 'endDate', width: 100,
        cellRenderer: (data) => {
            return data.value ? (new Date(data.value)).toLocaleDateString() : '';
        }
    },
    {
        headerName: 'Edit', width: 80,
        cellRenderer: editButton,
        onCellClicked(params) {
            console.log(params.data);
            Edit(params.data);
        }
    }
];

var SplitDateTime = function (data) {
    var splitDateTime = data.split("T");
    var date = splitDateTime[0];
    return date;
};

function Edit(data) {
    $('#id').val(data.id);
    $('#restaurantId').val(data.restaurantId);
    $('#restaurantName').val(data.restaurantName);
    $('#address').val(data.address);
    $('#contactNo').val(data.contactNo);
    $('#isActive').prop('checked', data.isActive ? true : false);
    $('#startDate').val(SplitDateTime(data.startDate));
    $('#email').val(data.email);
    $('#endDate').val(SplitDateTime(data.endDate));
    $('#createRestaurantModal').modal('toggle');
}

var Clear = function () {
    $('#id').val('');
    $('#restaurantId').val('');
    $('#restaurantName').val('');
    $('#address').val('');
    $('#contactNo').val('');
    $('#isActive').prop('checked', false);
    $('#startDate').val('');
    $('#email').val('');
    $('#endDate').val('');
};

function editButton() {
    return '<i class="btn fas fa-edit" id="editButton"></i>';
}

var gridOptions = {
    columnDefs: ColumnDefs,
    rowHeight: 40,
    enableSorting: true,
    enableFilter: true,
    paginationAutoPageSize: true,
    pagination: true
};
function Save() {
    var record = {
        Id: $('#id').val(),
        RestaurantId: $('#restaurantId').val(),
        RestaurantName: $('#restaurantName').val(),
        Address: $('#address').val(),
        ContactNo: $('#contactNo').val(),
        IsActive: $('#isActive').prop('checked'),
        Email: $('#email').val(),
        StartDate: $('#startDate').val(),
        EndDate: $('#endDate').val()
    };

    $('#restaurantInfoForm').one('submit', function (e) {
        e.preventDefault();
        e.stopPropagation();
        $.ajax({
            url: 'RestaurantInfo/Save',
            data: { record: record },
            method: 'POST',
            success: function () {
                console.log("Added Successfully");
                $('#createRestaurantModal').modal('toggle');
                getGridData();
            }
        });
    });
}

var getGridData = function () {
    $.ajax({
        url: 'RestaurantInfo/GetRestaurantInfo',
        method: 'GET',
        success: function (data) {
            gridOptions.api.setRowData(data);
            console.log(data);
        }
    });
};

$(document).ready(function () {
    var eGridDiv = document.querySelector('#myGrid');

    new agGrid.Grid(eGridDiv, gridOptions);

    getGridData();

    $('#createBtn').click(function () {
        console.log('Button Pressed');
        Clear();
    });

    $('#btnSave').on('click', function () {
        console.log($('#restaurantInfoForm')[0].reportValidity());
        if ($('#restaurantInfoForm')[0].reportValidity()) {
            Save();
        }
    });
});