<?php

extract($_GET);
extract($_POST);
$validation_services = validation::find_by_query("SELECT * FROM validation WHERE service_id = 20");
// $jamb_services = Jamb::find_by_query("SELECT * FROM jamb WHERE status=0");
$validation_services = array_reverse($validation_services);
// if (isset($jamb_id)) {

//     // $selected_jamb_services = Jamb::find_by_id($jamb_id);
//     $selected_jamb_services = Jamb::find_by_query("SELECT * FROM jamb WHERE id=$jamb_id AND status=0");
//     $selected_jamb_services = array_shift($selected_jamb_services);
// }
// if (isset($done)) {

//     $jamb = Jamb::find_by_id($jamb_service_id);
//     $jamb->status = 1;
//     $jamb->save();
// }
// if (isset($failed)) {

//     $jamb = Jamb::find_by_id($jamb_service_id);
//     $jamb->status = 2;
//     $jamb->save();
// }
?>
<!-- } else {

        echo '<script>iziToast.warning({
                    title: "Caution!",
                    message: "You cannot transfer fund to yourself",
                    position: "topRight",
                    balloon: true
                });</script>';

    } -->


<div class="p-2 sm:ml-64 mb-14">
    <nav class="md:max-w-max flex px-5 py-2 mt-20 mx-2 text-gray-700 border border-gray-200 rounded-lg bg-teal-50 bg-teal-800 dark:border-gray-700"
        aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="<?= BASE_URL ?>"
                    class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                    <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
                    </svg>
                    Home
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                        fill="none" viewBox="0 0 6 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 9 4-4-4-4" />
                    </svg>
                    <a href="<?= BASE_URL ?>/users"
                        class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">Validation Requests</a>
                </div>
            </li>
            
        </ol>
    </nav>
    <div class="p-2 rounded-lg dark:border-gray-700">

        <!-- Modal Structure with Input Field -->
            <div id="custom-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
                <div class="bg-white rounded-lg w-full max-w-md p-6 md:w-1/3">
                    <!-- Modal Header -->
                    <div class="flex justify-between items-center pb-3">
                        <p id="label" class="text-2xl font-bold"></p>
                        <button class="close_modal text-black text-lg">&times;</button>
                    </div>
            
                    <!-- Modal Body with Input Field -->
                    <div class="modal-body">
                        <p id="modal-content" class="text-gray-700">Add Comments and New tracking ID if any.</p>
                        <form id="trackingForm" data-id="" method="POST">
                            <div class="mb-4">
                                <label for="new_tracking_id" id="" class="block text-sm font-medium text-gray-700">New Tracking ID (Optional)</label>
                                <input type="text" id="new_tracking_id" name="new_tracking_id" class="border border-gray-300 rounded-md w-full p-2" >
                                <label for="new_tracking_id" class="block text-sm font-medium text-gray-700">Comment <span class="text-red-500">*</span></label>
                                <textarea type="text" id="comments" name="comments" class="border border-gray-300 rounded-md w-full p-2" required></textarea>
                            </div>
                            <button type="submit" class="w-full bg-emerald-600 text-white p-2 rounded hover:bg-blue-700">Submit</button>
                        </form>
                    </div>
            
                    <!-- Modal Footer -->
                    <div class="flex justify-end pt-2">
                        <button class="close_modal bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">Close</button>
                    </div>
                </div>
            </div>


        <!-- Main modal -->
        <div id="crypto-modal" tabindex="-1" aria-hidden="true"
            class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full backdrop-blur transition-all">
            <div class="relative w-full max-w-md max-h-full">
                <!-- Modal content -->
                <div class="relative rounded-lg shadow bg-cyan-700">
                    <button type="button"
                        class="absolute top-3 right-2.5 bg-transparent  rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center hover:bg-gray-600 hover:text-white"
                        data-modal-hide="crypto-modal">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                    <!-- Modal header -->
                    <div class="px-6 py-2 border-b rounded-t dark:border-gray-600">
                        <h3 class="text-base font-semibold lg:text-xl text-white">
                            Wallet Top-up
                        </h3>
                    </div>
                    <!-- Modal body -->
                    <div class="p-4">
                        <h3 class="text-xl font-medium text-gray-900 dark:text-white">Minimun Top-up Amount is ₦500</h3>
                        <p class="p-2 bg-pale-200 rounded text-sm font-normal text-gray-500 dark:text-gray-400">Note:
                            Every Funding will be Charge from your Wallet Balance and will be recoded.</p>
                        <form class="space-y-6" id="formm" method="POST" action="" role="form">
                            <div>
                                <label for="amount" class="block mb-2 text-sm font-medium text-white">Enter the amount
                                    you will like to top-up.</label>
                                <input type="number" name="amount" id="amount"
                                    class="border text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 bg-gray-600 border-gray-500 placeholder-gray-400 text-white"
                                    placeholder="e.g 500" required>
                            </div>

                            <button id="pay_btn" type="submit" name="update_wallet"
                                class="w-full text-white focus:ring-4 focus:outline-none  font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-blue-600 hover:bg-blue-700 focus:ring-blue-800">Fund
                                Wallet</button>

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




        <div class="grid grid-cols-1 gap-4 mb-4 ">

            <div
                class="relative flex flex-col h-full min-w-0 break-words bg-emerald-500 border-0 shadow-soft-xl rounded bg-clip-border">
                <div
                    class="relative py-3 px-3 flex flex-col min-w-0 break-words bg-emerald-800 border-0 shadow-soft-xl rounded bg-clip-border">
                    <!-- <div class="p-6 mt-0 bg-white rounded-t-2xl"> -->
                    <h6 class="text-sm text-white">Recent Services Performed</h6>
                    <hr class="h-px bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent" />
                    <!-- </div> -->
                    <div class="table-responsive text-gray-400" style="font-size: 12px !important;">
                        <table class="table table-flush text-white datatable text-sm " datatable id="datatable-search"
                            style="font-size: 12px !important; padding: 0;">
                            <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <!-- <th>User ID</th> -->
                                    <th>User Email</th>
                                    <!--<th>Service</th>-->
                                    <th>Sub-service</th>
                                    <!-- <th>Type</th> -->
                                    <th>Email address</th>
                                    <th>Whatsapp No / link</th>
                                    <th>NIN number / Old Tracking ID</th>
                                    <th>New Tracking ID</th>
                                    <th>Comment</th>
                                    <th>Status</th>
                                    <!-- <th>Document (1)</th>
                                    <th>Document (2)</th> -->
                                    <th>Date Submitted</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                // $jamb_services = Jamb::find_by_query("SELECT * FROM jamb WHERE status = 0");
                                
                                $i = 1;
                                foreach ($validation_services as $validation_service):

                                    ?>
                                    <tr class='hover:bg-sky-300 hover:text-emerald-950'>

                                        <td>
                                            <?= $i ?>
                                        </td>
                                        <!-- <td>
                                            <?= $validation_service->user_id ?>
                                        </td> -->
                                        <td>
                                            <?= User::find_by_id($validation_service->user_id)->email ?>
                                        </td>
                                        <!--<td>-->
                                        <!--    <?= Service::find_by_id($validation_service->service_id)->service_name ?>-->
                                        <!--</td>-->
                                        <td>
                                            <?= $validation_service->sub_service ?>
                                        </td>
                                        <!-- <td>
                                            <?= $validation_service->type ?>
                                        </td> -->
                                        <td>
                                            <?= $validation_service->profile_code ?>
                                        </td>
                                        <td>
                                            <?= $validation_service->jamb_year ?>
                                        </td>
                                        <td>
                                            <?= $validation_service->fullname ?>
                                        </td>
                                        <td>
                                            <?= $validation_service->new_tracking_id ?>
                                        </td>
                                        <td>
                                            <?= $validation_service->comment ?>
                                        </td>
                                        <td>

                                            <?php

                                            if ($validation_service->status == 1) {
                                                echo '<span class="badge badge-lg bg-gradient-to-tl from-green-600 to-lime-400">Done</span>';
                                            } else if ($validation_service->status == 0) {
                                                echo '<span
                                        class="badge badge-lg bg-gradient-to-tl from-yellow-600 to-yellow-400">Pending</span>';
                                            } else {
                                                echo '<span
                                            class="badge badge-lg bg-red-500">Failed</span>';
                                            } ?>
                                        </td>
                                        <!-- <td>
                                            <?php if ($validation_service->doc_1 != ''): ?>
                                                <button data-file='<?= $validation_service->doc_1 ?>'
                                                    class="p-1 rounded bg-blue-500 download_doc">Download</button>
                                            <?php endif; ?>

                                        </td>
                                        <td>
                                            <?php if ($validation_service->doc_1 != ''): ?>
                                                <button data-file='<?= $validation_service->doc_2 ?>'
                                                    class="p-1 rounded bg-blue-500 download_doc">Download</button>
                                            <?php endif; ?>
                                        </td> -->
                                        <td>
                                            <?= $validation_service->submitted_date ?>
                                        </td>
                                        <td>
                                            <?php
                                            if ($validation_service->status == 0): ?>
                                                <?php if ($validation_service->sub_service == 'NIN validation'): ?>
                                                    <!--<button data-id="<?= $validation_service->id ?>" data-type="done"-->
                                                    <!--    class="rounded p-1 bg-green-500 change_status">Done</button>-->
                                                <?php endif; ?>
                                                    <button data-id="<?= $validation_service->id ?>" data-type="failed"
                                                        class="rounded p-1 bg-red-500 change_status">Failed</button>

                                                <?php if ($validation_service->sub_service == 'IPE clearing'): ?> 
                                                    <button data-id="<?= $validation_service->id ?>" data-sub-service="<?= $validation_service->sub_service ?>" class="open-modal-btn rounded p-1 bg-blue-500">Update Tracking ID</button>
                                                <?php endif ?>
                                                <?php if ($validation_service->sub_service == 'NIN validation'): ?> 
                                                    <button data-id="<?= $validation_service->id ?>" data-sub-service="<?= $validation_service->sub_service ?>" class="open-modal-btn rounded p-1 bg-blue-500">Add Comment</button>
                                                <?php endif ?>
                                            <?php endif ?>
                                        </td>

                                    </tr>
                                    <?php $i++;
                                endforeach; ?>
                            <tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>


    </div>



