@extends('layouts.dashboard')

@section('page_title', 'MY PROFILE')

@section('content')
<div class="ff-toolbar d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0" style="font-size: 1.25rem;">Profile Settings</h2>
    <a class="btn ff-btn-secondary btn-sm" href="{{ route('home') }}"><i class="fa fa-arrow-left"></i> Back</a>
</div>

<div class="row g-4">
    <div class="col-lg-6" id="change-password">
        <div class="ff-table-card p-4 h-100">
            <h5 class="mb-3">Update Profile</h5>
            <form method="POST" action="{{ route('profile.update') }}" id="profileForm">
                @csrf
                @method('PUT')

                <div class="mb-3">
                    <label class="mb-2 fw-semibold">Name</label>
                    <input type="text" name="name" value="{{ old('name', $user->name) }}" class="form-control ff-input">
                </div>

                <div class="mb-3">
                    <label class="mb-2 fw-semibold">Email</label>
                    <input type="email" name="email" value="{{ old('email', $user->email) }}" class="form-control ff-input">
                </div>

                <div class="text-end">
                    <button type="submit" class="ff-action border-0"><i class="fa-solid fa-floppy-disk"></i> Save Profile</button>
                </div>
            </form>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="ff-table-card p-4 h-100">
            <h5 class="mb-3">Change Password</h5>
            <form method="POST" action="{{ route('profile.password.update') }}" id="passwordForm">
                @csrf
                @method('PUT')

                <div class="mb-3">
                    <label class="mb-2 fw-semibold">Current Password</label>
                    <input type="password" name="current_password" class="form-control ff-input">
                </div>

                <div class="mb-3">
                    <label class="mb-2 fw-semibold">New Password</label>
                    <input type="password" name="new_password" class="form-control ff-input">
                </div>

                <div class="mb-3">
                    <label class="mb-2 fw-semibold">Confirm New Password</label>
                    <input type="password" name="new_password_confirmation" class="form-control ff-input">
                </div>

                <div class="text-end">
                    <button type="submit" class="ff-action border-0"><i class="fa-solid fa-key"></i> Change Password</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const passwordForm = document.getElementById('passwordForm');
    if (passwordForm) {
        passwordForm.addEventListener('submit', function(event) {
            const currentPassword = passwordForm.querySelector('input[name="current_password"]').value.trim();
            const newPassword = passwordForm.querySelector('input[name="new_password"]').value.trim();
            const confirmPassword = passwordForm.querySelector('input[name="new_password_confirmation"]').value.trim();

            if (!currentPassword || !newPassword || !confirmPassword) {
                event.preventDefault();
                showToast('Please fill all password fields.', 'danger');
                return;
            }

            if (newPassword.length < 8) {
                event.preventDefault();
                showToast('New password must be at least 8 characters.', 'danger');
                return;
            }

            if (newPassword !== confirmPassword) {
                event.preventDefault();
                showToast('New password and confirm password do not match.', 'danger');
            }
        });
    }

    @if ($errors->any())
        @foreach ($errors->all() as $error)
            showToast(@json($error), 'danger');
        @endforeach
    @endif
});
</script>
@endpush
@endsection