@extends('user.layouts.app')
@section('title', 'Daftar Layanan SMM Panel | ' . website_config('main')->website_name)
@section('description', 'Lihat daftar layanan SMM Panel Indonesia seperti Instagram followers, TikTok views, YouTube watch time, likes, dan berbagai layanan sosial media dengan harga murah dan proses cepat.')
@section('keywords', 'smm panel, layanan smm panel, instagram followers murah, tiktok views, youtube watch time, jasa sosmed, ' . website_config('main')->meta_keywords)
@section('robots', 'index,follow')
@section('breadcrumb-first', 'Daftar Layanan')
@section('breadcrumb-second', 'Service')
@section('page-title', 'Daftar Layanan SMM Panel Terlengkap & Murah')
@section('content')
<div class="row">
	<div class="col-12">
		<div class="card card-custom">
			<div class="card-body">
				<form method="get" id="filter_form">
					<div class="row">
						<div class="form-group col-lg-2">
							<select class="custom-select" name="filter_row" id="filter_row">
								<option value="">Tampilkan</option>
								<option value="10" selected>10 Baris</option>
								<option value="30">30 Baris</option>
								<option value="50">50 Baris</option>
								<option value="100">100 Baris</option>
							</select>
						</div>
						<div class="form-group col-lg-2">
							<select class="custom-select" name="filter_type" id="filter_type">
								<option value="" selected>Tipe</option>
								<option value="Default">Default</option>
								<option value="Custom Comments">Custom Comments</option>
								<option value="Comment Likes">Comment Likes</option>
							</select>
						</div>
						<div class="form-group col-lg-8">
							<select class="form-control" name="filter_category" id="filter_category" data-toggle="select2">
								<option value="" selected>Kategori</option>
								@foreach($categories as $item)
                                    <option value="{{ $item['category_name'] }}">{{ $item['category_name'] }}</option>
								@endforeach
							</select>
						</div>
						<div class="form-group col-lg-12">
							<input type="text" class="form-control" name="search" id="search" placeholder="Cari">
						</div>
						<div class="form-group col-6">
							<div class="custom-control custom-checkbox mb-2">
								<input type="checkbox" class="custom-control-input" name="filter_refill_support" id="filter_refill_support" value="1">
								<label class="custom-control-label" for="filter_refill_support">Dukungan Isi Ulang</label>
							</div>
						</div>
						<div class="form-group col-6">
							<div class="custom-control custom-checkbox mb-2">
								<input type="checkbox" class="custom-control-input" name="filter_favorite" id="filter_favorite" value="1">
								<label class="custom-control-label" for="filter_favorite">Layanan Favorit</label>
							</div>
						</div>
						<div class="form-group col-6 button-items d-grid gap-2">
							<button type="reset" class="btn btn-secondary btn-block"><i class="mdi mdi-refresh"></i> Reset</button>
						</div>
						<div class="form-group col-6 button-items d-grid gap-2">
							<button type="submit" class="btn btn-custom btn-block"><i class="mdi mdi-filter"></i> Filter</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card card-custom">
			<div class="card-body">
				<div class="table-responsive">
					<table class="table table-striped table-borderless table-hover mb-0" id="data-table">
						<thead class="thead-light">
							<th style="width: 30px;">ID</th>
							<th>Kategori</th>
							<th>Nama</th>
							<th style="width: 100px;">Harga/K</th>
							<th style="width: 50px;">Min.</th>
							<th style="width: 50px;">Maks.</th>
							<th style="width: 50px;">Avarage time.</th>
							<th style="width: 100px;"></th>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function () {
        var groupColumn = 1;
        window.LaravelDataTables = window.LaravelDataTables || {};
        window.LaravelDataTables["data-table"] = $('#data-table').DataTable({
            "serverSide": true,
            "processing": true,
            "columnDefs": [{
                "visible": false,
                "targets": groupColumn
            }],
			"ajax": {
                url: "{{ url()->current() }}",
                data: function (d) {
                    d.filter_category = $("#filter_category option:selected").val();
                    d.filter_type = $("#filter_type option:selected").val();
                    d.filter_favorite = $("#filter_favorite:checked").val();
                    d.filter_refill_support = $("#filter_refill_support:checked").val();
                    d.filter_status = $("#filter_status option:selected").val();
                    d.search = $("input[name=search]").val();
                },
            },
			"columns": [
                { name: "id", data: "id", title: "ID", class: "align-middle", orderable: true, searchable: true },
                { name: "category.name", data: "category_id", title: "Kategori", class: "align-middle", orderable: true, searchable: true },
                { name: "name", data: "name", title: "Nama", class: "align-middle", orderable: true, searchable: true },
                { name: "price", data: "price", title: "Harga\/K", class: "align-middle", orderable: true, searchable: true },
                { name: "min", data: "min", title: "Min.", class: "align-middle", orderable: true, searchable: true },
                { name: "max", data: "max", title: "Maks.", class: "align-middle", orderable: true, searchable: true },
                { name: "avarage", data: "avarage", title: "Avarage time.", class: "align-middle", orderable: true, searchable: true },
                { data: "action", title: "", class: "align-middle text-center", orderable: false, searchable: false },
            ],
            "order": [
                [groupColumn, 'asc']
            ],
			"responsive": true,
			"autoWidth": false,
			"pageLength": 10,
			"lengthMenu": [5, 10, 30, 50, 100],
			"pagingType": "full_numbers",
			"language": {
                processing: "Sedang memproses...",
                lengthMenu: "_MENU_",
                zeroRecords: "Tidak ditemukan data yang sesuai",
                info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
                infoEmpty: "Menampilkan 0 sampai 0 dari 0 entri",
                infoFiltered: "(disaring dari _MAX_ entri keseluruhan)",
                infoPostFix: "",
                search: "Cari:",
                paginate: { first: "Pertama", previous: "<i class='mdi mdi-chevron-left'>", next: "<i class='mdi mdi-chevron-right'>", last: "Terakhir" },
            },
            "dom": '<bottom><"float-left"><"float-right">r<"row"<"col-sm-4"i><"col-sm-4"><"col-sm-4"p>>',
            "drawCallback": function (settings) {
                var api = this.api();
                var rows = api.rows({
                    page: 'current'
                }).nodes();
                var last = null;
                api.column(groupColumn, {
                    page: 'current'
                }).data().each(function (group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="group text-white" style="background-color: var(--main-color);"><td colspan="7">' + group + '</td></tr>'
                        );
                        last = group;
                    }
                });
            }
        });
        $('#data-table tbody').on('click', 'tr.group', function () {
            var currentOrder = window.LaravelDataTables["data-table"].order()[0];
            if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
                window.LaravelDataTables["data-table"].order([groupColumn, 'desc']).draw();
            } else {
                window.LaravelDataTables["data-table"].order([groupColumn, 'asc']).draw();
            }
        });
    });
	$('#filter_form').on('submit', function(element) {
        element.preventDefault();
		$('#preloader').fadeIn('slow');
		$.when(window.LaravelDataTables["data-table"].page.len($('#filter_row').val()).draw()).done(function() {
			$('#preloader').fadeOut('slow');
		});
    });
	$('#filter_form').on('reset', function(element) {
		$(':checkbox').prop('checked', false);
		$('[data-toggle="select2"], select, input').val(null).trigger('change');
		$('#filter_row').val('10').trigger('change');
		$('#preloader').fadeIn('slow');
		$.when(window.LaravelDataTables["data-table"].page.len('10').draw()).done(function() {
			$('#preloader').fadeOut('slow');
		});
    });
	function service_favorite(service_id, action) {
		$.ajax({
			type: 'GET',
			url: '{{ url('ajax/service/favorite') }}',
			data: 'service_id='+service_id+'&action='+action,
			dataType: 'json',
            beforeSend: function() {
				$('#preloader').fadeIn("slow");
            },
			success: function(response) {
				$('#preloader').fadeOut("slow");
				if (response.status == 'success') {
					if (action == 'create') {
						$('#service_favorite_' + service_id).html('<i class="mdi mdi-heart font-size-24 text-custom"></i>');
						$('#service_favorite_' + service_id).attr('onclick', 'service_favorite(\''+service_id+', \'delete\'\');');
					} else if (action == 'delete') {
						$('#service_favorite_' + service_id).html('<i class="mdi mdi-heart-outline font-size-24 text-custom"></i>');
						$('#service_favorite_' + service_id).attr('onclick', 'service_favorite(\''+service_id+', \'create\'\');');
					}
					window.LaravelDataTables["data-table"].draw('page');
					alertify.success(response.message);
				} else if (response.status == 'info') {
					alertify.message(response.message);
				} else {
					alertify.error(response.message);
				}
			},
			error: function() {
				$('#preloader').fadeOut("slow");
				alertify.error('Terjadi kesalahan');
			}
		});
	}
</script>
@endsection