<!DOCTYPE html>
<html lang="en">

<head>

    <title>LottoPanda</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

    <link rel="icon" type="image/x-icon" href="<?php echo e(asset('images/favicon.ico')); ?>">

    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

    

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="<?php echo e(asset('admin/css/sweetalert2.min.css')); ?>">


    <link href="<?php echo e(asset('admin/css/styles.css')); ?>" rel="stylesheet">
    <style type="text/css">
        @import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

    </style>

    <?php echo $__env->yieldContent('styles'); ?>

</head>

<body class="theme-color-bg theme-color-text">


    <nav class="navbar navbar-expand-lg navbar-light navbar-laravel">
        <div class="container">
            <a class="navbar-brand" href="<?php echo e(route("dashboard")); ?>">
                
                Lotto Panda

            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropbtn"><i class="fa fa-user"></i>
                            <?php echo e(auth()->user()->name); ?></a>
                        <div class="dropdown-content">
                            <a class="nav-link" href="#" data-toggle="modal" data-target="#passwordModal">Change
                                Password</a>
                            <a class="nav-link" href="<?php echo e(route('logout')); ?>">Logout</a>
                        </div>
                    </li>

                    
                </ul>

            </div>
        </div>
    </nav>
    <section class="content">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="card content">
                        <?php echo $__env->yieldContent('content'); ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!---- Password modal --->
    <div class="modal" id="passwordModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Change Password</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="changePasswordForm" name="changePasswordForm" class="form-horizontal">
                    <?php echo csrf_field(); ?>
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="col-sm-12">

                                <div class="input-group">
                                    <input type="password" class="form-control" id="old_password" name="old_password"
                                        placeholder="Old Password" value="" maxlength="50" required>
                                    <div class="input-group-addon">
                                        <i class="fa fa-eye togglePassword" id="togglePassword1"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">

                                <div class="input-group">
                                    <input type="password" class="form-control" id="new_password" name="new_password"
                                        placeholder=" New Password" value="" maxlength="50" required>
                                    <div class="input-group-addon">
                                        <i class="fa fa-eye togglePassword" id="togglePassword2"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">

                                <div class="input-group">
                                    <input type="password" class="form-control" id="new_password_confirmation"
                                        name="new_password_confirmation" placeholder="Confirm Password" value=""
                                        maxlength="50" required>
                                    <div class="input-group-addon">
                                        <i class="fa fa-eye togglePassword" id="togglePassword3"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-danger mt-2 error_change_passeword" style="display: none">Please enter
                            correct data</div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="saveBtn">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <footer>
        <p class="footer">
            Copyright &copy; 2023 LottoPanda. All Rights Reserved. Developed by <a href="https://gingertechnologies.qa/"
                target="_blank"> Ginger Technologies</a>
        </p>
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script src="<?php echo e(asset('admin/js/sweetalert2.min.js')); ?>"></script>

    

    


    <script>

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        $('#saveBtn').click(function (e) {
            e.preventDefault();
            $(this).html('Sending..');

            $.ajax({
                data: $('#changePasswordForm').serialize(),
                url: "<?php echo e(route('change_password')); ?>",
                type: "POST",
                dataType: 'json',
                success: function (data) {
                    if (data.status == "success") {
                        $('#changePasswordForm').trigger("reset");
                        $('#saveBtn').html('Save Changes');
                        $(".error_change_passeword").hide();

                        $('#passwordModal').modal('hide');
                        Swal.fire({
                            text: "Password changed successfully",
                            type: 'success',
                            confirmButtonText: 'Ok',
                            confirmButtonColor: "#0F61A5"

                        });
                    } else {

                        $(".error_change_passeword").text(data.message);
                        $(".error_change_passeword").show();
                        $('#saveBtn').html('Save Changes');
                    }

                },
                error: function (data) {
                    // console.log('Error:', data);
                    $('#saveBtn').html('Save Changes');
                }
            });


        });
        // Password eye----------
        const togglePassword1 = document.querySelector('#togglePassword1');
        const password1 = document.querySelector('#old_password');

        togglePassword1.addEventListener('click', function (e) {
            // toggle the type attribute
            const type = password1.getAttribute('type') === 'password' ? 'text' : 'password';
            password1.setAttribute('type', type);
            // toggle the eye slash icon
            this.classList.toggle('fa-eye-slash');
            this.classList.toggle('fa-eye');
        });

        const togglePassword2 = document.querySelector('#togglePassword2');
        const password2 = document.querySelector('#new_password');

        togglePassword2.addEventListener('click', function (e) {
            // toggle the type attribute
            const type = password2.getAttribute('type') === 'password' ? 'text' : 'password';
            password2.setAttribute('type', type);
            // toggle the eye slash icon
            this.classList.toggle('fa-eye-slash');
            this.classList.toggle('fa-eye');

        });

        const togglePassword3 = document.querySelector('#togglePassword3');
        const password3 = document.querySelector('#new_password_confirmation');

        togglePassword3.addEventListener('click', function (e) {
            // toggle the type attribute
            const type = password3.getAttribute('type') === 'password' ? 'text' : 'password';
            password3.setAttribute('type', type);
            // toggle the eye slash icon
            this.classList.toggle('fa-eye-slash');
            this.classList.toggle('fa-eye');

        });

    </script>
    <?php echo $__env->yieldContent('scripts'); ?>

</body>

</html>
<?php /**PATH C:\xampp\htdocs\lottopanda\resources\views/layouts/app.blade.php ENDPATH**/ ?>