@extends('layouts.app')

@section('title', 'Добавить действие')

@section('content')
<style>
.action-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}
.action-card-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}
.action-card-header:hover {
    background-color: #f8f9fa;
}
.action-card-body {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
}
.action-icon {
    font-size: 1.25rem;
    margin-right: 0.5rem;
}
.sms-template {
    background-color: #f8f9fa;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-family: monospace;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    cursor: pointer;
}
.sms-template:hover {
    background-color: #e9ecef;
}
</style>

<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1>Добавление действия</h1>
        <a href="{{ route('actions.index') }}" class="btn btn-secondary">Назад к списку</a>
    </div>

    {{-- Выбор клиента --}}
    <div class="card mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0">Выбор клиента</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <label for="account_search" class="form-label">Поиск по лицевому счету или ФИО</label>
                    <input type="text" id="account_search" class="form-control" placeholder="Введите номер счета или ФИО...">
                </div>
                <div class="col-md-6">
                    <label for="client_select" class="form-label">Выберите клиента</label>
                    <select id="client_select" class="form-control" style="display: none;"></select>
                    <div id="client_info" class="alert alert-info mt-2" style="display: none;">
                        <div id="client_details"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Форма добавления действия --}}
    <form method="POST" action="{{ route('actions.store') }}" id="actionForm">
        @csrf
        <input type="hidden" name="account_number" id="account_number">
        
        {{-- Выбор судебного документа --}}
        <div class="card mb-4" id="document_card" style="display: none;">
            <div class="card-header bg-light">
                <h5 class="mb-0">Судебный документ</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="document_id" class="form-label">Связанный судебный документ</label>
                    <select name="document_id" id="document_id" class="form-control">
                        <option value="">-- Не привязывать к документу --</option>
                    </select>
                    <small class="text-muted">Выберите документ, к которому относится данное действие</small>
                </div>
            </div>
        </div>
        
        {{-- Выбор типа действия --}}
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">Выберите тип действия</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    {{-- Уведомления --}}
                    <div class="col-md-4">
                        <div class="action-card" data-action-type="notification">
                            <div class="action-card-header bg-light">
                                <i class="fas fa-bell action-icon text-primary"></i> Уведомления
                            </div>
                            <div class="action-card-body" style="display: none;">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="sms" id="action_sms">
                                    <label class="form-check-label" for="action_sms">
                                        📱 SMS-уведомление
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="auto_sms" id="action_auto_sms">
                                    <label class="form-check-label" for="action_auto_sms">
                                        🤖 Автоматическое SMS
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="email_notification" id="action_email">
                                    <label class="form-check-label" for="action_email">
                                        📧 Email-уведомление
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="written_claim" id="action_written">
                                    <label class="form-check-label" for="action_written">
                                        📄 Письменная претензия
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Звонки --}}
                    <div class="col-md-4">
                        <div class="action-card" data-action-type="call">
                            <div class="action-card-header bg-light">
                                <i class="fas fa-phone action-icon text-success"></i> Звонки
                            </div>
                            <div class="action-card-body" style="display: none;">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="operator_call" id="action_operator_call">
                                    <label class="form-check-label" for="action_operator_call">
                                        📞 Звонок оператора
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="auto_call" id="action_auto_call">
                                    <label class="form-check-label" for="action_auto_call">
                                        🤖 Автоматический звонок
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Технические воздействия --}}
                    <div class="col-md-4">
                        <div class="action-card" data-action-type="technical">
                            <div class="action-card-header bg-light">
                                <i class="fas fa-bolt action-icon text-warning"></i> Технические воздействия
                            </div>
                            <div class="action-card-body" style="display: none;">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="power_limitation" id="action_limitation">
                                    <label class="form-check-label" for="action_limitation">
                                        ⚡ Ограничение мощности
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="power_disconnection" id="action_disconnection">
                                    <label class="form-check-label" for="action_disconnection">
                                        🔌 Отключение электроэнергии
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="reconnection" id="action_reconnection">
                                    <label class="form-check-label" for="action_reconnection">
                                        💡 Восстановление подключения
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Дополнительные действия --}}
                <div class="row mt-3">
                    <div class="col-md-4">
                        <div class="action-card" data-action-type="legal">
                            <div class="action-card-header bg-light">
                                <i class="fas fa-gavel action-icon text-danger"></i> Юридические действия
                            </div>
                            <div class="action-card-body" style="display: none;">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="limitation_warning" id="action_limitation_warning">
                                    <label class="form-check-label" for="action_limitation_warning">
                                        ⚠️ Предупреждение об истечении срока
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="collector_transfer" id="action_collector">
                                    <label class="form-check-label" for="action_collector">
                                        📋 Передача коллекторам
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="restructuring_offer" id="action_restructuring">
                                    <label class="form-check-label" for="action_restructuring">
                                        📝 Предложение реструктуризации
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="action_type" value="payment_agreement" id="action_agreement">
                                    <label class="form-check-label" for="action_agreement">
                                        ✍️ Соглашение о погашении
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Детали действия (динамические поля) --}}
        <div id="action_details" class="card mb-4" style="display: none;">
            <div class="card-header bg-light">
                <h5 class="mb-0">Детали действия</h5>
            </div>
            <div class="card-body">
                {{-- Для SMS и уведомлений --}}
                <div id="sms_fields" style="display: none;">
                    <div class="mb-3">
                        <label class="form-label">Номер телефона получателя</label>
                        <input type="text" name="recipient_contact" id="sms_phone" class="form-control" placeholder="+7 XXX XXX-XX-XX">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Текст SMS</label>
                        <textarea name="sms_text" id="sms_text" class="form-control" rows="4"></textarea>
                        <div class="mt-2">
                            <strong>Шаблоны:</strong>
                            <div class="sms-template" data-template="Уважаемый клиент, у Вас образовалась задолженность в размере {amount} руб. Просим оплатить до {date}. С уважением, Энергосбыт.">
                                📝 Шаблон задолженности
                            </div>
                            <div class="sms-template" data-template="Уважаемый клиент, Ваше отключение электроэнергии запланировано на {date}. Для предотвращения отключения оплатите задолженность.">
                                ⚡ Шаблон предупреждения об отключении
                            </div>
                            <div class="sms-template" data-template="Уважаемый клиент, Ваша задолженность передана коллекторскому агентству. Для урегулирования вопроса свяжитесь с нами.">
                                📋 Шаблон передачи коллекторам
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Для Email --}}
                <div id="email_fields" style="display: none;">
                    <div class="mb-3">
                        <label class="form-label">Email получателя</label>
                        <input type="email" name="recipient_contact" id="email_address" class="form-control" placeholder="client@example.com">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Тема письма</label>
                        <input type="text" name="email_subject" id="email_subject" class="form-control" value="Уведомление о задолженности">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Текст письма</label>
                        <textarea name="notes" id="email_body" class="form-control" rows="5" placeholder="Текст письма..."></textarea>
                    </div>
                </div>

                {{-- Для звонков --}}
                <div id="call_fields" style="display: none;">
                    <div class="mb-3">
                        <label class="form-label">Номер телефона</label>
                        <input type="text" name="recipient_contact" id="call_phone" class="form-control" placeholder="+7 XXX XXX-XX-XX">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Длительность звонка (секунд)</label>
                        <input type="number" name="call_duration" id="call_duration" class="form-control" min="0">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Результат разговора</label>
                        <select name="result" id="call_result" class="form-control">
                            <option value="">Выберите результат</option>
                            <option value="no_answer">Нет ответа</option>
                            <option value="busy">Занято</option>
                            <option value="wrong_number">Неверный номер</option>
                            <option value="refused">Отказ от оплаты</option>
                            <option value="agreed_to_pay">Согласие на оплату</option>
                            <option value="requested_restructuring">Запрошена реструктуризация</option>
                        </select>
                    </div>
                </div>

                {{-- Для технических воздействий --}}
                <div id="technical_fields" style="display: none;">
                    <div class="mb-3">
                        <label class="form-label">Причина воздействия</label>
                        <textarea name="notes" id="technical_reason" class="form-control" rows="3" placeholder="Укажите причину технического воздействия"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Дата планируемого выполнения</label>
                        <input type="datetime-local" name="planned_date" id="planned_date" class="form-control">
                    </div>
                </div>

                {{-- Общие поля для всех действий --}}
                <div id="common_fields">
                    <div class="mb-3">
                        <label class="form-label">Комментарий / Примечания</label>
                        <textarea name="notes" id="common_notes" class="form-control" rows="3" placeholder="Дополнительная информация"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Статус выполнения</label>
                        <select name="status" class="form-control">
                            <option value="planned">Запланировано</option>
                            <option value="in_progress">В процессе</option>
                            <option value="completed" selected>Выполнено</option>
                            <option value="cancelled">Отменено</option>
                            <option value="failed">Не выполнено</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary" id="submitBtn" disabled>Сохранить действие</button>
    </form>
