@extends('layouts.main')
@section('title','Registered Proctor')
@section('content')
<style>
     .btn-submit-custom {
        background-color: #0D6726;
        color: #fff !important;
        font-size: 13px;
        border-radius: 5px;
        cursor: pointer;
    }
    #addProctorModal input[type="radio"] {
    opacity: 1 !important;
    position: static !important;
    margin-right: 5px;
}

#addProctorModal .radio-inline,
#addProctorModal label {
    cursor: pointer;
    font-weight: normal;
}

#addProctorModal .md-content {
    max-width: 480px;
    margin: auto;
    margin-top: -20px;
}

#addProctorModal .min-h-250 {
    min-height: auto !important;
}

#singleProctorForm .form-group {
    margin-bottom: 12px;
}

.hme-loading-mask {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999 !important;
}
</style>
<div class="pcoded-content">
    <div class="pcoded-inner-content p-0">
        <div class="main-body">
            <div class="page-wrapper">
                <div>
                    <div class="page-header-title">
                        <h4>Registered Proctor</h4>
                    </div>
                    <!-- Breadcrumb -->
                    <div class="page-header-breadcrumb">
                        <ul class="breadcrumb-title">
                            <li class="breadcrumb-item">
                                <!-- @if(Auth::guard('corporate')->user()->user_type == 1)
                              <a href="{{secure_url('company/dashboard') }}">
                              @elseif(Auth::guard('corporate')->user()->user_type == 2)
                              <a href="{{secure_url('recruiter/dashboard') }}">
                              @endif   -->
                                <span class="hiremee-home"></span>
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ secure_url('pro/company/proctoring/get-registered-proctor') }}">Registered
                                    Proctor</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="page-body">
                    <div class="hme-loading-mask" style="display: none;">
                        <div class="hme-loading-container">
                            <div class="hme-dual-ring"></div>
                            <div>Please wait, Loading...</div>
                        </div>
                    </div>
                    <div class="page-body">
                        <div class="row hme-filter" style="margin:0px">
                            <div class="col-md-6 col-sm-12">
                                <div class="input-group input-group-primary1">
                                    <span class="input-group-addon transparent-addon" id="basic-addon1"><span
                                            class="hme-filter-inline-label  m-l-0 m-r-0">Search</span></span>
                                    <input class="form-control" placeholder="Name/ Email" type="text"
                                        title="search by Name/ Email" id="js-pro-proctor-user-field">
                                    <span class="input-group-addon" id="js-pro-proctor-user-search"
                                        data-toggle="tooltip" data-placement="top" title="Search"
                                        data-search-mode="0"><span class="hiremee-search"></span></span>
                                    <span class="input-group-addon bg-primary btn-primary"
                                        id="js-pro-proctor-user-search-refresh" data-toggle="tooltip"
                                        data-placement="top" title="Refresh"><i
                                            class="hiremee-refresh  p-r-5 f-14 text-white"></i></span>
                                </div>
                            </div>
                             <div class="col-md-6 col-sm-12 d-flex justify-content-end">
                                <button class="btn btn-submit-custom" id="addProctorBtn">
                                    Add Proctor
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Render page table  -->
                <div class='pro-proctor-list'>
                    <div class="hme-loading-mask" style="">
                        <div class="hme-loading-container">
                            <div class="hme-dual-ring"></div>
                            <div>Please wait, Loading...</div>
                        </div>
                    </div>
                    <!-- render page included -->
                </div>
                <!-- End Render page -->
            </div>
        </div>
    </div>
</div>
</div>
</div>

</div>

<div class="md-modal md-effect-1" id="addProctorModal">
    <div class="md-content">
        <button type="button"
            class="btn btn-primary btn-icon-custom waves-effect md-close login-close-btn"
            id="closeAddProctorModal">
            <span class="hiremee-multiply f-18"></span>
        </button>

        <div class="row p-l-15 p-r-15">
            <div class="col-sm-12">
                <div class="page-header-title m-t-10 m-b-20">
                    <h4 class="g-l-b" style="font-size:20px;">Add Proctor</h4>
                </div>
                <div>
                    <div id="singleProctorForm">
                        <div class="form-group">
                            <label class="form-label-custom">Proctor Name</label>
                            <input type="text" id="sp_name" class="form-control">
                                <small id="sp_name_err" class="text-danger"></small>
                        </div>

                     
                        <div class="form-group">
                            <label class="form-label-custom">Email</label>
                            <input type="email" id="sp_email" class="form-control">
                                <small id="sp_email_err" class="text-danger"></small>
                        </div>

                     
                        <div class="form-group">
                            <label class="form-label-custom">Mobile Number</label>
                            <input type="text" id="sp_mobile" class="form-control" maxlength="10"
                                oninput="this.value=this.value.replace(/\D/g,'')">
                                <small id="sp_mobile_err" class="text-danger"></small>
                        </div>

                       
                        <div class="form-group">
                            <label class="form-label-custom d-block">Is Admin Proctor?</label>
                            <label>
                                <input type="radio" name="sp_is_admin" value="1"> Yes
                            </label>
                            <label class="ml-3">
                                <input type="radio" name="sp_is_admin" value="0" checked> No
                            </label>
                        </div>

                        <div class="text-center m-t-25">
                            <button class="btn btn-success" id="saveSingleProctor">
                                Submit
                            </button>
                        </div>

                    </div>

                </div>

            </div>
        </div>

    </div>
</div>
<div class="md-overlay"></div>


@endsection

@section('footer')

<script type="text/javascript">
// $('.hme-loading-mask').css('display','block').fadeIn();
// $('.hme-loading-mask').fadeOut()
$(document).ready(function() {
    csr_candidate_skill_list();
});