</div>
<script>




    $(document).on("click", ".download_doc", function (e) {

        e.preventDefault()

        var file_name = $(this).data('file')
        var file_path = "<?= ROOT_URL ?>/jamb_docs/" + file_name


        download(file_path, file_name)



    })

    function download(url, filename) {

        //window.open(url)
        //return false
        var link = document.createElement('a');
        link.href = url;
        link.download = filename;
        link.target = "_blank"; 
        link.style.display = "none"; 
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

    }
</script>

<script>
    $(document).on('click', '.change_status', function () {

        var id = $(this).data('id')
        var type = $(this).data('type')

        var data = {
            id,
            type
        }

        $.ajax({
            url: "../main_includes/components/change_val_status.php",
            data: data,
            method: "POST",
            success: function (res) {


                if (res.response_code == '00') {

                    // iziToast.success({
                    //     title: 'OK',
                    //     message: res.message,
                    //     position: "topRight", 
                    //     balloon: true 
                    // });

                    window.location.reload()
                    
                } else {
                    $("#personal_detail").fadeOut("slow");  
                    window.location.reload()

                    // iziToast.error({
                    //     title: 'Error',
                    //     message: res.message,
                    //     position: "topRight",
                    //     balloon: true
                    // });
                }

            }

        })

    })
</script>

