@extends('front.layouts.app-auth')

@section('content')

<!-- Breadcrumbs -->
@include('front.components.breadcrumbs', ['currentPage' => 'Settings'])

<div class="container-fluid px-0 settings-container">
    <div class="mb-3">
        <h2 class="mb-1">Settings</h2>
        <p class="text-muted mb-0">Manage your payment configurations and account preferences.</p>
    </div>

    <div class="col-md-8">
        <div class="card shadow-sm settings-card">
            <div class="card-header bg-light settings-card-header">
                <div class="d-flex align-items-center gap-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-primary rounded mr-3 settings-header-icon">
                        <i class="fa fa-credit-card text-white" aria-hidden="true"></i>
                    </div>
                    <div>
                        <h5 class="mb-0">Bank Account Settings</h5>
                        <small class="text-muted">Configure your bank account details for receiving eCheck payouts from campaign contributions</small>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('front.settings.update_payment_settings') }}">
                    @csrf
                    <!-- Bank Account Details for Payout -->
                    <div class="row g-4">
                        <div class="col-12">
                            <label for="bank_account_holder_name" class="form-label mb-2">Account Holder Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control no-copy-paste @error('bank_account_holder_name') is-invalid @enderror" id="bank_account_holder_name" name="bank_account_holder_name" placeholder="Account Holder Name" value="{{ old('bank_account_holder_name', $settings->bank_account_holder_name ?? '') }}">
                            @error('bank_account_holder_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="bank_account_number" class="form-label mb-2">Account Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control no-copy-paste @error('bank_account_number') is-invalid @enderror" id="bank_account_number" name="bank_account_number" placeholder="Bank Account Number" autocomplete="off" value="{{ old('bank_account_number', $settings->bank_account_number ?? '') }}">
                            @error('bank_account_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="confirm_bank_account_number" class="form-label mb-2">Confirm Account Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control no-copy-paste @error('confirm_bank_account_number') is-invalid @enderror" id="confirm_bank_account_number" name="confirm_bank_account_number" placeholder="Confirm Bank Account Number" autocomplete="off" value="{{ old('confirm_bank_account_number', $settings->bank_account_number ?? '') }}">
                            @error('confirm_bank_account_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div id="account_number_match_error" class="invalid-feedback d-none">Account numbers do not match</div>
                        </div>
                        <div class="col-md-6">
                            <label for="bank_routing_number" class="form-label mb-2">Routing Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control no-copy-paste @error('bank_routing_number') is-invalid @enderror" id="bank_routing_number" name="bank_routing_number" placeholder="Bank Routing Number" value="{{ old('bank_routing_number', $settings->bank_routing_number ?? '') }}">
                            @error('bank_routing_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <hr class="my-4">
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-success"><i class="fa fa-save me-1"></i> Save Settings</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<!-- jQuery Validation Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js"></script>

<script>
$(document).ready(function() {
    var actualAccountNumber = '';
    var $accountNumberInput = $('#bank_account_number');
    var $confirmAccountNumberInput = $('#confirm_bank_account_number');
    var $accountNumberMatchError = $('#account_number_match_error');
    var $form = $('form[action="{{ route('front.settings.update_payment_settings') }}"]');
    
    // Disable copy-paste for all inputs with class 'no-copy-paste'
    $('.no-copy-paste').on('copy paste cut', function(e) {
        e.preventDefault();
        return false;
    }).on('keydown', function(e) {
        if ((e.ctrlKey || e.metaKey) && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 88)) {
            e.preventDefault();
            return false;
        }
    }).on('contextmenu', function(e) {
        e.preventDefault();
        return false;
    });
    
    // Check if there's an existing account number and mask it on page load
    var existingAccountNumber = $accountNumberInput.val();
    if (existingAccountNumber && existingAccountNumber.trim() !== '') {
        // Store the actual account number (extract only digits)
        actualAccountNumber = existingAccountNumber.replace(/\D/g, '');
        // Mask it with asterisks
        if (actualAccountNumber.length > 0) {
            $accountNumberInput.val('*'.repeat(actualAccountNumber.length));
        }
    }
    
    // Clear confirm account number field on load for security (user must re-enter)
    $confirmAccountNumberInput.val('');
    
    // Track previous value length to detect changes
    var previousAccountNumberLength = 0;
    
    // Simple asterisk masking for account number
    $accountNumberInput.on('keypress', function(e) {
        // Only allow digits
        var char = String.fromCharCode(e.which);
        if (!/\d/.test(char)) {
            e.preventDefault();
            return false;
        }
        
        var $input = $(this);
        var cursorPosition = $input[0].selectionStart || 0;
        var selectionEnd = $input[0].selectionEnd || cursorPosition;
        var selectionLength = selectionEnd - cursorPosition;
        
        // Handle insertion at cursor position
        if (selectionLength > 0) {
            // Replace selected text
            actualAccountNumber = actualAccountNumber.substring(0, cursorPosition) + 
                                 char + 
                                 actualAccountNumber.substring(cursorPosition + selectionLength);
        } else {
            // Insert at cursor position
            actualAccountNumber = actualAccountNumber.substring(0, cursorPosition) + 
                                 char + 
                                 actualAccountNumber.substring(cursorPosition);
        }
        
        // Update display
        $input.val('*'.repeat(actualAccountNumber.length));
        
        // Move cursor forward
        var newCursorPos = cursorPosition + 1;
        setTimeout(function() {
            $input[0].setSelectionRange(newCursorPos, newCursorPos);
        }, 0);
        
        e.preventDefault();
        return false;
    });
    
    // Handle input event for paste and other scenarios
    $accountNumberInput.on('input', function(e) {
        var $input = $(this);
        var currentValue = $input.val();
        var cursorPosition = $input[0].selectionStart || 0;
        
        // Extract all digits from the input (handles paste)
        var allDigits = currentValue.replace(/\D/g, '');
        
        // If digits were pasted or input changed significantly
        if (allDigits.length !== actualAccountNumber.length) {
            actualAccountNumber = allDigits;
        }
        
        // Update display with asterisks
        $input.val('*'.repeat(actualAccountNumber.length));
        
        // Restore cursor position
        var newCursorPos = Math.min(cursorPosition, actualAccountNumber.length);
        setTimeout(function() {
            $input[0].setSelectionRange(newCursorPos, newCursorPos);
        }, 0);
        
        if ($confirmAccountNumberInput.val()) {
            validateAccountNumbers();
        }
    });
    
    // Handle keydown for deletion
    $accountNumberInput.on('keydown', function(e) {
        var $input = $(this);
        var key = e.key;
        var cursorPosition = $input[0].selectionStart || 0;
        var selectionEnd = $input[0].selectionEnd || cursorPosition;
        var selectionLength = selectionEnd - cursorPosition;
        
        // Handle backspace and delete
        if (key === 'Backspace' || key === 'Delete') {
            if (selectionLength > 0) {
                // Delete selected text
                actualAccountNumber = actualAccountNumber.substring(0, cursorPosition) + 
                                     actualAccountNumber.substring(cursorPosition + selectionLength);
            } else if (key === 'Backspace' && cursorPosition > 0) {
                // Delete character before cursor
                actualAccountNumber = actualAccountNumber.substring(0, cursorPosition - 1) + 
                                     actualAccountNumber.substring(cursorPosition);
            } else if (key === 'Delete' && cursorPosition < actualAccountNumber.length) {
                // Delete character after cursor
                actualAccountNumber = actualAccountNumber.substring(0, cursorPosition) + 
                                     actualAccountNumber.substring(cursorPosition + 1);
            }
            
            // Update display
            $input.val('*'.repeat(actualAccountNumber.length));
            
            // Adjust cursor position
            var newCursorPos = key === 'Backspace' ? Math.max(0, cursorPosition - 1) : cursorPosition;
            setTimeout(function() {
                $input[0].setSelectionRange(newCursorPos, newCursorPos);
            }, 0);
            
            e.preventDefault();
            return false;
        }
        
        // Prevent non-digit characters
        if (key.length === 1 && !/\d/.test(key) && !e.ctrlKey && !e.metaKey) {
            e.preventDefault();
            return false;
        }
    });
    
    // Handle confirm account number input
    $confirmAccountNumberInput.on('input', function() {
        var $input = $(this);
        $input.val($input.val().replace(/\D/g, ''));
        validateAccountNumbers();
    });
    
    // Validate account numbers match
    function validateAccountNumbers() {
        var confirmValue = $confirmAccountNumberInput.val();
        if (!confirmValue || !actualAccountNumber) {
            $confirmAccountNumberInput.removeClass('is-invalid');
            $accountNumberMatchError.addClass('d-none');
            return false;
        }
        if (confirmValue !== actualAccountNumber) {
            $confirmAccountNumberInput.addClass('is-invalid');
            $accountNumberMatchError.removeClass('d-none');
            return false;
        } else {
            $confirmAccountNumberInput.removeClass('is-invalid');
            $accountNumberMatchError.addClass('d-none');
            return true;
        }
    }
    
    // Initialize jQuery Validation
    $form.validate({
        rules: {
            bank_account_holder_name: {
                required: true,
                maxlength: 255
            },
            bank_account_number: {
                required: true,
                minlength: 1
            },
            confirm_bank_account_number: {
                required: true,
                equalToAccountNumber: true
            },
            bank_routing_number: {
                required: true,
                maxlength: 20
            }
        },
        messages: {
            bank_account_holder_name: {
                required: "Please enter account holder name",
                maxlength: "Account holder name must not exceed 255 characters"
            },
            bank_account_number: {
                required: "Please enter account number"
            },
            confirm_bank_account_number: {
                required: "Please confirm account number",
                equalToAccountNumber: "Account numbers do not match"
            },
            bank_routing_number: {
                required: "Please enter routing number",
                maxlength: "Routing number must not exceed 20 characters"
            }
        },
        errorElement: 'div',
        errorClass: 'invalid-feedback',
        errorPlacement: function(error, element) {
            if (element.attr('name') === 'confirm_bank_account_number') {
                // For confirm account number, use our custom error div
                $accountNumberMatchError.removeClass('d-none').addClass('d-block');
                error.insertAfter(element);
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function(element, errorClass, validClass) {
            $(element).addClass('is-invalid').removeClass('is-valid');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass('is-invalid').addClass('is-valid');
            if ($(element).attr('name') === 'confirm_bank_account_number') {
                $accountNumberMatchError.addClass('d-none').removeClass('d-block');
            }
        },
        submitHandler: function(form) {
            var confirmValue = $confirmAccountNumberInput.val().replace(/\D/g, '');
            
            // Final validation
            if (!actualAccountNumber || !confirmValue) {
                alert('Please enter and confirm your account number.');
                return false;
            }
            
            if (actualAccountNumber !== confirmValue) {
                $confirmAccountNumberInput.addClass('is-invalid');
                $accountNumberMatchError.removeClass('d-none').addClass('d-block');
                alert('Account numbers do not match. Please verify and try again.');
                return false;
            }
            
            // Set the actual account number value before submission
            $accountNumberInput.val(actualAccountNumber);
            
            // Submit the form
            form.submit();
        }
    });
    
    // Add custom validation method for account number matching
    $.validator.addMethod("equalToAccountNumber", function(value, element) {
        var confirmValue = value.replace(/\D/g, '');
        return confirmValue === actualAccountNumber && actualAccountNumber.length > 0;
    }, "Account numbers do not match");
    
    // Also validate on blur
    $confirmAccountNumberInput.on('blur', function() {
        validateAccountNumbers();
    });
});
</script>
@endpush
@endsection