@extends('layouts.mainlayout')
@section('title', 'Users')
@section('main')
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<!-- Single item selection -->
<style>
.tooltips {
  position: relative;
  display: inline-block;
}
.tooltips .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltips:hover .tooltiptext {
  visibility: visible;

}
span.tooltiptexts {
    position: absolute;
    padding: 10px;
    background-color: #fff;
    box-shadow: 1px 1px 3px gray;
    right: 35px;
    bottom: -16px;
    width: 100px;
    display: none;
}
#data_display_table tbody td:nth-child(2){
    position: relative;
    box-shadow: 1px 5px rgb(187 185 185 / 50%);
    background-color: #f8f8f8;
}
/* Container for the switch */
.switch-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base styles for the switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide the default checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Slider styling */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

/* Slider before styling */
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    border-radius: 50%;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}


</style>
<div class="card">
    <div class="row">
        <div class="modal fade" id="users_view_modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" id="modal_content_view"></div>
            </div>
        </div>
    </div>
    <div class="card-header header-elements-inline d-flex justify-content-between">
        <h5 class="card-title icon-vcard font-weight-bold">User Details</h5>
        @if(auth()->user()->can('Edit Users module'))
            <div>
                <a href="{{ route('user-tab.create') }}" class="btn btn-success mr-2">
                    <i class="icon-plus2"></i> Add New
                </a>

                <button class="btn btn-primary"
                        data-toggle="modal"
                        data-target="#importUsersModal">
                    <i class="icon-upload"></i> Import
                </button>
            </div>
        @endif
    </div>
        <input type="hidden" name="deleteroute" id="deleteroute" value="{{route('deleteuser')}}">
        <input type="hidden" class="checkboxroute" name="checkboxroute" id="checkboxroute" value="{{route('updateCheckbox')}}">
        <input type="hidden" name="show" id="show" value="{{route('showoptions')}}">

    <table class="table table-hover" id="data_display_table">
        <thead>
            <tr>
                <th class="no-sort">Profile Pic</th>
                <th>Name</th>
                <th>Id</th>
                <!-- <th>User Id</th> 
                <th>userName</th> -->
                <th>Reporting to</th>
                <th>Role</th>
                <th>Team</th>
                <th>DOJ</th>
                <th>DOE</th>
                <th>Biometric Status</th>
                    
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
<div class="modal fade" id="biometricMachineModal" tabindex="-1">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Select Biometric Machines</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <div class="modal-body">

        <!-- Select All -->
        <div class="form-check mb-2">
          <input type="checkbox" id="select_all" class="form-check-input">
          <label class="form-check-label"><strong>Select All</strong></label>
        </div>

        <hr>

        <!-- Machine List -->
        <div id="machine_list" style="max-height:250px; overflow-y:auto;">
        </div>

      </div>

      <div class="modal-footer">
        <button class="btn btn-light" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary" id="confirmMachine">Confirm</button>
      </div>

    </div>
  </div>
</div>
<!-- /Single item selection -->

