{% extends "base.html" %}

{% block title %}{{ customer.full_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="mb-0"><i class="bi bi-person-badge text-primary"></i> <span id="customer-title">{{ customer.full_name }}</span></h2>
                <div>
                    <a href="{% url 'customers:customer-delete' customer.pk %}" class="btn btn-outline-danger">
                        <i class="bi bi-trash"></i> Удалить
                    </a>
                    <a href="{% url 'customers:customer-list' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Назад к списку
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Customer Info -->
        <div class="col-md-6">
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0"><i class="bi bi-person-circle text-primary"></i> Информация о клиенте</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless mb-0" id="customer-info-table" data-customer-id="{{ customer.pk }}">
                        <colgroup>
                            <col style="width: 40%;">
                            <col style="width: 50%;">
                            <col style="width: 10%;">
                        </colgroup>
                        <tbody>
                        <!-- Основная информация -->
                        <tr data-field="name">
                            <td class="text-muted"><i class="bi bi-person-fill text-primary"></i> Имя:</td>
                            <td>
                                <span class="field-value fw-bold">{{ customer.name|default:"—" }}</span>
                                <input type="text" class="field-input form-control form-control-sm d-none" value="{{ customer.name|default:'' }}">
                                <div class="field-actions d-inline-block ms-2 d-none">
                                    <button class="btn btn-sm btn-success save-btn py-0 px-1" title="Сохранить"><i class="bi bi-check-lg"></i></button>
                                    <button class="btn btn-sm btn-outline-secondary cancel-btn py-0 px-1" title="Отменить"><i class="bi bi-x-lg"></i></button>
                                    <span class="save-status ms-1"></span>
                                </div>
                            </td>
                            <td class="text-end">
                                <div class="d-flex gap-1 justify-content-end">
                                    <button class="btn btn-sm btn-outline-secondary copy-btn" title="Копировать" data-copy-value="{{ customer.name|default:'' }}">
                                        <i class="bi bi-copy"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary edit-btn" title="Редактировать">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-field="phone">
                            <td class="text-muted"><i class="bi bi-telephone-fill text-success"></i> Телефон:</td>
                            <td>
                                <span class="field-value">{{ customer.phone|default:"—" }}</span>
                                <input type="tel" class="field-input form-control form-control-sm d-none" value="{{ customer.phone|default:'' }}" placeholder="+375...">
                                <div class="field-actions d-inline-block ms-2 d-none">
                                    <button class="btn btn-sm btn-success save-btn py-0 px-1" title="Сохранить"><i class="bi bi-check-lg"></i></button>
                                    <button class="btn btn-sm btn-outline-secondary cancel-btn py-0 px-1" title="Отменить"><i class="bi bi-x-lg"></i></button>
                                    <span class="save-status ms-1"></span>
                                </div>
                            </td>
                            <td class="text-end">
                                <div class="d-flex gap-1 justify-content-end">
                                    <button class="btn btn-sm btn-outline-secondary copy-btn" title="Копировать" data-copy-value="{{ customer.phone|default:'' }}">
                                        <i class="bi bi-copy"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary edit-btn" title="Редактировать">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-field="email">
                            <td class="text-muted"><i class="bi bi-envelope-fill text-info"></i> Email:</td>
                            <td>
                                <span class="field-value">{{ customer.email|default:"—" }}</span>
                                <input type="email" class="field-input form-control form-control-sm d-none" value="{{ customer.email|default:'' }}">
                                <div class="field-actions d-inline-block ms-2 d-none">
                                    <button class="btn btn-sm btn-success save-btn py-0 px-1" title="Сохранить"><i class="bi bi-check-lg"></i></button>
                                    <button class="btn btn-sm btn-outline-secondary cancel-btn py-0 px-1" title="Отменить"><i class="bi bi-x-lg"></i></button>
                                    <span class="save-status ms-1"></span>
                                </div>
                            </td>
                            <td class="text-end">
                                <div class="d-flex gap-1 justify-content-end">
                                    <button class="btn btn-sm btn-outline-secondary copy-btn" title="Копировать" data-copy-value="{{ customer.email|default:'' }}">
                                        <i class="bi bi-copy"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary edit-btn" title="Редактировать">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr data-field="notes">
                            <td class="text-muted"><i class="bi bi-card-text text-warning"></i> Заметки:</td>
                            <td>
                                <span class="field-value" style="white-space: pre-wrap;">{{ customer.notes|default:"—" }}</span>
                                <textarea class="field-input form-control form-control-sm d-none" rows="2">{{ customer.notes|default:'' }}</textarea>
                                <div class="field-actions d-inline-block ms-2 d-none">
                                    <button class="btn btn-sm btn-success save-btn py-0 px-1" title="Сохранить"><i class="bi bi-check-lg"></i></button>
                                    <button class="btn btn-sm btn-outline-secondary cancel-btn py-0 px-1" title="Отменить"><i class="bi bi-x-lg"></i></button>
                                    <span class="save-status ms-1"></span>
                                </div>
                            </td>
                            <td class="text-end">
                                <button class="btn btn-sm btn-outline-primary edit-btn" title="Редактировать">
                                    <i class="bi bi-pencil"></i>
                                </button>
                            </td>
                        </tr>
                        
                        <!-- Разделитель -->
                        <tr>
                            <td colspan="3"><hr class="my-2"></td>
                        </tr>
                        
                        <!-- Финансовая информация -->
                        <tr>
                            <td class="text-muted"><i class="bi bi-cash-stack text-success"></i> Все успешные заказы:</td>
                            <td colspan="2">
                                <span class="badge bg-success">{{ total_orders_sum|floatformat:2 }} руб.</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted"><i class="bi bi-calendar-check text-info"></i> За последний год:</td>
                            <td colspan="2">
                                <span class="badge bg-info">{{ last_year_orders_sum|floatformat:2 }} руб.</span>
                            </td>
                        </tr>
                        {% if total_debt > 0 %}
                        <tr>
                            <td class="text-muted"><i class="bi bi-exclamation-triangle-fill text-danger"></i> Общий долг:</td>
                            <td colspan="2">
                                <span class="badge bg-danger">{{ total_debt|floatformat:2 }} руб.</span>
                                <small class="text-muted ms-2">(Заказов: {{ active_orders_count }})</small>
                            </td>
                        </tr>
                        {% endif %}
                        
                        <!-- Разделитель -->
                        <tr>
                            <td colspan="3"><hr class="my-2"></td>
                        </tr>
                        
                        <!-- Системная информация -->
                        <tr>
                            <td class="text-muted small"><i class="bi bi-clock-history"></i> Дата создания:</td>
                            <td colspan="2" class="small">{{ customer.created_at|date:"d.m.Y H:i" }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted small"><i class="bi bi-arrow-clockwise"></i> Последнее изменение:</td>
                            <td colspan="2" class="small"><span id="updated-at">{{ customer.updated_at|date:"d.m.Y H:i" }}</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Правая колонка: Каналы связи + История заказов + История кошелька -->
        <div class="col-md-6">
            <!-- Каналы связи -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-chat-dots text-success"></i> Каналы связи</h5>
                    <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addChannelModal">
                        <i class="bi bi-plus-circle"></i> Добавить
                    </button>
                </div>
                <div class="card-body">
                    {% if contact_channels %}
                    <ul class="list-group list-group-flush">
                        {% for channel in contact_channels %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                {% if channel.channel_type == 'telegram' %}
                                    <span class="badge bg-info me-2"><i class="bi bi-telegram"></i> Telegram</span>
                                {% elif channel.channel_type == 'instagram' %}
                                    <span class="badge bg-danger me-2"><i class="bi bi-instagram"></i> Instagram</span>
                                {% elif channel.channel_type == 'whatsapp' %}
                                    <span class="badge bg-success me-2"><i class="bi bi-whatsapp"></i> WhatsApp</span>
                                {% elif channel.channel_type == 'viber' %}
                                    <span class="badge bg-purple me-2" style="background-color: #7360f2 !important;"><i class="bi bi-chat-fill"></i> Viber</span>
                                {% elif channel.channel_type == 'vk' %}
                                    <span class="badge bg-primary me-2">VK</span>
                                {% elif channel.channel_type == 'facebook' %}
                                    <span class="badge bg-primary me-2"><i class="bi bi-facebook"></i> Facebook</span>
                                {% elif channel.channel_type == 'phone' %}
                                    <span class="badge bg-secondary me-2"><i class="bi bi-telephone"></i> Телефон</span>
                                {% elif channel.channel_type == 'email' %}
                                    <span class="badge bg-secondary me-2"><i class="bi bi-envelope"></i> Email</span>
                                {% else %}
                                    <span class="badge bg-dark me-2">{{ channel.get_channel_type_display }}</span>
                                {% endif %}
                                <strong>{{ channel.value }}</strong>
                                {% if channel.is_primary %}<span class="badge bg-warning text-dark ms-1">основной</span>{% endif %}
                                {% if channel.notes %}<small class="text-muted d-block mt-1">{{ channel.notes }}</small>{% endif %}
                            </div>
                            <div class="d-flex gap-1">
                                <button class="btn btn-sm btn-outline-secondary copy-btn" title="Копировать" data-copy-value="{{ channel.value }}">
                                    <i class="bi bi-copy"></i>
                                </button>
                                <form method="post" action="{% url 'customers:delete-contact-channel' channel.pk %}" class="d-inline">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Удалить канал?')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <p class="text-muted mb-0">Нет дополнительных каналов связи. Добавьте Instagram, Telegram и другие контакты.</p>
                    {% endif %}
                </div>
            </div>

            <!-- История заказов -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <button class="btn btn-link text-start text-decoration-none p-0 d-flex align-items-center flex-grow-1" 
                            type="button" 
                            data-bs-toggle="collapse" 
                            data-bs-target="#ordersHistoryCollapse" 
                            aria-expanded="false" 
                            aria-controls="ordersHistoryCollapse"
                            style="border: none; background: none;">
                        <h5 class="mb-0 me-2"><i class="bi bi-cart-check text-primary"></i> История заказов</h5>
                        <span class="badge bg-primary">{{ orders_page.paginator.count }}</span>
                    </button>
                    <a href="{% url 'orders:order-create' %}?customer={{ customer.pk }}" 
                       class="btn btn-sm btn-success ms-2">
                        <i class="bi bi-plus-circle"></i> Новый
                    </a>
                </div>
                <div class="collapse" id="ordersHistoryCollapse">
                    <div class="card-body p-0">
                    {% if orders_page %}
                        <div class="table-responsive">
                            <table class="table table-sm table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>№</th>
                                        <th>Дата</th>
                                        <th>Статус</th>
                                        <th>Сумма</th>
                                        <th>Остаток</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for order in orders_page %}
                                    <tr {% if order.status and order.status.is_negative_end and order.amount_paid > 0 %}class="table-warning"{% endif %}>
                                        <td><strong>#{{ order.order_number }}</strong></td>
                                        <td><small>{{ order.created_at|date:"d.m.y" }}</small></td>
                                        <td>
                                            {% if order.status %}
                                                {% if order.status.code == 'draft' %}
                                                    <span class="badge bg-secondary">Черновик</span>
                                                {% elif order.status.code == 'pending' %}
                                                    <span class="badge bg-warning">Ожидает</span>
                                                {% elif order.status.code == 'in_production' %}
                                                    <span class="badge bg-info">В пр-ве</span>
                                                {% elif order.status.code == 'ready' %}
                                                    <span class="badge bg-primary">Готов</span>
                                                {% elif order.status.code == 'delivered' %}
                                                    <span class="badge bg-success">Доставлен</span>
                                                {% elif order.status.code == 'cancelled' %}
                                                    <span class="badge bg-danger">Отменён</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">{{ order.status.name }}</span>
                                                {% endif %}
                                            {% else %}
                                                <span class="badge bg-secondary">-</span>
                                            {% endif %}
                                        </td>
                                        <td><strong>{{ order.total_amount|floatformat:2 }}</strong></td>
                                        <td>
                                            {% if order.status and order.status.is_negative_end %}
                                                {% if order.amount_paid > 0 %}
                                                    <span class="badge bg-warning text-dark">
                                                        <i class="bi bi-exclamation-triangle"></i> {{ order.amount_paid|floatformat:2 }}
                                                    </span>
                                                {% else %}
                                                    <span class="text-muted">—</span>
                                                {% endif %}
                                            {% elif order.amount_due > 0 %}
                                                <span class="text-danger fw-bold">{{ order.amount_due|floatformat:2 }}</span>
                                            {% else %}
                                                <span class="text-success">0.00</span>
                                            {% endif %}
                                        </td>
                                        <td class="text-end">
                                            <a href="{% url 'orders:order-detail' order.order_number %}" class="btn btn-sm btn-outline-primary" target="_blank" rel="noopener noreferrer" title="Открыть в новой вкладке">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- Пагинация -->
                        {% if orders_page.has_other_pages %}
                        <div class="p-3 bg-light border-top">
                            <nav aria-label="Навигация по заказам">
                                <ul class="pagination pagination-sm justify-content-center mb-0">
                                    {% if orders_page.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ orders_page.previous_page_number }}#ordersHistoryCollapse">«</a>
                                        </li>
                                    {% endif %}

                                    <li class="page-item active">
                                        <span class="page-link">
                                            {{ orders_page.number }} / {{ orders_page.paginator.num_pages }}
                                        </span>
                                    </li>

                                    {% if orders_page.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ orders_page.next_page_number }}#ordersHistoryCollapse">»</a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                        {% endif %}
                    {% else %}
                        <p class="text-muted mb-0 p-3">У клиента пока нет заказов.</p>
                    {% endif %}
                    </div>
                </div>
            </div>

            <!-- История транзакций кошелька -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-light">
                    <button class="btn btn-link w-100 text-start text-decoration-none p-0 d-flex justify-content-between align-items-center" 
                            type="button" 
                            data-bs-toggle="collapse" 
                            data-bs-target="#walletHistoryCollapse" 
                            aria-expanded="false" 
                            aria-controls="walletHistoryCollapse">
                        <div class="d-flex align-items-center">
                            <h5 class="mb-0 me-2"><i class="bi bi-clock-history text-info"></i> История кошелька</h5>
                            <span class="badge bg-primary">{{ wallet_transactions|length }}</span>
                        </div>
                        <i class="bi bi-chevron-down"></i>
                    </button>
                </div>
                <div class="collapse" id="walletHistoryCollapse">
                    <div class="card-body p-0">
                    {% if wallet_transactions %}
                        <div class="table-responsive">
                            <table class="table table-sm table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Дата</th>
                                        <th>Тип</th>
                                        <th>Сумма</th>
                                        <th>Описание</th>
                                        <th>Заказ</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for transaction in wallet_transactions %}
                                    <tr>
                                        <td><small>{{ transaction.created_at|date:"d.m.y H:i" }}</small></td>
                                        <td>
                                            {% if transaction.transaction_type == 'deposit' %}
                                                <span class="badge bg-success">Пополн.</span>
                                            {% elif transaction.transaction_type == 'spend' %}
                                                <span class="badge bg-danger">Списан.</span>
                                            {% else %}
                                                <span class="badge bg-warning">Корр.</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if transaction.transaction_type == 'deposit' or transaction.transaction_type == 'adjustment' and transaction.amount > 0 %}
                                                <span class="text-success fw-bold">+{{ transaction.amount|floatformat:2 }}</span>
                                            {% else %}
                                                <span class="text-danger fw-bold">-{{ transaction.amount|floatformat:2 }}</span>
                                            {% endif %}
                                        </td>
                                        <td><small>{{ transaction.description|default:"-"|truncatewords:5 }}</small></td>
                                        <td>
                                            {% if transaction.order %}
                                                <a href="{% url 'orders:order-detail' transaction.order.order_number %}" class="btn btn-sm btn-outline-primary py-0">
                                                    #{{ transaction.order.order_number }}
                                                </a>
                                            {% else %}
                                                -
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted mb-0 p-3">История транзакций пуста.</p>
                    {% endif %}
                    </div>
                </div>
            </div>

            <!-- Операции с кошельком -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-wallet2 text-warning"></i> Операции с кошельком клиента</h5>
                    <span>
                        {% if customer.wallet_balance > 0 %}
                            <span class="badge bg-success" style="font-size: 1.1em;">{{ customer.wallet_balance|floatformat:2 }} руб.</span>
                        {% elif customer.wallet_balance == 0 %}
                            <span class="badge bg-secondary" style="font-size: 1.1em;">{{ customer.wallet_balance|floatformat:2 }} руб.</span>
                        {% else %}
                            <span class="badge bg-danger" style="font-size: 1.1em;">{{ customer.wallet_balance|floatformat:2 }} руб.</span>
                        {% endif %}
                    </span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Пополнение -->
                        <div class="col-md-6">
                            <h6 class="text-success mb-3"><i class="bi bi-plus-circle"></i> Пополнение</h6>
                            <form method="post" action="{% url 'customers:wallet-deposit' customer.pk %}">
                                {% csrf_token %}
                                <div class="mb-3">
                                    <label for="wallet_deposit_amount" class="form-label">Сумма, руб.</label>
                                    <input type="number"
                                           step="0.01"
                                           min="0.01"
                                           class="form-control"
                                           id="wallet_deposit_amount"
                                           name="amount"
                                           placeholder="0.00"
                                           required>
                                    <div style="height: 1.25rem;"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="wallet_deposit_description" class="form-label">Описание</label>
                                    <textarea class="form-control"
                                              id="wallet_deposit_description"
                                              name="description"
                                              rows="2"
                                              placeholder="Подарок, компенсация..."
                                              required></textarea>
                                </div>
                                <button type="submit" class="btn btn-success w-100"><i class="bi bi-plus-circle"></i> Пополнить</button>
                            </form>
                        </div>

                        <!-- Возврат / списание -->
                        <div class="col-md-6">
                            <h6 class="text-danger mb-3"><i class="bi bi-dash-circle"></i> Списание</h6>
                            <form method="post" action="{% url 'customers:wallet-withdraw' customer.pk %}">
                                {% csrf_token %}
                                <div class="mb-3">
                                    <label for="wallet_withdraw_amount" class="form-label">Сумма, руб.</label>
                                    <input type="number"
                                           step="0.01"
                                           min="0.01"
                                           max="{{ customer.wallet_balance }}"
                                           class="form-control"
                                           id="wallet_withdraw_amount"
                                           name="amount"
                                           placeholder="0.00"
                                           required>
                                    <small class="text-muted d-block" style="height: 1.25rem; line-height: 1.25rem;">Макс: {{ customer.wallet_balance|floatformat:2 }} р.</small>
                                </div>
                                <div class="mb-3">
                                    <label for="wallet_withdraw_description" class="form-label">Описание</label>
                                    <textarea class="form-control"
                                              id="wallet_withdraw_description"
                                              name="description"
                                              rows="2"
                                              placeholder="Возврат наличными..."
                                              required></textarea>
                                </div>
                                <button type="submit" class="btn btn-danger w-100"><i class="bi bi-dash-circle"></i> Списать</button>
                            </form>
                        </div>
                    </div>
                    <div class="alert alert-info mb-0 mt-3">
                        <i class="bi bi-info-circle"></i> Все операции логируются в истории выше.
                    </div>
                </div>
            </div>
        </div>
        <!-- Конец правой колонки -->

        <!-- Алерт о необходимости возврата -->
        {% if refund_amount > 0 %}
        <div class="col-md-12">
            <div class="alert alert-warning shadow-sm d-flex justify-content-between align-items-center mb-4" role="alert">
                <div>
                    <h5 class="alert-heading mb-2">
                        <i class="bi bi-exclamation-triangle-fill"></i> Требуется возврат средств
                    </h5>
                    <p class="mb-0">
                        Клиент имеет отменённые заказы с внесённой оплатой.
                        Общая сумма к возврату: <strong>{{ refund_amount|floatformat:2 }} руб.</strong>
                    </p>
                </div>
                <div>
                    <span class="badge bg-warning text-dark" style="font-size: 1.3em;">
                        <i class="bi bi-exclamation-circle"></i> {{ refund_amount|floatformat:2 }} руб.
                    </span>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Модальное окно добавления канала связи -->
