@extends('layouts.app')

@section('title', 'Добавить платеж')

@section('content')
<style>
.form-section {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.form-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dee2e6;
}
.debt-row {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.debt-row:hover {
    background-color: #f8f9fa;
}
</style>

<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1>Добавление платежа</h1>
        <a href="{{ route('payments.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-secondary mt-2" style="display: none;">
                        <div id="client_details"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <form method="POST" action="{{ route('payments.store') }}" id="paymentForm">
        @csrf
        <input type="hidden" name="account_number" id="account_number">
        
        {{-- Информация о платеже --}}
        <div class="form-section">
            <h3>Информация о платеже</h3>
            
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label for="payment_date" class="form-label">Дата платежа <span class="text-danger">*</span></label>
                    <input type="date" class="form-control @error('payment_date') is-invalid @enderror" 
                           id="payment_date" name="payment_date" value="{{ old('payment_date', date('Y-m-d')) }}" required>
                    @error('payment_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                
                <div class="col-md-4 mb-3">
                    <label for="amount" class="form-label">Сумма <span class="text-danger">*</span></label>
                    <input type="number" step="0.01" class="form-control @error('amount') is-invalid @enderror" 
                           id="amount" name="amount" value="{{ old('amount') }}" required>
                    @error('amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                
                <div class="col-md-4 mb-3">
                    <label for="payment_type" class="form-label">Тип платежа</label>
                    <select class="form-control" id="payment_type" name="payment_type">
                        <option value="cash">💰 Наличные</option>
                        <option value="bank">🏦 Банковский перевод</option>
                        <option value="card">💳 Банковская карта</option>
                        <option value="online">🌐 Онлайн-платеж</option>
                    </select>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="payment_number" class="form-label">Номер платежного документа</label>
                    <input type="text" class="form-control" id="payment_number" name="payment_number" value="{{ old('payment_number') }}">
                </div>
                
                <div class="col-md-6 mb-3">
                    <label for="description" class="form-label">Описание</label>
                    <input type="text" class="form-control" id="description" name="description" value="{{ old('description') }}">
                </div>
            </div>
        </div>
        
        {{-- Распределение по долгам --}}
        <div id="debts_section" class="form-section" style="display: none;">
            <h3>Распределение по задолженностям</h3>
            <p class="text-muted small">Укажите, как распределить сумму по существующим долгам</p>
            
            <div id="debts_list"></div>
            
            <div class="alert alert-info mt-2" id="remaining_info"></div>
            
            <div class="form-check mb-3">
                <input type="checkbox" class="form-check-input" id="auto_distribute">
                <label class="form-check-label" for="auto_distribute">
                    Автоматически распределить остаток (по старым долгам в первую очередь)
                </label>
            </div>
        </div>
        
        <div class="d-flex justify-content-end gap-2">
            <button type="reset" class="btn btn-secondary">Очистить</button>
            <button type="submit" class="btn btn-primary" id="submitBtn" disabled>Сохранить платеж</button>
        </div>
    </form>
</div>

<script>
const clients = @json($clients ?? []);
let selectedClient = null;

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 debtsSection = document.getElementById('debts_section');
const debtsList = document.getElementById('debts_list');
const remainingInfo = document.getElementById('remaining_info');
const submitBtn = document.getElementById('submitBtn');
const amountInput = document.getElementById('amount');
const autoDistributeCheckbox = document.getElementById('auto_distribute');

// Поиск клиента
if (searchInput) {
    searchInput.addEventListener('input', function() {
        const term = this.value.toLowerCase();
        const filtered = clients.filter(c => 
            c.account_number.toLowerCase().includes(term) || 
            c.full_name.toLowerCase().includes(term)
        );
        
        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}">${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
            });
        }
    });
}

