@extends('layouts.master')
@section('title', 'Deposit')
@section('page-heading', 'Deposit Money')
@section('content')

<!-- Page Background with floating coins -->
<div class="deposit-page">
    <!-- Floating coin decorations -->
    <!--<i class="fas fa-coins floating-icon" style="top:10%; left:5%; animation-delay:0s;"></i>-->
    <!--<i class="fas fa-wallet floating-icon" style="top:20%; left:80%; animation-delay:1s;"></i>-->
    <!--<i class="fas fa-money-bill-wave floating-icon" style="top:70%; left:15%; animation-delay:2s;"></i>-->

<div class="container py-5 d-flex justify-content-center">
       <div class="col-lg-6 col-md-8">
            <div class="card deposit-card shadow-lg p-4 position-relative">

                <!-- Header -->
                    <h4 class=" text-center mb-4" style="color:#13319b;">Change Password</h4>
                    <p class="text-center text-muted mb-4" style="font-size: 0.9rem;">
                        Make sure your new password is strong and secure
                    </p>
                 <form method="POST" action="{{ route('password.update') }}">
                    @csrf
                
                                    <!-- Current Password -->
                 <!-- Current Password -->
                <div class="mb-3">
                    <label class="form-label">Current Password</label>
                    <div class="inputicon">
                    <div class="input-group" >
                        <input type="password" name="current_password" class="form-control" id="current_password" required>
                        <button class="btn  toggle-password" type="button" data-target="current_password">
                            <i class="bi bi-eye showicon"></i>
                        </button>
                    </div></div>
                    <!--@error('current_password') <small class="text-danger">{{ $message }}</small> @enderror-->
                </div>
                
                <!-- New Password -->
                <div class="mb-3">
                    <label class="form-label">New Password</label>
                    <div class="inputicon">
                    <div class="input-group">
                        <input type="password" name="new_password" class="form-control" id="new_password" required>
                        <button class="btn  toggle-password" type="button" data-target="new_password">
                            <i class="bi bi-eye showicon"></i>
                        </button>
                    </div></div>
                    <!--@error('new_password') <small class="text-danger">{{ $message }}</small> @enderror-->
                </div>
                
                
                    <!-- Password strength indicator -->
    <div class="mt-2">
        <div class="password-strength-bar">
            <div class="password-strength-fill" id="passwordStrengthFill"></div>
        </div>
        <small id="passwordStrengthText" class="text-muted">Enter a strong password</small>
    </div>
                
                <!-- Confirm Password -->
                <div class="mb-3">
                    <label class="form-label">Confirm New Password</label>
                    <div class="inputicon">
                    <div class="input-group">
                        <input type="password" name="new_password_confirmation" class="form-control" id="new_password_confirmation" required>
                        <button class="btn  toggle-password" type="button" data-target="new_password_confirmation">
                            <i class="bi bi-eye showicon" ></i>
                        </button>
                    </div></div>
                </div>


<!-- Button Row -->
<div class="mb-3 d-flex justify-content-between align-items-center">
    <!-- Back to Dashboard on left -->
    <a href="{{ route('services.dashboard') }}" class="back-dashboard">
        <i class="bi bi-arrow-left-circle-fill"></i> Back to Dashboard
    </a>

    <!-- Change Password & Cancel on right -->
    <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary">Change Password</button>
        <button type="button" class="btn btn-secondary" id="cnacelbtn">Cancel</button>
    </div>
</div>

                     

                    <!-- Success message -->
                    <!--@if(session('success'))-->
                    <!--    <div class="alert alert-success mt-3">{{ session('success') }}</div>-->
                    <!--@endif-->
                </form>


            </div>
        </div>
    </div>
</div>

<!-- JS: Card Selection -->

<style>
.password-strength-bar {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    margin-top: 4px;
}

.password-strength-fill {
    height: 100%;
    width: 0%;
    background: red;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

.back-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #13319b;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.back-dashboard:hover {
    color: #0f2678;
    transform: translateX(-3px);
}


