@extends('layouts.app')

@section('title', 'Привязка объекта к клиенту')

@section('content')
<style>
.object-item, .consumer-item {
    cursor: pointer;
    transition: background-color 0.2s;
}
.object-item:hover, .consumer-item:hover {
    background-color: #e9ecef;
}
.object-item.selected, .consumer-item.selected {
    background-color: #0d6efd !important;
    color: white !important;
}
.object-item.selected small, .consumer-item.selected small {
    color: rgba(255,255,255,0.8) !important;
}
.info-text {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.info-text a {
    text-decoration: none;
}
.info-text a:hover {
    text-decoration: underline;
}
</style>

<h1>Привязка объекта к клиенту</h1>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">Выберите объект</h5>
            </div>
            <div class="card-body">
                <input type="text" id="objectSearch" class="form-control mb-3" placeholder="Поиск объектов...">
                <div id="objectsList" style="max-height: 400px; overflow-y: auto;">
                    @foreach($objects as $object)
                    <div class="object-item border rounded p-2 mb-2" 
                         data-id="{{ $object->id }}" 
                         data-name="{{ $object->object_address ?? 'Объект #' . $object->id }}">
                        <strong>{{ $object->object_address ?? 'Объект #' . $object->id }}</strong><br>
                        <small>ID: {{ $object->id }} | Счет: {{ $object->account_number ?? 'Не указан' }}</small>
                        
                        @if(isset($objectAssignments[$object->id]))
                            @php $owner = $objectAssignments[$object->id]; @endphp
                            <div class="info-text text-warning mt-1">
                                ⚠ Уже привязан к клиенту: 
                                <a href="{{ route('clients.show', $owner['client_id']) }}" class="text-warning text-decoration-underline">
                                    {{ $owner['client_name'] }}
                                </a>
                                <br><small>Привязка от: {{ \Carbon\Carbon::parse($owner['date'])->format('d.m.Y') }}</small>
                            </div>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">Выберите клиента</h5>
            </div>
            <div class="card-body">
                <input type="text" id="consumerSearch" class="form-control mb-3" placeholder="Поиск клиентов...">
                <div id="consumersList" style="max-height: 400px; overflow-y: auto;">
                    @foreach($consumers as $consumer)
                    <div class="consumer-item border rounded p-2 mb-2" 
                         data-id="{{ $consumer->id }}" 
                         data-name="{{ $consumer->full_name }}"
                         data-account="{{ $consumer->account_number }}">
                        <strong>{{ $consumer->full_name }}</strong><br>
                        <small>ID: {{ $consumer->id }} | Счет: {{ $consumer->account_number }} | ИНН: {{ $consumer->inn ?? '-' }}</small>
                        
                        @if(isset($consumerAssignments[$consumer->id]))
                            @php $assignedObj = $consumerAssignments[$consumer->id]; @endphp
                            <div class="info-text text-info mt-1">
                                📍 Привязан к объекту: 
                                <a href="{{ route('objects.edit', $assignedObj['object_id']) }}" class="text-info text-decoration-underline">
                                    {{ $assignedObj['object_address'] }}
                                </a>
                                <br><small>Привязка от: {{ \Carbon\Carbon::parse($assignedObj['date'])->format('d.m.Y') }}</small>
                            </div>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header bg-light">
        <h5 class="mb-0">Создание привязки</h5>
    </div>
    <div class="card-body">
        <div class="alert alert-secondary">
            <strong>Выбрано:</strong><br>
            <span id="selectedObjectText">Объект: не выбран</span><br>
            <span id="selectedConsumerText">Клиент: не выбран</span>
        </div>
        
        <form method="POST" action="{{ route('ownership.store') }}" id="assignmentForm">
            @csrf
            <input type="hidden" name="object_id" id="objectId">
            <input type="hidden" name="consumer_id" id="consumerId">
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="date" class="form-label">Дата привязки</label>
                    <input type="date" name="date" id="date" class="form-control" value="{{ date('Y-m-d') }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="comment" class="form-label">Комментарий</label>
                    <input type="text" name="comment" id="comment" class="form-control" placeholder="Дополнительная информация">
                </div>
            </div>
            
            <button type="submit" class="btn btn-primary" id="assignBtn" disabled>Создать привязку</button>
            <a href="{{ route('objects.index') }}" class="btn btn-secondary">Отмена</a>
        </form>
    </div>
</div>

<script>
let selectedObject = null;
let selectedConsumer = null;

function selectObject(element) {
    document.querySelectorAll('.object-item').forEach(el => {
        el.classList.remove('selected', 'bg-primary', 'text-white');
    });
    element.classList.add('selected', 'bg-primary', 'text-white');
    
    selectedObject = {
        id: element.dataset.id,
        name: element.dataset.name
    };
    
    document.getElementById('selectedObjectText').innerHTML = 'Объект: ' + selectedObject.name + ' (ID: ' + selectedObject.id + ')';
    document.getElementById('objectId').value = selectedObject.id;
    checkFormValidity();
}

function selectConsumer(element) {
    document.querySelectorAll('.consumer-item').forEach(el => {
        el.classList.remove('selected', 'bg-success', 'text-white');
    });
    element.classList.add('selected', 'bg-success', 'text-white');
    
    selectedConsumer = {
        id: element.dataset.id,
        name: element.dataset.name
    };
    
    document.getElementById('selectedConsumerText').innerHTML = 'Клиент: ' + selectedConsumer.name + ' (ID: ' + selectedConsumer.id + ')';
    document.getElementById('consumerId').value = selectedConsumer.id;
    checkFormValidity();
}

function checkFormValidity() {
    const btn = document.getElementById('assignBtn');
    btn.disabled = !(selectedObject && selectedConsumer);
}

// Поиск объектов
document.getElementById('objectSearch').addEventListener('input', function() {
    const term = this.value.toLowerCase();
    document.querySelectorAll('.object-item').forEach(el => {
        el.style.display = el.textContent.toLowerCase().includes(term) ? '' : 'none';
    });
});

// Поиск клиентов
document.getElementById('consumerSearch').addEventListener('input', function() {
    const term = this.value.toLowerCase();
    document.querySelectorAll('.consumer-item').forEach(el => {
        el.style.display = el.textContent.toLowerCase().includes(term) ? '' : 'none';
    });
});

// Обработчики клика
document.querySelectorAll('.object-item').forEach(el => {
    el.addEventListener('click', () => selectObject(el));
});
document.querySelectorAll('.consumer-item').forEach(el => {
    el.addEventListener('click', () => selectConsumer(el));
});
</script>
@endsection