{% extends "base.html" %}

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

{% block content %}
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
    <div>
        <h1 class="text-2xl font-bold">{{ _('Edit Client') }}</h1>
        <p class="text-text-muted-light dark:text-text-muted-dark">{{ client.name }}</p>
    </div>
    <a href="{{ url_for('clients.view_client', client_id=client.id) }}" class="bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg mt-4 md:mt-0">{{ _('Back to Client') }}</a>
    </div>

<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-lg shadow">
            <form method="POST" action="{{ url_for('clients.edit_client', client_id=client.id) }}">
                <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="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('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="contact_person" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('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>

                <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="bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg">{{ _('Cancel') }}</a>
                    <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg">{{ _('Update Client') }}</button>
                </div>
            </form>
        </div>
    </div>

    <div>
        <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
            <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 %}
