SweetAlert Integration Issue

@section('title', 'Customer Registration')

@section('content')

@php echo $topContents; @endphp
@if ($errors->any())

@foreach ($errors->all() as $error)
{{ $error }}
@endforeach

@endif
@if (session()->has('message.level'))

{!! session('message.content') !!}

@endif

@csrf

{{ __('Company') }} *

{{ __('Please, enter company name *!') }}

{{ __('Title') }} *

{{__('Title')}}
@foreach ($salutations as $salutation)
title ? 'selected' : '' }}>{{$salutation->title}}
@endforeach

{{ __('Please enter a title!') }}

{{ __('First Name') }} *

{{ __('Please enter a first name.') }}

{{ __('Last Name') }} *

{{ __('Please enter a last name.') }}

{{ __('Address 1') }} *

{{ __('Please enter an Address 1') }}

{{ __('Address 2') }}

{{ __('Please enter an Address 2') }}

{{ __('City') }} *

{{ __('Please enter a city') }}

{{ __('Zip Code') }} *

{{ __('Please enter a zip code') }}

{{ __('State') }}

{{ __('Please enter a state') }}

{{ __('Country') }} *

{{ __('Select') }}
@foreach ($countries as $country)
id=='82' || old('country_id') == $country->id ? 'selected=selected' : '' }}>
{{ $country->name }}
@endforeach

{{ __('Please select a country!') }}

{{ __('Language') }}

@foreach ($languages as $language)
id ? 'selected=selected' : '' }}>
{{ $language->lang_name }} ({{ $language->lang_code }})
@endforeach

{{ __('Please select a language!') }}

{{ __('Phone Number') }}

{{ __('Please enter a phone number') }}

{{ __('Email Address') }} *

{{ __('Please enter a valid Email address!') }}

{{–
{{ __('Password') }} *

{{ __('Please enter your password!') }}

{{ __('Confirm Password') }} *

{{ __('Entered Password is not matching! Try Again') }}
–}}

{{ __('Your privacy is important to us. Please read and agree.') }} *

{{ __('Yes, I understand and agree to the') }} {{ __('Terms & Conditions') }}, {{ __('User Agreement') }} {{ __('and') }} {{ __('Privacy Policy') }}.

{{ __('You must agree before submitting.') }}

{{ __('Reset') }}
{{ __('Sign up') }}

<script>

</script>

<script>
console.log('Script loaded'); // Confirm script is running

document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM fully loaded'); // Confirm DOM is ready

    const form = document.getElementById('signupregForm');
    console.log(form); // Should log the form element

    if (form) {
        alert("dsfdasf");
        form.addEventListener('submit', function (event) {
           
            event.preventDefault();
            console.log('Form submission detected'); // Confirm event is triggered
        });
    } else {
        console.error('Form not found!');
    }
});
</script>

@endsection
sweetalet not working

1. **Script Blockage**: Make sure there are no errors in the browser console, such as network errors, which could prevent the SweetAlert library from loading.

2. **Incorrect Library Loading**: Ensure the SweetAlert script (`https://cdn.jsdelivr.net/npm/sweetalert2@11`) is correctly included in your page. Check if the library is accessible by opening the link in a browser.

3. **Event Preventing Execution**: Your JavaScript code may not be structured correctly to trigger the SweetAlert properly.

Here’s how to fix the issue and verify:

### Updated Script with SweetAlert Example

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('signupregForm');
        
        if (form) {
            form.addEventListener('submit', function (event) {
                event.preventDefault(); // Prevent default form submission

                Swal.fire({
                    title: 'Form Submitted!',
                    text: 'Your registration form has been submitted.',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit(); // Submit the form after user confirms
                    }
                });
            });
        } else {
            console.error('Form not found!');
        }
    });
</script>

### Explanation of Fix:
1. **SweetAlert Setup**: A `Swal.fire` block displays an alert with a success message and an "OK" button.
2. **Event Handling**: The `event.preventDefault()` prevents the default form submission, allowing SweetAlert to show first.
3. **Conditional Form Submission**: The form is submitted programmatically only if the user confirms.

### Debugging Tips:
1. **Check Script Execution**: Add `console.log` statements to confirm that the script is being executed.
2. **Check for Errors**: Look for errors in the browser console. Missing or blocked scripts will show up here.
3. **Library Availability**: Verify that SweetAlert is successfully loaded using the browser console:

console.log(Swal); // Should log the SweetAlert object

Let me know if you encounter further issues!

### Example with Custom Font Size and Font Family

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('signupregForm');
        
        if (form) {
            form.addEventListener('submit', function (event) {
                event.preventDefault(); // Prevent default form submission

                Swal.fire({
                    title: 'Form Submitted!',
                    text: 'Your registration form has been submitted.',
                    icon: 'success',
                    confirmButtonText: 'OK',
                    customClass: {
                        title: 'swal-title',
                        content: 'swal-content',
                        confirmButton: 'swal-confirm-btn',
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit(); // Submit the form after user confirms
                    }
                });
            });
        } else {
            console.error('Form not found!');
        }
    });
</script>

<!-- Custom Styles -->
<style>
    /* Custom Font Styles for SweetAlert */
    .swal-title {
        font-family: 'Arial', sans-serif;
        font-size: 24px;
        color: #333;
    }
    .swal-content {
        font-family: 'Verdana', sans-serif;
        font-size: 16px;
        color: #555;
    }
    .swal-confirm-btn {
        font-family: 'Tahoma', sans-serif;
        font-size: 14px;
    }
</style>

### Key Details:
1. **`customClass`**: The `customClass` property allows you to assign custom classes to different parts of the alert.
– `title`: The title of the alert.
– `content`: The text/content of the alert.
– `confirmButton`: The "OK" button (or other buttons).

2. **Custom CSS**: Add CSS rules for the custom classes to style font size, font family, and other properties like color.

3. **Dynamic Styling**: You can dynamically inject CSS classes for specific alerts if needed.

### Adjust as Needed:
– Replace the font-family names (`Arial`, `Verdana`, `Tahoma`) with your preferred fonts.
– Modify font sizes (`24px`, `16px`, etc.) based on your design requirements.

Let me know if you need further assistance!