@extends('layouts.master')

@section('content')
<div class="container">
	<div class="card card-custom gutter-b">
		<div class="card-header flex-wrap py-3">
			<div class="card-title">
				<h3 class="card-label">List of Reload</h3>
			</div>
			<div class="card-toolbar">
				<!--begin::Button-->
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addReload">
				    <i class="flaticon-plus icon-lg"></i>
				    Add New Reload
				</button>
				<!--end::Button-->
			</div>
		</div>
		<div class="card-body">
			<!--begin: Datatable-->
			<table class="table table-bordered" id="reload-table">
				<thead>
					<tr>
						<th>No.</th>
                        <th>Amount Reload</th>
						<th>Bonus Reload</th>
                        <th>Status</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<!--end: Datatable-->
		</div>
	</div>
</div>

<!--begin::Modal-->
@include('configure.reload.add')
@include('configure.reload.edit')
<!--end::Modal-->

@endsection
@push('script')
<script type="text/javascript">
	var table = $('#reload-table').DataTable({
        responsive: false,
        scrollX: true,
        lengthMenu: [10, 20, 50, 100],
        columns: [
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>RM '+row.total_amount+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>RM '+row.bonus_amount+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.status == 1)
                        return "<h5><span class='badge badge-success'>{{ __('Active') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-danger'>{{ __('Inactive') }}</span></h5>";
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<a href="#" title="Edit" class="btn btn-icon btn-circle btn-light-warning btn-sm mr-2 edit-reload" data-id="'+row.id+'" data-total="'+row.total_amount+'" data-bonus="'+row.bonus_amount+'" data-status="'+row.status+'"><i class="la la-edit icon-xl"></i></a><a href="#" title="Delete" class="btn btn-icon btn-circle btn-light-danger btn-sm delete-reload" data-id="'+row.id+'"><i class="la la-trash icon-xl"></i></a>';
                }
            },
        ],

        ajax: {
            method : 'get',
            url: "{{ route('configure.reload.dt') }}",
            dataSrc:"data",
            dataType : "json"
        }
    }).on('click', 'a.edit-reload', function(e) {

        e.preventDefault();

        var id          = $(this).data('id');
        var total       = $(this).data('total');
        var bonus       = $(this).data('bonus');
        var status      = $(this).data('status');

        $('#id_edit').val(id);
        $('#total_amount_edit').val(total);
        $('#bonus_amount_edit').val(bonus);

        if(status == 1)
        {
            document.getElementById("status_edit").checked = true;
        }

        $('#editReload').modal('show');
    }).on('click', 'a.delete-reload', function(e) {

        e.preventDefault();

        var id      = $(this).data('id');
        var _token  = $("input[name='_token']").val();
        var url     = "{{ route('configure.reload.delete', ':id') }}";
        url         = url.replace(':id',id);

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!"
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        _token : _token
                    },
                    success: function(data) {
                        if(data.status != 'success')
                        {
                            var errors = data;
                            $.each(errors, function(index, sm){
                                toastr.error(sm, {timeOut: 5000});
                            });
                        }
                        else
                        {
                            Swal.fire(
                                "Deleted!",
                                "Reload has been deleted.",
                                "success"
                            )
                            $('#reload-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    });

    $(document).ready(function() {
        $('.save-reload').on('click', function () {
            addReload();
        });

        $('.update-reload').on('click', function () {
            updateReload();
        });

        $('#addReload').on('hidden.bs.modal', function() {
            $('#addReload form')[0].reset();
        });    
    });

    function addReload()
    {
        var total_amount  = $('#total_amount_add').val();
        var bonus_amount  = $('#bonus_amount_add').val();
     	var status 	      = document.getElementById('status_add').checked ? '1' :'0';
     	var _token 		  = $("input[name='_token']").val();
        var url 		  = "{{ route('configure.reload.store') }}";

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                total_amount    : total_amount,
                bonus_amount    : bonus_amount,
                status 	        : status,
                _token          : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                	Swal.fire({
					  	title: "Success!",
					  	text: "Successfully Add New Reload!",
					  	icon: "success",
					  	buttonsStyling: false,
					  	showConfirmButton: false,
        				timer: 3000
					 });
                    $('#addReload').modal('hide');
                    $('#reload-table').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function updateReload()
    {
        var id            = $('#id_edit').val();
    	var total_amount  = $('#total_amount_edit').val();
        var bonus_amount  = $('#bonus_amount_edit').val();
        var status        = document.getElementById('status_edit').checked ? '1' :'0';
        var _token        = $("input[name='_token']").val();
     	var url 		  = "{{ route('configure.reload.update', ':id') }}";
        url 			  = url.replace(':id',id);

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                total_amount    : total_amount,
                bonus_amount    : bonus_amount,
                status          : status,
                _token          : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                	Swal.fire({
					  	title: "Success!",
					  	text: "Successfully Updated Reload!",
					  	icon: "success",
					  	buttonsStyling: false,
					  	showConfirmButton: false,
        				timer: 3000
					 });
                    $('#editReload').modal('hide');
                    $('#reload-table').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
</script>
@endpush