@extends('layouts.app')

@section('content')

<style>
    .password-page {
        min-height: 100vh;
        padding: 70px 0;
        background:
            radial-gradient(circle at top left, rgba(15,118,110,.15), transparent 35%),
            linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }

    .password-card {
        border: 0;
        border-radius: 26px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(15, 23, 42, .12);
    }

    .password-header {
        background: linear-gradient(135deg, #111827, #0f766e);
        padding: 34px;
        color: #fff;
        text-align: center;
    }

    .password-icon {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: rgba(255,255,255,.16);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        font-size: 30px;
        border: 3px solid rgba(255,255,255,.18);
    }

    .password-header h3 {
        font-weight: 800;
        margin-bottom: 6px;
    }

    .password-header p {
        color: rgba(255,255,255,.75);
        margin-bottom: 0;
    }

    .password-body {
        padding: 34px;
        background: #fff;
    }

    .form-label {
        font-weight: 700;
        color: #111827;
        margin-bottom: 8px;
    }

    .password-input-wrap {
        position: relative;
    }

    .password-input-wrap .form-control {
        height: 52px;
        border-radius: 15px;
        border: 1px solid #e5e7eb;
        background: #f8fafc;
        padding-right: 50px;
        font-weight: 600;
    }

    .password-input-wrap .form-control:focus {
        background: #fff;
        border-color: #0f766e;
        box-shadow: 0 0 0 .2rem rgba(15,118,110,.12);
    }

    .toggle-password {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #6b7280;
        font-size: 16px;
        cursor: pointer;
    }

    .toggle-password:hover {
        color: #0f766e;
    }

    .btn-password {
        height: 54px;
        border-radius: 16px;
        border: 0;
        background: linear-gradient(135deg, #111827, #0f766e);
        color: #fff;
        font-weight: 800;
        box-shadow: 0 14px 30px rgba(15,118,110,.22);
    }

    .btn-password:hover {
        color: #fff;
        transform: translateY(-1px);
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #6b7280;
        font-weight: 700;
        text-decoration: none;
        margin-top: 18px;
    }

    .back-link:hover {
        color: #0f766e;
        text-decoration: none;
    }
</style>

<section class="password-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">

                <div class="card password-card">
                    <div class="password-header">
                        <div class="password-icon">
                            <i class="fas fa-key"></i>
                        </div>
                        <h3>Change Password</h3>
                        <p>Keep your account secure with a strong password.</p>
                    </div>

                    <div class="password-body">

                        @if(session('success'))
                            <div class="alert alert-success border-0 rounded shadow-sm">
                                <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                            </div>
                        @endif

                        @if($errors->any())
                            <div class="alert alert-danger border-0 rounded shadow-sm">
                                <i class="fas fa-exclamation-circle mr-2"></i>Please check the errors below.
                            </div>
                        @endif

                        <form method="POST" action="{{ url('/change-password') }}">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label">Current Password</label>
                                <div class="password-input-wrap">
                                    <input type="password" name="current_password" class="form-control password-field" placeholder="Enter current password">
                                    <button type="button" class="toggle-password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                @error('current_password')
                                    <small class="text-danger font-weight-bold">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">New Password</label>
                                <div class="password-input-wrap">
                                    <input type="password" name="new_password" class="form-control password-field" placeholder="Enter new password">
                                    <button type="button" class="toggle-password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                @error('new_password')
                                    <small class="text-danger font-weight-bold">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Confirm Password</label>
                                <div class="password-input-wrap">
                                    <input type="password" name="new_password_confirmation" class="form-control password-field" placeholder="Confirm new password">
                                    <button type="button" class="toggle-password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-password w-100">
                                <i class="fas fa-shield-alt mr-2"></i>Update Password
                            </button>
                        </form>

                        <div class="text-center">
                            <a href="{{ url('/profile') }}" class="back-link">
                                <i class="fas fa-arrow-left"></i> Back to Profile
                            </a>
                        </div>

                    </div>
                </div>

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

<script>
    document.querySelectorAll('.toggle-password').forEach(function(button) {
        button.addEventListener('click', function() {
            const input = this.closest('.password-input-wrap').querySelector('.password-field');
            const icon = this.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
</script>

@endsection