<!-- Import Users Modal -->
<div class="modal fade" id="importUsersModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <form action="{{ route('employees.import') }}"
              method="POST"
              enctype="multipart/form-data">
            @csrf

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Import Users via Excel</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                        {{-- IMPORT ERRORS --}}
                        @if(session('import_errors'))
                            <div class="alert alert-danger">
                                <strong>Import failed due to following errors:</strong>
                                <ul class="mb-0">
                                    @foreach(session('import_errors') as $failure)
                                        <li>
                                            <strong>Row {{ $failure->row() }}:</strong>
                                            {{ implode(', ', $failure->errors()) }}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                    <div class="form-group">
                        <label>Select Excel File</label>
                        <input type="file"
                            name="file"
                            class="form-control"
                            accept=".xlsx,.csv"
                            required>
                    </div>


                    <!-- Instructions -->
                    <div class="mt-3 p-3 bg-light rounded text-muted fs-6">
                        <strong class="text-dark">Instructions:</strong><br>
                        • Upload only <b>.xlsx</b> Excel files<br>
                        • No field should be left <b>empty</b><br>
                        • <b>Unique Fields</b>: Email, Personal Email, Mobile Number, Employee ID, Biometric ID<br>
                        • <b>Attendance Request Platform</b> should be set to <b>Self Service</b> by default<br>
                        • Descriptive <b>error messages</b> will be shown if the upload fails
                    </div>

                    <!-- Sample Download -->
                    <a href="{{ route('employees.import.sample') }}"
                    class="btn btn-success btn-sm mt-2 d-inline-flex align-items-center">
                        <i class="bi bi-file-earmark-excel me-2"></i>
                        ⬇ Download Sample File
                    </a>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        Import
                    </button>
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">
                        Cancel
                    </button>
                </div>
            </div>`
        </form>
    </div>
</div>

@endsection
{{-- Styles Section --}}
@section('styles')
    <link href="{{ asset('global_assets/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endsection


{{-- Scripts Section --}}
@section('js')
@if(session('import_errors'))
<script>
    $(document).ready(function () {
        $('#importUsersModal').modal('show');
    });
</script>
@endif
    {{-- vendors --}}
    <script src="{{ asset('global_assets/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    
                <script type="text/javascript">
                    // var BIOMAX_SERIAL_NUMBER = "{{ env('BIOMAX_SERIAL_NUMBER') }}";
                    let selectedUser = null;
                $(document).ready(function(){
                        // Setup CSRF token for AJAX requests
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });
                        var table = $('#data_display_table').DataTable({
                            "aLengthMenu": [25, 50, 75, 100],
                            "pageLength": 25,
                            "processing": true,
                            "pagination":true,
                            "serverSide": true,
                            "autoWidth": false,
                            "destroy":true,
                            "ajax":{
                                url :"{{route('userlistdata')}}", // json datasource
                                type: "get",  // type of method  , by default would be get
                                error: function(e){  // error handling code
                                    $("#data_display_table").css("display","none");
                                    document.getElementById("data_display_table_info").innerHTML = "No User Found"
                                },
                                "dataSrc": function ( json ) {
                                    console.log("Data received from the server:", json);
                                    $("#data_display_table").css("display","block");
                                    // console.log(json);
                                    return json.data;
                                },
                            },
                            "language": {
                                "emptyTable": "No Records Available."
                            },
                            "columnDefs": [
                                { targets: 'no-sort', orderable: false },
                                { "width": "6%", "targets": 0 },
                                { "width": "15%", "targets": 1 },
                                { "width": "8%", "targets": 2 },
                                { "width": "10%", "targets": 3 },
                                { "width": "10%", "targets": 4 },
                                { "width": "10%", "targets": 5 },
                            ],
                            "order": [[ 1, 'asc' ]],
                            "columns": [
                                { "data": "profile_image" },
                                { "data": "name" },
                                // { "data": "username" },
                                // { "data": "employee_id" },
                                { "data": "user_id" },
                                { "data": 'reporting_to' },
                                { "data": "role" },
                                { "data": "team" },
                                { "data": "DOJ" },
                                { "data": "DOE"},
                                {
                                    "data": null,
                                    "render": function(data, type, row) {
                                        console.log("Data object:", data);
                                        console.log("Row object:", row);
                                        console.log("Biomax status:", data.biomax_status);

                                        // Set checkbox to checked if biomax_status is 1
                                        var checked = data.biomax_status == 1 ? 'checked' : '';
                                        
                                        return `
                                            <input type="checkbox" class="status_toggle" ${checked}
                                              data-toggle="toggle"
                                                data-onstyle="success" 
                                                data-offstyle="danger" 
                                                data-user_id="${row.user_id}" 
                                                data-name="${row.username}"
                                              >

                                        `;
                                    },
                                    "orderable": false,
                                    "width": "10%"
                                }
                            ],
                            "fnDrawCallback": function() {
                              $('.status_toggle')
  .off('switchChange.bootstrapSwitch')
  .on('switchChange.bootstrapSwitch', function(event, state) {

    var $this = $(this);
    var Id = $(this).data('user_id');
    var Name = $(this).data('name');

    // ❌ STOP toggle from changing immediately
    $this.bootstrapSwitch('state', !state, true);

    if (state) {

        selectedUser = {
            id: Id,
            name: Name
        };

        $.get("{{ route('getBiometricDevices') }}", function (data) {

            let html = '';

            data.forEach(function (device) {
                html += `
                  <div class="d-flex align-items-start mb-2 p-2 border rounded">
                    <input type="checkbox" class="machine_checkbox mr-2 mt-1"
                      value="${device.machine_id}">
                    <div>
                      <strong>${device.machine_name}</strong><br>
                      <small>${device.machine_id}</small>
                    </div>
                  </div>
                `;
            });

            $('#machine_list').html(html);
            $('#biometricMachineModal').modal('show');

        });

    } else {
        biomaxdelete(Id);

        // update DB directly when OFF
        $.post("{{ route('updateBiometricStatus') }}", {
            user_id: Id,
            state: 0
        });

        $this.bootstrapSwitch('state', false, true);
    }
                                        });
                                        // Apply switch functionality after data reload
                                            table.on('draw', function() {
                                                $('.status_toggle').bootstrapSwitch(); // Reapply bootstrapSwitch to new rows
                                            });
                                            $.each($('.sm_toggle'), function () {
                                                var current_id = $(this).attr('id');
                                                new Switchery(document.querySelector('#'+current_id), { size: 'small',color: '#54B564', secondaryColor: '#ff8086',jackColor: '#fff' });
                                            });
                                            $.each($('.sm_toggle_checked'), function () {
                                            var current_id = $(this).attr('id');
                                            new Switchery(document.querySelector('#'+current_id), { size: 'small',color: '#54B564', jackColor: '#fff' , secondaryColor: '#ff8086'});
                                            });
                            },

                        });
                        table.columns().every(function () {
                            var table = this;
                            $('input', this.header()).on('keyup change', function () {
                                if (table.search() !== this.value) {
                                    table.search(this.value).draw();
                                }
                            });
                        });
                            $(".dataTables_wrapper").removeClass("form-inline");
                            $(".dataTables_paginate .pagination").addClass("float-right");
                            var cur = $(".btn-secondary");
                            cur.remove();
                            //document.getElementByName("data_display_table_length").style.width = "50px";
                            $(".custom-select-sm").removeClass();
                            $(function () {


                                
                            });
                });
    
function viewajaxLoad(filename, content) {
    $.ajaxSetup({
        headers: { 'X-CSRF-Token' : $('meta[name=csrf-token]').attr('content') }
    });
    content = typeof content !== 'undefined' ? content : 'content';
    $('.loading').show();
    $.ajax({
        type: "GET",
        url: filename,
        contentType: false,
        success: function (data) {
            //window.location.reload();
            $("#" + content).html(data);
            $('.loading').hide();
        },
        error: function (xhr, status, error) {
            alert(xhr.responseText);
        }
    });
}
$('#users_view_modal').on('show.bs.modal', function (e) {
    var button = $(e.relatedTarget);
    viewajaxLoad(button.data('href'), 'modal_content_view');
});
$('#users_view_modal').on('shown.bs.modal', function () {
    $('#focus').trigger('focus')
});
function deleteUser(id,isused)
{
    
    
    if(isused == '1')
    {
        var notice =  new PNotify({
                                    title: 'Error',
                                        text: 'The User is Reporting Manager for another user',
                                        delay:1500,
                                        hide: true,
                                    });
        return false;
        
    }
    else
    {
        var r = confirm("Are you sure, you want to delete this User?");
    }
  if (r == false) {
    return false;
  } 
    var url = document.getElementById("deleteroute").value;
    $.ajax({
        type: "GET",
        url: url,
        data: {id:id},
        success: function (response) {
            //window.location.reload();
            
            var notice =  new PNotify({
                                    title: 'Message',
                                        text: 'User Deleted successfully!',
                                        hide: true,
                                        delay:1500,
                                        type:'success',
                                    });
            
            if (response.success_flag == 1) {
                    //show_notification_message('success',response.success_message);
                    //hide_page_block_loader();
                    setTimeout(function(){
                        window.location.reload();
                    }, 1500);
                  }
            else
            {
                //show_notification_message('danger',response.success_message);
            }
            
        },
        error: function (xhr, status, error) {

            alert(xhr.responseText);
        }
    });
}
function updateCheckbox(id){
    var url = document.getElementById("checkboxroute").value;
    $.ajax({
        type: "POST",
        url: url,
        data: {id:id},
        success: function (response) {
            var checkboxRouteText = $("#" + id + "_status").text();
            console.log(checkboxRouteText);
            if ($("#" + id + "_status").text() === "Deactivate User") {
                $("#" + id + "_status").text("Activate User");
            }else if($("#" + id + "_status").text() === "Activate User"){
                $("#" + id + "_status").text("Deactivate User");
            }
        }
    });
}

function showoptions(id){
    $(document).find('.ellipsis-button_'+id).toggle();
    var url = document.getElementById("show").value;
    $.ajax({
        type: "GET",
        url: url,
        data: {id:id},
        success: function (response) {
            
       }
    });
}
//ADDED THE USER TO THE BIOMAX SOFTWARE THAN SOFTWARE TO MACHINE
function saveDataToBiomaxx(user_id, name, machines){
    var cleanedName = name.trim().replace(/^"|"$/g, "");
    //  console.log(cleanedName);
    var userData = {
        "StaffCode": user_id,
        "StaffName": cleanedName,
        "Gender": "Male",
        "Status": "Working",
        "CompanySName": "Default",
        "DepartmentSName": "Default",
        "Location": "Default",
        "Designation": "Default",
        "Grade": "Default",
        "Team": "Default",
        "DOJ": "2021-04-28",
        "DOC": "2021-09-15",
        "DOB": "1987-06-01",
        "DOR": "3000-01-01"
    };

    console.log("StaffCode:", userData.StaffCode);
    console.log("StaffName:", userData.StaffName);

    $.ajax({
        url: '/biomax_proxy.php',
        type: 'POST',
        data: JSON.stringify(userData),
        contentType: 'application/json',
        success: function(response) {
            var jsonResponse = JSON.parse(response);
            if (jsonResponse.success) {
                new PNotify({
                    title: 'Success',
                    text: jsonResponse.success,
                    type: 'success',
                    hide: true,
                    delay: 1500
                });

                // Prepare data to be sent as URL parameters
                var uploadData = {
                    SerialNumbers: machines.join(','),
                    EmployeeCode: user_id,
                    EmployeeName: cleanedName,
                    CardNumber: "",
                };

                // Encode the upload data as query parameters
                var queryString = $.param(uploadData); // Correctly encodes the parameters
                console.log("Upload Data:", uploadData);  // Log for debugging

                // Make the AJAX request to upload the data
                $.ajax({
                    url: '/biomax_upload.php',
                    type: 'POST',
                    data: uploadData,  // Send data as POST body
                    success: function(uploadResponse) {
                        console.log("Upload Response:", uploadResponse); 
                        try {
                            var uploadJsonResponse = JSON.parse(uploadResponse);
                            
                            if (uploadJsonResponse.success) {
                                // Notify the user of a successful upload
                                new PNotify({
                                    title: 'Success',
                                    text: 'User successfully uploaded to Biomax!',
                                    type: 'success',
                                    hide: true,
                                    delay: 1500
                                });
                            } else if (uploadJsonResponse.error) {
                                // Notify the user of an error response from the server
                                new PNotify({
                                    title: 'Error',
                                    text: uploadJsonResponse.error,
                                    type: 'error',
                                    hide: true,
                                    delay: 1500
                                });
                            }
                        } catch (e) {
                            // Handle cases where the response is not valid JSON
                            console.error("Error parsing JSON response:", e);
                            new PNotify({
                                title: 'Error',
                                text: 'Invalid response from server.',
                                type: 'error',
                                hide: true,
                                delay: 1500
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('XHR:', xhr);
                        console.error('Status:', status);
                        console.error('Error:', error);
                        console.error('Response Text:', xhr.responseText);

                        // Notify the user of a request failure
                        new PNotify({
                            title: 'Error',
                            text: 'Failed to upload user data to Biomax!',
                            type: 'error',
                            hide: true,
                            delay: 1500
                        });
                    }
                });  // End of the second $.ajax call
            }
        },
        error: function(xhr, status, error) {
            console.error('XHR:', xhr);
            console.error('Status:', status);
            console.error('Error:', error);
            console.error('Response Text:', xhr.responseText);

            // Notify the user of a request failure
            new PNotify({
                title: 'Error',
                text: 'Failed to save user data to Biomax!',
                type: 'error',
                hide: true,
                delay: 1500
            });
        }
    });  // End of the first $.ajax call
}  // End
function biomaxdelete(user_id) {
    var uploadData = {
        SerialNumbers: "",
        EmployeeCode: user_id
    };

    console.log("Deleting data from Biomaxx:", uploadData);  // Debugging log

    $.ajax({
        url: '/biomax_delete.php',
        type: 'POST',
        data: uploadData,
        success: function(response) {
            console.log("Delete Response:", response);
            try {
                var jsonResponse = JSON.parse(response);
                if (jsonResponse.success) {
                    new PNotify({
                        title: 'Success',
                        text: 'User successfully deleted from Biomaxx!',
                        type: 'success',
                        hide: true,
                        delay: 1500
                    });
                } else if (jsonResponse.error) {
                    new PNotify({
                        title: 'Error',
                        text: jsonResponse.error,
                        type: 'error',
                        hide: true,
                        delay: 1500
                    });
                }
            } catch (e) {
                console.error("Error parsing JSON response:", e);
                new PNotify({
                    title: 'Error',
                    text: 'Invalid response from server.',
                    type: 'error',
                    hide: true,
                    delay: 1500
                });
            }
        },
        error: function(xhr, status, error) {
            console.error('XHR:', xhr);
            console.error('Status:', status);
            console.error('Error:', error);
            console.error('Response Text:', xhr.responseText);
            new PNotify({
                title: 'Error',
                text: 'Failed to delete user data from Biomaxx!',
                type: 'error',
                hide: true,
                delay: 1500
            });
        }
    });
}



$(document).mouseup(function (e) {
    var container = $("span.tooltiptexts");
    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide ();
    }
});
// Select all toggle
$(document).on('change', '#select_all', function () {
  $('.machine_checkbox').prop('checked', this.checked);
});
$(document).on('change', '.machine_checkbox', function () {

  let total = $('.machine_checkbox').length;
  let checked = $('.machine_checkbox:checked').length;

  $('#select_all').prop('checked', total === checked);
});

$(document).on('click', '#confirmMachine', function () {

  let selectedMachines = $('.machine_checkbox:checked').map(function(){
    return $(this).val();
  }).get();

  if (selectedMachines.length === 0) {
    new PNotify({
      title: 'Error',
      text: 'Please select at least one machine',
      type: 'error',
      hide: false
    });
    return;
  }

  $('#biometricMachineModal').modal('hide');

  if (!selectedUser) return;

  //  NOW update DB
  $.post("{{ route('updateBiometricStatus') }}", {
      user_id: selectedUser.id,
      state: 1
  });

  //  NOW call biomax
  saveDataToBiomaxx(selectedUser.id, selectedUser.name, selectedMachines);

  //  NOW turn toggle ON visually
  $('.status_toggle[data-user_id="'+selectedUser.id+'"]')
    .bootstrapSwitch('state', true, true);
});
</script>
@endsection