</div>

<script>
// Данные клиентов из БД
const clients = @json($clients ?? []);
// Данные документов по клиентам
let clientDocuments = {};

// Поиск клиента
const searchInput = document.getElementById('account_search');
const clientSelect = document.getElementById('client_select');
const clientInfo = document.getElementById('client_info');
const clientDetails = document.getElementById('client_details');
const accountNumberInput = document.getElementById('account_number');
const documentCard = document.getElementById('document_card');
const documentSelect = document.getElementById('document_id');

let selectedClient = null;
let currentDocuments = [];

// Загружаем документы для клиента
async function loadClientDocuments(accountNumber) {
    if (clientDocuments[accountNumber]) {
        currentDocuments = clientDocuments[accountNumber];
        updateDocumentSelect();
        return;
    }
    
    try {
        const response = await fetch(`/api/client/${accountNumber}/documents`);
        const data = await response.json();
        clientDocuments[accountNumber] = data;
        currentDocuments = data;
        updateDocumentSelect();
    } catch (error) {
        console.error('Ошибка загрузки документов:', error);
        currentDocuments = [];
        updateDocumentSelect();
    }
}

// Обновление списка документов в select
function updateDocumentSelect() {
    if (!documentSelect) return;
    
    documentSelect.innerHTML = '<option value="">-- Не привязывать к документу --</option>';
    
    if (currentDocuments && currentDocuments.length > 0) {
        currentDocuments.forEach(doc => {
            const option = document.createElement('option');
            option.value = doc.id;
            option.textContent = `${doc.document_type || 'Документ'} №${doc.document_number || doc.id} (${doc.court_name || 'Суд не указан'}) - ${doc.total_amount ? doc.total_amount + ' руб.' : ''}`;
            documentSelect.appendChild(option);
        });
        
        // Выбираем последний документ по умолчанию
        if (currentDocuments.length > 0) {
            documentSelect.value = currentDocuments[0].id;
        }
    }
}

