@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 venta</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-file"></i>
								<span class="hidden-480">
									Exportar </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>
									</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="20%">
										 Observacion
									</th>
									<th width="5%">
										 Link
									</th>
									<th width="10%">
										 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>
										<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></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>
					<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>
						</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>
					<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>
						</div>
						<div class="modal-footer">
							<button type="button" 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 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/pc-ctacte-list.js?a=b') }}"></script>
        <!-- END THEME GLOBAL SCRIPTS -->


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

				$('#cobro').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/cobrar', // 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: 'El cobro se registro correctamente.',
									closeInSeconds: 10, // auto close after defined seconds
									container: $("#alerts"),
									place: 'prepend'
								});
							}else{
								Metronic.alert({
									type: 'warning',
									icon: 'warning',
									message: 'No se pudo registrar el cobro.',
									closeInSeconds: 10, // auto close after defined seconds
									container: $("#alerts"),
									place: 'prepend'
								});
							}
						},
						error: function(xhr, status, error) {
							// Manejar errores
							console.error(error);
						}
					});
				});				
            });
			
        </script>
@endsection