@extends('layouts.app')

<!--
@push('styles')
<style>
.object-item:hover, .consumer-item:hover {
    background-color: #e9ecef;
    cursor: pointer;
}
.object-item.bg-primary, .consumer-item.bg-success {
    cursor: pointer;
}
</style>
@endpush
-->

@section('title', 'Управление объектами и клиентами')



@section('content')
<h1>Управление объектами и клиентами</h1>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">Объекты</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" id="objectSearch" class="form-control" placeholder="Поиск объектов...">
                </div>
                <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 }}"
                         data-assigned="{{ isset($objectAssignments[$object->id]) ? 'true' : 'false' }}"
                         style="cursor: pointer;">
                        <strong>{{ $object->object_address ?? 'Объект #' . $object->id }}</strong><br>
                        <small>ID: {{ $object->id }} | Счет: {{ $object->account_number ?? 'Не указан' }}</small>
                        @if(isset($objectAssignments[$object->id]))
                            <div class="small text-success mt-1">
                                Привязан к клиенту
                            </div>
                        @else
                            <div class="small text-warning mt-1">
                                ⚠ Не привязан к клиенту
                            </div>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">Клиенты</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" id="consumerSearch" class="form-control" placeholder="Поиск клиентов...">
                </div>
                <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 }}"
                         style="cursor: pointer;">
                        <strong>{{ $consumer->full_name }}</strong><br>
                        <small>ID: {{ $consumer->id }} | Счет: {{ $consumer->account_number }}</small>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header bg-info text-white">
        <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" name="assign_object" class="btn btn-primary" id="assignBtn" disabled>
                Создать привязку
            </button>
        </form>
    </div>
</div>

@if($assignments->count() > 0)
<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0">Последние привязки</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Объект</th>
                        <th>Клиент</th>
                        <th>Дата</th>
                        <th>Комментарий</th>
                        <th>Действия</th>
                    </thead>
                <tbody>
                    @foreach($assignments as $assignment)
                    <tr>
                        <td>{{ $assignment->object_address ?? 'Объект #' . $assignment->object }}</td>
                        <td>{{ $assignment->consumer_name ?? 'Клиент #' . $assignment->consumer }}</td>
                        <td>{{ $assignment->date ? date('d.m.Y', strtotime($assignment->date)) : '-' }}</td>
                        <td>{{ $assignment->comment ?? '-' }}</td>
                        <td>
                            <form action="{{ route('ownership.destroy', $assignment->id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Удалить привязку?')">Удалить</button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

@push('scripts')
<script>
let selectedObject = null;
let selectedConsumer = null;

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

function selectConsumer(element) {
    document.querySelectorAll('.consumer-item').forEach(item => {
        item.classList.remove('bg-success', 'text-white');
    });
    element.classList.add('bg-success', 'text-white');
    
    selectedConsumer = {
        id: element.getAttribute('data-id'),
        name: element.getAttribute('data-name'),
        account: element.getAttribute('data-account')
    };
    
    document.getElementById('selectedConsumerText').textContent = `Клиент: ${selectedConsumer.name} (ID: ${selectedConsumer.id})`;
    document.getElementById('consumerId').value = selectedConsumer.id;
    checkFormValidity();
}

function checkFormValidity() {
    const assignBtn = document.getElementById('assignBtn');
    if (selectedObject && selectedConsumer) {
        assignBtn.disabled = false;
    } else {
        assignBtn.disabled = true;
    }
}

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

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

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

document.querySelectorAll('.consumer-item').forEach(item => {
    item.addEventListener('click', () => selectConsumer(item));
});
</script>
@endpush