<script>

$(document).on('click', '.open-modal-btn', function() {
    var validationId = $(this).data('id');
    var subService = $(this).data('sub-service');
    
    $('#trackingForm').attr('data-id', validationId); 
    $('#sub-service-info').text('Update ' + subService + ' ' + 'Status');    
    $('#custom-modal').removeClass('hidden'); 
    
    if(subService === 'NIN validation' ){
        $('#new_tracking_id').addClass('hidden');    
    }
    if(subService === 'NIN validation' ){
        $('#label').addClass('hidden');    
    }
});

// Hide modal
$(document).on('click', '.close_modal', function() {
    $('#custom-modal').addClass('hidden'); 
});

// Handle form submission via AJAX
// $(document).on('submit', '#trackingForm', function(e) {
//     e.preventDefault();
    
//     var validationId = $(this).data('id');
//     var newTrackingId = $('#new_tracking_id').val();

//     $.ajax({
//         url: '../main_includes/components/update_tracking_id.php', // Adjust the path to your handler
//         method: 'POST',
//         data: {
//             id: validationId,
//             input_info: newTrackingId // Input name matches what is being sent
//         },
//         success: function(response) {
//             var res = JSON.parse(response);
//             if (res.response_code === '00') {
//                 alert(res.message); // Success message
//                 window.location.reload(); // Reload page to reflect changes
//             } else {
//                 alert(res.message); // Error message
//             }
//         },
//         error: function() {
//             alert('Error submitting form.');
//         }
//     });
// });

</script>


<script>

$(document).on('submit', '#trackingForm', function(e) {
    e.preventDefault();
    
    var validationId = $(this).data('id');
    var newTrackingId = $('#new_tracking_id').val();
    var comment = $('#comments').val();

    $.ajax({
        url: '../main_includes/components/update_tracking_id.php',
        method: 'POST',
        data: {
            id: validationId,      
            tracking_id: newTrackingId, 
            the_comment: comment     
        },
        success: function(response) {
            var res = JSON.parse(response);
            if (res.response_code === '00') {
               
                $.ajax({
                    url: '../main_includes/components/change_val_status.php',
                    method: 'POST',
                    data: {
                        id: validationId,
                        type: 'done'
                    },
                        success: function(statusRes) {
                            var statusData = JSON.parse(statusRes);
                            if (statusData.response_code === '00') {
                                    iziToast.success({ 
                                    title: 'OK',
                                    message: 'Submitted Successfully!',  
                                    position: "topRight",
                                    balloon: true
                                });                                
                            window.location.reload(); 
                        } else {
                            alert('Error updating status: ' + statusData.message);
                        }
                    },
                    error: function() {
                        alert('Error updating status.');
                    }
                });
            } else {
                alert('Error updating Tracking ID: ' + res.message);
            }
        },
        error: function() {
            alert('Error submitting form.');
        }
    });
});


</script>