<div class="modal fade" id="addChannelModal" tabindex="-1" aria-labelledby="addChannelModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" action="{% url 'customers:add-contact-channel' customer.pk %}">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="addChannelModalLabel">Добавить канал связи</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="channel_type" class="form-label">Тип канала</label>
                        <select name="channel_type" id="channel_type" class="form-select" required>
                            <option value="telegram">Telegram</option>
                            <option value="instagram">Instagram</option>
                            <option value="whatsapp">WhatsApp</option>
                            <option value="viber">Viber</option>
                            <option value="vk">ВКонтакте</option>
                            <option value="facebook">Facebook</option>
                            <option value="phone">Телефон</option>
                            <option value="email">Email</option>
                            <option value="other">Другое</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="channel_value" class="form-label">Значение</label>
                        <input type="text" name="value" id="channel_value" class="form-control" placeholder="@username, номер, ссылка..." required>
                        <small class="text-muted">Например: @flower_lover, +375291234567, flower.shop</small>
                    </div>
                    <div class="mb-3">
                        <label for="channel_notes" class="form-label">Примечание <span class="text-muted">(необязательно)</span></label>
                        <input type="text" name="notes" id="channel_notes" class="form-control" placeholder="Личный аккаунт, рабочий...">
                    </div>
                    <div class="form-check">
                        <input type="checkbox" name="is_primary" class="form-check-input" id="isPrimary" value="true">
                        <label class="form-check-label" for="isPrimary">Основной канал связи</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                    <button type="submit" class="btn btn-success"><i class="bi bi-plus"></i> Добавить</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Автооткрытие collapse при наличии якоря в URL
    const hash = window.location.hash;
    if (hash === '#ordersHistoryCollapse') {
        const collapseElement = document.getElementById('ordersHistoryCollapse');
        if (collapseElement) {
            const bsCollapse = new bootstrap.Collapse(collapseElement, {
                show: true
            });
            collapseElement.addEventListener('shown.bs.collapse', function() {
                collapseElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, { once: true });
        }
    }

    // ========== INLINE EDITING ==========
    const table = document.getElementById('customer-info-table');
    if (!table) return;

    const customerId = table.dataset.customerId;
    const updateUrl = `/customers/${customerId}/api/update/`;

    // Находим все редактируемые строки
    const editableRows = table.querySelectorAll('tr[data-field]');

    editableRows.forEach(row => {
        const field = row.dataset.field;
        const fieldValue = row.querySelector('.field-value');
        const fieldInput = row.querySelector('.field-input');
        const fieldActions = row.querySelector('.field-actions');
        const editBtn = row.querySelector('.edit-btn');
        const saveBtn = row.querySelector('.save-btn');
        const cancelBtn = row.querySelector('.cancel-btn');
        const saveStatus = row.querySelector('.save-status');

        let originalValue = '';

        // Клик на карандаш — начать редактирование
        editBtn.addEventListener('click', function() {
            originalValue = fieldInput.value;
            fieldValue.classList.add('d-none');
            fieldInput.classList.remove('d-none');
            fieldActions.classList.remove('d-none');
            editBtn.style.visibility = 'hidden'; // Скрываем карандаш но сохраняем место
            fieldInput.focus();
            if (fieldInput.tagName === 'INPUT') {
                fieldInput.select();
            }
        });

        // Клик на галочку или Enter — сохранить
        saveBtn.addEventListener('click', saveField);
        fieldInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && fieldInput.tagName !== 'TEXTAREA') {
                e.preventDefault();
                saveField();
            }
            if (e.key === 'Escape') {
                cancelEdit();
            }
        });

        // Клик на крестик — отменить
        cancelBtn.addEventListener('click', cancelEdit);

        function cancelEdit() {
            fieldInput.value = originalValue;
            fieldValue.classList.remove('d-none');
            fieldInput.classList.add('d-none');
            fieldActions.classList.add('d-none');
            editBtn.style.visibility = 'visible';
            saveStatus.innerHTML = '';
        }

        function saveField() {
            const newValue = fieldInput.value.trim();

            // Показываем индикатор загрузки
            saveStatus.innerHTML = '<span class="spinner-border spinner-border-sm text-primary"></span>';
            saveBtn.disabled = true;
            cancelBtn.disabled = true;

            fetch(updateUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')
                },
                body: JSON.stringify({
                    field: field,
                    value: newValue
                })
            })
            .then(response => response.json())
            .then(data => {
                saveBtn.disabled = false;
                cancelBtn.disabled = false;

                if (data.success) {
                    // Обновляем отображаемое значение
                    const displayValue = data.value || '—';
                    fieldValue.textContent = displayValue;
                    fieldInput.value = data.value || '';
                    originalValue = data.value || '';

                    // Обновляем заголовок страницы если изменилось имя
                    if (field === 'name') {
                        const titleSpan = document.getElementById('customer-title');
                        if (titleSpan) {
                            titleSpan.textContent = displayValue;
                        }
                    }

                    // Возвращаем в режим просмотра
                    fieldValue.classList.remove('d-none');
                    fieldInput.classList.add('d-none');
                    fieldActions.classList.add('d-none');
                    editBtn.style.visibility = 'visible';

                    // Показываем успех
                    saveStatus.innerHTML = '<i class="bi bi-check-circle-fill text-success"></i>';
                    setTimeout(() => {
                        saveStatus.innerHTML = '';
                    }, 1500);
                } else {
                    // Показываем ошибку
                    saveStatus.innerHTML = `<span class="text-danger small"><i class="bi bi-exclamation-circle"></i> ${data.error}</span>`;
                }
            })
            .catch(error => {
                saveBtn.disabled = false;
                cancelBtn.disabled = false;
                saveStatus.innerHTML = '<span class="text-danger small"><i class="bi bi-exclamation-circle"></i> Ошибка сети</span>';
                console.error('Error:', error);
            });
        }
    });

    // Функция получения CSRF токена
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    // ========== COPY TO CLIPBOARD ==========
    document.querySelectorAll('.copy-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const value = this.dataset.copyValue;
            if (!value) return;

            navigator.clipboard.writeText(value).then(() => {
                // Меняем иконку на галочку и стиль кнопки
                const icon = this.querySelector('i');
                const originalIconClass = icon.className;
                const originalBtnClass = this.className;

                // Меняем кнопку на зелёную с белой галочкой
                this.className = 'btn btn-sm btn-success copy-btn';
                icon.className = 'bi bi-check-lg';

                // Возвращаем обратно через 1 сек
                setTimeout(() => {
                    this.className = originalBtnClass;
                    icon.className = originalIconClass;
                }, 1000);
            }).catch(err => {
                console.error('Ошибка копирования:', err);
            });
        });
    });
});
</script>
{% endblock %}