@extends('Layouts_admin.index')
@section('content')


<section class="home bg-home">
    <!-- widget -->
    <div class="container pt-2 px-1 px-md-7">

        <div class="row">
            <div class="col-lg-12">
                <div class="card rounded pt-0 pb-5">
                    <div class="card-body px-4 pt-2 pb-0">
                        <h2 class="text-secondary fw-semibold fs-22">Manage Rating</h2>
                    </div>
                    <div class="card-body pt-2 px-4">
                        <div class="row mb-3">
                            <div class="col-12">
                                <button class="btn btn-sm btn-primary fs-15" href="#" data-bs-toggle="modal" data-bs-target="#rateParameter">
                                + Parameter
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive" style="width: 100%; white-space: nowrap;">
                                    <table class="table table-bordered" id="table-data" width="100%" cellspacing="0">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Pertanyaan</th>
                                                <th>Kategori</th>
                                                <th class="text-end"><span><i
                                                            class="fa-solid fa-pen-to-square"></i></span></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- /.item -->
                    </div>
                </div>
                <!-- /Profile Settings Form -->
            </div>
        </div>

    </div>
    <!-- widgetend -->
    <div class="modal fade" id="rateParameter" tabindex="-1" aria-labelledby="rateParameterLabel" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<form id="formRateParameter" method="POST">
						<input type="hidden" name="id" id="id">
						<div class="modal-header py-1 px-4">
							<h1 class="modal-title fs-20 text-ash fw-semibold" id="rateParameterLabel">Tambah Parameter</h1>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body pb-2 pt-8">
							<div class="form-group">
								<h5 class="fs-15 fw-semibold mt-2 me-4">Pertanyaan :</h5>
								<input type="text" class="form-control" name="question" id="question">
							</div>
							<div class="form-group">
								<h5 class="fs-15 fw-semibold mt-2 me-4">Kategori :</h5>
								<select name="category" id="category" class="form-select">
									<option value="">Pilih Kategori</option>
									<option value="stars">Stars</option>
									<option value="input">Input</option>
								</select>
							</div>
						</div>
						<div class="modal-footer py-2">
							<button type="button" class="fs-15 fw-semibold py-1 px-2 btn btn-secondary"
								data-bs-dismiss="modal">Batal</button>
							<button type="submit" class="fs-15 fw-semibold py-1 px-2 btn btn-primary">Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
</section>
@endsection
@section('script')
<script>
    var dttable = $('#table-data').DataTable({
        serverSide: false,
        processing: true,
        ajax: {
            url: '{{ url("SetupRating/getData") }}',
            type: 'GET',
            data: function (d) {

            },
        },
        columns: [{
                data: 'id_rating_question',
                render: function (data, type, row, meta) {
                    return meta.row + 1;
                }
            },
            {
                data: 'question'
            },
            {
                data: 'category'
            },
            {
                data: 'id_rating_question',
                render: function (data, type, row, meta) {
                    var html =
                        '<ul class="list-unstyled float-end p-0">' +
                        '<li class="nav-item dropdown rounded-circle p-0 pe-2 bg-light px-3">' +
                        '<a href="#" class="dropdown link-dark px-0" data-bs-toggle="dropdown">' +
                        '<i class="fa-solid fa-ellipsis-vertical"></i>' +
                        '</a>' +
                        '<div class="dropdown-menu dropdown-menu-end p-0">' +
                        '<a class="dropdown-item fw-normal" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal" data-id="' +
                        data + '">Ubah</a>' +
                        '<a class="dropdown-item fw-normal" href="#" onclick="deletes(' + data +
                        ')">Hapus</a>' +
                        '</div>' +
                        '</li>' +
                        '</ul>';
                    return html;
                }
            }
        ]
    });

    $('#formRateParameter').submit(function (e) {
        e.preventDefault();

        if ($('#question').val().trim() == "") {
            $('#question').focus();
            alert('Pertanyaan tidak boleh kosong');
            return false
        }

        if ($('#category').val().trim() == "") {
            $('#category').focus();
            alert('Kategori tidak boleh kosong');
            return false
        }

        var formData = new FormData(this);
        $.ajax({
            url: '{{ url("SetupRating/submit") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.status) {
                    dttable.ajax.reload();
                    $('#exampleModal').modal('toggle');
                    window.location.reload();
                } else {
                    alert(response.msg);
                }
            }
        });
    });

    $('#exampleModal').on('shown.bs.modal', function (e) {
        var id = $(e.relatedTarget).data('id');

        if (!id) {
            $('#exampleModalLabel').html('Tambah Parameter');
            $('#id').val('');
            $('#question').val('');
            $('#category').val('');
        } else {
            $('#exampleModalLabel').html('Ubah Parameter');
            $.get('{{ url("SetupRating/getSingleData") }}', {
                id: id
            }, function (response) {
                $('#id').val(id);
                $('#question').val(response.question);
                $('#category').val(response.category);
            });
        }
    })

    function deletes(id) {
        if(!confirm('Yakin ingin menghapus')){
            return false;
        }
        $.post('{{ url("SetupRating/delete") }}', {
            id: id
        }, function (response) {
            if (response.status) {
                dttable.ajax.reload();
            } else {
                alert(response.msg);
            }
        });
    }

</script>
@endsection