{% extends "base.html" %}
{% from 'components/ui.html' import page_header %}

{% block title %}{{ _('Edit Client') }} - {{ app_name }}{% endblock %}

{% block content %}
{% set actions %}
<a href="{{ url_for('clients.view_client', client_id=client.id) }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> {{ _('Back to Client') }}</a>
{% endset %}
{{ page_header('fas fa-user-edit', _('Edit Client'), subtitle_text=client.name, actions_html=actions, breadcrumbs=[{'text': _('Clients'), 'url': url_for('clients.list_clients')}, {'text': client.name, 'url': url_for('clients.view_client', client_id=client.id)}, {'text': _('Edit')}]) }}

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2">
        <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
            <form method="POST" action="{{ url_for('clients.edit_client', client_id=client.id) }}" novalidate data-validate-form>
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="name" class="form-label">{{ _('Client Name') }} *</label>
                        <input type="text" id="name" name="name" required value="{{ request.form.get('name', client.name) }}" placeholder="{{ _('Enter client name') }}" class="form-input">
                    </div>
                    <div>
                        <label for="default_hourly_rate" class="form-label">{{ _('Default Hourly Rate') }}</label>
                        <input type="number" step="0.01" min="0" id="default_hourly_rate" name="default_hourly_rate" value="{{ request.form.get('default_hourly_rate', client.default_hourly_rate or '') }}" placeholder="{{ _('e.g. 75.00') }}" class="form-input">
                        <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('This rate will be automatically filled when creating projects for this client') }}</p>
                    </div>
                </div>

                <div>
                    <label for="description" class="form-label">{{ _('Description') }}</label>
                    <textarea id="description" name="description" rows="3" placeholder="{{ _('Brief description of the client or project scope') }}" class="form-input">{{ request.form.get('description', client.description or '') }}</textarea>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="prepaid_hours_monthly" class="form-label">{{ _('Monthly Prepaid Hours') }}</label>
                        <input type="number" step="0.25" min="0" id="prepaid_hours_monthly" name="prepaid_hours_monthly" value="{{ request.form.get('prepaid_hours_monthly', client.prepaid_hours_monthly or '') }}" placeholder="{{ _('e.g. 50') }}" class="form-input">
                        <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Leave empty if this client has no prepaid allocation.') }}</p>
                    </div>
                    <div>
                        <label for="prepaid_reset_day" class="form-label">{{ _('Prepaid Reset Day') }}</label>
                        <input type="number" min="1" max="28" id="prepaid_reset_day" name="prepaid_reset_day" value="{{ request.form.get('prepaid_reset_day', client.prepaid_reset_day or 1) }}" class="form-input">
                        <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Day of the month when prepaid hours reset (1-28).') }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="contact_person" class="form-label">{{ _('Contact Person') }}</label>
                        <input type="text" id="contact_person" name="contact_person" value="{{ request.form.get('contact_person', client.contact_person or '') }}" placeholder="{{ _('Primary contact name') }}" class="form-input">
                    </div>
                    <div>
                        <label for="email" class="form-label">{{ _('Email') }}</label>
                        <input type="email" id="email" name="email" value="{{ request.form.get('email', client.email or '') }}" placeholder="{{ _('contact@client.com') }}" class="form-input">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="phone" class="form-label">{{ _('Phone') }}</label>
                        <input type="tel" id="phone" name="phone" value="{{ request.form.get('phone', client.phone or '') }}" placeholder="{{ _('+1 (555) 123-4567') }}" class="form-input">
                    </div>
                    <div>
                        <label for="address" class="form-label">{{ _('Address') }}</label>
                        <textarea id="address" name="address" rows="2" placeholder="{{ _('Client address') }}" class="form-input">{{ request.form.get('address', client.address or '') }}</textarea>
                    </div>
                </div>

                {% if custom_field_definitions %}
                <div class="mt-6 border-t border-border-light dark:border-border-dark pt-6">
                    <h3 class="text-lg font-semibold mb-4">{{ _('Custom Fields') }}</h3>
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">
                        {{ _('These custom fields are defined globally and available for all clients.') }}
                    </p>
                    <div class="space-y-4">
                        {% for definition in custom_field_definitions %}
                        <div>
                            <label for="custom_field_{{ definition.field_key }}" class="form-label">
                                {{ definition.label }}
                                {% if definition.is_mandatory %}<span class="text-red-600 dark:text-red-400">*</span>{% endif %}
                            </label>
                            <input 
                                type="text" 
                                id="custom_field_{{ definition.field_key }}" 
                                name="custom_field_{{ definition.field_key }}" 
                                value="{{ request.form.get('custom_field_' + definition.field_key, client.get_custom_field(definition.field_key, '') if client.custom_fields else '') }}" 
                                placeholder="{{ definition.description or _('Enter value') }}" 
                                class="form-input w-full"
                                {% if definition.is_mandatory %}required{% endif %}
                            >
                            {% if definition.description %}
                            <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">{{ definition.description }}</p>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div class="mt-6 border-t border-border-light dark:border-border-dark pt-6">
                    <h3 class="text-lg font-semibold mb-4">{{ _('Client Portal Access') }}</h3>
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">
                        {{ _('Enable portal access for this client. Clients can log in with their own credentials to view projects, invoices, and time entries.') }}
                    </p>
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <input type="checkbox" name="portal_enabled" id="portal_enabled" {% if client.portal_enabled %}checked{% endif %} class="h-4 w-4 rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" onchange="togglePortalFields()">
                            <label for="portal_enabled" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">{{ _('Enable Client Portal') }}</label>
                        </div>
                        <div id="portal_fields" style="display: {% if client.portal_enabled %}block{% else %}none{% endif %};">
                            <div class="mt-4">
                                <div class="flex items-center">
                                    <input type="checkbox" name="portal_issues_enabled" id="portal_issues_enabled" {% if client.portal_issues_enabled %}checked{% endif %} class="h-4 w-4 rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    <label for="portal_issues_enabled" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">{{ _('Enable Issue Reporting') }}</label>
                                </div>
                                <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1 ml-6">
                                    {{ _('Allow clients to report bugs and issues through the portal') }}
                                </p>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="portal_username" class="form-label">{{ _('Portal Username') }}</label>
                                    <input type="text" id="portal_username" name="portal_username" value="{{ request.form.get('portal_username', client.portal_username or '') }}" placeholder="{{ _('portal_username') }}" class="form-input">
                                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Unique username for portal login') }}</p>
                                </div>
                                <div>
                                    <label for="portal_password" class="form-label">{{ _('Portal Password') }}</label>
                                    <input type="password" id="portal_password" name="portal_password" value="" placeholder="{{ _('Leave empty to keep current password') }}" class="form-input">
                                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Set a new password or leave empty to keep current') }}</p>
                                </div>
                            </div>
                            {% if client.portal_enabled and client.portal_username %}
                            <div class="mt-2 text-sm text-text-muted-light dark:text-text-muted-dark">
                                <i class="fas fa-info-circle"></i> {{ _('Current portal username') }}: <strong>{{ client.portal_username }}</strong>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-end gap-3 border-t border-border-light dark:border-border-dark pt-4">
                    <a href="{{ url_for('clients.view_client', client_id=client.id) }}" class="btn btn-secondary">{{ _('Cancel') }}</a>
                    <button type="submit" class="btn btn-primary">{{ _('Update Client') }}</button>
                </div>
            </form>
            
            {% if client.portal_enabled and client.portal_username and client.email %}
            <div class="mt-4 pt-4 border-t border-border-light dark:border-border-dark">
                <form method="POST" action="{{ url_for('clients.send_portal_password_email', client_id=client.id) }}" id="send-email-form">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm">
                        <i class="fas fa-envelope mr-2"></i>{{ _('Send Password Setup Email') }}
                    </button>
                </form>
                <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-2">
                    {{ _('Send an email to %(email)s with a link to set their portal password.', email=client.email) }}
                </p>
            </div>
            {% elif client.portal_enabled and client.portal_username and not client.email %}
            <div class="mt-4 pt-4 border-t border-border-light dark:border-border-dark">
                <p class="text-xs text-amber-600 dark:text-amber-400">
                    <i class="fas fa-exclamation-triangle mr-1"></i>{{ _('Email address is required to send password setup email. Please set the client email address above.') }}
                </p>
            </div>
            {% endif %}
        </div>
    </div>

    <div>
        <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
            <h3 class="text-lg font-semibold mb-3">{{ _('Client Statistics') }}</h3>
            <ul class="grid grid-cols-2 gap-4 text-center">
                <li>
                    <div class="text-primary text-xl font-bold">{{ client.total_projects }}</div>
                    <div class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Total Projects') }}</div>
                </li>
                <li>
                    <div class="text-green-600 text-xl font-bold">{{ client.active_projects }}</div>
                    <div class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Active Projects') }}</div>
                </li>
                <li>
                    <div class="text-blue-600 text-xl font-bold">{{ "%.1f"|format(client.total_hours) }}</div>
                    <div class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Total Hours') }}</div>
                </li>
                <li>
                    <div class="text-amber-600 text-xl font-bold">{{ "%.2f"|format(client.estimated_total_cost) }}</div>
                    <div class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Est. Total Cost') }}</div>
                </li>
            </ul>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts_extra %}
<script>
function togglePortalFields() {
    const checkbox = document.getElementById('portal_enabled');
    const container = document.getElementById('portal_fields');
    if (checkbox.checked) {
        container.style.display = 'block';
    } else {
        container.style.display = 'none';
    }
}
</script>
{% endblock %}