.showicon{
       /*position: absolute;*/
    /*right: 10px;              */
    cursor: pointer;
    font-size: 1.1rem;         /* slightly bigger */
    color: #6c757d;            /* default color */
    padding: 4px;
    transition: all 0.3s ease;
    background: #f1f3f5;        /* subtle background */
    border-radius: 50%;         /* circular shape */
    display: flex;
    align-items: center;
    justify-content: center;
    border:none;
}
.showicon:hover {
    color: #13319b;
    background: #e2e6ea;
    transform: scale(1.2);
    border:none;/* subtle grow */
}
.showicon.active {
    color: #fff;
    background: #13319b;
     border:none;
}
/* Card styling */
.deposit-card {
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.inputicon{
    position: relative;
    border: 1px solid #ced4da; /* single border for input+icon */
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    /*padding-right: 2.5rem; */
    }/* space for icon */
   .inputicon:focus-within {
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(19, 49, 155, 0.25);
} 
    .inputicon input{
        border: none; /* remove default input border */
        outline: none;
    }
    
    .inputicon .form-control {
    border: 1px solid #ced4da;
    border-radius: 8px;
    transition: all 0.3s ease;
    padding-right: 2.5rem; /* space for eye icon */
}

.inputicon .form-control:focus {
    border-color: #13319b;        /* highlight border color */
    box-shadow: 0 0 8px rgba(19, 49, 155, 0.3); /* subtle glow */
    outline: none;                /* remove default outline */
}
#cnacelbtn{
            /*background: #13319b;*/
            border: none;
            padding: 12px;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
}
        .btn-primary {
            background: #13319b;
            border: none;
            padding: 12px;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-primary:hover {
            background: #0f2678;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(19, 49, 155, 0.4);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-primary::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }

 
        
       .form-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 8px;
            transition: color 0.3s ease;
        }

     
    
    
    
    
    
    
    
    
    /*alert design*/
    /* Popup container */
.swal-custom-popup {
    border-radius: 20px;
    /*background: linear-gradient(135deg, #5bcfc5, #709fba);*/
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    font-family: 'Roboto', sans-serif;
}

/* Title */
.swal-custom-title {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

/* Content/Text */
.swal-custom-content {
    font-size: 14px;
    color: #f0f0f0;
    margin-top: 0.3em;
}

/* Confirm button */
.swal-custom-btn {
    background: #13319b !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 6px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

</style>

@endsection

@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('new_password').addEventListener('input', function() {
    let password = this.value;
    let fill = document.getElementById('passwordStrengthFill');
    let text = document.getElementById('passwordStrengthText');

    let strength = 0;

    if (password.length >= 6) strength++;
    if (/[A-Z]/.test(password)) strength++;
    if (/[0-9]/.test(password)) strength++;
    if (/[@$!%*?&]/.test(password)) strength++;

    switch(strength) {
        case 0:
        case 1:
            fill.style.width = "25%";
            fill.style.background = "red";
            text.innerText = "Weak password";
            text.style.color = "red";
            break;
        case 2:
            fill.style.width = "50%";
            fill.style.background = "orange";
            text.innerText = "Medium password";
            text.style.color = "orange";
            break;
        case 3:
            fill.style.width = "75%";
            fill.style.background = "yellowgreen";
            text.innerText = "Good password";
            text.style.color = "yellowgreen";
            break;
        case 4:
            fill.style.width = "100%";
            fill.style.background = "green";
            text.innerText = "Strong password";
            text.style.color = "green";
            break;
    }
});

    let cancelbtn = document.getElementById('cnacelbtn');
    cancelbtn.addEventListener('click',function(){
        document.getElementById('current_password').value = '';
        document.getElementById('new_password').value = '';
        document.getElementById('new_password_confirmation').value = '';
    });
    
    
    document.querySelectorAll(".toggle-password").forEach(function(button) {
        button.addEventListener("click", function() {
            const input = document.getElementById(this.dataset.target);
            const icon = this.querySelector("i");

            if (input.type === "password") {
                input.type = "text";
                icon.classList.remove("bi-eye");
                icon.classList.add("bi-eye-slash");
            } else {
                input.type = "password";
                icon.classList.remove("bi-eye-slash");
                icon.classList.add("bi-eye");
            }
        });
    });
      // Success message
    @if(session('success'))
        Swal.fire({
         icon: 'success',
        title: 'Success',
        text: '{{ session('success') }}',
        confirmButtonColor: '#13319b',
        customClass: {
            popup: 'swal-custom-popup',
            title: 'swal-custom-title',
            content: 'swal-custom-content',
            confirmButton: 'swal-custom-btn'
        },
        width: '400px',       // smaller width
        padding: '1.5em',     // adjust padding
        timer: 4000,          // auto close
        timerProgressBar: true
        });
    @endif

    // Error for current_password
    @if($errors->has('current_password'))
     Swal.fire({
        icon: 'error',
        title: 'Oops!',
        text: '{{ $errors->first('current_password') }}',
        confirmButtonColor: '#d33',
        customClass: {
            popup: 'swal-custom-popup',
            title: 'swal-custom-title',
            content: 'swal-custom-content',
            confirmButton: 'swal-custom-btn'
        },
        width: '400px',
        padding: '1.5em'
        });
    @endif

    // Optional: show errors for new_password
    @if($errors->has('new_password'))
        Swal.fire({
            icon: 'error',
            title: 'Oops!',
            text: '{{ $errors->first('new_password') }}',
            confirmButtonColor: '#d33'
        });
    @endif  
    
    
    
    
    
    
    
    
});

</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@endpush