@extends('layout')

@section('starplugin')
        <!-- BEGIN PAGE LEVEL PLUGINS -->
        
        <!-- END PAGE LEVEL PLUGINS -->
@endsection

@section('content')

<!-- ---------------------------------------------------------- -->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/select2.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/datepicker.css') }}"/>

{{-- <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/> --}}
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
        <div class="page-content">
            <!-- BEGIN PAGE HEADER-->
            <!-- BEGIN PAGE BAR -->
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="#">Inicio</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span>Puntos de cobro</span>
                    </li>
                </ul>
            </div>
            <!-- END PAGE BAR -->
            <!-- BEGIN PAGE TITLE-->
           {{--  <h1 class="page-title"> Puntos De Venta
                <small>Lista de todas los puntos de venta</small>
            </h1>   --}}         
             <!-- BEGIN PAGE CONTENT-->
			<div class="row">
				<div class="col-md-12">
					<div {{-- class="note note-danger" --}} id="alerts">
						{{-- <p>
							 NOTE: The below datatable is not connected to a real database so the filter and sorting is just simulated for demo purposes only.
						</p> --}}
					</div>
					<!-- Begin: life time stats -->
					<div class="portlet">
						<div class="portlet-title">
							<div class="caption" style="font-size: 22px;">
                                <i class="fas fa-clipboard-list"></i>Lista de todos los puntos de cobro
							</div>
							<div class="actions">
								<a class="btn default yellow-stripe" data-toggle="modal" href="#modalPvAdd">
								<i class="fa fa-plus"></i>
								<span class="hidden-480">
								Agregar </span>
								</a>
								<div class="btn-group">
									<a class="btn default yellow-stripe" href="#" data-toggle="dropdown">
									<i class="fa fa-share"></i>
									<span class="hidden-480">
									Exportar </span>
									<i class="fa fa-angle-down"></i>
									</a>
									<ul class="dropdown-menu pull-right">
										<li>
											<a href="#">
											Export to Excel </a>
										</li>
										<li>
											<a href="#">
											Export to CSV </a>
										</li>
										{{-- <li>
											<a href="#">
											Export to XML </a>
										</li>
										<li class="divider">
										</li>
										<li>
											<a href="#">
											Print Invoices </a>
										</li> --}}
									</ul>
								</div>
							</div>
						</div>
						<div class="portlet-body">
							<div class="table-container">
								{{-- <div class="table-actions-wrapper">
									<span>
									</span>
									<select class="table-group-action-input form-control input-inline input-small input-sm">
										<option value="">Select...</option>
										<option value="Cancel">Cancel</option>
										<option value="Cancel">Hold</option>
										<option value="Cancel">On Hold</option>
										<option value="Close">Close</option>
									</select>
									<button class="btn btn-sm yellow table-group-action-submit"><i class="fa fa-check"></i> Submit</button>
								</div> --}}
								<table class="table table-striped table-bordered table-hover" id="datatable_ajax">
								<thead>
								<tr role="row" class="heading">
									{{-- <th width="2%">
										<input type="checkbox" class="group-checkable">
									</th> --}}
									<th width="25%">
										 Nombre
									</th>
									<th width="20%">
										 Ubicacion
									</th>
									<th width="10%">
										 Link
									</th>
									{{-- <th width="15%">
										 Total
									</th> --}}
									<th width="20%">
										 Acciones
									</th>
								</tr>
								<tr role="row" class="filter">								
									<td>
										<input type="text" class="form-control form-filter input-sm" name="nombre" id="nombre" placeholder="Nombre">
									</td>
									{{-- <td>
										<div class="input-group date date-picker margin-bottom-5" data-date-format="dd/mm/yyyy">
											<input type="text" class="form-control form-filter input-sm" readonly name="order_date_from" placeholder="From">
											<span class="input-group-btn">
											<button class="btn btn-sm default" type="button"><i class="fa fa-calendar"></i></button>
											</span>
										</div>
										<div class="input-group date date-picker" data-date-format="dd/mm/yyyy">
											<input type="text" class="form-control form-filter input-sm" readonly name="order_date_to" placeholder="To">
											<span class="input-group-btn">
											<button class="btn btn-sm default" type="button"><i class="fa fa-calendar"></i></button>
											</span>
										</div>
									</td> --}}
									<td>
										<input type="text" class="form-control form-filter input-sm" name="ubicacion" id="ubicacion" placeholder="Ubicacion">
									</td>
									<td>
										{{-- <input type="text" class="form-control form-filter input-sm" name="link" placeholder="Link"> --}}
									</td>
                                    {{-- <td>
										Total
									</td> --}}
									{{-- <td>
										<div class="margin-bottom-5">
											<input type="text" class="form-control form-filter input-sm" name="order_price_from" placeholder="From"/>
										</div>
										<input type="text" class="form-control form-filter input-sm" name="order_price_to" placeholder="To"/>
									</td> --}}
									{{-- <td>
										<div class="margin-bottom-5">
											<input type="text" class="form-control form-filter input-sm margin-bottom-5 clearfix" name="order_quantity_from" placeholder="From"/>
										</div>
										<input type="text" class="form-control form-filter input-sm" name="order_quantity_to" placeholder="To"/>
									</td> --}}
									{{-- <td>
										<select name="order_status" class="form-control form-filter input-sm">
											<option value="">Select...</option>
											<option value="pending">Pending</option>
											<option value="closed">Closed</option>
											<option value="hold">On Hold</option>
											<option value="fraud">Fraud</option>
										</select>
									</td> --}}
									<td>
										{{-- <div class="margin-bottom-5">
											<button class="btn btn-sm yellow filter-submit margin-bottom"><i class="fa fa-search"></i> Buscar</button>
										</div> --}}
                                        <button class="btn btn-sm yellow filter-submit margin-bottom" id="btn_filtro_buscar"><i class="fa fa-search"></i> Buscar</button>
										<button class="btn btn-sm red filter-cancel"><i class="fa fa-times"></i> Limpiar</button>
									</td>
								</tr>
								</thead>
								<tbody>
								</tbody>
								</table>
							</div>
						</div>
					</div>
					<!-- End: life time stats -->
				</div>
			</div>
			<!-- END PAGE CONTENT-->
        </div>
        <!-- END CONTENT BODY -->
    </div>
    <div id="url_ajax" data-mi-variable="{{ config('constants.API_AJAX') }}"></div>
