@extends('dashboard.partials.master')

@section('title')
    Setting
@endsection

@section('css')
@endsection
@section('content')
    <main class="home home-section">
        <div class="setting-box">
            <h1>Account settings </h1>
            <form id="profileForm">
                @csrf
                <div class="form-group row p-3 pb-3">
                    <label class="col-sm-2 col-form-label">Name</label>
                    <div class="col-sm-10 mb-3">
                        <input type="text" class="form-control" name="name" value="{{ Auth::user()->name }}"
                            id="firstName" placeholder="First Name">
                    </div>
                    {{-- <div class="col-sm-5">
                        <input type="text" class="form-control" id="lastName" placeholder="Last Name">
                    </div> --}}
                </div>
                <hr style="color: #999;" />
                <div class="form-group row p-3 pb-3">
                    <label class="col-sm-2 col-form-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" name="email" value="{{ Auth::user()->email }}"
                            id="email" placeholder="example@gmail.com">
                    </div>
                </div>
                <hr style="color: #999;" />
                <div class="form-group row p-3 pb-3">
                    <label class="col-sm-2 col-form-label">Role</label>
                    <div class="col-sm-10">
                        <input type="text" value="{{ Auth::user()->roles_name }}" class="form-control" id="role" placeholder="CEO">
                    </div>
                </div>
                {{-- <hr style="color: #999;" />
                <div class="form-group row p-3 pb-3">
                    <label class="col-sm-2 col-form-label">Language</label>
                    <div class="col-sm-10">
                        <select class="form-select">
                            <option selected> select Language</option>
                            <option value="1">Language 1</option>
                            <option value="2">Language 2</option>
                            <option value="3">Language 3</option>
                        </select>
                    </div>
                </div> --}}
                <hr style="color: #999;" />
                <div class="form-group row p-3 pb-3">
                    <label class="col-sm-2 col-form-label">Password</label>
                    <div class="col-sm-7 mb-3">
                        <p class="form-control" style="border: none;">If you want to change your password, change it.</p>
                    </div>
                    <div class="col-sm-3">
                        <a style="font-size: 14px;" class="btn btn-outline-dark" data-bs-target="#set-password"
                            data-bs-toggle="modal">Set Password</a>
                    </div>
                </div>
                {{-- <hr style="color: #999;" /> --}}
                {{-- <div class="form-group row p-3 pb-3">
                    <label class="col-sm-2 col-form-label">Billing</label>
                    <div class="col-sm-4">
                        <p class="form-control" style="border: none;">Current plans : <span> Cassie</span>
                        </p>
                    </div>
                    <div class="col-sm-3 mb-3">
                        <a style="font-size: 14px;" class="btn btn-outline-dark">Manage billing</a>
                    </div>
                    <div class="col-sm-3">
                        <a style="font-size: 14px;" class="btn btn-outline-danger">Cancel plan</a>
                    </div>
                </div> --}}
                <hr style="color: #999;" />
                <div class=" p-3 pb-3 d-flex justify-content-center flex-wrap">
                    <a href="#" class="btn btn-outline-primary m-2">Save</a>
                    <a href="{{ route('admin_logout') }}" class="btn btn-outline-danger m-2">Sign out</a>
                </div>
            </form>
            <!-- start popup set password  -->
            <div class="modal fade" id="set-password" aria-hidden="true" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5">Set a password </h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <form class="row" style="padding: 10px;">
                            <div class="col-12 mb-2" style="position: relative;">
                                <input type="password" class="form-control" placeholder="New Password">
                                <i class="toggle-password bx bxs-show"></i>
                            </div>
                            <div class="col-12 mt-2" style="position: relative;">
                                <input type="password" class="form-control" placeholder="Confirm Password">
                                <i class="toggle-password bx bxs-show"></i>
                            </div>
                            <div class="col-12 mt-3 d-flex justify-content-center">
                                <button class="btn btn-primary col-md-4">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- end popup set password  -->
        </div>
    </main>
    <!-- Loading screen (you can customize the design as needed) -->
    <div id="loading-screen"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
         background-color: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center; padding-top: 20%;">
        {{-- <h2>Loading...</h2> --}}
        <img src="{{ asset('dashboard') }}/images/loading.svg" alt="Loading">
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        const togglePasswordIcons = document.querySelectorAll('.toggle-password');
        // Add click event listener to each icon
        togglePasswordIcons.forEach(icon => {
            icon.addEventListener('click', function() {
                const passwordInput = this.previousElementSibling;
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    this.classList.remove('bxs-show');
                    this.classList.add('bxs-hide');
                } else {
                    passwordInput.type = 'password';
                    this.classList.remove('bxs-hide');
                    this.classList.add('bxs-show');
                }
            });
        });
        $(document).ready(function() {

            function showLoading() {
                $('#loading-screen').show(); //show the loading screen
            }

            function hideLoading() {
                $('#loading-screen').hide(); //hide the loading screen
            }

            $('.btn-outline-primary').on('click', function(e) {
                e.preventDefault();

                let name = $('input[name="name"]').val();
                let email = $('input[name="email"]').val();
                showLoading(); //show the loading screen before sending the AJAX request
                $.ajax({
                    url: "{{ route('settings.update') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        name: name,
                        email: email,
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated successfully!',
                            text: response.message,
                            confirmButtonText: 'Confirm!'
                        });
                        hideLoading(); //hide the loading screen in case of an error
                    },
                    error: function(response) {
                        let errors = response.responseJSON.errors;
                        let errorMessage = '';

                        if (errors.name) {
                            errorMessage += errors.name[0] + '<br>';
                        }
                        if (errors.email) {
                            errorMessage += errors.email[0] + '<br>';
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            // text: 'Something went wrong!',
                            html: errorMessage,
                            confirmButtonText: 'Confirm'
                        });

                        hideLoading(); //hide the loading screen in case of an error
                    }
                });
            });

            $('#set-password .btn-primary').on('click', function(e) {
                e.preventDefault();

                let newPassword = $('#set-password input[placeholder="New Password"]').val();
                let confirmPassword = $('#set-password input[placeholder="Confirm Password"]').val();
                showLoading(); //show the loading screen before sending the AJAX request
                $.ajax({
                    url: "{{ route('profile.updatePassword') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        new_password: newPassword,
                        confirm_password: confirmPassword
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated password successfully !',
                            text: response.message,
                            confirmButtonText: 'Confirm!'
                        });

                        //hide the modal and reset the form
                        $('#set-password').modal('hide');
                        $('#set-password').find('input').val('');
                        hideLoading(); //hide the loading screen in case of an error
                    },
                    error: function(response) {
                        let errors = response.responseJSON.errors;
                        let errorMessage = '';

                        if (errors.new_password) {
                            errorMessage += errors.new_password[0] + '<br>';
                        }
                        if (errors.confirm_password) {
                            errorMessage += errors.confirm_password[0] + '<br>';
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            html: errorMessage,
                            confirmButtonText: 'Confirm!'
                        });
                        hideLoading(); //hide the loading screen in case of an error
                    }
                });
            });
        });
    </script>
@endpush