@extends('layouts.app')

@section('page-title', 'Profile')

@push('page-css')
    @vite(['resources/css/tools/dashboard.css'])
    <style>
        .profile-section {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: var(--brand-border-radius, 8px);
            padding: 28px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }
        .profile-section h2 {
            margin: 0 0 4px 0;
            font-size: 1.15rem;
            color: #333;
        }
        .profile-section .section-desc {
            margin: 0 0 20px 0;
            font-size: 0.88rem;
            color: #888;
        }
        .form-group {
            margin-bottom: 18px;
        }
        .form-group label {
            display: block;
            font-size: 0.88rem;
            font-weight: 600;
            color: #555;
            margin-bottom: 6px;
        }
        .form-input {
            width: 100%;
            max-width: 420px;
            padding: 10px 14px;
            font-size: 0.92rem;
            border: 1px solid #d0d0d0;
            border-radius: var(--brand-border-radius, 6px);
            background: #fff;
            color: #333;
            transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
        }
        .form-input:focus {
            outline: none;
            border-color: var(--brand-primary, #4CAF50);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4CAF50) 15%, transparent);
        }
        .form-error {
            color: #dc2626;
            font-size: 0.82rem;
            margin-top: 4px;
        }
        .form-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 20px;
        }
        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 24px;
            background: var(--brand-primary, #4CAF50);
            color: #fff;
            border: none;
            border-radius: var(--brand-border-radius, 6px);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, transform 0.15s;
        }
        .btn-primary:hover {
            background: var(--brand-primary-dark, #388E3C);
            transform: translateY(-1px);
        }
        .btn-danger {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 24px;
            background: #dc2626;
            color: #fff;
            border: none;
            border-radius: var(--brand-border-radius, 6px);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-danger:hover { background: #b91c1c; }
        .btn-secondary {
            display: inline-flex;
            align-items: center;
            padding: 10px 24px;
            background: transparent;
            color: #555;
            border: 1px solid #d0d0d0;
            border-radius: var(--brand-border-radius, 6px);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-secondary:hover { background: #f5f5f5; }
        .saved-msg {
            font-size: 0.85rem;
            color: var(--brand-primary, #4CAF50);
            font-weight: 600;
        }

        /* Delete confirmation */
        .delete-confirm {
            display: none;
            margin-top: 16px;
            padding: 20px;
            background: #fef2f2;
            border: 1px solid #fca5a5;
            border-radius: var(--brand-border-radius, 6px);
        }
        .delete-confirm.open { display: block; }
        .delete-confirm p {
            margin: 0 0 12px 0;
            font-size: 0.88rem;
            color: #991b1b;
        }
        .delete-confirm .form-actions {
            margin-top: 16px;
        }

        /* Success banner */
        .profile-success {
            padding: 12px 16px;
            background: color-mix(in srgb, var(--brand-primary, #4CAF50) 10%, white);
            border: 1px solid color-mix(in srgb, var(--brand-primary, #4CAF50) 30%, white);
            border-radius: var(--brand-border-radius, 6px);
            color: var(--brand-primary, #4CAF50);
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 20px;
        }

        /* Dark mode */
        body.dark-mode .profile-section {
            background: #2d2d2d;
            border-color: #404040;
        }
        body.dark-mode .profile-section h2 { color: #f0f0f0; }
        body.dark-mode .profile-section .section-desc { color: #999; }
        body.dark-mode .form-group label { color: #ccc; }
        body.dark-mode .form-input {
            background: #1e1e1e;
            border-color: #555;
            color: #f0f0f0;
        }
        body.dark-mode .form-input:focus {
            border-color: var(--brand-primary, #4CAF50);
        }
        body.dark-mode .btn-secondary {
            color: #ccc;
            border-color: #555;
        }
        body.dark-mode .btn-secondary:hover { background: #3a3a3a; }
        body.dark-mode .delete-confirm {
            background: #3b1c1c;
            border-color: #7f1d1d;
        }
        body.dark-mode .delete-confirm p { color: #fca5a5; }
        body.dark-mode .profile-success {
            background: color-mix(in srgb, var(--brand-primary, #4CAF50) 15%, #2d2d2d);
            border-color: color-mix(in srgb, var(--brand-primary, #4CAF50) 30%, #2d2d2d);
        }

        /* Theme overrides */
        body.theme-forest .profile-section { background: #243020; border-color: #3d5235; }
        body.theme-forest .profile-section h2 { color: #b8d4a8; }
        body.theme-forest .profile-section .section-desc { color: #8aaa78; }
        body.theme-forest .form-group label { color: #b8d4a8; }
        body.theme-forest .form-input { background: #1a2518; border-color: #3d5235; color: #b8d4a8; }
        body.theme-forest .btn-secondary { color: #b8d4a8; border-color: #3d5235; }
        body.theme-forest .btn-secondary:hover { background: #2d3d28; }
        body.theme-forest .delete-confirm { background: #3b2020; border-color: #5a3030; }

        body.theme-ocean .profile-section { background: #1c2636; border-color: #2e4460; }
        body.theme-ocean .profile-section h2 { color: #a0c4e8; }
        body.theme-ocean .profile-section .section-desc { color: #7a9ab8; }
        body.theme-ocean .form-group label { color: #a0c4e8; }
        body.theme-ocean .form-input { background: #152030; border-color: #2e4460; color: #a0c4e8; }
        body.theme-ocean .btn-secondary { color: #a0c4e8; border-color: #2e4460; }
        body.theme-ocean .btn-secondary:hover { background: #243550; }
        body.theme-ocean .delete-confirm { background: #361c1c; border-color: #5a3030; }

        body.theme-slate .profile-section { background: #faf7f2; border-color: #c8bfb0; }
        body.theme-slate .profile-section h2 { color: #504840; }
        body.theme-slate .profile-section .section-desc { color: #8b7d6b; }
        body.theme-slate .form-group label { color: #504840; }
        body.theme-slate .form-input { background: #fff; border-color: #c8bfb0; color: #504840; }
        body.theme-slate .btn-secondary { color: #504840; border-color: #c8bfb0; }

        body.theme-sunset .profile-section { background: #fff8f5; border-color: #e0bfb0; }
        body.theme-sunset .profile-section h2 { color: #6b3f35; }
        body.theme-sunset .profile-section .section-desc { color: #a06858; }
        body.theme-sunset .form-group label { color: #6b3f35; }
        body.theme-sunset .form-input { background: #fff; border-color: #e0bfb0; color: #6b3f35; }
        body.theme-sunset .btn-secondary { color: #6b3f35; border-color: #e0bfb0; }
    </style>
@endpush

@section('content')
<div class="dashboard">
    <div class="dashboard-header">
        <h1>Profile Settings</h1>
        <p class="dashboard-subtitle">Manage your account information and security</p>
    </div>

    @if(session('status') === 'profile-updated')
        <div class="profile-success">Profile updated successfully.</div>
    @endif
    @if(session('status') === 'password-updated')
        <div class="profile-success">Password updated successfully.</div>
    @endif

    {{-- Profile Information --}}
    <div class="profile-section">
        <h2>Profile Information</h2>
        <p class="section-desc">Update your name and email address.</p>

        <form method="POST" action="{{ route('profile.update') }}">
            @csrf
            @method('patch')

            <div class="form-group">
                <label for="name">Name</label>
                <input id="name" name="name" type="text" class="form-input" value="{{ old('name', $user->name) }}" required autofocus autocomplete="name">
                @error('name')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="email">Email</label>
                <input id="email" name="email" type="email" class="form-input" value="{{ old('email', $user->email) }}" required autocomplete="username">
                @error('email')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                    Save Changes
                </button>
            </div>
        </form>
    </div>

    {{-- Update Password --}}
    <div class="profile-section">
        <h2>Update Password</h2>
        <p class="section-desc">Use a strong, unique password to keep your account secure.</p>

        <form method="POST" action="{{ route('password.update') }}">
            @csrf
            @method('put')

            <div class="form-group">
                <label for="current_password">Current Password</label>
                <input id="current_password" name="current_password" type="password" class="form-input" autocomplete="current-password">
                @error('current_password', 'updatePassword')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="password">New Password</label>
                <input id="password" name="password" type="password" class="form-input" autocomplete="new-password">
                @error('password', 'updatePassword')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="password_confirmation">Confirm Password</label>
                <input id="password_confirmation" name="password_confirmation" type="password" class="form-input" autocomplete="new-password">
                @error('password_confirmation', 'updatePassword')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                    Update Password
                </button>
            </div>
        </form>
    </div>

    {{-- Delete Account --}}
    <div class="profile-section">
        <h2>Delete Account</h2>
        <p class="section-desc">Permanently delete your account and all associated data. This action cannot be undone.</p>

        <button type="button" class="btn-danger" id="showDeleteConfirm">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
            Delete Account
        </button>

        <div class="delete-confirm" id="deleteConfirm">
            <p>Are you sure? Please enter your password to confirm permanent deletion of your account.</p>

            <form method="POST" action="{{ route('profile.destroy') }}">
                @csrf
                @method('delete')

                <div class="form-group">
                    <label for="delete_password">Password</label>
                    <input id="delete_password" name="password" type="password" class="form-input" placeholder="Enter your password" required>
                    @error('password', 'userDeletion')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn-danger">Confirm Delete</button>
                    <button type="button" class="btn-secondary" id="cancelDelete">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('page-scripts')
<script>
(function() {
    var showBtn = document.getElementById('showDeleteConfirm');
    var confirmBox = document.getElementById('deleteConfirm');
    var cancelBtn = document.getElementById('cancelDelete');

    if (showBtn && confirmBox) {
        showBtn.addEventListener('click', function() {
            confirmBox.classList.add('open');
            showBtn.style.display = 'none';
        });
    }
    if (cancelBtn && confirmBox && showBtn) {
        cancelBtn.addEventListener('click', function() {
            confirmBox.classList.remove('open');
            showBtn.style.display = '';
        });
    }

    // Auto-open if there were deletion validation errors
    @if($errors->userDeletion->isNotEmpty())
        if (confirmBox && showBtn) {
            confirmBox.classList.add('open');
            showBtn.style.display = 'none';
        }
    @endif
})();
</script>
@endpush