<!-- END CONTENT -->   
<div class="modal fade" id="modalPvVer" tabindex="-1" role="basic" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
						<h4 class="modal-title">Editar Comercio</h4>
						{{-- <div><span id="transf_ver_comentario" style="font-weight: bold;"></span><div> --}}
					</div>
					<form class="form-horizontal" role="form" id="edit" name="edit" autocomplete="off">
						<div class="modal-body">
							<div class="form-body">																
								<div class="form-group">
									<label class="col-md-3 control-label">Nombre</label>
									<div class="col-md-9">
										<input type="text" class="form-control" placeholder="" name="nombre" id="nombre_ver">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">Ubicación</label>
									<div class="col-md-9">
										<input type="text" class="form-control" placeholder="" name="ubicacion" id="ubicacion_ver">
									</div>
								</div>
								<div class="form-group" style="display: block;">
									<label class="col-md-3 control-label">Observación</label>
									<div class="col-md-9">
										<input type="text" class="form-control" placeholder="" name="observacion" id="observacion_ver">
									</div>
								</div>
								<div class="form-group" style="display: block;">
									<label class="col-md-3 control-label">Telefono</label>
									<div class="col-md-9">
										<input type="text" class="form-control" placeholder="" name="tel" id="tel_ver">
									</div>
								</div>
								<div class="form-group" style="display: block;">
									<label class="col-md-3 control-label">Correo</label>
									<div class="col-md-9">
										<input type="text" class="form-control" placeholder="" name="email" id="email_ver">
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<input type="hidden" class="form-control" value=""  id="id_ver" name="id">
							<button type="button" class="btn dark btn-outline" data-dismiss="modal">Cerrar</button>
							<button type="submit" id="btn_comercio_edit"  class="btn green">Guardar cambios</button>
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<div class="modal fade" id="modalPvAdd" tabindex="-1" role="basic" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
						<h4 class="modal-title">Agregar Comercio</h4>
						{{-- <div><span id="transf_ver_comentario" style="font-weight: bold;"></span><div> --}}
					</div>
					<form class="form-horizontal" role="form" id="add" name="add" autocomplete="off">
						<div class="modal-body">
							<div class="form-body">																
								<div class="form-group">
									<label class="col-md-3 control-label">Nombre</label>
									<div class="col-md-9">
										<input type="text" class="form-control" placeholder="" name="nombre" id="nombre_add">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">Ubicación</label>
									<div class="col-md-9">
										<input type="text" class="form-control" placeholder="" name="ubicacion" id="ubicacion_add">
									</div>
								</div>
								<div class="form-group" style="display: block;">
									<label class="col-md-3 control-label">Observación</label>
									<div class="col-md-9">
										<input type="text" class="form-control" placeholder="" name="observacion" id="observacion_add">
									</div>
								</div>
								<div class="form-group" style="display: block;">
									<label class="col-md-3 control-label">Telefono</label>
									<div class="col-md-9">
										<input type="text" class="form-control" placeholder="" name="tel" id="tel_add">
									</div>
								</div>
								<div class="form-group" style="display: block;">
									<label class="col-md-3 control-label">Correo</label>
									<div class="col-md-9">
										<input type="text" class="form-control" placeholder="" name="email" id="email_add">
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="reset" class="btn dark btn-outline" data-dismiss="modal">Cerrar</button>
							<button type="submit" id="btn_pv_add"  class="btn green">Guardar cambios</button>
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>    
@endsection

