@extends('layouts.app')
@section('css')
	<!-- Data Table CSS -->
	<link href="{{URL::asset('plugins/datatable/datatables.min.css')}}" rel="stylesheet" />
	<!-- Sweet Alert CSS -->
	<link href="{{URL::asset('plugins/sweetalert/sweetalert2.min.css')}}" rel="stylesheet" />
@endsection
@section('page-header')
<!-- PAGE HEADER -->
<div class="page-header mt-5-7 justify-content-center">
	<div class="page-leftheader text-center">
		<h4 class="page-title mb-0">{{ __('Nuevo Número') }}</h4>
		<ol class="breadcrumb mb-2">
			<li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}"><i class="fa-solid fa-microchip-ai mr-2 fs-12"></i>{{ __('User') }}</a></li>
			<li class="breadcrumb-item" aria-current="page"><a href="{{ route('user.whatsapp') }}"> {{ __('Whatsapp IA') }}</a></li>
			<li class="breadcrumb-item active" aria-current="page"><a href="#"> {{ __('Nuevo Número') }}</a></li>
		</ol>
	</div>
</div>
<!-- END PAGE HEADER -->
@endsection
@section('content')	
	<div class="row justify-content-center">
		<div class="col-lg-9 col-md-12 col-sm-12">
			<div class="card border-0">	
				<div class="card-header">
					<h3 class="card-title"><i class="fa-solid fa-microchip-ai mr-2 text-primary"></i>{{ __('Nuevo Numero Whatsapp') }}</h3>
					<a href="{{ route('user.whatsapp') }}" class="btn btn-cancel ripple" style="margin-left: auto">{{ __('Volver atrás') }}</a>
				</div>			
				<div class="card-body pt-5 pb-0 pl-6 pr-6">
					<!--<form class="w-100" action="{{ route('user.chat.custom.store') }}" method="POST" enctype="multipart/form-data">-->
						@csrf  
						<div class="row">
							<div class="col-md-6 col-sm-12">													
							  	<div class="input-box">								
									<h6 class="fs-12">{{ __('Nombre') }} <span class="text-required"><i class="fa-solid fa-asterisk"></i></span></h6>
									<div class="form-group">							    
										<input type="text" class="form-control @error('name') is-danger @enderror" id="name" name="name" value="{{ old('name') }}" required>
										@error('name')
											<p class="text-danger">{{ $errors->first('name') }}</p>
										@enderror
									</div> 
							  	</div> 
							</div>

							<div class="col-md-6 col-sm-12">													
								<div class="input-box">								
								  <h6 class="fs-12">{{ __('Numero') }} <span class="text-required"><i class="fa-solid fa-asterisk"></i></span></h6>
								  <div class="form-group">							    
									  <input type="text" class="form-control @error('number') is-danger @enderror" id="number" name="number" value="{{ old('number') }}" placeholder="{{ __('Numero de telefono') }}">
									  @error('number')
										  <p class="text-danger">{{ $errors->first('number') }}</p>
									  @enderror
								  </div> 
								</div> 
						  	</div>
						  

						</div>
						<div class="modal-footer d-inline">
							<div class="row text-center">
							  	<div class="col-md-12">
									<button onclick="addNumber()" class="btn btn-primary ripple pl-6 pr-6">{{ __('Conectar Número') }}</button>
							  	</div>
							</div>
						</div>
					<!--</form>-->
				</div>
			</div>
		</div>
	</div>
@endsection

@section('js')
	<script src="{{URL::asset('plugins/sweetalert/sweetalert2.all.min.js')}}"></script>
	<script src="{{theme_url('js/avatar.js')}}"></script>

	<script>
		// Usa la variable de entorno WHATSAPP_HOSTS (ajústala según tu entorno de compilación)
		const WHATSAPP_HOSTS = "{{ env('WHATSAPP_HOSTS') }}";
		// Función para agregar un número
		async function addNumber() {
			try {
				const newNumber = document.getElementById('number').value;
				const newName = document.getElementById('name').value;
				const token = document.querySelector('input[name="_token"]').value;

				const response = await fetch(`${WHATSAPP_HOSTS}/api/user/add-number`, {
				method: "POST",
				headers: {
					"Content-Type": "application/json",
					Authorization: `Bearer ${token}`,
				},
				body: JSON.stringify({
					number: newNumber,
					name: newName,
				}),
				});

				const responseData = await response.json();

				if (!response.ok) {
				console.error("❌ Error al agregar número:", responseData);
				alert(`⚠️ Error: ${responseData.message}`);
				return null;
				}

				const { numberId } = responseData;
				return numberId;

			} catch (error) {
				console.error("🚨 Error en la petición:", error);
				alert("Error de conexión con el servidor.");
				return null;
			}
		}
	</script>
@endsection