@props([
    'lead' => null
])
<div>
    <x-general.cotizacion></x-general.cotizacion>
    <div class="card card-primary card-outline card-tabs">
        <div class="card-header p-0 pt-1 border-bottom-0">
            <ul class="nav nav-tabs" id="tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="tab-prospecto-tab" data-toggle="pill" href="#tab-prospecto" role="tab" aria-controls="tab-prospecto" aria-selected="true"><i class="fas fa-fw fa-user-tag"></i>Prospecto</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="tab-prospectosActivos-tab" data-toggle="pill" href="#tab-prospectosActivos" role="tab" aria-controls="tab-prospectosActivos" aria-selected="false"><i class="fas fa-fw fa-tasks"></i>Activos</a>
                </li>
            </ul>
        </div>
        <div class="card-body p-0 mt-3">
            <div class="tab-content" id="tabsContent">
                <div class="tab-pane fade active show" id="tab-prospecto" role="tabpanel" aria-labelledby="tab-prospecto-tab">
                    <x-forms.form action="{{ Route::currentRouteName() == 'leads.web.create' ? route('leads.web.store') : route('leads.web.update', $lead) }}" methodLaravel="{{ Route::currentRouteName() == 'leads.web.edit' ? 'PUT' : null }}" name="formularioProspectos">
                        <div class="card">
                            <div class="card-header card-secondary text-dark card-outline p-1 pl-3">
                                <div class="card-title p-0">
                                    <i class="fas fa-fw fa-user-tag"></i>
                                    Información General <span class="badge badge-dark" id="id_lead"></span>
                                </div>
                                <input type="hidden" name="id_prospecto" value="{{ $lead->id ?? '' }}">
                            </div>
                            <div class="card-body">
                                <div class="row justify-content-between">
                                    <h5 class="col">
                                        <strong>Datos Básicos</strong>
                                    </h5>
                                    <div class="col">
                                        <div id="rowGestion" class="row justify-content-end">
                                            @if (Route::currentRouteName() == 'leads.web.create')
                                                <button type="submit" class="btn btn-sm btn-success mr-1">
                                                    <i class="fas fa-fw fa-plus"></i> Crear Lead
                                                </button>
                                            @else
                                                <button class="btn btn-sm btn-primary mr-1" type="button" onclick="$('#modalCotizacion').modal('show')">
                                                    <i class="fas fa-fw fa-plus"></i> Crear Cotización
                                                </button>
                                                {{-- <button type="button" class="btn btn-sm btn-success mr-1">
                                                    <i class="fas fa-fw fa-plus"></i> Crear Prospecto
                                                </button> --}}
                                                <button type="submit" class="btn btn-sm btn-info">
                                                    <i class="fas fa-fw fa-user-edit"></i> Actualizar
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <x-forms.select-group classes="col" type="text" name="tipoDocumento" label="Tipo Documento" />
                                    <x-forms.input-group classes="col" classesInput="text-uppercase" name="cedulaNit" type="text" placeholder="Cédula/Nit" value="{{ $lead->cedulaNit ?? '' }}" />
                                    <x-forms.input-group classes="col" classesInput="text-uppercase" name="nombres" type="text" placeholder="Nombres" value="{{ $lead->nombres ?? '' }}" />
                                    <x-forms.input-group classes="col" classesInput="text-uppercase" name="apellidos" type="text" placeholder="Apellidos" value="{{ $lead->apellidos ?? '' }}" />
                                    <x-forms.select-group classes="col-sm-2" type="text" name="codCiudadProspecto" label="Ciudad" />
                                    {{-- <x-forms.input-icon classes="col-sm-2" classesInput="dateControl" name="fechaEstimada" type="text" label="Fecha Estimado" maskDate="true" /> --}}
                                </div>
                
                                <div class="row">
                                    <x-forms.input-group classes="col" classesInput="text-uppercase" name="email" type="text" placeholder="email" value="{{ $lead->email ?? '' }}" autocomplete="true" />
                                    <x-forms.input-group classes="col" classesInput="text-uppercase" name="telefono" type="text" label="Teléfono" placeholder="telefono" value="{{ $lead->telefono ?? '' }}" autocomplete="true" />
                                    <x-forms.input-group classes="col" classesInput="text-uppercase" name="celular" type="text" placeholder="celular" value="{{ $lead->celular ?? '' }}" autocomplete="true" />
                                    <x-forms.select-group classes="col" type="text" name="genero" label="Género">
                                        <option value=""></option>
                                        <option value="F">Femenino</option>
                                        <option value="M">Masculino</option>
                                        <option value="N/A">N/A</option>
                                    </x-forms.select-group>
                                </div>
                
                                <div class="row">
                                    <x-forms.select-group classes="col" type="text" name="id_estado" label="Estado" />
                                    <div class="col form-group">
                                        <label for="vehiculo_interes">Vehículos de Ínteres</label>
                                        <select class="form-control form-control-sm" name="vehiculo_interes">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                    <div class="col form-group">
                                        <label for="vehiculo_opcional">Vehículo Opcional</label>
                                        <select class="form-control form-control-sm" name="vehiculo_opcional">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                    {{-- <div class="col form-group">
                                        <label for="contacto">Contactos</label>
                                        <select class="form-control form-control-sm" name="contacto">
                                            <option value=""></option>
                                        </select>
                                    </div> --}}
                                </div>

                                <div class="row">
                                    {{-- <x-forms.select-group classes="col-2" type="text" name="id_estado" label="Estado" /> --}}
                                    <x-forms.input-group classes="col" classesInput="text-uppercase" name="cedulaNitOpcional" type="text" label="Cédula Opcional" placeholder="Cédula Opcional" value="{{ $lead->cedulaNitOpcional ?? '' }}" />
                                    <x-forms.input-group classes="col" classesInput="text-uppercase" name="nombresOpcional" type="text" label="Nombres Opcional" placeholder="Nombres" value="{{ $lead->nombres_opcional ?? '' }}" />
                                    {{-- <x-forms.input-group classes="col" classesInput="text-uppercase" name="apellidosOpcional" type="text" label="Apellidos Opcional" placeholder="Apellidos" /> --}}
                                    @if(Route::currentRouteName() == 'leads.web.edit')
                                        <div class="col-4 form-group align-self-end" id="prospectosGestion">
                                            <div class="row justify-content-end">
                                                <button onclick="addContacto()" type="button" class="col mr-1 align-self-end btn btn-sm btn-success">
                                                    <i class="fas fa-fw fa-plus"></i> Contacto
                                                </button>
                                                <button onclick="addNota()" type="button" class="col mr-1 align-self-end btn btn-sm btn-success">
                                                    <i class="fas fa-fw fa-plus"></i> Nota
                                                </button>
                                                <button type="button" class="col mr-1 align-self-end btn btn-sm btn-primary" type="button" onclick="$('#modalSeguimientoProspectos').modal('show'); viewNotas();">
                                                    <i class="fas fa-fw fa-book"></i> Notas
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header card-secondary text-dark card-outline p-1 pl-3">
                                <div class="card-title p-0">
                                    <i class="fas fa-fw fa-car-side"></i>
                                    Trámite
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <x-forms.select-group classes="col" type="text" name="id_fuente" label="Fuente" />
                                    <x-forms.select-group classes="col d-none" type="text" name="id_subFuente" label="Subfuente" />
                                    <x-forms.select-group classes="col" type="text" name="id_medio_comunicacion" label="Medio Comunicación" />
                                    <x-forms.select-group classes="col" type="text" name="tipoTramite" label="Tipo de Trámite" />
                                </div>
                                <div class="row">
                                    <x-forms.input-group classes="col" classesInput="text-uppercase" name="id_siebel" type="text" label="Oportunidad Siebel" value="{{ $lead->id_siebel ?? '' }}" />
                                    <x-forms.select-group classes="col" name="id_tipo_lead" label="Tipo Prospecto" />
                                    @if (Auth::user()->hasRole('Agente'))
                                        <x-forms.select-group classes="col" name="codAsesor" label="Asesor" />
                                    @endif
                                    <x-forms.select-group classes="col" name="id_anuncio" label="Anuncio" />
                                </div>
                            </div>
                        </div>
                        {{-- <div class="card">
                            <div class="card-header card-secondary text-dark card-outline p-1 pl-3">
                                <div class="card-title p-0">
                                    <i class="fas fa-fw fa-file-alt"></i>
                                    Negocio
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row align-items-end">
                                    <x-forms.select-group classes="col-2" name="agente" />
                                    <x-forms.input-group classes="col-sm-2" classesInput="text-uppercase" name="prefijo" type="text" />
                                    <x-forms.input-group classes="col-sm-2" classesInput="text-uppercase" name="numFactura" type="text" />
                                </div>
                            </div>
                        </div> --}}
                    </x-forms.form>
                </div>
                <div class="tab-pane fade" id="tab-prospectosActivos" role="tabpanel" aria-labelledby="tab-prospectosActivos-tab">
                    <div class="container-fluid">
                        <div class="table-responsive">
                            <table id="tableProspectos" class="table table-bordered table-hover table-sm compact nowrap" width="100%">
                                <thead>
                                    <tr>
                                        <th>IdLead</th>
                                        <th class="align-middle text-center"></th>
                                        <th>Cédula/Nit</th>
                                        <th>Prospecto</th>
                                        <th>Celular</th>
                                        <th>Teléfono</th>
                                        <th>Email</th>
                                        <th>Ciudad</th>
                                        <th></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalSeguimientoProspectos" data-backdrop="static" data-keyboard="false"  aria-labelledby="staticModalSeguimientoProspectos" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title" id="staticModalSeguimientoProspectos">
                        <i class="fas fa-fw fa-tag"></i>
                        <b>Seguimiento</b>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-12 p-0 table-responsive">
                        <table id="tableSeguimientoProspectos" class="table table-sm table-hover compact responsive no-wrap" width="100%">
                            <thead>
                                <tr>
                                    <th>Tipo</th>
                                    <th>Fecha</th>
                                    <th>Responsable</th>
                                    <th>Motivo</th>
                                    <th>Nota</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        const lead_php = @json($lead);
        const message_route = @json(session('message'));
        console.log(lead_php)
        if(message_route) {
            Swal.fire({
                title: 'Ok!',
                text: message_route,
                icon: 'success'
            })
        }
    </script>
    <script src="{!! asset('js/comercial/prospectacion/leads.js') !!}"></script>
@endpush