if (searchInput) {
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        const filtered = clients.filter(c => 
            c.account_number.toLowerCase().includes(searchTerm) || 
            c.full_name.toLowerCase().includes(searchTerm)
        );
        
        if (filtered.length === 1) {
            selectClient(filtered[0]);
        } else if (filtered.length > 0) {
            clientSelect.style.display = 'block';
            clientSelect.innerHTML = '<option value="">Выберите клиента...</option>' + 
                filtered.map(c => `<option value="${c.id}" data-account="${c.account_number}" data-name="${c.full_name}" data-phone="${c.phone_number || ''}" data-email="${c.email || ''}">${c.full_name} (${c.account_number})</option>`).join('');
            clientInfo.style.display = 'none';
        } else {
            clientSelect.style.display = 'none';
            clientInfo.style.display = 'none';
        }
    });
}

if (clientSelect) {
    clientSelect.addEventListener('change', function() {
        const option = this.options[this.selectedIndex];
        if (option.value) {
            selectClient({
                id: option.value,
                account_number: option.dataset.account,
                full_name: option.dataset.name,
                phone_number: option.dataset.phone,
                email: option.dataset.email
            });
        }
    });
}

function selectClient(client) {
    selectedClient = client;
    accountNumberInput.value = client.account_number;
    searchInput.value = `${client.full_name} (${client.account_number})`;
    clientSelect.style.display = 'none';
    clientInfo.style.display = 'block';
    clientDetails.innerHTML = `
        <strong>${client.full_name}</strong><br>
        Счет: ${client.account_number}<br>
        Телефон: ${client.phone_number || 'Не указан'}<br>
        Email: ${client.email || 'Не указан'}
    `;
    
    // Заполняем поля контактов
    if (client.phone_number) {
        const smsPhone = document.getElementById('sms_phone');
        const callPhone = document.getElementById('call_phone');
        if (smsPhone) smsPhone.value = client.phone_number;
        if (callPhone) callPhone.value = client.phone_number;
    }
    if (client.email) {
        const emailAddress = document.getElementById('email_address');
        if (emailAddress) emailAddress.value = client.email;
    }
    
    // Загружаем документы клиента
    loadClientDocuments(client.account_number);
    
    // Показываем карточку с документами
    if (documentCard) documentCard.style.display = 'block';
    
    checkFormComplete();
}

