@extends('admin.layout.index')

@section('title', 'Transport Modes')

@push('head-scripts')
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
@endpush

@section('content')
    <div class="row g-3 align-items-center mb-3">
        <div class="col">
            <h4 class="mb-0">Transport Mode Management</h4>
            <p class="text-muted mb-0">Add, edit, remove transport options and configure alerts.</p>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTransportModal">+ Add Transport
                Mode</button>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Modes</p>
                        </div>
                        {{-- <div class="flex-shrink-0">
                            <h5 class="text-success fs-14 mb-0">
                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +0%
                            </h5>
                        </div> --}}
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" id="totalModes"
                                    data-target="0">0</span></h4>
                            {{-- <a href="" class="text-decoration-underline">View all modes</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-primary-subtle rounded fs-3">
                                <i class="ri-roadster-line text-primary"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Active</p>
                        </div>
                        {{-- <div class="flex-shrink-0">
                            <h5 class="text-success fs-14 mb-0">
                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +0%
                            </h5>
                        </div> --}}
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" id="activeModes"
                                    data-target="0">0</span></h4>
                            {{-- <a href="" class="text-decoration-underline">View active modes</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-success-subtle rounded fs-3">
                                <i class="ri-checkbox-circle-line text-success"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Inactive</p>
                        </div>
                        {{-- <div class="flex-shrink-0">
                            <h5 class="text-danger fs-14 mb-0">
                                <i class="ri-arrow-right-down-line fs-13 align-middle"></i> -0%
                            </h5>
                        </div> --}}
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" id="inactiveModes"
                                    data-target="0">0</span></h4>
                            {{-- <a href="" class="text-decoration-underline">View inactive modes</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-danger-subtle rounded fs-3">
                                <i class="ri-alert-line text-danger"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Alerts Configured</p>
                        </div>
                        {{-- <div class="flex-shrink-0">
                            <h5 class="text-success fs-14 mb-0">
                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +0%
                            </h5>
                        </div> --}}
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value"
                                    id="alertsConfigured" data-target="0">0</span></h4>
                            {{-- <a href="" class="text-decoration-underline">View configurations</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-info-subtle rounded fs-3">
                                <i class="ri-shield-check-line text-info"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table align-middle nowrap" id="transportModesTable">
                    <thead class="table-light">
                        <tr>
                            <th>Mode</th>
                            <th>Description</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Add Modal -->
    <div class="modal fade" id="addTransportModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Transport Mode</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="addTransportForm">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Mode Name</label>
                                <input class="form-control" name="mode_name" id="add_mode_name" placeholder="e.g., Car"
                                    required>
                                <div class="invalid-feedback" id="add_mode_name-error"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Status</label>
                                <select class="form-select" name="status" id="add_status" required>
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="description" id="add_description" rows="2" placeholder="Describe usage"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Alert Radius (m)</label>
                                <input class="form-control" name="alert_radius_m" id="add_alert_radius_m" type="number"
                                    min="0" placeholder="e.g., 50">
                                <div class="invalid-feedback" id="add_alert_radius_m-error"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Speed Limits / Behavior Rules</label>
                                <input class="form-control" name="speed_limits_behavior_rules" id="add_speed_limits"
                                    placeholder="e.g., 80 km/h urban">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Collision Sensitivity</label>
                                <input class="form-control" name="collision_sensitivity" id="add_collision"
                                    placeholder="e.g., Medium">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Weather Alert Adjustments</label>
                                <input class="form-control" name="weather_alert_adjustments" id="add_weather"
                                    placeholder="e.g., Rain: reduce 10%">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="addSubmitBtn">
                            <span class="btn-text">Save</span>
                            <span class="btn-spinner d-none">
                                <i class="ri-loader-2-line spin"></i> Saving...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Modal -->
    <div class="modal fade" id="editTransportModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Transport Mode</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="editTransportForm">
                    <div class="modal-body">
                        <input type="hidden" name="id" id="edit_id">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Mode Name</label>
                                <input class="form-control" name="mode_name" id="edit_mode_name" required>
                                <div class="invalid-feedback" id="edit_mode_name-error"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Status</label>
                                <select class="form-select" name="status" id="edit_status" required>
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="description" id="edit_description" rows="2"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Alert Radius (m)</label>
                                <input class="form-control" name="alert_radius_m" id="edit_alert_radius_m"
                                    type="number" min="0">
                                <div class="invalid-feedback" id="edit_alert_radius_m-error"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Speed Limits / Behavior Rules</label>
                                <input class="form-control" name="speed_limits_behavior_rules" id="edit_speed_limits">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Collision Sensitivity</label>
                                <input class="form-control" name="collision_sensitivity" id="edit_collision">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Weather Alert Adjustments</label>
                                <input class="form-control" name="weather_alert_adjustments" id="edit_weather">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="editSubmitBtn">
                            <span class="btn-text">Update</span>
                            <span class="btn-spinner d-none">
                                <i class="ri-loader-2-line spin"></i> Updating...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Modal -->
    <div class="modal fade" id="deleteTransportModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center p-5">
                    <div class="mt-3">
                        <div class="avatar-md mx-auto mb-4">
                            <span class="avatar-title bg-danger-subtle text-danger fs-2 rounded-circle">
                                <i class="ri-delete-bin-6-line"></i>
                            </span>
                        </div>
                        <h4 class="mb-2">You are about to delete this mode</h4>
                        <p class="text-muted mb-4" id="deleteModeName">Deleting will remove it and its settings from the
                            list.</p>
                        <input type="hidden" id="delete_id">
                        <div class="hstack gap-2 justify-content-center">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                                <span class="btn-text">Yes, Delete It</span>
                                <span class="btn-spinner d-none">
                                    <i class="ri-loader-2-line spin"></i> Deleting...
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Global Alert Settings Modal -->
    <div class="modal fade" id="globalAlertModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Global Alert Settings</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="globalAlertForm">
                    <div class="modal-body">
                        <input type="hidden" name="id" id="alert_id">

                        <div class="row g-3 align-items-center">
                            <div class="col">
                                <h6 class="mb-1">Speed thresholds</h6>
                                <p class="text-muted small mb-0">Toggle limits and set threshold.</p>
                            </div>
                            <div class="col-auto">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="speed_thresholds_enabled"
                                        id="speed_enabled" value="1">
                                </div>
                            </div>
                            <div class="col-12">
                                <input class="form-control" name="speed_thresholds" id="speed_value"
                                    placeholder="e.g., Urban 80 km/h, Highway 120 km/h">
                            </div>
                        </div>
                        <hr>
                        <div class="row g-3 align-items-center">
                            <div class="col">
                                <h6 class="mb-1">Alert radius defaults</h6>
                                <p class="text-muted small mb-0">Manage proximity thresholds.</p>
                            </div>
                            <div class="col-auto">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="alert_radius_defaults_enabled"
                                        id="radius_enabled" value="1">
                                </div>
                            </div>
                            <div class="col-12">
                                <input class="form-control" name="alert_radius_defaults" id="radius_value"
                                    placeholder="Default radius in meters">
                            </div>
                        </div>
                        <hr>
                        <div class="row g-3 align-items-center">
                            <div class="col">
                                <h6 class="mb-1">Weather-based alert rules</h6>
                                <p class="text-muted small mb-0">Adjust alerts under weather conditions.</p>
                            </div>
                            <div class="col-auto">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox"
                                        name="weather_based_alert_rules_enabled" id="weather_enabled" value="1">
                                </div>
                            </div>
                            <div class="col-12">
                                <input class="form-control" name="weather_based_alert_rules" id="weather_rules_value"
                                    placeholder="e.g., Rain: -10%, Storm: -20%">
                            </div>
                        </div>
                        <hr>
                        <div class="row g-3 align-items-center">
                            <div class="col">
                                <h6 class="mb-1">Accident detection sensitivity</h6>
                                <p class="text-muted small mb-0">Tune sensitivity levels.</p>
                            </div>
                            <div class="col-auto">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox"
                                        name="accident_detection_sensitivity_enabled" id="accident_enabled"
                                        value="1">
                                </div>
                            </div>
                            <div class="col-12">
                                <input class="form-control" name="accident_detection_sensitivity" id="accident_value"
                                    placeholder="e.g., High / Medium / Low">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="alertSubmitBtn">
                            <span class="btn-text">Save Settings</span>
                            <span class="btn-spinner d-none">
                                <i class="ri-loader-2-line spin"></i> Saving...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('custom-script')
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            const csrfToken = '{{ csrf_token() }}';

            // Load stats
            loadStats();

            // Initialize DataTable
            const table = $('#transportModesTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.transport-modes.data') }}',
                    type: 'GET'
                },
                columns: [{
                        data: 'mode',
                        name: 'mode_name'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'asc']
                ],
                pageLength: 10,
                lengthMenu: [
                    [5, 10, 25, 50],
                    [5, 10, 25, 50]
                ],
                language: {
                    processing: '<i class="ri-loader-2-line spin fs-2"></i>',
                    emptyTable: 'No transport modes found'
                }
            });

            // Load stats
            function loadStats() {
                $.ajax({
                    url: '{{ route('admin.transport-modes.stats') }}',
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            $('#totalModes').attr('data-target', response.data.total_modes).text(
                                response.data.total_modes);
                            $('#activeModes').attr('data-target', response.data.active_modes).text(
                                response.data.active_modes);
                            $('#inactiveModes').attr('data-target', response.data.inactive_modes).text(
                                response.data.inactive_modes);
                            $('#alertsConfigured').attr('data-target', response.data.alerts_configured)
                                .text(response.data.alerts_configured);
                        }
                    }
                });
            }

            // Clear form errors
            function clearErrors(formId) {
                $(`#${formId} .is-invalid`).removeClass('is-invalid');
                $(`#${formId} .invalid-feedback`).text('');
            }

            // Show form errors
            function showErrors(formId, errors) {
                Object.keys(errors).forEach(field => {
                    $(`#${formId} [name="${field}"]`).addClass('is-invalid');
                    $(`#${formId} #${field}-error`).text(errors[field][0]);
                });
            }

            // Add Transport Mode
            $('#addTransportForm').on('submit', async function(e) {
                e.preventDefault();
                clearErrors('addTransportForm');

                const submitBtn = $('#addSubmitBtn');
                const btnText = submitBtn.find('.btn-text');
                const btnSpinner = submitBtn.find('.btn-spinner');

                submitBtn.prop('disabled', true);
                btnText.addClass('d-none');
                btnSpinner.removeClass('d-none');

                try {
                    const formData = {
                        mode_name: $('#add_mode_name').val(),
                        status: $('#add_status').val(),
                        description: $('#add_description').val(),
                        alert_radius_m: $('#add_alert_radius_m').val(),
                        speed_limits_behavior_rules: $('#add_speed_limits').val(),
                        collision_sensitivity: $('#add_collision').val(),
                        weather_alert_adjustments: $('#add_weather').val()
                    };

                    const response = await fetch('{{ route('admin.transport-modes.store') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify(formData)
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        $('#addTransportModal').modal('hide');
                        $('#addTransportForm')[0].reset();
                        showToast(data.message, 'success');
                        table.ajax.reload();
                        loadStats();
                    } else {
                        if (data.errors) {
                            showErrors('addTransportForm', data.errors);
                        }
                        showToast(data.message || 'An error occurred', 'error');
                    }
                } catch (error) {
                    showToast('An unexpected error occurred', 'error');
                } finally {
                    submitBtn.prop('disabled', false);
                    btnText.removeClass('d-none');
                    btnSpinner.addClass('d-none');
                }
            });

            // Edit Transport Mode - Open Modal
            $(document).on('click', '.btn-edit', function() {
                const btn = $(this);
                $('#edit_id').val(btn.data('id'));
                $('#edit_mode_name').val(btn.data('mode'));
                $('#edit_status').val(btn.data('status'));
                $('#edit_description').val(btn.data('description'));
                $('#edit_alert_radius_m').val(btn.data('alert-radius'));
                $('#edit_speed_limits').val(btn.data('speed-limits'));
                $('#edit_collision').val(btn.data('collision'));
                $('#edit_weather').val(btn.data('weather'));

                clearErrors('editTransportForm');
                $('#editTransportModal').modal('show');
            });

            // Edit Transport Mode - Submit
            $('#editTransportForm').on('submit', async function(e) {
                e.preventDefault();
                clearErrors('editTransportForm');

                const submitBtn = $('#editSubmitBtn');
                const btnText = submitBtn.find('.btn-text');
                const btnSpinner = submitBtn.find('.btn-spinner');

                submitBtn.prop('disabled', true);
                btnText.addClass('d-none');
                btnSpinner.removeClass('d-none');

                try {
                    const formData = {
                        id: $('#edit_id').val(),
                        mode_name: $('#edit_mode_name').val(),
                        status: $('#edit_status').val(),
                        description: $('#edit_description').val(),
                        alert_radius_m: $('#edit_alert_radius_m').val(),
                        speed_limits_behavior_rules: $('#edit_speed_limits').val(),
                        collision_sensitivity: $('#edit_collision').val(),
                        weather_alert_adjustments: $('#edit_weather').val()
                    };

                    const response = await fetch('{{ route('admin.transport-modes.update') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify(formData)
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        $('#editTransportModal').modal('hide');
                        showToast(data.message, 'success');
                        table.ajax.reload();
                        loadStats();
                    } else {
                        if (data.errors) {
                            showErrors('editTransportForm', data.errors);
                        }
                        showToast(data.message || 'An error occurred', 'error');
                    }
                } catch (error) {
                    showToast('An unexpected error occurred', 'error');
                } finally {
                    submitBtn.prop('disabled', false);
                    btnText.removeClass('d-none');
                    btnSpinner.addClass('d-none');
                }
            });

            // Delete Transport Mode - Open Modal
            $(document).on('click', '.btn-delete', function() {
                const btn = $(this);
                $('#delete_id').val(btn.data('id'));
                $('#deleteModeName').text(
                    `Deleting "${btn.data('mode')}" will remove it and its settings from the list.`);
                $('#deleteTransportModal').modal('show');
            });

            // Delete Transport Mode - Confirm
            $('#confirmDeleteBtn').on('click', async function() {
                const submitBtn = $(this);
                const btnText = submitBtn.find('.btn-text');
                const btnSpinner = submitBtn.find('.btn-spinner');

                submitBtn.prop('disabled', true);
                btnText.addClass('d-none');
                btnSpinner.removeClass('d-none');

                try {
                    const response = await fetch('{{ route('admin.transport-modes.destroy') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            id: $('#delete_id').val()
                        })
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        $('#deleteTransportModal').modal('hide');
                        showToast(data.message, 'success');
                        table.ajax.reload();
                        loadStats();
                    } else {
                        showToast(data.message || 'An error occurred', 'error');
                    }
                } catch (error) {
                    showToast('An unexpected error occurred', 'error');
                } finally {
                    submitBtn.prop('disabled', false);
                    btnText.removeClass('d-none');
                    btnSpinner.addClass('d-none');
                }
            });

            // Global Alert Settings - Open Modal
            $(document).on('click', '.btn-global-alert', function() {
                const btn = $(this);
                $('#alert_id').val(btn.data('id'));

                // Speed thresholds
                $('#speed_enabled').prop('checked', btn.data('speed-enabled') == 1);
                $('#speed_value').val(btn.data('speed-value'));

                // Alert radius
                $('#radius_enabled').prop('checked', btn.data('radius-enabled') == 1);
                $('#radius_value').val(btn.data('radius-value'));

                // Weather rules
                $('#weather_enabled').prop('checked', btn.data('weather-enabled') == 1);
                $('#weather_rules_value').val(btn.data('weather-value'));

                // Accident detection
                $('#accident_enabled').prop('checked', btn.data('accident-enabled') == 1);
                $('#accident_value').val(btn.data('accident-value'));

                $('#globalAlertModal').modal('show');
            });

            // Global Alert Settings - Submit
            $('#globalAlertForm').on('submit', async function(e) {
                e.preventDefault();

                const submitBtn = $('#alertSubmitBtn');
                const btnText = submitBtn.find('.btn-text');
                const btnSpinner = submitBtn.find('.btn-spinner');

                submitBtn.prop('disabled', true);
                btnText.addClass('d-none');
                btnSpinner.removeClass('d-none');

                try {
                    const formData = {
                        id: $('#alert_id').val(),
                        speed_thresholds_enabled: $('#speed_enabled').is(':checked') ? 1 : 0,
                        speed_thresholds: $('#speed_value').val(),
                        alert_radius_defaults_enabled: $('#radius_enabled').is(':checked') ? 1 : 0,
                        alert_radius_defaults: $('#radius_value').val(),
                        weather_based_alert_rules_enabled: $('#weather_enabled').is(':checked') ?
                            1 : 0,
                        weather_based_alert_rules: $('#weather_rules_value').val(),
                        accident_detection_sensitivity_enabled: $('#accident_enabled').is(
                            ':checked') ? 1 : 0,
                        accident_detection_sensitivity: $('#accident_value').val()
                    };

                    const response = await fetch('{{ route('admin.transport-modes.update-alert') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify(formData)
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        $('#globalAlertModal').modal('hide');
                        showToast(data.message, 'success');
                        table.ajax.reload();
                        loadStats();
                    } else {
                        showToast(data.message || 'An error occurred', 'error');
                    }
                } catch (error) {
                    showToast('An unexpected error occurred', 'error');
                } finally {
                    submitBtn.prop('disabled', false);
                    btnText.removeClass('d-none');
                    btnSpinner.addClass('d-none');
                }
            });

            // Clear validation on input
            $('input, select, textarea').on('input change', function() {
                $(this).removeClass('is-invalid');
                const name = $(this).attr('name');
                if (name) {
                    $(`#${name}-error`).text('');
                }
            });
        });
    </script>
    <style>
        .spin {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
@endpush