@extends('layouts.simple.master')

@section('main_content')
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-danger text-white">
                    @php 
                        $codigo_proyecto = $oferta->codigo_proyecto ?? 'N/A';
                    @endphp
                    <h5 class="mb-0">Competidores - {{ $codigo_proyecto }}</h5>
                </div>
                <div class="card-body">
                    <!-- Nueva Estructura de Filtros -->
                    <div class="row mb-3">
                        <!-- Columna Izquierda: Búsqueda y Botón -->
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-8">
                                    <label class="form-label">Buscar Competidor</label>
                                    <input type="text" class="form-control" id="competitor-search" placeholder="Escriba para buscar...">
                                </div>
                                @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                                    <div class="col-md-4 d-flex align-items-end">
                                        <button class="btn btn-success w-100" data-bs-toggle="modal" data-bs-target="#newCompetitorModal">
                                            <i class="bi bi-plus"></i> Nuevo Competidor
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <!-- Columna Derecha: Browse de Competidores -->
                        <div class="col-md-6">
                            <div id="search-results" class="list-group mt-2" style="max-height: 80px; overflow-y: auto;">
                                @foreach($allCompetitors as $competitor)
                                    <a href="#" class="list-group-item list-group-item-action competitor-item"
                                       data-id="{{ $competitor->id }}"
                                       onclick="selectCompetitor({{ $competitor->id }}, '{{ $competitor->nombre }}')">
                                        {{ $competitor->nombre }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Resto de tu contenido (por ejemplo, la tabla) -->
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Competidor</th>
                                    <th>Admisión</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($oferta->competidores as $competidor)
                                    <tr>
                                        <td>{{ $competidor->competitor_nombre }}</td>
                                        <td>
                                            <select class="form-select form-select-sm admission-select"
                                                    data-competitor-id="{{ $competidor->id }}">
                                                @foreach(['Admitido', 'Excluido', 'Pendiente'] as $status)
                                                    <option value="{{ $status }}"
                                                        {{ $competidor->admision == $status ? 'selected' : '' }}>
                                                        {{ $status }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-danger"
                                                    onclick="removeCompetitor({{ $competidor->id }})">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="{{ route('operations.comercial.ofertas.cial_ofertas.index') . '?' . request()->getQueryString() }}"
                       class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> Volver
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para nuevo competidor -->
<div class="modal fade" id="newCompetitorModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nuevo Competidor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="newCompetitorForm">
                    <div class="mb-3">
                        <label class="form-label">Nombre</label>
                        <input type="text" class="form-control" name="nombre" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="saveNewCompetitor()">Guardar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('competitor-search');
    const searchResults = document.getElementById('search-results');
    const allCompetitors = @json($allCompetitors);

    searchInput.addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        const filteredCompetitors = allCompetitors.filter(competitor =>
            competitor.nombre.toLowerCase().includes(searchTerm)
        );

        displayResults(filteredCompetitors);
    });

    function displayResults(competitors) {
        searchResults.innerHTML = competitors.map(competitor => `
            <a href="#" class="list-group-item list-group-item-action competitor-item"
               data-id="${competitor.id}"
               onclick="selectCompetitor(${competitor.id}, '${competitor.nombre}')">
                ${competitor.nombre}
            </a>
        `).join('');
    }

    // Add event listeners for admission selects
    document.querySelectorAll('.admission-select').forEach(select => {
        select.addEventListener('change', function() {
            const competitorId = this.dataset.competitorId;
            const newStatus = this.value;
            updateAdmision(this, competitorId);
        });
    });
});

function selectCompetitor(competitorId, nombre) {
    if (confirm(`¿Añadir competidor "${nombre}" a la oferta?`)) {
        fetch(`/operations/comercial/ofertas/cial_ofertas/addexistingcompetitor/{{ $oferta->id }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ competitor_id: competitorId })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.reload();
            } else {
                alert('Error al añadir el competidor');
            }
        });
    }
}

function saveNewCompetitor() {
    const form = document.getElementById('newCompetitorForm');
    const nombre = form.querySelector('[name="nombre"]').value;
    let codigo_proyecto = @json($codigo_proyecto);

    if (!nombre) {
        alert('El nombre es requerido');
        return;
    }

    fetch('/operations/comercial/ofertas/cial_ofertas/savenewcompetitor', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ 
            nombre: nombre,
            oferta_id: codigo_proyecto
         })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            form.reset();
            const modal = bootstrap.Modal.getInstance(document.getElementById('newCompetitorModal'));
            modal.hide();
            window.location.reload();
        } else {
            alert(data.error || 'Error al guardar el competidor');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al guardar el competidor');
    });
}

function removeCompetitor(competitorId) {
    if (confirm('¿Eliminar este competidor?')) {
        console.log('Removing competitor:', competitorId); // Debug log

        fetch(`/operations/comercial/ofertas/cial_ofertas/removecompetitor/{{ $oferta->id }}/${competitorId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                window.location.reload();
            } else {
                alert(data.error || 'Error al eliminar el competidor');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al eliminar el competidor');
        });
    }
}

function updateAdmision(select, competitorId) {
    fetch(`/operations/comercial/ofertas/cial_ofertas/updateadmision/${competitorId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            admision: select.value,
            oferta_id: {{ $oferta->id }}
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Optionally show success message
            window.location.reload();
        } else {
            alert(data.error || 'Error al actualizar el estado');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al actualizar el estado');
    });
}
</script>
<style>
    /* Añadir espacio superior al browse para evitar superposición */
    #search-results {
        margin-top: 15px;
    }

    /* Ajustar el tamaño del botón en dispositivos más pequeños */
    @media (max-width: 768px) {
        .btn-success {
            margin-top: 10px;
        }
    }
</style>
@endsection