@extends('Admin.layout')

@section('content')

<style>
    :root {
        --primary: #d44e22;
        --primary-dark: #b83d18;
        --primary-light: #fff1ec;
        --primary-rgb: 212, 78, 34;
    }

    [data-theme="dark"],
    .dark-mode,
    body.dark {
        --primary: #ff7a4d;
        --primary-dark: #ff8f66;
        --primary-light: rgba(212, 78, 34, 0.12);
    }

    .pw-card {
        max-width: 480px;
        margin: 0 auto;
    }

    /* Floating label field */
    .float-field {
        position: relative;
        margin-bottom: 26px;
    }

    .float-field input {
        width: 100%;
        height: 54px;
        padding: 18px 46px 6px 16px;
        border: 1.5px solid rgba(0,0,0,0.12);
        border-radius: 0.75rem;
        font-size: 0.95rem;
        color: var(--bs-body-color, #212529);
        background: var(--bs-body-bg, #fff);
        transition: border-color .18s ease, box-shadow .18s ease;
    }

    .float-field input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
    }

    .float-field label {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.95rem;
        color: #98a2b3;
        pointer-events: none;
        transition: all .16s ease;
        background: transparent;
        padding: 0 4px;
    }

    /* Float up when focused OR has content */
    .float-field input:focus + label,
    .float-field input:not(:placeholder-shown) + label {
        top: 0;
        transform: translateY(-50%);
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--primary);
        background: var(--bs-body-bg, #fff);
    }

    .float-field .toggle-eye {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 4px;
        display: flex;
        cursor: pointer;
        color: #98a2b3;
        transition: color .15s ease;
    }
    .float-field .toggle-eye:hover { color: var(--primary); }

    .btn-reset {
        width: 100%;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        border: none;
        color: #fff;
        padding: 14px;
        border-radius: 0.85rem;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.01em;
        transition: all .2s ease;
        margin-top: 10px;
    }
    .btn-reset:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -6px rgba(var(--primary-rgb), 0.5);
        color: #fff;
    }
</style>

<div class="pw-card">
    <div class="card p-5 shadow-sm rounded-4 border-0">
        <h5 class="text-center fw-bold mb-4">Reset Password</h5>

            <form id="resetPasswordForm">

                @csrf

                {{-- Current Password --}}
                <div class="float-field mb-4">
                    <input
                        type="password"
                        id="currentPassword"
                        name="current_password"
                        placeholder=" "
                        autocomplete="current-password"
                        required>

                    <label for="currentPassword">Current Password</label>

                    <button
                        type="button"
                        class="toggle-eye"
                        data-target="currentPassword"
                        aria-label="Toggle password visibility">

                        <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19"
                            viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                            <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
                        </svg>

                    </button>

                    <small class="text-danger error-current_password"></small>

                </div>

                {{-- New Password --}}
                <div class="float-field mb-4">

                    <input
                        type="password"
                        id="newPassword"
                        name="new_password"
                        placeholder=" "
                        autocomplete="new-password"
                        required>

                    <label for="newPassword">New Password</label>

                    <button
                        type="button"
                        class="toggle-eye"
                        data-target="newPassword"
                        aria-label="Toggle password visibility">

                        <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19"
                            viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                            <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
                        </svg>

                    </button>

                    <small class="text-danger error-new_password"></small>

                </div>

                {{-- Confirm Password --}}
                <div class="float-field mb-4">

                    <input
                        type="password"
                        id="confirmPassword"
                        name="confirm_password"
                        placeholder=" "
                        autocomplete="new-password"
                        required>

                    <label for="confirmPassword">Confirm Password</label>

                    <button
                        type="button"
                        class="toggle-eye"
                        data-target="confirmPassword"
                        aria-label="Toggle password visibility">

                        <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19"
                            viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                            <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
                        </svg>

                    </button>

                    <small class="text-danger error-confirm_password"></small>

                </div>

                <button
                    type="submit"
                    id="resetBtn"
                    class="btn btn-primary w-100">

                    Reset Password

                </button>

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

<!-- CSS & JS Assets -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

$(document).ready(function () {

    // Password Show / Hide
    $('.toggle-eye').click(function () {

        let target = $('#' + $(this).data('target'));

        if (target.attr('type') === 'password') {
            target.attr('type', 'text');
        } else {
            target.attr('type', 'password');
        }

    });

    // Reset Password
    $('#resetPasswordForm').submit(function(e){

        e.preventDefault();

        $('.text-danger').html('');

        $('#resetBtn')
            .prop('disabled', true)
            .text('Please wait...');

        $.ajax({

            url: "{{ route('reset_password_update') }}",
            type: "POST",
            data: $(this).serialize(),

            success:function(response){

                toastr.success(response.message);

                $('#resetPasswordForm')[0].reset();

            },

            error:function(xhr){

                if(xhr.status == 422){

                    let errors = xhr.responseJSON.errors;

                    $.each(errors,function(key,value){

                        $('.error-'+key).text(value[0]);

                    });

                }
                else{

                    toastr.error(xhr.responseJSON.message ?? 'Something went wrong.');

                }

            },

            complete:function(){

                $('#resetBtn')
                    .prop('disabled', false)
                    .text('Reset Password');

            }

        });

    });

});

</script>

@endsection