@extends('app')

@section('page_title')
    Admin Users
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ elixir('css/datatables.css') }}">
    <style>
        /*.buttons-reset{*/
            /*margin-left: 8px;*/
        /*}*/

        /*.create_btn{*/
        /*    position: relative;*/
        /*    bottom: -35px;*/
        /*}*/
    </style>
@endpush

@section('page_content')
    <div class="page-content container">
        <div class="row">
            <div class="col-md-12 ">
                <div class="panel" id="exampleWizardForm">
                    <div class="panel-heading">
                        <div class="panel-title" style="margin-bottom: 20px;">
                            <i>Manage User Accounts</i>
                            <span class="float-right" style="float: right"><button class="btn btn-primary" id="create_btn">create</button> </span>
                        </div>

                        @if(session('error'))
                            <div class="alert alert-danger">
                                <ul>
                                    <li>{{ session('error') }}</li>
                                </ul>
                            </div>
                        @endif

                        @if(session('success'))
                            <div class="alert alert-success">
                                <ul>
                                    <li>{{ session('success') }}</li>
                                </ul>
                            </div>
                        @endif

                    </div>


                    <div class="panel-body table table-responsive">
                            <div class="table table-responsive overflow-scroll">
                                {!! $dataTable->table([],true) !!}
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ elixir('js/datatables.js') }}"></script>
    <script src="{{asset('vendor/datatables/buttons.server-side.js')}}"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    {!! $dataTable->scripts() !!}

