{% extends "base.html" %}

{% block title %}{{ _('Create 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">{{ _('Create Client') }}</h1>
        <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Add a new client to manage related projects and billing.') }}</p>
    </div>
    <a href="{{ url_for('clients.list_clients') }}" class="bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg mt-4 md:mt-0">{{ _('Back to Clients') }}</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.create_client') }}" novalidate>
                <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','') }}" 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','') }}" 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>
                    <div class="flex items-center justify-between">
                        <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Description') }}</label>
                        <small class="text-text-muted-light dark:text-text-muted-dark">{{ _('Supports Markdown') }}</small>
                    </div>
                    <div class="markdown-editor-wrapper">
                        <textarea class="form-input hidden" id="description" name="description" rows="8" placeholder="{{ _('Brief description of the client or project scope') }}">{{ request.form.get('description','') }}</textarea>
                        <div id="description_editor"></div>
                    </div>
                </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','') }}" 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','') }}" 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','') }}" 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','') }}</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.list_clients') }}" 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">{{ _('Create 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">{{ _('Help') }}</h3>
            <ul class="space-y-3 text-sm">
                <li>
                    <strong>{{ _('Client Name') }}</strong>
                    <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Choose a clear, descriptive name for the client organization.') }}</p>
                </li>
                <li>
                    <strong>{{ _('Default Hourly Rate') }}</strong>
                    <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Set the standard hourly rate for this client. This will automatically populate when creating new projects.') }}</p>
                </li>
                <li>
                    <strong>{{ _('Contact Information') }}</strong>
                    <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Add contact details for easy communication and record keeping.') }}</p>
                </li>
                <li>
                    <strong>{{ _('Description') }}</strong>
                    <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Provide context about the client relationship or typical project types.') }}</p>
                </li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css">
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/theme/toastui-editor-dark.css">
{% endblock %}

<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
  const descriptionInput = document.getElementById('description');
  let mdEditor = null;
  if (descriptionInput && window.toastui && window.toastui.Editor) {
    const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
    mdEditor = new toastui.Editor({
      el: document.getElementById('description_editor'),
      height: '300px',
      initialEditType: 'wysiwyg',
      previewStyle: 'vertical',
      usageStatistics: false,
      theme: theme,
      toolbarItems: [
        ['heading','bold','italic','strike'],
        ['hr','quote'],
        ['ul','ol','task'],
        ['link','code','codeblock','table'],
        ['image'],
      ],
      initialValue: descriptionInput.value || ''
    });
    const form = document.querySelector('form[action*="clients/create"]') || document.querySelector('form');
    form && form.addEventListener('submit', function(){
      if (mdEditor && descriptionInput) {
        try { descriptionInput.value = mdEditor.getMarkdown(); } catch(_) {}
      }
    });
  }
});
</script>
