@extends('layouts.sa.main')

@section('brands', 'active')

@section('main-content')
    <style>
        /* Responsive Button Container */
        @media (max-width: 576px) {
            .btn-container {
                flex-direction: column;
                align-items: flex-start;
            }

            .btn-container button {
                width: 100%;
                margin-bottom: 5px;
                margin-top: 10px;
            }
        }

        /* Table Styling */
        #datatable {
            border-collapse: separate;
            border-spacing: 0 10px;
        }

        #datatable.dataTable tbody tr {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .dataTables_wrapper .dataTables_paginate {
            float: left;
            text-align: left;
            margin-top: 15px !important;
        }

        /* Search Input Styling */
        #searchRecord {
            border-radius: 20px;
            background: #f1f3f5;
            padding: 20px;
            border: 1px solid #ced4da;
        }

        /* Button Styling */
        #handleSyncData {
            padding: .5rem 1.5rem .5rem 1.5rem;
            display: flex;
            align-items: center;
            /* border-radius: 30px; */
        }

        #handleSyncData ion-icon {
            margin-right: 8px;
        }

        /* Header Styling */
        .content-header h1 {
            font-size: 2rem;
            font-weight: 600;
            color: #333;
        }
    </style>

    <div class="content-wrapper mb-3">
        <div class="content-header p-3">
            <div class="container-fluid mt-2">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 mt-2">Change Password</h1>
                    </div>
                </div>

                <!-- Your form content here -->
                <div class="card mt-4">
                    <div class="card-header">
                        Account Maintenance
                    </div>
                    <div class="card-body p-5">
                        <div style="max-width: 350px; margin: 0 auto;">
                            <form id="updatePassword">
                                @csrf
                                <div class="form-group">
                                    <span class="d-block mb-1 text-left" for="">Current Password</span>
                                    <input type="password" name="old_password" class="form-control" required>
                                    <div class="text-left text-sm mt-1" id="">
                                        <ul class="text-danger" id="currentPasswordError"></ul>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <span class="d-block mb-1 text-left" for="">New Password</span>
                                    <input type="password" name="new_password" class="form-control" required>
                                    <div class="text-left text-sm mt-1">
                                        <ul class="text-danger" id="newPasswordError"></ul>
                                    </div>
                                </div>

                                <button class="btn btn-primary border mt-1 w-100" type="submit" id="submitBtn">
                                    Submit
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let isSubmit = false;

        const changePassword = {
            init: function() {
                changePassword.events();
            },
            events: function() {
                $("#updatePassword").on('submit', function(e) {
                    e.preventDefault();

                    isSubmit = true;

                    if (isSubmit === true) {
                        let formData = new FormData(this);
                        changePassword.updatePassword(formData);
                    }
                })
            },
            updatePassword: function(formData) {
                $("#submitBtn").attr('disabled', true);

                $("#currentPasswordError").empty();
                $("#newPasswordError").empty();

                $.ajax({
                        url: '/sa/update-password',
                        method: 'POST',
                        data: formData,
                        processData: false, // Ensure jQuery doesn't process the data
                        contentType: false, // Ensure jQuery doesn't set the content type
                    })
                    .then(function(response) {
                        Swal.fire({
                            icon: "success",
                            title: "Successfully Updated!",
                            text: "For better security, remember to update your password regularly.",
                        });

                        window.location.href = '/logout';
                    })
                    .fail(function(xhr, status, error) {
                        let jsonResponse = JSON.parse(xhr.responseText);

                        if (jsonResponse.errors.old_password &&
                            Array.isArray(jsonResponse.errors.old_password)) {
                            jsonResponse.errors.old_password.forEach(function(error) {
                                $('#currentPasswordError').append('<li>' + error + '</li>');
                            });
                        }

                        if (jsonResponse.errors.new_password &&
                            Array.isArray(jsonResponse.errors.new_password)) {
                            jsonResponse.errors.new_password.forEach(function(error) {
                                $('#newPasswordError').append('<li>' + error + '</li>');
                            });
                        }
                    })
                    .always(function() {
                        isSubmit = false;
                        $("#submitBtn").attr('disabled', false);
                    });
            }
        }

        changePassword.init();
    </script>
@endsection