@extends('layouts.simple.master')

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

<div class="container-fluid">
    <!-- Filtros -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" action="{{ route('operations.comercial.prospects.list') }}">
                        <div class="row g-3 align-items-end">
                            <!-- Filtro por Fecha Desde -->
                            <div class="col-md-2">
                                <label for="fecha_desde" class="form-label">Fecha Desde (Presentación)</label>
                                <input type="date" class="form-control" id="fecha_desde" name="fecha_desde" value="{{ $fechaDesde }}">
                            </div>

                            <!-- Filtro por Fecha Hasta -->
                            <div class="col-md-2">
                                <label for="fecha_hasta" class="form-label">Fecha Hasta (Presentación)</label>
                                <input type="date" class="form-control" id="fecha_hasta" name="fecha_hasta" value="{{ $fechaHasta }}">
                            </div>

                            <!-- Filtro por Fecha Fin Desde -->
                            <div class="col-md-2">
                                <label for="fecha_fin_desde" class="form-label">Fecha Desde (Fin Contrato)</label>
                                <input type="date" class="form-control" id="fecha_fin_desde" name="fecha_fin_desde" value="{{ $fechaFinDesde }}">
                            </div>

                            <!-- Filtro por Fecha Fin Hasta -->
                            <div class="col-md-2">
                                <label for="fecha_fin_hasta" class="form-label">Fecha Hasta (Fin Contrato)</label>
                                <input type="date" class="form-control" id="fecha_fin_hasta" name="fecha_fin_hasta" value="{{ $fechaFinHasta }}">
                            </div>

                            <!-- Filtro por Temperatura -->
                            <div class="col-md-2">
                                <label for="temperatura" class="form-label">Temperatura</label>
                                <select class="form-select" id="temperatura" name="temperatura">
                                    <option value="">Todas</option>
                                    <option value="Caliente" {{ $temperatura === 'Caliente' ? 'selected' : '' }}>Caliente</option>
                                    <option value="Templado" {{ $temperatura === 'Templado' ? 'selected' : '' }}>Templado</option>
                                    <option value="Frio" {{ $temperatura === 'Frio' ? 'selected' : '' }}>Frio</option>
                                </select>
                            </div>

                            <!-- Botones -->
                            <div class="col-md-6 d-flex justify-content-between align-items-center">
                                <button type="submit" class="btn btn-primary me-2" style="background-color: #1A73E8 !important; color: #fff !important; border-color: #1A73E8 !important;">Filtrar</button>
                                <a href="{{ route('operations.comercial.proyectos.export', request()->query()) }}" class="btn btn-success me-2" style="background-color: #34A853 !important; color: #fff !important; border-color: #34A853 !important;">Exportar CSV</a>
                                <button type="button" class="btn btn-secondary me-2" data-bs-toggle="modal" data-bs-target="#addProspectModal" style="background-color: #FBBC05 !important; color: #fff !important; border-color: #FBBC05 !important;">Añadir Prospect</button>
                                <a href="{{ route('operations.comercial.prospects.list') }}" class="btn btn-light" style="background-color: #EA4335 !important; color: #fff !important; border-color: #EA4335 !important;">Limpiar Filtros</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Totales -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body d-flex justify-content-between">
                    <span><strong>Total Importe Licitación:</strong> {{ number_format($totalImporteLicitacion, 2) }}</span>
                    <span><strong>Total Importe Estimado:</strong> {{ number_format($totalImporteEstimado, 2) }}</span>
                    <span><strong>Total de Ofertas:</strong> {{ $totalOfertas }}</span>
                    <span><strong>Total de Prospects:</strong> {{ $totalProspects }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla -->
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Tipo</th> <!-- Nueva columna -->
                    <th>Código Proyecto</th>
                    <th>Cliente</th>
                    <th>Proyecto</th>
                    <th>Sector</th>
                    <th>Fecha Presentación</th>
                    <th>Fecha Fin Contrato</th>
                    <th>Importe Licitación</th>
                    <th>Importe Estimado</th>
                    <th>Temperatura</th>
                    <th>Acciones</th> <!-- Nueva columna para botones -->
                </tr>
            </thead>
            <tbody>
                @foreach($proyectos as $proyecto)
                <tr>
                    <td>{{ ucfirst($proyecto->source) }}</td> <!-- Muestra "Prospect" o "Oferta" -->
                    <td>{{ $proyecto->unique_id }}</td>
                    <td>{{ $proyecto->cliente }}</td>
                    <td>{{ $proyecto->proyecto }}</td>
                    <td>{{ $proyecto->sector }}</td>
                    <td>{{ $proyecto->fecha_presentacion }}</td>
                    <td>{{ $proyecto->fecha_fin_contrato }}</td>
                    <td>{{ number_format($proyecto->importe_licitacion, 2) }}</td>
                    <td>{{ number_format($proyecto->importe_estimado, 2) }}</td>
                    <td>{{ $proyecto->temperatura }}</td>
                    <td>
                        @if($proyecto->source === 'prospect')
                            <!-- Botón para editar solo para prospects -->
                            <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editProspectModal-{{ $proyecto->source }}-{{ $proyecto->unique_id }}">Editar</button>
                        @endif
                        <!-- Botón para eliminar -->
                        <form method="POST" action="{{ route('operations.comercial.prospects.destroy', ['source' => $proyecto->source, 'id' => $proyecto->unique_id]) }}" style="display:inline-block;" onsubmit="return confirm('¿Estás seguro de que deseas eliminar este prospecto?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger">Eliminar</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</div>

<!-- Modal para Añadir Prospecto -->
<div class="modal fade" id="addProspectModal" tabindex="-1" aria-labelledby="addProspectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addProspectModalLabel">Añadir Prospecto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addProspectForm" method="POST" action="{{ route('operations.comercial.prospects.store') }}">
                @csrf
                <div class="modal-body">
                    <!-- Código Proyecto -->
                    <div class="mb-3">
                        <label for="unique_id" class="form-label">Código Proyecto</label>
                        <input type="text" class="form-control" id="unique_id" name="codigo_proyecto" maxlength="20">
                    </div>
                    <!-- Cliente -->
                    <div class="mb-3">
                        <label for="cliente" class="form-label">Cliente</label>
                        <input type="text" class="form-control" id="cliente" name="cliente" required>
                    </div>
                    <!-- Proyecto -->
                    <div class="mb-3">
                        <label for="proyecto" class="form-label">Proyecto</label>
                        <textarea class="form-control" id="proyecto" name="proyecto" rows="3"></textarea>
                    </div>
                    <!-- Sector -->
                    <div class="mb-3">
                        <label for="sector" class="form-label">Sector</label>
                        <select class="form-select" id="sector" name="sector">
                            <option value="">Seleccionar</option>
                            <option value="Público">Público</option>
                            <option value="Privado">Privado</option>
                        </select>
                    </div>
                    <!-- Tipo Licitación -->
                    <div class="mb-3">
                        <label for="tipo_licitacion" class="form-label">Tipo Licitación</label>
                        <select class="form-select" id="tipo_licitacion" name="tipo_licitacion">
                            <option value="">Seleccionar</option>
                            <option value="Concurso">Concurso</option>
                            <option value="Menor">Menor</option>
                            <option value="Adjudicación Directa">Adjudicación Directa</option>
                            <option value="Oferta Privado">Oferta Privado</option>
                            <option value="Web">Web</option>
                            <option value="Basado Acuerdo Marco">Basado Acuerdo Marco</option>
                            <option value="Acuerdo Marco">Acuerdo Marco</option>
                            <option value="Adjudicacion Marco">Adjudicación Marco</option>
                        </select>
                    </div>
                    <!-- Fecha Presentación -->
                    <div class="mb-3">
                        <label for="fecha_presentacion" class="form-label">Fecha Presentación</label>
                        <input type="date" class="form-control" id="fecha_presentacion" name="fecha_presentacion" required>
                    </div>
                    <!-- Fecha Fin Contrato -->
                    <div class="mb-3">
                        <label for="fecha_fin_contrato" class="form-label">Fecha Fin Contrato</label>
                        <input type="date" class="form-control" id="fecha_fin_contrato" name="fecha_fin_contrato">
                    </div>
                    <!-- Importe Licitación -->
                    <div class="mb-3">
                        <label for="importe_licitacion" class="form-label">Importe Licitación</label>
                        <input type="number" step="0.01" class="form-control" id="importe_licitacion" name="importe_licitacion">
                    </div>
                    <!-- Importe Estimado -->
                    <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>
                    <!-- Duración Meses -->
                    <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>
                    <!-- Temperatura -->
                    <div class="mb-3">
                        <label for="temperatura" class="form-label">Temperatura</label>
                        <select class="form-select" id="temperatura" name="temperatura">
                            <option value="">Seleccionar</option>
                            <option value="Caliente">Caliente</option>
                            <option value="Templado">Templado</option>
                            <option value="Frio">Frío</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para Editar Prospecto -->
@foreach($proyectos as $proyecto)
@if($proyecto->source === 'prospect') <!-- Solo mostrar el modal para prospects -->
<div class="modal fade" id="editProspectModal-{{ $proyecto->source }}-{{ $proyecto->unique_id }}" tabindex="-1" aria-labelledby="editProspectModalLabel-{{ $proyecto->source }}-{{ $proyecto->unique_id }}" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editProspectModalLabel-{{ $proyecto->source }}-{{ $proyecto->unique_id }}">Editar Prospecto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('operations.comercial.prospects.update', ['source' => $proyecto->source, 'id' => $proyecto->unique_id]) }}">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <!-- Código Proyecto -->
                    <div class="mb-3">
                        <label for="unique_id-{{ $proyecto->unique_id }}" class="form-label">Código Proyecto</label>
                        <input type="text" class="form-control" id="unique_id-{{ $proyecto->unique_id }}" name="codigo_proyecto" value="{{ $proyecto->unique_id }}" maxlength="20">
                    </div>
                    <!-- Cliente -->
                    <div class="mb-3">
                        <label for="cliente-{{ $proyecto->unique_id }}" class="form-label">Cliente</label>
                        <input type="text" class="form-control" id="cliente-{{ $proyecto->unique_id }}" name="cliente" value="{{ $proyecto->cliente }}" required>
                    </div>
                    <!-- Proyecto -->
                    <div class="mb-3">
                        <label for="proyecto-{{ $proyecto->unique_id }}" class="form-label">Proyecto</label>
                        <textarea class="form-control" id="proyecto-{{ $proyecto->unique_id }}" name="proyecto" rows="3">{{ $proyecto->proyecto }}</textarea>
                    </div>
                    <!-- Sector -->
                    <div class="mb-3">
                        <label for="sector-{{ $proyecto->unique_id }}" class="form-label">Sector</label>
                        <select class="form-select" id="sector-{{ $proyecto->unique_id }}" name="sector">
                            <option value="">Seleccionar</option>
                            <option value="Público" {{ $proyecto->sector === 'Público' ? 'selected' : '' }}>Público</option>
                            <option value="Privado" {{ $proyecto->sector === 'Privado' ? 'selected' : '' }}>Privado</option>
                        </select>
                    </div>
                    <!-- Tipo Licitación -->
                    <div class="mb-3">
                        <label for="tipo_licitacion-{{ $proyecto->unique_id }}" class="form-label">Tipo Licitación</label>
                        <select class="form-select" id="tipo_licitacion-{{ $proyecto->unique_id }}" name="tipo_licitacion">
                            <option value="">Seleccionar</option>
                            <option value="Concurso" {{ $proyecto->tipo_licitacion === 'Concurso' ? 'selected' : '' }}>Concurso</option>
                            <option value="Menor" {{ $proyecto->tipo_licitacion === 'Menor' ? 'selected' : '' }}>Menor</option>
                            <option value="Adjudicación Directa" {{ $proyecto->tipo_licitacion === 'Adjudicación Directa' ? 'selected' : '' }}>Adjudicación Directa</option>
                            <option value="Oferta Privado" {{ $proyecto->tipo_licitacion === 'Oferta Privado' ? 'selected' : '' }}>Oferta Privado</option>
                            <option value="Web" {{ $proyecto->tipo_licitacion === 'Web' ? 'selected' : '' }}>Web</option>
                            <option value="Basado Acuerdo Marco" {{ $proyecto->tipo_licitacion === 'Basado Acuerdo Marco' ? 'selected' : '' }}>Basado Acuerdo Marco</option>
                            <option value="Acuerdo Marco" {{ $proyecto->tipo_licitacion === 'Acuerdo Marco' ? 'selected' : '' }}>Acuerdo Marco</option>
                            <option value="Adjudicacion Marco" {{ $proyecto->tipo_licitacion === 'Adjudicacion Marco' ? 'selected' : '' }}>Adjudicación Marco</option>
                        </select>
                    </div>
                    <!-- Fecha Presentación -->
                    <div class="mb-3">
                        <label for="fecha_presentacion-{{ $proyecto->unique_id }}" class="form-label">Fecha Presentación</label>
                        <input type="date" class="form-control" id="fecha_presentacion-{{ $proyecto->unique_id }}" name="fecha_presentacion" value="{{ $proyecto->fecha_presentacion }}" required>
                    </div>
                    <!-- Fecha Fin Contrato -->
                    <div class="mb-3">
                        <label for="fecha_fin_contrato-{{ $proyecto->unique_id }}" class="form-label">Fecha Fin Contrato</label>
                        <input type="date" class="form-control" id="fecha_fin_contrato-{{ $proyecto->unique_id }}" name="fecha_fin_contrato" value="{{ $proyecto->fecha_fin_contrato }}">
                    </div>
                    <!-- Importe Licitación -->
                    <div class="mb-3">
                        <label for="importe_licitacion-{{ $proyecto->unique_id }}" class="form-label">Importe Licitación</label>
                        <input type="number" step="0.01" class="form-control" id="importe_licitacion-{{ $proyecto->unique_id }}" name="importe_licitacion" value="{{ $proyecto->importe_licitacion }}">
                    </div>
                    <!-- Importe Estimado -->
                    <div class="mb-3">
                        <label for="importe_estimado-{{ $proyecto->unique_id }}" class="form-label">Importe Estimado</label>
                        <input type="number" step="0.01" class="form-control" id="importe_estimado-{{ $proyecto->unique_id }}" name="importe_estimado" value="{{ $proyecto->importe_estimado }}">
                    </div>
                    <!-- Duración Meses -->
                    <div class="mb-3">
                        <label for="duracion_meses-{{ $proyecto->unique_id }}" class="form-label">Duración (Meses)</label>
                        <input type="number" class="form-control" id="duracion_meses-{{ $proyecto->unique_id }}" name="duracion_meses" value="{{ $proyecto->duracion_meses }}">
                    </div>
                    <!-- Temperatura -->
                    <div class="mb-3">
                        <label for="temperatura-{{ $proyecto->unique_id }}" class="form-label">Temperatura</label>
                        <select class="form-select" id="temperatura-{{ $proyecto->unique_id }}" name="temperatura">
                            <option value="">Seleccionar</option>
                            <option value="Caliente" {{ $proyecto->temperatura === 'Caliente' ? 'selected' : '' }}>Caliente</option>
                            <option value="Templado" {{ $proyecto->temperatura === 'Templado' ? 'selected' : '' }}>Templado</option>
                            <option value="Frio" {{ $proyecto->temperatura === 'Frio' ? 'selected' : '' }}>Frío</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@endforeach

<script>
    document.getElementById('addProspectForm').addEventListener('submit', function (e) {
        e.preventDefault(); // Evitar el envío tradicional del formulario

        const form = e.target;
        const formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: formData,
        })
        .then(response => {
            if (!response.ok) {
                throw response;
            }
            return response.json();
        })
        .then(data => {
            if(data.status !== 'success'){
                throw new Error('Error en la respuesta');
            }
            const prospect = data.prospect;
            const tableBody = document.querySelector('table tbody');
            const newRow = `
                <tr>
                    <td>${prospect.source}</td>
                    <td>${prospect.unique_id}</td>
                    <td>${prospect.cliente}</td>
                    <td>${prospect.proyecto}</td>
                    <td>${prospect.sector}</td>
                    <td>${prospect.fecha_presentacion}</td>
                    <td>${prospect.fecha_fin_contrato}</td>
                    <td>${prospect.importe_licitacion}</td>
                    <td>${prospect.importe_estimado}</td>
                    <td>${prospect.temperatura}</td>
                    <td>
                        <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editProspectModal-${prospect.unique_id}">Editar</button>
                        <form method="POST" action="/operations/comercial/prospects/destroy/${prospect.unique_id}" style="display:inline-block;" onsubmit="return confirm('¿Estás seguro de que deseas eliminar este prospecto?');">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="_method" value="DELETE">
                            <button type="submit" class="btn btn-sm btn-danger">Eliminar</button>
                        </form>
                    </td>
                </tr>
            `;
            tableBody.insertAdjacentHTML('afterbegin', newRow);

            // Cerrar el modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('addProspectModal'));
            modal.hide();

            // Limpiar el formulario
            form.reset();

            // Mostrar un mensaje de éxito (opcional)
            alert('Prospecto añadido correctamente.');
        })
        .catch(error => {
            error.json().then(err => {
                console.error('Error:', err);
                alert('Hubo un error al guardar el prospecto. Por favor, revisa los datos.');
            });
        });
    });

</script>
@endsection