// Раскрывающиеся карточки
document.querySelectorAll('.action-card').forEach(card => {
    const header = card.querySelector('.action-card-header');
    const body = card.querySelector('.action-card-body');
    
    if (header && body) {
        header.addEventListener('click', () => {
            const isVisible = body.style.display !== 'none';
            document.querySelectorAll('.action-card-body').forEach(b => b.style.display = 'none');
            body.style.display = isVisible ? 'none' : 'block';
        });
    }
});

// Обработка выбора типа действия
const actionRadios = document.querySelectorAll('input[name="action_type"]');
const actionDetails = document.getElementById('action_details');
const smsFields = document.getElementById('sms_fields');
const emailFields = document.getElementById('email_fields');
const callFields = document.getElementById('call_fields');
const technicalFields = document.getElementById('technical_fields');

if (actionRadios.length > 0) {
    actionRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (actionDetails) actionDetails.style.display = 'block';
            
            if (smsFields) smsFields.style.display = 'none';
            if (emailFields) emailFields.style.display = 'none';
            if (callFields) callFields.style.display = 'none';
            if (technicalFields) technicalFields.style.display = 'none';
            
            if (this.value === 'sms' || this.value === 'auto_sms') {
                if (smsFields) smsFields.style.display = 'block';
            } else if (this.value === 'email_notification') {
                if (emailFields) emailFields.style.display = 'block';
            } else if (this.value === 'operator_call' || this.value === 'auto_call') {
                if (callFields) callFields.style.display = 'block';
            } else if (['power_limitation', 'power_disconnection', 'reconnection'].includes(this.value)) {
                if (technicalFields) technicalFields.style.display = 'block';
            }
            
            checkFormComplete();
        });
    });
}

// Шаблоны SMS
document.querySelectorAll('.sms-template').forEach(template => {
    template.addEventListener('click', function() {
        const textarea = document.getElementById('sms_text');
        if (textarea) {
            textarea.value = this.dataset.template;
        }
    });
});

function checkFormComplete() {
    const submitBtn = document.getElementById('submitBtn');
    if (submitBtn) {
        const hasClient = selectedClient !== null;
        const hasActionType = Array.from(actionRadios).some(r => r.checked);
        submitBtn.disabled = !(hasClient && hasActionType);
    }
}

// Если есть предвыбранный клиент
@if(isset($selectedClient) && $selectedClient)
    selectClient({
        id: {{ $selectedClient->id }},
        account_number: '{{ $selectedClient->account_number }}',
        full_name: '{{ addslashes($selectedClient->full_name) }}',
        phone_number: '{{ $selectedClient->phone_number }}',
        email: '{{ $selectedClient->email }}'
    });
@endif
</script>
@endsection