@extends('layouts.simple.master')

@section('main_content')
<div class="container">
    <h2 class="mb-4">Sustitución de Competidores</h2>

    <!-- Mensajes de Éxito y Error -->
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <!-- Marco Blanco para los Combos de Selección -->
    <div class="card mb-4">
        <div class="card-body">
            <!-- Formulario para Seleccionar Origen y Destino -->
            <form action="{{ route('operations.comercial.procesos.competidor.index') }}" method="GET">
                <div class="row mb-3">
                    <!-- Campo para Competidor Origen -->
                    <div class="col-md-6">
                        <label for="competidor_origen" class="form-label">Competidor Origen</label>
                        <select id="competidor_origen" name="competidor_origen" class="form-select" required>
                            <option value="">Seleccione Competidor Origen</option>
                            @foreach($competidores as $competidor)
                                <option value="{{ $competidor->id }}" {{ (isset($competidor_origen) && $competidor_origen == $competidor->id) ? 'selected' : '' }}>
                                    {{ $competidor->nombre }}
                                </option>
                            @endforeach
                        </select>
                        @error('competidor_origen')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Campo para Competidor Destino -->
                    <div class="col-md-6">
                        <label for="competidor_destino" class="form-label">Competidor Destino</label>
                        <select id="competidor_destino" name="competidor_destino" class="form-select" required>
                            <option value="">Seleccione Competidor Destino</option>
                            @foreach($competidores as $competidor)
                                <option value="{{ $competidor->id }}" {{ (isset($competidor_destino) && $competidor_destino == $competidor->id) ? 'selected' : '' }}>
                                    {{ $competidor->nombre }}
                                </option>
                            @endforeach
                        </select>
                        @error('competidor_destino')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Botón para Buscar Registros -->
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary">Buscar Registros</button>
                </div>
            </form>
        </div>
    </div>

    @if($competidor_origen && $competidor_destino)
        <!-- Marco Blanco para la Tabla de Registros Encontrados -->
        <div class="card mb-4">
            <div class="card-body">
                <h4 class="card-title mb-3">Registros Encontrados para Sustituir</h4>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>Cliente</th>
                                <th>Proyecto</th>
                                <th>Competidor Actual</th>
                                <th>Ganador Actual</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($registros as $registro)
                                <tr>
                                    <td>{{ $registro->cliente }}</td>
                                    <td>{{ $registro->proyecto }}</td>
                                    <td>{{ $registro->nombre_competitor1 }}</td>
                                    <td>{{ $registro->nombre_competidor3 ?? 'N/A' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center">No se encontraron registros para sustituir.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Marco Blanco para el Botón de Sustitución -->
        @if($registros->count() > 0)
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-center">
                        <form action="{{ route('operations.comercial.procesos.competidor.update') }}" method="POST" id="sustitucionForm">
                            @csrf
                            <input type="hidden" name="competidor_origen" value="{{ $competidor_origen }}">
                            <input type="hidden" name="competidor_destino" value="{{ $competidor_destino }}">
                            
                            <button type="submit" class="btn btn-danger" onclick="return confirm('¿Está seguro de que desea realizar esta sustitución? Este proceso no tiene vuelta atrás.')">
                                Sustituir Competidor
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    @endif
</div>

<!-- Incluir Select2 CSS y JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#competidor_origen').select2({
            placeholder: 'Seleccione Competidor Origen',
            allowClear: true,
            width: '100%'
        });
        $('#competidor_destino').select2({
            placeholder: 'Seleccione Competidor Destino',
            allowClear: true,
            width: '100%'
        });
    });
</script>
@endsection