@extends('layouts.simple.master')

@section('main_content')
@include('operations.comercial.ofertas.navigation')

<div class="container-fluid">
    <h2 class="mb-3">Introducir Ofertas</h2>

    <!-- Acordeón de Filtro -->
    <div class="accordion mb-4" id="accordionFiltros">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingFiltros">
                <button class="accordion-button d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFiltros" aria-expanded="false" aria-controls="collapseFiltros">
                    <span>Filtro de Ofertas</span>
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
                        </svg>
                    </span>
                </button>
            </h2>
            <div id="collapseFiltros" class="accordion-collapse collapse show" aria-labelledby="headingFiltros" data-bs-parent="#accordionFiltros">
                <div class="accordion-body">
                    <form method="GET" action="{{ route('operations.comercial.ofertas.cial_ofertas.index') }}" id="filterForm">
                        <div class="row align-items-center g-2">

                            <!-- Estado -->
                            <div class="col-md-2">
                                <label for="estado" class="form-label">Estado</label>
                                <select name="estado" id="estado" class="form-control form-control-sm" onchange="document.getElementById('filterForm').submit()">
                                    <option value="" {{ request('estado') == '' ? 'selected' : '' }}>Todos</option>
                                    @foreach($estados as $value)
                                        <option value="{{ $value }}" {{ request('estado') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Temperatura -->
                            <div class="col-md-2">
                                <label for="temperatura" class="form-label">Temperatura</label>
                                <select name="temperatura" id="temperatura" class="form-control form-control-sm" onchange="document.getElementById('filterForm').submit()">
                                    <option value="" {{ request('temperatura') == '' ? 'selected' : '' }}>Todos</option>
                                    @foreach($temperaturas as $value)
                                        <option value="{{ $value }}" {{ request('temperatura') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Sector -->
                            <div class="col-md-1">
                                <label for="sector" class="form-label">Sector</label>
                                <select name="sector" id="sector" class="form-control form-control-sm" onchange="document.getElementById('filterForm').submit()">
                                    <option value="">Todos</option>
                                    @foreach($sectores as $value)
                                        <option value="{{ $value }}" {{ request('sector') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Tipo de Licitación -->
                            <div class="col-md-2">
                                <label for="tipo_licitacion" class="form-label">Tipo Licitación</label>
                                <select name="tipo_licitacion" id="tipo_licitacion" class="form-control form-control-sm" onchange="document.getElementById('filterForm').submit()">
                                    <option value="">Todos</option>
                                    @foreach($tiposLicitacion as $value)
                                        <option value="{{ $value }}" {{ request('tipo_licitacion') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>

                             <!-- Tamaño de Importe -->
                             <div class="col-md-1">
                                <label for="importe_licitacion" class="form-label">Importe</label>
                                <select name="importe_licitacion" id="importe_licitacion" class="form-control form-control-sm" onchange="document.getElementById('filterForm').submit()">
                                    <option value="">Todos</option>
                                    @foreach($importeLicitacion as $value)
                                        <option value="{{ $value }}" {{ request('importe_licitacion') == $value ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Fecha Desde -->
                            <div class="col-md-2">
                                <label for="fecha_desde" class="form-label">Desde</label>
                                <input type="date" name="fecha_desde" class="form-control"
                                    value="{{ request('fecha_desde', '2025-01-01') }}"
                                    onchange="document.getElementById('filterForm').submit()">
                            </div>

                            <!-- Fecha Hasta -->
                            <div class="col-md-2">
                                <label for="fecha_hasta" class="form-label">Fecha Hasta</label>
                                <input type="date" name="fecha_hasta" id="fecha_hasta" class="form-control form-control-sm" value="{{ request('fecha_hasta', now()->addMonths(3)->format('Y-m-d')) }}" onchange="document.getElementById('filterForm').submit()">
                            </div>

                            <!-- Búsqueda libre -->
                            <div class="col-md-3">
                                <label for="search" class="form-label">Buscar</label>
                                <div class="input-group">
                                    <input type="text" name="search" id="search" class="form-control form-control-sm" placeholder="Cliente, Objeto u Código proyecto" value="{{ request('search') }}">
                                    <button type="submit" class="btn btn-primary btn-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                            <path d="M11.742 10.344a.5.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.85-3.85a.007.007 0 0 0-.115-.098z"/>
                                            <path d="M6.5 12.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13z"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Controles superiores -->
    <div class="row mb-3">
        <!-- Registros a mostrar y botón de añadir -->
        <div class="col-12 d-flex justify-content-between align-items-center">
            <!-- Selección de registros a mostrar -->
            <div class="d-flex align-items-center">
                <label for="scrollLimit" class="form-label me-2">Registros:</label>
                <select id="scrollLimit" onchange="setScrollLimit(this.value)">
                    <option value="10" {{ request('limit') == 10 ? 'selected' : '' }}>10</option>
                    <option value="20" {{ request('limit') == 20 ? 'selected' : '' }}>20</option>
                    <option value="30" {{ request('limit') == 30 ? 'selected' : '' }}>30</option>
                    <option value="all" {{ request('limit') == 'all' ? 'selected' : '' }}>Todos</option>
                </select>

                <!-- Filtro de status -->
                <label for="statusFilter" class="form-label me-2">Estado:</label>
                <select id="statusFilter" class="form-select form-select-sm d-inline-block w-auto" onchange="filterStatus(this.value)">
                    <option value="">Todos</option>
                    <option value="Completa" {{ request('status') == 'Completa' ? 'selected' : '' }}>Completa</option>
                    <option value="Incompleta" {{ request('status') == 'Incompleta' ? 'selected' : '' }}>Incompleta</option>
                </select>
            </div>

            @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                <!-- Botón de añadir -->
                <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addRecordModal">
                    <i class="bi bi-plus"></i> Añadir
                </button>
            @endif
        </div>
    </div>


    <!-- Sección: Browse -->
    <div class="row">
        <!-- Tabla -->
        <div class="col-12">
            <div class="card"> <!-- Marco blanco limpio -->
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover mb-0">
                            <!-- Cabecera -->
                            <!-- Cabecera de la tabla -->
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Cliente</th>
                                    <th>Proyecto</th>
                                    <th>O</th> <!-- Columna de Objeto -->
                                    <th>D</th> <!-- New column for Details -->
                                    <th>F</th> <!-- New column for Fechas -->
                                    <th>C</th> <!-- New column for Criterios -->
                                    <th>Co</th> <!-- New column for Competitors -->
                                    <th>Cu</th> <!-- New column for Cuantitativas -->
                                    <th>G</th> <!-- New Ganador column -->
                                    <th>Cu</th> <!-- New Cualitativo column -->
                                    <th style="min-width: 9rem !important;">Presentación <i class ="{{ request('sort_dir') === 'asc' ? 'bi bi-sort-up' : 'bi bi-sort-down' }}" onclick="sortTable('fecha_presentacion')" style="cursor: pointer;"></i></th>
                                    <th>Licitado</th>
                                    <th>Estimado</th>
                                    <th>Estado</th>
                                    <th>Temperatura</th>
                                    <th></th>
                                    <th></th> <!-- Columna sin nombre para el status -->
                                </tr>
                            </thead>

                            <!-- Cuerpo de la tabla -->
                            <tbody>
                                @forelse($ofertas as $oferta)
                                            <tr
                                                data-id="{{ $oferta->id }}"
                                                class="
                                                    @if($oferta->estado == 'Pendiente') estado-pendiente
                                                    @elseif($oferta->estado == 'Ganado') estado-ganado
                                                    @elseif($oferta->estado == 'Perdido' || $oferta->estado == 'Pendiente de adjudicacion') estado-perdido
                                                    @elseif($oferta->estado == 'Desestimado' || $oferta->estado == 'Renuncia Cliente') estado-desestimado
                                                    @endif
                                                ">
                                        @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                                            <td contenteditable="true" 
                                                data-field="codigo_proyecto" 
                                                data-url="{{ route('operations.comercial.ofertas.cial_ofertas.update.field', ['id' => $oferta->id, 'field' => 'codigo_proyecto']) }}">
                                                {{ $oferta->codigo_proyecto }}
                                            </td>
                                        @else
                                            <td>{{ $oferta->codigo_proyecto }}</td>
                                        @endif
                                        
                                        @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                                            <td contenteditable="true" 
                                                data-field="cliente" 
                                                data-url="{{ route('operations.comercial.ofertas.cial_ofertas.update.field', ['id' => $oferta->id, 'field' => 'cliente']) }}">
                                                {{ $oferta->cliente }}
                                            </td>
                                            <td contenteditable="true" 
                                                data-field="proyecto" 
                                                data-url="{{ route('operations.comercial.ofertas.cial_ofertas.update.field', ['id' => $oferta->id, 'field' => 'proyecto']) }}">
                                                {{ $oferta->proyecto }}
                                            </td>
                                        @else
                                            <td>{{ $oferta->cliente }}</td>
                                            <td>{{ $oferta->proyecto }}</td>
                                        @endif

                                        <td>
                                            <button class="btn p-0 border-0 bg-transparent" data-bs-toggle="modal" data-bs-target="#modalObjeto-{{ $oferta->id }}">
                                                <i class="bi bi-cart" style="font-size: 1.2rem; color: #dc3545;"></i>
                                            </button>
                                        </td>
                                        <td>
                                            <a href="{{ route('operations.comercial.ofertas.cial_ofertas.details.edit', ['id' => $oferta->id]) . '?' . http_build_query(request()->query()) }}"
                                            class="btn p-0 border-0 bg-transparent">
                                                <i class="bi bi-tags" style="font-size: 1.2rem; color: #dc3545;"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="{{ route('operations.comercial.ofertas.cial_ofertas.dates.edit', ['id' => $oferta->id]) . '?' . http_build_query(request()->query()) }}"
                                            class="btn p-0 border-0 bg-transparent">
                                                <i class="bi bi-calendar" style="font-size: 1.2rem; color: {{ $oferta->dates ? '#dc3545' : '#000000' }};"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="{{ route('operations.comercial.ofertas.cial_ofertas.criterios.edit', ['id' => $oferta->id]) . '?' . http_build_query(request()->query()) }}"
                                            class="btn p-0 border-0 bg-transparent">
                                                <i class="bi bi-clock" style="font-size: 1.2rem; color: {{ $oferta->criterios ? '#dc3545' : '#000000' }};"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="{{ route('operations.comercial.ofertas.cial_ofertas.competitors.edit', ['id' => $oferta->id]) . '?' . http_build_query(request()->query()) }}"
                                            class="btn p-0 border-0 bg-transparent">
                                                <i class="bi bi-people" style="font-size: 1.2rem; color: {{ $oferta->competidores->count() > 0 ? '#dc3545' : '#000000' }};"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="{{ route('operations.comercial.ofertas.cial_ofertas.cuantitativas.edit', ['id' => $oferta->id]) . '?' . http_build_query(request()->query()) }}"
                                            class="btn p-0 border-0 bg-transparent">
                                                <i class="bi bi-123" style="font-size: 1.2rem; color: {{ $oferta->competidores()->whereHas('cuantitativas')->count() > 0 ? '#dc3545' : '#000000' }};"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="{{ route('operations.comercial.ofertas.cial_ofertas.ganador.edit', ['id' => $oferta->id]) . '?' . http_build_query(request()->query()) }}"
                                            class="btn p-0 border-0 bg-transparent">
                                                <i class="bi bi-trophy" style="font-size: 1.2rem; color: {{ $oferta->ganador ? '#dc3545' : '#000000' }};"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="{{ route('operations.comercial.ofertas.cial_ofertas.cualitativo.edit', ['id' => $oferta->id, 'redirect' => request()->fullUrl()]) }}"
                                            class="btn p-0 border-0 bg-transparent">
                                                <i class="bi bi-file-text" style="font-size: 1.2rem; color: {{ $oferta->ficheros->count() ? '#dc3545' : '#000000' }};"></i>
                                            </a>
                                        </td>
                                        <td class="editable-date" data-field="fecha_presentacion">
                                            @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                                                <input type="date" class="form-control form-control-sm date-field" value="{{ $oferta->fecha_presentacion ? \Carbon\Carbon::parse($oferta->fecha_presentacion)->format('Y-m-d') : '' }}"/>
                                            @else
                                                {{ $oferta->fecha_presentacion ? \Carbon\Carbon::parse($oferta->fecha_presentacion)->format('Y-m-d') : '' }}
                                            @endif
                                        </td>
                                        @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                                            <td contenteditable="true" data-field="importe_licitacion" data-url="{{ route('operations.comercial.ofertas.cial_ofertas.update.field', ['id' => $oferta->id, 'field' => 'importe_licitacion']) }}">
                                        @else
                                            <td>
                                        @endif
                                            {{ number_format($oferta->importe_licitacion, 2, ',', '.') }}
                                        </td>
                                        @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                                            <td contenteditable="true" data-field="importe_estimado" data-url="{{ route('operations.comercial.ofertas.cial_ofertas.update.field', ['id' => $oferta->id, 'field' => 'importe_estimado']) }}">
                                        @else
                                            <td>
                                        @endif
                                            {{ number_format($oferta->importe_estimado, 2, ',', '.') }}
                                        </td>
                                        <td>
                                            @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                                                <select class="form-select form-select-sm update-field" data-id="{{ $oferta->id }}" data-field="estado" onchange="updateField(this, '{{ route('operations.comercial.ofertas.cial_ofertas.update.field', ['id' => $oferta->id, 'field' => 'estado']) }}')">
                                                    @foreach(collect(['Desestimado', 'Ganado', 'Pendiente', 'Perdido', 'Renuncia Cliente', 'Pendiente de adjudicacion'])->sort() as $estado)
                                                        <option value="{{ $estado }}" {{ $oferta->estado == $estado ? 'selected' : '' }}>
                                                            {{ $estado }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @else
                                                {{ $oferta->estado }}
                                            @endif
                                        </td>
                                        <td>
                                            @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                                                <select class="form-select form-select-sm update-field" data-id="{{ $oferta->id }}" data-field="temperatura" onchange="updateField(this, '{{ route('operations.comercial.ofertas.cial_ofertas.update.field', ['id' => $oferta->id, 'field' => 'temperatura']) }}')">
                                                    <option value="" {{ is_null($oferta->temperatura) ? 'selected' : '' }}>-- Seleccionar Temperatura --</option>
                                                    @foreach(collect(['Caliente', 'Templado', 'Frio'])->sort() as $temperatura)
                                                        <option value="{{ $temperatura }}" {{ $oferta->temperatura == strtolower($temperatura) ? 'selected' : '' }}>
                                                            {{ $temperatura }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @else
                                                {{ $oferta->temperatura }}
                                            @endif
                                        </td>

                                        <!-- Columna de Acciones (Eliminar y Cara de Estado) -->

                                        <!-- Nueva columna con link -->
                                        <td class="text-center">
                                            @if ($oferta->url)
                                                <a href="{{ $oferta->url }}" target="_blank">
                                                    <i class="bi bi-link-45deg" style="font-size: 1.5rem;"></i>
                                                </a>
                                            @else
                                                <a href="#" data-bs-toggle="modal" data-bs-target="#urlModal{{ $oferta->id }}">
                                                    <i class="bi bi-link-45deg text-muted" style="font-size: 1.5rem;"></i>
                                                </a>
                                            @endif
                                        </td>
                                        <!-- Botón de eliminar -->
                                        <td class="text-center">
                                            @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                                                <form action="{{ route('operations.comercial.ofertas.cial_ofertas.destroy', $oferta->id) }}" method="POST" style="display: inline;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn p-0 border-0 bg-transparent" title="Eliminar" style="color: red;">
                                                        <i class="bi bi-x-circle" style="font-size: 1.2rem;"></i> <!-- Ícono de Bootstrap -->
                                                    </button>
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="18" class="text-center">No hay registros disponibles.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                            <!-- Pie -->
                            <tfoot>
                                <tr>
                                    <th>Código</th>
                                    <th>Cliente</th>
                                    <th>Proyecto</th>
                                    <th>O</th> <!-- Columna sin título -->
                                    <th>D</th> <!-- New column for Details -->
                                    <th>F</th> <!-- New column for Fechas -->
                                    <th>C</th> <!-- New column for Criterios -->
                                    <th>Co</th> <!-- New column for Competitors -->
                                    <th>Cu</th> <!-- New column for Cuantitativas -->
                                    <th>G</th> <!-- New Ganador column -->
                                    <th>Cu</th> <!-- New Cualitativo column -->
                                    <th>Presentación</th>
                                    <th>Licitado</th>
                                    <th>Estimado</th>
                                    <th>Estado</th>
                                    <th>Temperatura</th>
                                    <th></th>
                                    <th></th> <!-- Columna sin título -->
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navegación de Paginación -->
    <div class="row">
        <div class="col-12 mt-3 d-flex justify-content-center">
            {{ $ofertas->links('pagination::bootstrap-5') }}
        </div>
    </div>

<!-- Modal: Agregar Registro -->
<div class="modal fade" id="addRecordModal" tabindex="-1" aria-labelledby="addRecordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addRecordModalLabel">Agregar Nuevo Registro</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('operations.comercial.ofertas.cial_ofertas.store') }}">
                    @csrf
                    <div class="mb-3">
                        <label for="cliente" class="form-label">Cliente</label>
                        <input type="text" class="form-control" id="cliente" name="cliente" list="clientes" required>
                        <datalist id="clientes">
                            @foreach($clientes as $cliente)
                                <option value="{{ $cliente->nombre_cliente }}"></option>
                            @endforeach
                        </datalist>
                    </div>

                    <div class="mb-3">
                        <label for="proyecto" class="form-label">Proyecto</label>
                        <textarea class="form-control" id="proyecto" name="proyecto" rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="objeto" class="form-label">Objeto del Proyecto</label>
                        <textarea class="form-control" id="objeto" name="objeto" rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="sector" class="form-label">Sector</label>
                        <select class="form-select" id="sector" name="sector" required>
                            <option value="Público">Público</option>
                            <option value="Privado">Privado</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="tipo_licitacion" class="form-label">Tipo de Licitación</label>
                        <select class="form-select" id="tipo_licitacion" name="tipo_licitacion" required>
                            @foreach(collect(['Adjudicación Directa', 'Concurso', 'Menor', 'Privado'])->sort() as $tipo)
                                <option value="{{ $tipo }}">{{ $tipo }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="fecha_presentacion" class="form-label">Fecha de Presentación</label>
                        <input type="date" class="form-control" id="fecha_presentacion" name="fecha_presentacion" required>
                    </div>

                    <div class="mb-3">
                        <label for="importe_licitacion" class="form-label">Importe de Licitación</label>
                        <input type="number" step="0.01" class="form-control" id="importe_licitacion" name="importe_licitacion">
                    </div>

                    <div class="mb-3">
                        <label for="importe_estimado" class="form-label">Importe Estimado</label>
                        <input type="number" step="0.01" class="form-control" id="importe_estimado" name="importe_estimado">
                    </div>

                    <div class="mb-3">
                        <label for="duracion_meses" class="form-label">Duración (Meses)</label>
                        <input type="number" class="form-control" id="duracion_meses" name="duracion_meses">
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modales para el contenido de "objeto" -->
@foreach($ofertas as $oferta)
    <div class="modal fade" id="modalObjeto-{{ $oferta->id }}" tabindex="-1" aria-labelledby="modalObjeto-Label{{ $oferta->id }}" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalObjeto-Label{{ $oferta->id }}">Contenido del Objeto</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Información Protegida -->
                    <div class="row mb-3">
                        <!-- Cliente -->
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Cliente:</label>
                            <input class="form-control-plaintext" value="{{ $oferta->cliente }}" style="width: 100% !important;" readonly></input>
                        </div>
                    </div>

                    @if(Auth::user()->role->name == 'admin' || Auth::user()->role->name == 'consultor')
                        <!-- Formulario de Edición -->
                        <form method="POST" action="{{ route('operations.comercial.ofertas.cial_ofertas.update.field', ['id' => $oferta->id]) }}">
                            @csrf
                            @method('POST')
                            <!-- Código de Proyecto -->
                            <div class="mb-3">
                                <label for="codigo_proyecto-{{ $oferta->id }}" class="form-label">Código de Proyecto</label>
                                <textarea class="form-control" id="codigo_proyecto-{{ $oferta->id }}" name="codigo_proyecto" rows="5">{{ $oferta->codigo_proyecto }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label for="objeto-{{ $oferta->id }}" class="form-label">Descripción del Objeto</label>
                                <textarea class="form-control" id="objeto-{{ $oferta->id }}" name="objeto" rows="5">{{ $oferta->objeto }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label for="proyecto-{{ $oferta->id }}" class="form-label">Proyecto</label>
                                <textarea class="form-control" id="proyecto-{{ $oferta->id }}" name="proyecto" rows="5">{{ $oferta->proyecto }}</textarea>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                            </div>
                        </form>
                    @else
                        @if ($oferta->codigo_proyecto)
                            <div class="mb-3">
                                <strong>Código de Proyecto</strong>
                                <p>{{ $oferta->codigo_proyecto }}</p>
                            </div>
                        @endif
                        <div class="mb-3">
                            <strong>Descripción del Objeto</strong>
                            <p>{{ $oferta->objeto }}</p>
                        </div>
                        <div class="mb-3">
                            <strong>Proyecto</strong>
                            <p>{{ $oferta->proyecto }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="urlModal{{ $oferta->id }}" tabindex="-1" aria-labelledby="urlModalLabel{{ $oferta->id }}" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="urlModalLabel{{ $oferta->id }}">Añadir URL</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Información Protegida -->
                    <div class="row mb-3">
                        <!-- Cliente -->
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Cliente:</label>
                            <input class="form-control-plaintext" value="{{ $oferta->cliente }}" style="width: 100% !important;" readonly></input>
                        </div>
                    </div>

                    <!-- Formulario de Edición -->
                    <form method="POST" action="{{ route('operations.comercial.ofertas.cial_ofertas.update.url', ['id' => $oferta->id]) }}">
                        @csrf
                        @method('POST')
                        <!-- Código de Proyecto -->
                        <div class="mb-3">
                            <label for="url_oferta-{{ $oferta->id }}" class="form-label">Url</label>
                            <input class="form-control" type="url" id="url_oferta-{{ $oferta->id }}" name="url_oferta">
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endforeach
<!-- Fin del Modal -->

<!-- Modal: Cambio de Estado -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="statusModalLabel">Cambiar Estado de la Oferta</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="statusForm" method="POST" action="">
                    @csrf
                    <p>¿Deseas cambiar el estado de esta oferta?</p>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">Cambiar Estado</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Fin del Modal -->

<!-- Añadir estos estilos en la sección de estilos -->
<style>
    .estado-pendiente {
        background-color: #fff3cd !important; /* amarillo muy tenue */
    }
    .estado-ganado {
        background-color: #d4edda !important; /* verde muy tenue */
    }
    .estado-perdido, .estado-sin-respuesta {
        background-color: #f8d7da !important; /* rojo muy tenue */
    }
    .estado-desestimado, .estado-renuncia {
        background-color: #e9ecef !important; /* gris muy tenue */
    }
    .some-class {
        background-color: #e9ecef !important; /* gris muy tenue */
    }
</style>
@endsection

@push('scripts')
<script>
    // Conversion numérica para que laravel y la BD lo reconozca
    function formatCurrencyToDecimal(value) {
        value = value.trim();

        // Eliminar los puntos que separan miles
        value = value.replace(/\.(?=\d{3}(?:,|$))/g, "");

        // Reemplazar la coma decimal por un punto
        value = value.replace(",", ".");

        return value; 
    }

    function sortTable(field) {
        var currentUrl = new URL(window.location.href);
        var currentSortBy = currentUrl.searchParams.get('sort_by');
        var currentSortDir = currentUrl.searchParams.get('sort_dir');
        var newSortDir = 'asc';

        if (currentSortBy === field && currentSortDir === 'asc') {
            newSortDir = 'desc';
        }

        currentUrl.searchParams.set('sort_by', field);
        currentUrl.searchParams.set('sort_dir', newSortDir);

        window.location.href = currentUrl.toString();
    }

document.addEventListener('DOMContentLoaded', () => {

    function debounce(func, wait) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }

    document.querySelectorAll('textarea').forEach(textarea => {
        textarea.addEventListener('input', function () {
            const fieldName = this.name;  // 'objeto', 'proyecto', o 'codigo_proyecto'

            // Asignamos dinámicamente el campo `field` a un campo oculto (input) en el formulario
            let fieldInput = document.querySelector('input[name="field"]');

            if (!fieldInput) {
                // Si no existe, creamos el campo `field` como un campo oculto
                fieldInput = document.createElement('input');
                fieldInput.type = 'hidden';
                fieldInput.name = 'field';
                document.querySelector('form').appendChild(fieldInput);
            }
            fieldInput.value = fieldName;  // Asignamos el valor del campo que estamos editando
        });
    });

    function updateField(element, url) {
        if (!element) {
            console.error("Elemento no encontrado.");
            return;
        }

        if (!url) {
            console.error("URL no definida en updateField.");
            return;
        }

        let value = formatCurrencyToDecimal(element.textContent.trim());
        let field = element.dataset.field;

        // Validar si la URL contiene "null" en el ID
        if (typeof url === "string" && url.includes('/null/')) {
            console.error('Error: El ID de la oferta es null. URL inválida:', url);
            alert("Error: No se puede actualizar este campo porque falta el ID.");
            return;
        }

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ field, value })
        })
        .then(response => {
            if (!response.ok) {
                return response.text().then(err => { throw new Error(err); });
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                console.log('Actualización exitosa:', data.message);
            } else {
                console.error('Error en la actualización:', data.message);
                alert('Error al actualizar.');
            }
        })
        .catch(error => {
            console.error('Error en la petición:', error);
        });
    }

    const debouncedUpdateField = debounce(updateField, 300);

    // Asegurar que la función esté disponible globalmente
    window.updateField = updateField;

    // Aplicar evento a todas las celdas editables
    document.querySelectorAll('[contenteditable="true"]').forEach(cell => {
        cell.addEventListener('blur', function() {
            const url = this.dataset.url;
            
            if (url) {
                updateField(this, url);
            } else {
                console.error("URL no encontrada en la celda:", this);
            }
        });
    });

    // Para actualizar valores de fechas
    document.querySelectorAll('.editable-date').forEach(input => {
        input.addEventListener('change', function() {
            const row = this.closest('tr');
            const id = row?.dataset.id;
            const field = this.dataset.field;
            const value = this.value ? this.value.trim() : '';
            const url = id ? `/operations/comercial/ofertas/cial_ofertas/update-field/${id}?field=${field}` : null;

            if (id && id !== 'null' && url) {
                debouncedUpdateField({ dataset: { field } }, url, value);
            } else {
                console.error("ID inválido al intentar actualizar la fecha:", id);
            }
        });
    });

    function confirmDelete(url) {
        if (confirm('¿Estás seguro de que deseas eliminar este registro?')) {
            fetch(url, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                },
            })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(err => { throw new Error(err); });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('Error al eliminar el registro.');
                }
            })
            .catch(error => {
                console.error('Error inesperado:', error);
                alert('Hubo un error al eliminar.');
            });
        }
    }

    function showStatusModal(ofertaId) {
        const modal = new bootstrap.Modal(document.getElementById('statusModal'));
        const form = document.getElementById('statusForm');
        const url = new URL(window.location.href);
        form.action = `${url.origin}/operations/comercial/ofertas/cial_ofertas/${ofertaId}/toggle-status?${url.searchParams.toString()}`;
        modal.show();
    }

    function filterStatus(value) {
        const url = new URL(window.location.href);
        url.searchParams.set('status', value);
        window.location.href = url.toString();
    }

    function setScrollLimit(value) {
        const params = new URLSearchParams(window.location.search);
        params.set('limit', value);
        window.location.search = params.toString();
    }
});

document.querySelectorAll('.editable-date input').forEach(input => {
    input.addEventListener('change', function(event) {
        const td = this.closest('td'); 
        const row = this.closest('tr');
        const id = row?.dataset.id;
        const field = td.dataset.field;
        const value = this.value;

        if (!id || id === "null") {
            console.error("ID inválido en updateField:", id);
            return;
        }

        const url = `/operations/comercial/ofertas/cial_ofertas/update-field/${id}`;

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                field: field,
                value: value
            })
        })
        .then(response => {
            if (!response.ok) {
                return response.text().then(err => { throw new Error(err); });
            }
            return response.json();
        })
        .then(data => {
            if (!data.success) {
                alert('Error al actualizar');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al actualizar 2');
        });
    });
});

// Camabiar dinámicamente el color de la fila
$(document).on('change', '.update-field', function () {
    let id = $(this).data('id');
    let field = $(this).data('field');
    let value = $(this).val();

    $.ajax({
        url: `/operations/comercial/ofertas/cial_ofertas/update-field/${id}?field=${field}`,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            field: field,
            value: value,
            _token: $('meta[name="csrf-token"]').attr('content')
        }),
        success: function (response) {
            console.log('Actualización exitosa:', response);

            let row = $(`tr[data-id="${id}"]`);

            // Paleta de colores
            if (value === 'Pendiente') {
                row.css('background-color', '#ffffff'); // Blanco
            } else if (value === 'Ganado') {
                row.css('background-color', '#d4edda'); // Verde muy tenue
            } else if (value === 'Perdido' || value === 'Pendiente de adjudicacion') {
                row.css('background-color', '#f8d7da'); // Rojo tenue
            } else if (value === 'Desestimado' || value === 'Renuncia Cliente') {
                row.css('background-color', '#e9ecef'); // Gris muy tenue
            }
        },
        error: function (xhr) {
            console.error('Error al actualizar:', xhr.responseJSON?.message || 'Error desconocido.');
        }
    });
});
</script>
@endpush