@extends('layouts.main') @section('title', trans('core.title_test_result')) @section('content')

<style>
    .proctor-head {
        font-size: 20px;
        font-weight: 600;
        border-left: 3px solid #8FC740;
        padding-left: 5px;
    }

    .back-div {
        border-radius: 10px;
        margin-top: 10px;
    }

    .form-label-custom {
        color: #252525;
        font-size: 13px;
        font-weight: 600;
    }

    .btn-submit-custom {
        background-color: #0D6726;
        color: #fff !important;
        font-size: 13px;
        border-radius: 5px;
    }

    .candidate-badge {
        background: #FFF3E2;
        padding: 10px;
        border-radius: 5px;
        font-size: 13px;
        color: #252525;
        text-align: center;
    }

     .remain-badge {
        background: #f5f5f5;
        padding: 10px;
        border-radius: 5px;
        font-size: 13px;
        color: #252525;
        text-align: center;
    }
    .remain-badge span {
        font-weight: 600;
    }


    .candidate-badge span {
        font-weight: 600;
    }

    .proctor-badge {
        background: #E5FFC0;
        padding: 10px;
        border-radius: 5px;
        font-size: 13px;
        color: #252525;
        text-align: center;
    }

    .proctor-badge span {
        font-weight: 600;
    }

    .admin-badge {
        background: #E2FBFF;
        padding: 10px;
        border-radius: 5px;
        font-size: 13px;
        color: #252525;
        text-align: center;
    }

    .admin-badge span {
        font-weight: 600;
    }

    .bulk-uptext {
        font-weight: 600;
        color: #252525;
        margin-top: 20px;
    }

    .btnupload {
        background-color: #EFEFEF;
        color: #252525 !important;
        font-size: 13px;
    }

    .listlabel {
        font-size: 12px;
        font-weight: 700;
    }

    .listlabeldata {
        font-size: 14px;
        font-weight: 400;
        margin-top: 3px;
    }

    .btnsave {
        background-color: #8FC740;
        color: #ffffff !important;
        font-size: 13px;
    }

    .fs-13px {
        font-size: 13px;
    }

    .table-fs {
        font-size: 13px;
    }

    .table-bordered {
        padding: 0px !important;
        border-collapse: separate;
    }

    #mapContainer {
        display: none;
    }

    .btn-submit-custom {
        cursor: pointer;
    }

    .hme-loading-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.7);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loader {
        border: 8px solid #f3f3f3;
        /* Light grey */
        border-top: 8px solid #3498db;
        /* Blue */
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .proctor-mapping {
        width: 35px !important;
        height: 35px !important;
        padding: 0px !important;
    }

    .proctoring-back {
        border-radius: 10px !important;
        cursor: pointer;
    }
    .back-option{  
        cursor: pointer;
    }
    .js-pro-psy-disabled-tooltip{
        cursor: pointer;
    }
    .secondary-button{
        color: #131313;
        border-radius: 5px;
        background-color: #bdc3c7;
        padding: 6px 12px;
    }

    .pagination{
        justify-content: right;
    }

</style>

<div class="pcoded-content">
    <div class="hme-loading-mask" style="display:none;">
        <div class="loader"></div>
    </div>
    <div class="pcoded-inner-content p-0">
        <div class="main-body">
            <div class="container-fluid">
                <div class="row mx-0 pt-3 justify-content-between">
                    <div class="proctor-head">Assessment Proctor Mapping</div>
                    <span id="backBtn" role="button" class="cursor-pointer secondary-button">
                    <img src="{{ asset('assets/images/backarrow.png') }}" class="proctoring-back cursor-pointer"
                        id="backBtn" alt="Back" style="width:20px;height:20px;">
                    <span class="back-option">
                    Back
                    </span>
                    </span>
                </div>
                <div class="col-md-6 d-flex justify-content-end" style="max-width:100%">
                    <button class="btn btn-submit-custom" id="mapBtn">New Mapping</button>
                </div>
                <div id="mapContainer" class="bg-white p-3 back-div"></div>
            </div>

            <div id="tableSection" class="bg-white p-3 back-div">

                <div id="tableSection" class="bg-white p-3 back-div">
                    @include('pro.corporate.proctor.proctorMappingTableRender')
                </div>
            </div>
        </div>


    </div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/jquery.validate.min.js"></script>

<script>
    $(document).ready(function() {

        $('#backBtn').hide();


        $(document).on('click', '#tableSection .pagination a', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
             $('.hme-loading-mask').fadeIn();
            $.ajax({
                url: url,
                data: { table_only: true },
                success: function(res) {
                    if (res.status === 200) {
                        $('#tableSection').html(res.component);
                    }
                }
            });
             $('.hme-loading-mask').fadeOut();
        });


        $('#mapBtn').on('click', function() {
            $.ajax({
                url: "{{ url('pro/company/proctoring/proctor-mapping-registration') }}",
                type: "GET",
                beforeSend: function() {
                    // show loader before request starts
                    $('.hme-loading-mask').fadeIn();
                },
                success: function(response) {
                    $('#backBtn').show();
                    $('#tableSection').hide();
                    $('#mapBtn').hide();
                    $('#mapContainer').show().html(response);
                },
                error: function(xhr) {
                    swal({
                        title: 'Error',
                        text: "Something went wrong!",
                        icon: "error",
                        button: "OK"
                    });
                },
                complete: function() {
                    // hide loader after success or error
                    $('.hme-loading-mask').fadeOut();
                }
            });
        });

         $('#tableSection').on('click', '.editMappingBtn', function(e) {

            let mapData = {
                map_id: $(this).data('mapid')
            };

            $.ajax({
                url: "{{ url('pro/company/proctoring/proctor-mapping-registration') }}",
                type: "GET",
                data: mapData,
                beforeSend: function() {
                    $('.hme-loading-mask').fadeIn();
                },
                success: function(response) {
                    // Here response is full HTML, so just put it in container
                    $('#tableSection').hide();
                    $('#mapBtn').hide();
                    $('#mapContainer').show().html(response);
                    $('#backBtn').show();

                    // If you want to load the mapped proctors table separately
                    if (mapData.map_id) {
                        $.ajax({
                            url: "{{ url('pro/company/proctoring/proctor-mapping-registration') }}",
                            type: "GET",
                            data: {
                                map_id: mapData.map_id,
                                table_only: 1
                            },
                            success: function(data) {
                                if (data.status == 200) {
                                    $('#mappedProctorsContainer').html(data
                                        .component);
                                }
                            }
                        });
                    }
                },
                complete: function() {
                    $('.hme-loading-mask').fadeOut();
                }
            });

        });

        $('#backBtn').on('click', function() {
            $('.hme-loading-mask').fadeIn();
            setTimeout(function() {
                window.location.href =
                    "{{ url('pro/company/proctoring/proctor-registration') }}";
            }, 500);
        });


    });
</script>

@endsection