@section('endplugin')       
        <!-- BEGIN PAGE LEVEL SCRIPTS -->
        {{-- <script src="{{ asset('assets/global/scripts/datatable_pv.js') }}"></script>
        <script src="{{ asset('assets/global/scripts/components-pickers.js') }}"></script>
        <script src="{{ asset('assets/global/scripts/pv_lista.js') }}"></script> --}}
        <!-- END PAGE LEVEL SCRIPTS -->

        <!-- BEGIN CORE PLUGINS -->
       
        {{-- <script src="{{ asset('assets/global/plugins/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('assets/global/plugins/jquery.blockui.min.js') }}" type="text/javascript"></script> --}}
        <!-- END CORE PLUGINS -->

        <!-- BEGIN PAGE LEVEL PLUGINS -->      
         <script type="text/javascript" src="{{ asset('assets/global/plugins/select2/select2.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>
        <!-- END PAGE LEVEL PLUGINS -->

        <!-- BEGIN THEME GLOBAL SCRIPTS -->
        <script src="{{ asset('assets/global/scripts/datatable.js') }}"></script>
        <script id="carga_datatable" src="{{ asset('assets/admin/pages/scripts/pv-table-ajax.js?a=b') }}"></script>
        <!-- END THEME GLOBAL SCRIPTS -->


		<script>
            $(document).ready(function(){
                TableAjax.init();

				$('#edit').submit(function(e) {
					// Evitar que se envíe el formulario de forma tradicional
					e.preventDefault();

					// Obtener los datos del formulario
					var formData = $(this).serialize();

					// Enviar los datos mediante AJAX
					$.ajax({
						type: 'POST',
						url: '{{ config('constants.API_AJAX') }}/api/pv/update', // Cambia esto por la URL del script en tu servidor
						data: formData,
						success: function(response) {
							// Manejar la respuesta del servidor
							//console.log(response);
							if(response.message=="ok"){
								Metronic.alert({
									type: 'success',
									icon: 'success',
									message: 'Los cambios fueron realizados correctamente en '+response.puntodeventa.nombre+'.',
									closeInSeconds: 10, // auto close after defined seconds
									container: $("#alerts"),
									place: 'prepend'
								});
								$("#btn_filtro_buscar").trigger('click');
							}else{
								Metronic.alert({
									type: 'warning',
									icon: 'warning',
									message: 'No se pudieron realizar los cambios.',
									closeInSeconds: 10, // auto close after defined seconds
									container: $("#alerts"),
									place: 'prepend'
								});
								$("#btn_filtro_buscar").trigger('click');
							}
							$('#modalPvVer').modal('hide');
						},
						error: function(xhr, status, error) {
							// Manejar errores
							console.error(error);
						}
					});
				});
				$('#add').submit(function(e) {
					// Evitar que se envíe el formulario de forma tradicional
					e.preventDefault();

					// Obtener los datos del formulario
					var formData = $(this).serialize();

					// Enviar los datos mediante AJAX
					$.ajax({
						type: 'POST',
						url: '{{ config('constants.API_AJAX') }}/api/pv/add', // Cambia esto por la URL del script en tu servidor
						data: formData,
						success: function(response) {
							// Manejar la respuesta del servidor
							//console.log(response);
							if(response.message=="ok"){
								Metronic.alert({
									type: 'success',
									icon: 'success',
									message: 'Se agrego correctamente el hotel '+response.puntodeventa.nombre+'.',
									closeInSeconds: 10, // auto close after defined seconds
									container: $("#alerts"),
									place: 'prepend'
								});
								$('#datatable_ajax').DataTable().ajax.reload();
								$('#add')[0].reset();
							}else{
								Metronic.alert({
									type: 'warning',
									icon: 'warning',
									message: 'No fue posible agregar el hotel.',
									closeInSeconds: 10, // auto close after defined seconds
									container: $("#alerts"),
									place: 'prepend'
								});
								$('#datatable_ajax').DataTable().ajax.reload();
								$('#add')[0].reset();
							}
							$('#modalPvAdd').modal('hide');
						},
						error: function(xhr, status, error) {
							// Manejar errores
							console.error(error);
						}
					});
				});
            });
            var URL_AJAX = '{{ config('constants.API_AJAX') }}';
			function alta(id){              
				$.ajax({
					type: 'POST',
					url: '{{ config('constants.API_AJAX') }}/api/pv/update', // Cambia esto por la URL del script en tu servidor
					data: {'id': id,'estado':1},
					success: function(response) {
						if(response.message=="ok"){
							Metronic.alert({
								type: 'success',
								icon: 'success',
								message: 'Se dio de alta el hotel '+response.puntodeventa.nombre,
								closeInSeconds: 10, // auto close after defined seconds
								container: $("#alerts"),
								place: 'prepend'
							});
							$("#btn_filtro_buscar").trigger('click');
						}else{
							Metronic.alert({
								type: 'warning',
								icon: 'warning',
								message: 'No se pudo dar de alta el hotel.',
								closeInSeconds: 10, // auto close after defined seconds
								container: $("#alerts"),
								place: 'prepend'
							});
							$("#btn_filtro_buscar").trigger('click');
						}
					},
					error: function(xhr, status, error) {
						// Manejar errores
						console.error(error);
					}
				});
            };
			function baja(id){              
				$.ajax({
					type: 'POST',
					url: '{{ config('constants.API_AJAX') }}/api/pv/update', // Cambia esto por la URL del script en tu servidor
					data: {'id': id,'estado':0},
					success: function(response) {
						if(response.message=="ok"){
							Metronic.alert({
								type: 'success',
								icon: 'success',
								message: 'Se dio de baja el hotel '+response.puntodeventa.nombre,
								closeInSeconds: 10, // auto close after defined seconds
								container: $("#alerts"),
								place: 'prepend'
							});
							$("#btn_filtro_buscar").trigger('click');
						}else{
							Metronic.alert({
								type: 'warning',
								icon: 'warning',
								message: 'No se pudo dar de baja el hotel.',
								closeInSeconds: 10, // auto close after defined seconds
								container: $("#alerts"),
								place: 'prepend'
							});
							$("#btn_filtro_buscar").trigger('click');
						}
					},
					error: function(xhr, status, error) {
						// Manejar errores
						console.error(error);
					}
				});
            };

			function editar(data){                
                $("#nombre_ver").val(data.nombre);
				$("#id_ver").val(data.id);
                $("#ubicacion_ver").val(data.ubicacion);
                $("#observacion_ver").val(data.observacion);
				$("#tel_ver").val(data.tel);
                $("#email_ver").val(data.email);
                               
                //Se abre el modal con los datos del transfer
                $('#modalPvVer').modal('show');
            };
        </script>
@endsection