<script>
    $(document).ready( function () {
        // Secure OTP system - no more exposed secrets
        let currentSessionToken = null;
        let currentAction = null;

        // OTP to reset user password
        $("#dynamicusers-table").on('click','#reset_pass_btn', function(e){
            var user_id = $(this).attr('href')
            e.preventDefault();

            currentAction = 'reset_password';
            handleSecureOTP(user_id, 'reset_password');
        })

        // OTP to lock user
        $("#dynamicusers-table").on('click','#lock_btn', function(e){
            var lock_id = $(this).attr('href')
            e.preventDefault();

            currentAction = 'lock';
            handleSecureOTP(lock_id, 'lock');
        })

        // OTP to delete user
        $("#dynamicusers-table").on('click','#delete_btn', function(e){
            var delete_id = $(this).attr('href')
            e.preventDefault();

            currentAction = 'delete';
            handleSecureOTP(delete_id, 'delete');
        })

        // OTP to edit user
        $("#dynamicusers-table").on('click','#edit_btn', function(e){
            var edit_id = $(this).attr('href')
            e.preventDefault();

            currentAction = 'edit';
            handleSecureOTP(edit_id, 'edit');
        })

        // OTP to create user
        $('#create_btn').on('click', function (e){
            e.preventDefault();

            currentAction = 'create';
            handleSecureOTP('', 'create');
        })

        // Handle secure OTP flow
        function handleSecureOTP(id, action) {
            // Step 1: Generate session
            $.ajax({
                url: '{{ route("dynamic.users.session.generate") }}',
                method: 'POST',
                data: {
                    action: action,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        currentSessionToken = response.session_token;

                        // Step 2: Send OTP
                        $.ajax({
                            url: '{{ route("dynamic.users.otp.send") }}',
                            method: 'POST',
                            data: {
                                session_token: currentSessionToken,
                                _token: $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(otpResponse) {
                                if (otpResponse.success) {
                                    let userOtp = prompt('An OTP has been sent to the Admin\'s account. \nEnter OTP received Via SMS');
                                    if (userOtp) {
                                        verifySecureOTP(userOtp, action, id);
                                    }
                                } else {
                                    // Check for specific rate limit error
                                    if (otpResponse.message && otpResponse.message.includes('Too many OTP requests')) {
                                        alert('Rate limit exceeded. You can only request 3 OTPs per hour. Please wait or try again later.');
                                    } else {
                                        alert(otpResponse.message || 'Request for OTP failed. Please try again.');
                                    }
                                }
                            },
                            error: function(xhr) {
                                // Check for rate limit error in response
                                if (xhr.status === 429) {
                                    alert('Rate limit exceeded. You can only request 3 OTPs per hour. Please wait or try again later.');
                                } else {
                                    alert('Request for OTP failed. Please refresh the page and try again or check your internet connection.');
                                }
                            }
                        });
                    } else {
                        alert('Failed to generate session. Please try again.');
                    }
                },
                error: function() {
                    alert('Failed to generate session. Please try again.');
                }
            });
        }

        // Verify secure OTP
        function verifySecureOTP(userOtp, action, id) {
            $.ajax({
                url: '{{ route("dynamic.users.otp.verify") }}',
                method: 'POST',
                data: {
                    session_token: currentSessionToken,
                    otp: userOtp,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        // Execute the action based on type
                        executeSecureAction(action, id, userOtp);
                    } else {
                        alert(response.message || 'Invalid OTP. Please try again.');
                        // Allow retry
                        let retryOtp = prompt('Wrong OTP! Try again. \nEnter OTP received Via SMS');
                        if (retryOtp) {
                            verifySecureOTP(retryOtp, action, id);
                        }
                    }
                },
                error: function() {
                    alert('Failed to verify OTP. Please try again.');
                }
            });
        }

        // Execute secure action
        function executeSecureAction(action, id, otp) {
            // All actions now redirect to legacy endpoints with otp=verified

            switch(action) {
                case 'create':
                    // For create, we need to redirect to the create form
                    // The OTP verification is already done, so we can just redirect to the form
                    window.location.href = '{{ route("dynamic.users.create", ["otp" => "verified"]) }}';
                    break;

                case 'edit':
                    // For edit, we need to redirect to the edit form
                    // The OTP verification is already done, so we can just redirect to the form
                    window.location.href = '{{ route("dynamic.users.edit", ["id" => "PLACEHOLDER_ID", "otp" => "verified"]) }}'.replace('PLACEHOLDER_ID', id);
                    break;

                case 'delete':
                    // For delete, we need to redirect to the delete endpoint
                    // The OTP verification is already done, so we can just redirect to the legacy endpoint
                    window.location.href = '{{ route("dynamic.users.delete", ["id" => "PLACEHOLDER_ID", "otp" => "verified"]) }}'.replace('PLACEHOLDER_ID', id);
                    break;

                case 'lock':
                    // For lock, we need to redirect to the lock endpoint
                    // The OTP verification is already done, so we can just redirect to the legacy endpoint
                    window.location.href = '{{ route("dynamic.users.lock", ["id" => "PLACEHOLDER_ID", "otp" => "verified"]) }}'.replace('PLACEHOLDER_ID', id);
                    break;

                case 'reset_password':
                    // For reset password, we need to redirect to the reset password endpoint
                    // The OTP verification is already done, so we can just redirect to the legacy endpoint
                    window.location.href = '{{ route("dynamic.users.sendResetLink", ["id" => "PLACEHOLDER_ID", "otp" => "verified"]) }}'.replace('PLACEHOLDER_ID', id);
                    break;
            }

            // All actions now redirect to legacy endpoints with otp=verified
            // The AJAX call logic is no longer needed since we're redirecting
        }

        // Cleanup session when page unloads
        $(window).on('beforeunload', function() {
            if (currentSessionToken) {
                $.ajax({
                    url: '{{ route("dynamic.users.session.cleanup") }}',
                    method: 'POST',
                    data: {
                        session_token: currentSessionToken,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    async: false
                });
            }
        });
    })
</script>


    <script>
        $( document ).ready(function() {
            $('#dataTableBuilder')
                .on('preXhr.dt', function ( e, settings, data ) {
                    data.status = $('#status').val();
                    data.type = $('#type').val();
                    data.from_date= $('#from_date').val();
                    data.to_date= $('#to_date').val();
                });

            $('#submit').click(function (e) {
                e.preventDefault();
                $('#dataTableBuilder').DataTable().ajax.reload();

            })

            const table = $('#dataTableBuilder');
            table.removeAttr("style").css({'width': '120%', 'max-width': ''});

        });

    </script>
@endpush