async 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}`;
    
    // Загружаем долги клиента
    await loadDebts(client.account_number);
    checkFormComplete();
}

async function loadDebts(accountNumber) {
    try {
        console.log('Загрузка долгов для счета:', accountNumber);
        
        const response = await fetch(`/api/client/${accountNumber}/active-debts`, {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const debts = await response.json();
        console.log('Получены долги:', debts);
        
        if (debts.error) {
            throw new Error(debts.error);
        }
        
        // Проверяем, что debts - массив
        if (!Array.isArray(debts)) {
            console.error('Ответ не является массивом:', debts);
            debtsSection.style.display = 'block';
            debtsList.innerHTML = '<div class="alert alert-warning">Получены некорректные данные о задолженностях</div>';
            return;
        }
        
        if (debts.length > 0) {
            debtsSection.style.display = 'block';
            renderDebtsList(debts);
        } else {
            debtsSection.style.display = 'block';
            debtsList.innerHTML = '<div class="alert alert-success">Нет активных задолженностей! Все долги погашены.</div>';
            updateRemainingInfo();
        }
    } catch (error) {
        console.error('Ошибка загрузки долгов:', error);
        debtsSection.style.display = 'block';
        debtsList.innerHTML = `<div class="alert alert-danger">Ошибка загрузки данных о задолженностях: ${error.message}</div>`;
        updateRemainingInfo();
    }
}
function renderDebtsList(debts) {
    let html = '';
    let totalDebt = 0;
    
    if (!debts || debts.length === 0) {
        html = '<div class="alert alert-info">Нет активных задолженностей для погашения</div>';
        debtsList.innerHTML = html;
        updateRemainingInfo();
        return;
    }
    
    debts.forEach((debt, index) => {
        // Безопасное получение сумм
        let principalAmount = parseFloat(debt.principal_debt) || 0;
        let penaltiesAmount = parseFloat(debt.penalties) || 0;
        let costsAmount = parseFloat(debt.court_costs) || 0;
        let totalAmount = principalAmount + penaltiesAmount + costsAmount;
        totalDebt += totalAmount;
        
        // Определяем статус документа
        let statusBadge = '';
        let statusClass = '';
        let canPay = totalAmount > 0;
        
        switch(debt.status) {
            case 'Передано в другой суд':
                statusBadge = '<span class="badge bg-secondary ms-2">Передан в другой суд</span>';
                statusClass = 'text-muted';
                canPay = false;
                break;
            case 'Исполнено':
                statusBadge = '<span class="badge bg-success ms-2">Исполнен</span>';
                statusClass = 'text-muted';
                canPay = false;
                break;
            case 'Отклонено':
                statusBadge = '<span class="badge bg-danger ms-2">Отклонен</span>';
                statusClass = 'text-muted';
                canPay = false;
                break;
            default:
                statusBadge = '';
                statusClass = '';
        }
        
        html += `
            <div class="debt-row border rounded p-3 mb-2 ${statusClass}" data-document-id="${debt.id}" data-can-pay="${canPay}">
                <div class="row">
                    <div class="col-md-12">
                        <strong>${debt.document_type || 'Документ'}</strong>
                        ${statusBadge}
                        <br>
                        <small class="text-muted">№${debt.document_number || debt.id} | ${debt.court_name || 'Суд не указан'}</small>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-4">
                        <div class="border rounded p-2">
                            <small class="text-muted">Основной долг</small><br>
                            <span class="text-danger">${principalAmount.toLocaleString('ru-RU')} ₽</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border rounded p-2">
                            <small class="text-muted">Пени</small><br>
                            <span class="text-warning">${penaltiesAmount.toLocaleString('ru-RU')} ₽</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border rounded p-2">
                            <small class="text-muted">Судебные издержки</small><br>
                            <span class="text-info">${costsAmount.toLocaleString('ru-RU')} ₽</span>
                        </div>
                    </div>
                </div>
                ${canPay ? `
                <div class="row mt-3">
                    <div class="col-md-12">
                        <label class="form-label">Сумма к оплате по данному документу:</label>
                        <input type="number" step="0.01" class="form-control debt-amount" 
                               placeholder="Введите сумму" data-document="${debt.id}" data-max="${totalAmount}">
                    </div>
                </div>
                ` : '<div class="row mt-2"><div class="col-12"><span class="text-muted">Оплата по данному документу не принимается</span></div></div>'}
                ${debt.description ? `<div class="row mt-2"><div class="col-12"><small class="text-muted">${debt.description}</small></div></div>` : ''}
            </div>
        `;
    });
    
    // Добавляем информацию об общей сумме долга
    html += `
        <div class="alert alert-secondary mt-3">
            <strong>Общая сумма задолженности:</strong> ${totalDebt.toLocaleString('ru-RU')} ₽
        </div>
    `;
    
    debtsList.innerHTML = html;
    updateRemainingInfo();
    
    // Добавляем обработчики только для активных полей
    document.querySelectorAll('.debt-amount:not([disabled])').forEach(input => {
        input.addEventListener('input', updateRemainingInfo);
        input.addEventListener('change', function() {
            const max = parseFloat(this.dataset.max) || 0;
            let val = parseFloat(this.value) || 0;
            if (val > max) {
                this.value = max;
            }
            updateRemainingInfo();
        });
    });
}

function updateRemainingInfo() {
    const paymentAmount = parseFloat(amountInput.value) || 0;
    let distributedTotal = 0;
    
    document.querySelectorAll('.debt-amount:not([disabled])').forEach(input => {
        let val = parseFloat(input.value) || 0;
        const maxVal = parseFloat(input.dataset.max) || 0;
        if (val > maxVal) {
            input.value = maxVal;
            val = maxVal;
        }
        distributedTotal += val;
    });
    
    const remaining = paymentAmount - distributedTotal;
    const remainingInfo = document.getElementById('remaining_info');
    const submitBtn = document.getElementById('submitBtn');
    
    if (!remainingInfo) return;
    
    if (paymentAmount === 0) {
        remainingInfo.innerHTML = `<strong class="text-warning">Введите сумму платежа</strong>`;
        remainingInfo.className = 'alert alert-warning mt-2';
        submitBtn.disabled = true;
    } else if (remaining < 0) {
        remainingInfo.innerHTML = `<strong class="text-danger">Сумма распределения (${distributedTotal.toFixed(2)} ₽) превышает платеж на ${Math.abs(remaining).toFixed(2)} ₽</strong>`;
        remainingInfo.className = 'alert alert-danger mt-2';
        submitBtn.disabled = true;
    } else if (remaining > 0) {
        remainingInfo.innerHTML = `<strong>Остаток для распределения: ${remaining.toFixed(2)} ₽</strong>`;
        remainingInfo.className = 'alert alert-warning mt-2';
        submitBtn.disabled = false;
    } else {
        remainingInfo.innerHTML = `<strong class="text-success">Сумма полностью распределена (${distributedTotal.toFixed(2)} ₽)</strong>`;
        remainingInfo.className = 'alert alert-success mt-2';
        submitBtn.disabled = false;
    }
}
// Автоматическое распределение
autoDistributeCheckbox.addEventListener('change', async function() {
    if (this.checked && selectedClient) {
        try {
            const response = await fetch(`/api/payments/suggest/${selectedClient.account_number}?amount=${amountInput.value}`);
            const suggestions = await response.json();
            
            document.querySelectorAll('.debt-amount').forEach(input => {
                const docId = input.dataset.document;
                const suggestion = suggestions.find(s => s.document_id == docId);
                if (suggestion) {
                    input.value = suggestion.suggested_amount;
                } else {
                    input.value = '';
                }
            });
            updateRemainingInfo();
        } catch (error) {
            console.error('Ошибка автораспределения:', error);
        }
    }
});

amountInput.addEventListener('input', updateRemainingInfo);

function checkFormComplete() {
    const hasClient = selectedClient !== null;
    const hasAmount = parseFloat(amountInput.value) > 0;
    submitBtn.disabled = !(hasClient && hasAmount);
}


// Получаем распределение для отправки
document.getElementById('paymentForm').addEventListener('submit', function(e) {
    const distributions = [];
    
    document.querySelectorAll('.debt-amount').forEach(input => {
        const amount = parseFloat(input.value);
        if (amount > 0) {
            distributions.push({
                document_id: input.dataset.document,
                amount: amount,
                type: 'principal'  // при создании платежа все средства идут на основной долг
            });
        }
    });
    
    if (distributions.length > 0) {
        const distInput = document.createElement('input');
        distInput.type = 'hidden';
        distInput.name = 'distributions';
        distInput.value = JSON.stringify(distributions);
        this.appendChild(distInput);
    }
});

@if(isset($client) && $client)
    selectClient({
        id: {{ $client->id }},
        account_number: '{{ $client->account_number }}',
        full_name: '{{ addslashes($client->full_name) }}'
    });
@endif
</script>
@endsection