@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 Register Squads</h3>
			</div>
			<div class="card-toolbar">
			</div>
		</div>
		<div class="card-body">
			<!--begin: Datatable-->
			<table class="table table-bordered" id="regist-table">
				<thead>
					<tr>
						<th>No.</th>
                        <th>Photo</th>
						<th>Name</th>
                        <th>Email</th>
                        <th>Status</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<!--end: Datatable-->
		</div>
	</div>
</div>

<!--begin::Modal-->
@include('user.regist.show')
<!--end::Modal-->

@endsection
@push('script')
<script type="text/javascript">
	var table = $('#regist-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: false,
        scrollX   : true,
        lengthMenu: [10, 20, 50, 100],
        order     : [[ 3, "asc" ]],
        columns: [
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row)  {
                    if(row.photo != null)
                        return '<img src="'+row.photo.file_path+'" width="80px" height="80px" style="border: 1px solid #ddd; border-radius: 4px;">';
                    else
                        return '-';
                }
            },
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row)  {
                    if(row.detail && row.detail.first_name && row.detail.last_name)
                        return '<span>'+row.detail.first_name+' '+row.detail.last_name+'</span>';
                    else if(row.detail && row.detail.first_name)
                        return '<span>'+row.detail.first_name+'</span>';
                    else
                        return '-';
                }
            },
            {
                "data": 'email',
                "render": function (data, type, row)  {
                    return '<span>'+row.email+'</span>';
                }
            },
            {
                "data": 'verify',
                "render": function (data, type, row)  {
                    if(row.verify == 0)
                        return "<h5><span class='badge badge-warning'>{{ __('Pending') }}</span></h5>";
                    else if(row.verify == 1)
                        return "<h5><span class='badge badge-success'>{{ __('Verified') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-danger'>{{ __('Rejected') }}</span></h5>";
                }
            },
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row)  {
                    if(row.verify == 0)
                    {
                        return '<a href="#" title="View" class="btn btn-icon btn-circle btn-secondary btn-sm mr-2 show-regist" data-id="'+row.id+'"><i class="far fa-eye icon-xl"></i></a><a href="#" title="Approve" class="btn btn-icon btn-circle btn-light-success btn-sm confirm-regist" data-id="'+row.id+'"><i class="far fa-check-circle icon-xl"></i></a><a href="#" title="Not Approve" class="btn btn-icon btn-circle btn-light-danger btn-sm reject-regist" data-id="'+row.id+'"><i class="far fa-times-circle icon-xl"></i></a>';
                    }
                    else
                    {
                        return '<a href="#" title="View" class="btn btn-icon btn-circle btn-secondary btn-sm mr-2 show-regist" data-id="'+row.id+'"><i class="far fa-eye icon-xl"></i></a>';
                    }
                }
            },
        ],

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

        e.preventDefault();

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

        Swal.fire({
            title: "Are you sure you want to confirm this squad?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes!"
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        verify : 1,
                        _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(
                                "Confirmed!",
                                "Squad has been confirmed.",
                                "success"
                            )
                            $('#regist-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    }).on('click', 'a.reject-regist', function(e) {

        e.preventDefault();

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

        Swal.fire({
            title: "Are you sure you want to reject this squad?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes!"
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        verify : 2,
                        _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(
                                "Rejected!",
                                "Squad has been rejected.",
                                "success"
                            )
                            $('#regist-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    }).on('click', 'a.show-regist', function(e) {

        e.preventDefault();

        var id  = $(this).data('id');
        var url = "{{ route('user.detail', ':id') }}";
        url     = url.replace(':id',id);

        $.ajax({
            url: url,
            type: 'GET',
            success: function(data) {
                var val = data.data;

                document.getElementById("show_user_name").innerHTML = val.name;

                if(val.photo != null)
                {
                    $('#preview').show();
                    document.getElementById("preview").src = val.photo.file_path;
                }

                if(val.ic != null)
                {
                    $('#preview_front_ic').show();
                    document.getElementById("preview_front_ic").src = val.ic.file_path_front;

                    $('#preview_back_ic').show();
                    document.getElementById("preview_back_ic").src = val.ic.file_path_back;
                }

                document.getElementById("show_email").innerHTML = val.email;

                if(val.detail != null)
                {
                    document.getElementById("show_first_name").innerHTML = val.detail.first_name;
                    document.getElementById("show_last_name").innerHTML  = val.detail.last_name;
                    document.getElementById("show_phone").innerHTML      = val.detail.phone;
                    document.getElementById("show_ic").innerHTML         = val.detail.ic;
                } 
            }
        });

        $('#showSquad').modal('show');
    });
</script>
@endpush