$(document).on('click', '#addProctorBtn', function () {
    $('#sp_name').val('');
    $('#sp_email').val('');
    $('#sp_mobile').val('');
    $('input[name="sp_is_admin"][value="0"]').prop('checked', true);
    $('.text-danger').text('');
    $('#addProctorModal').addClass('md-show');
});


$(document).on('click', '#closeAddProctorModal', function () {
    $('#addProctorModal').removeClass('md-show');
});

$('#saveSingleProctor').on('click', function() {
            let name = $('#sp_name').val().trim();
            let email = $('#sp_email').val().trim();
            let mobile = $('#sp_mobile').val().trim();
            let isAdmin = parseInt($('input[name="sp_is_admin"]:checked').val());

            let hasError = false;
            $('.text-danger').text('');

            if (name === '') {
                $('#sp_name_err').text("Proctor name is required");
                hasError = true;
            }
            if (email === '') {
                $('#sp_email_err').text("Email is required");
                hasError = true;
            }
            if (mobile === '') {
                $('#sp_mobile_err').text("Mobile number is required");
                hasError = true;
            } else if (!/^\d{10}$/.test(mobile)) {
                $('#sp_mobile_err').text("Mobile must be numeric and 10 digits");
                hasError = true;
            }
            
            if (hasError) {
                return;
            }

            $('.hme-loading-mask').fadeIn();

            $.ajax({
                url: "{{ url('pro/company/proctoring/addproctor') }}",
                type: "POST",
                data: {
                    name: name,
                    email: email,
                    mobile: mobile,
                    is_admin: isAdmin,
                    _token: "{{ csrf_token() }}"
                },
                success: function(res) {
                    if (res.status === 200) {
                        swal({
                            title: "Success",
                            text: res.message ||
                                "Proctor added successfully",
                            icon: "success",
                            button: "OK"
                        }, function() {
                            $('#addProctorModal').removeClass('md-show');
                            $('#sp_name').val('');
                            $('#sp_email').val('');
                            $('#sp_mobile').val('');
                            $('input[name="sp_is_admin"][value="0"]').prop('checked', true);
                            $('.text-danger').text('');
                            csr_candidate_skill_list();
                        });
                    } else {
                        swal({
                            title: "Warning",
                            text: res.message ||
                                "Upload failed, please try again later",
                            icon: "warning",
                            button: "OK"
                        }, function() {
                            // window.location.href = "{{ url('pro/company/proctoring/proctor-registration') }}";
                        });
                        $('.hme-loading-mask').fadeOut();
                    }
                },
                error: function(xhr) {
                    let errMsg = "Something went wrong";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errMsg = xhr.responseJSON.message;
                    }
                    swal({
                        title: "Error",
                        text: errMsg,
                        icon: "error",
                        button: "OK"
                    });
                },
                complete: function() {
                    $('.hme-loading-mask').fadeOut();
                }
            });
        });


function csr_candidate_skill_list() {
    $('.hme-loading-mask').css('display', 'block').fadeIn();
    $.ajax({
        method: "GET",
        url: "{{ secure_url('pro/company/proctoring/get-registered-proctor') }}",
        success: function(data) {
            console.log("data", data);
            $('.hme-loading-mask').fadeOut();
            $('.pro-proctor-list').html(data.component);

        },
        error: function(error) {
            $('.hme-loading-mask').fadeOut();
            alertMessage("danger",
                "Your action  has been suspended, Sorry for the inconvenience. Please try again later",
                "Something Went Wrong");
        }
    });
}
// Handle pagination click
$('body').on('click', '.pagination a', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $.ajax({
        url: url,
        type: 'get',
        beforeSend: function() {
            $('.hme-loading-mask').css('display', 'block').fadeIn();
        },
        success: function(data) {
            if (data.status == 200) {
                $('.hme-loading-mask').fadeOut();
                $('.pro-proctor-list').html(data.component);
            }
        },
        error: function(error) {
            $('.hme-loading-mask').fadeOut();
            alertMessage("danger",
                "Your action  has been suspended, Sorry for the inconvenience. Please try again later",
                "Something Went Wrong");
        }
    });
});
$(document).on('click', '#js-pro-proctor-user-search', function() {
    var search = $('#js-pro-proctor-user-field').val();
    if (search == '' || search == null) {
        $('.hme-loading-mask').fadeOut();
        swal({
            html: true,
            title: '',
            text: "Please Provide any Search value",
            type: "warning",
            showCancelButton: false,
            confirmButtonText: "OK",
            closeOnConfirm: false,
            confirmButtonColor: '#ffbc01',
        });
    } else {
        $('.hme-loading-mask').css('display', 'block').fadeIn();
        $.ajax({
            url: "{{ secure_url('pro/company/proctoring/get-registered-proctor') }}",
            type: "get",
            data: {
                'search': search ? search : ""
            },
            success: function(data) {
                if (data.status == 200) {
                    $('.pro-proctor-list').html(data.component);
                    $('.hme-loading-mask').fadeOut();
                }
            },
            error: function(error) {
                alertMessage("danger",
                    "Your action  has been suspended, Sorry for the inconvenience. Please try again later",
                    "Something Went Wrong");
            }
        });
    }

});
$(document).on('click', '#js-pro-proctor-user-search-refresh', function() {
    $('#js-pro-proctor-user-field').val('');
    csr_candidate_skill_list();
    //        $('#js-pro-corporate-user-select').val(10);
    //        $('#js-pro-corporate-user-details-loader').attr('data-page',1);
    //       $('#js-pro-proctor-user-field').val('');
    //     
});
</script>
@endsection