@extends('layouts.baseprolist')

@section('content')

@include('cliente._top')

<div class="main-card mb-3 card">

	<div class="card-header">
		<h5 class="mr-3">Clientes</h5>

		


	</div>

	<div class="card-body">

	<div id="accordion" class="accordion-wrapper mb-3 myaccordion">

			@php 

			$is_collapsed = Request::path() =='filtrarClientes';
			if($is_collapsed){
				$nombre = old('nombre','');
				$dni_cuit = old('dni_cuit','');
				$id_provincia_array = old('id_provincia',[]);
				$id_tipo_cliente = old('id_tipo_cliente','');

				$is_collapsed = (!empty($nombre) or !empty($dni_cuit) or !empty($id_provincia_array) or !empty($id_tipo_cliente));

			}

			@endphp
			<div class="card">
				
				<div id="heading1" class="card-header card-header-assurant card-header-tab" style="cursor: pointer;">
					<div style="width: 100%;font-size: 1.05rem !important;" class="myresponsive-text {{$is_collapsed ? '' : 'collapsed'}} myaccordion-button simil-card-header card-header-title card-header-assurant font-size-lg text-capitalize text-capitalize-assurant font-weight-normal " data-toggle="collapse" data-target="#collapse11" aria-expanded="{{$is_collapsed ? 'true' : 'false'}}" aria-controls="collapse1">
						<i class="header-icon  pe-7s-filter text-muted opacity-6" style="font-size: 1.2rem !important;"> </i>
						Filtros
					</div>

				</div>
				<div data-parent="#accordion" id="collapse11" aria-labelledby="heading1" class="{{$is_collapsed ? '' : 'collapse'}} " style="">
					<div class="card-body  pl-5 pb-5">
						<form action="/filtrarClientes" method="POST" id="frmFiltrarCliente">
							{{ csrf_field() }}
							<input type="hidden" name="column_order" id="column_order" value="{{ ((null !== old('column_order') && Request::path() =='filtrarClientes' )?old('column_order'):null) }}">
                			<input type="hidden" name="sort_direction" id="sort_direction" value="{{ ((null !== old('sort_direction') && Request::path() =='filtrarClientes' )?old('sort_direction'):null) }}">
							<div class="form-row mt-3">
								<div class="col-lg-4">
									<div class="form-group">
										<label class="mylabel">Nombre </label>
										<input type="text" name="nombre" id="nombre" class="form-control" placeholder="Ingrese el nombre" value="{{ ((null !== old('nombre') && Request::path() =='filtrarClientes' )?old('nombre'):null) }}" autocomplete="off">
									</div>
								</div>
								<div class="col-lg-4">
									<div class="form-group">
										<label class="mylabel">DNI/CUIT </label>
										<input type="text" name="dni_cuit" id="dni_cuit" class="form-control" placeholder="Ingrese el DNI/CUIT" value="{{ ((null !== old('dni_cuit') && Request::path() =='filtrarClientes' )?old('dni_cuit'):null) }}" autocomplete="off">
									</div>
								</div>
						
								<div class="col-md-4">
									<label class="mylabel">Provincia</label>
									<select name="id_provincia[]" id="id_provincia" class="form-control mymultiselect-dropdown" multiple>
										<option></option>
										@php 
										$id_provincia_array = old('id_provincia',[]);
										@endphp
										@foreach ($provincias as $id => $provincia)
										<option value="{{ $id }}"  {{ (isset($id_provincia_array) && in_array($id,$id_provincia_array) ) ? 'selected' : '' }}>{{ $provincia }}</option>
										@endforeach
									</select>
								</div>

						
								<div class="col-md-4">
									<label class="mylabel">Tipo de cliente</label>
									<select name="id_tipo_cliente" id="id_tipo_cliente" class="form-control {{(old('id_tipo_cliente','') == '' ? 'myplaceholder' : '')}} ">
										<option selected="selected" value="">Seleccione un tipo de cliente</option>
										@php 
										$id_tipo_cliente = old('id_tipo_cliente','');
										@endphp

										@foreach ($tiposClientes as $id => $tipoCliente)
										<option style="color:#495057;" value="{{ $id }}"  {{ ($id_tipo_cliente == $id) ? 'selected' : ''  }}>{{ $tipoCliente }}</option>
										@endforeach
									</select>
								</div>
								

							</div>


							<div class="row justify-content-end mt-4">
								<div class="col-md-2">
									<button type="submit" class="btn btn-primary btn-block pull-right mt-1 clickoverlay">Filtrar</button>
								</div>

								<div class="col-md-2">
									<a id="exportCSV" type="button" data-linkcsv="/exports/listado_clientes_{{Auth::user()->id}}.csv" href="#" class="btn btn-primary btn-block pull-right mt-1">Exportar</a>

								</div>


								<div class="col-md-2">
									<a href="/clientes" class="btn btn-danger btn-block pull-right mt-1 clickoverlay">Limpiar</a>
								</div>
							</div>

						</form>
					</div>
				</div>
			</div>
		</div>

		
		<div class="loader-wrapper justify-content-center align-items-center" id="waitTriagge" style="margin-left: 50%; min-height:500px;">
							<div class="loader" style="margin-top: 75%;">
								<div class="ball-scale-multiple">
									<div ></div>
									<div ></div>
									<div ></div>
									<div ></div>
									
								</div>
							</div>
        </div>

		<div class="allTable" style="display: none;">
		<table style="width: 100%;" id="exampleClientes" class="table table-hover table-striped table-bordered ">
			<thead>
				<tr class="myth">
					<th data-ordername="clientes.id">#</th>
					<th data-ordername="clientes.nombre">Nombre</th>
					<th data-ordername="clientes.dni_cuit">DNI/CUIT</th>
					<th data-ordername="clientes.email">Email</th>
					<th data-ordername="clientes.telefono_celular">Tel</th>
					<th data-ordername="provincia_name">Provincia</th>
					<th data-ordername="clientes.localidad">Localidad</th>
					<th>Tipo</th>
					<th>-</th>
				</tr>
			</thead>
			<tbody class="small">
				@foreach($clientes as $cliente)
				<tr>
					<td>{{$cliente->id}}</td>
					<td>{{$cliente->nombre}}</td>
					<td>{{$cliente->dni_cuit}}</td>

					<td>{{$cliente->email}}</td>
					<td>{{$cliente->telefono_celular}}</td>

					<td>
						@if($cliente->provincia)
						{{$cliente->provincia->nombre}}
						@endif
					</td>
					<td>
						{{$cliente->localidad}}
					</td>
					<td>
						@if($cliente->tipo_cliente)
						{{$cliente->tipo_cliente->nombre}}
						@endif
					</td>
					<td align="center">
			
						<div class="btn-group dropdown">

                            <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-icon btn-icon-only btn btn-link">
                                <i class="pe-7s-menu btn-icon-wrapper"></i>
                            </button>

                            <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-right rm-pointers dropdown-menu-shadow dropdown-menu-hover-link dropdown-menu">
									<a class="clickoverlay" href="{{ route('cliente.show',$cliente->id) }}">
										<button type="button" tabindex="0" class="dropdown-item">
											<i class="dropdown-icon pe-7s-id"> </i><span>Ver</span>
										</button>
									</a>

									<a class="clickoverlay" href="{{ route('cliente.edit',$cliente->id) }}">
										<button type="button" tabindex="0" class="dropdown-item">
											<i class="dropdown-icon lnr-pencil"> </i><span>Editar</span>
										</button>
                                	</a>
							</div>
						</div>
					</td>
				</tr>
				@endforeach
			</tbody>
			<tfoot>
				<tr class="myth">
					<th>#</th>
					<th>Nombre</th>
					<th>DNI/CUIT</th>
					<th>Email</th>
					<th>Tel</th>
					<th>Provincia</th>
					<th>Localidad</th>
					<th>Tipo</th>
					<th>-</th>
				</tr>
			</tfoot>
		</table>
		</div>
		

		<!---- PAGINATE -->

		<div class="allTable" style="display: none;">
			@include('pagination.new-default-limit-links', ['showmessage'=>true,'paginator' => $clientes, 'filters' => '','frmsubmit'=>'frmFiltrarCliente' ])

		</div>

	</div>


	@endsection


	@section('css')

	<style>
.mylabel{
	font-size: .80rem !important;
}

.myth{
	font-size: .78rem !important;
}



.accordion-wrapper {
    border-radius: .25rem;
    border: unset !important;
}
		.mytab-header {
			display: flex;
			align-items: center;
			border-bottom-width: 1px;
			padding-top: 0;
			padding-bottom: 0;
			padding-right: .625rem;
			height: 3.5rem;
			padding: 0 !important;
		}


		.simil-card-header {
			color: #555f78eb;
		}

		.simil-card-header:not(.collapsed) {
			color: #000000b5;
		}


		.simil-card-header:hover {
			color: #000000b5;
			transition: transform 0.2s;
		}



		.myaccordion-button {
			display: flex;
		}

		.myaccordion-button::after {
			flex-shrink: 0;
			width: 1.35rem;
			height: 1.35rem;
			margin-left: auto;
			margin-right: 10px;
			content: "";
			background-image: url('/assets/images/down.svg');
			background-repeat: no-repeat;
			background-size: 1.25rem;
			transition: transform .2s ease-in-out;
		}

		.myaccordion-button:not(.collapsed)::after {
			background-image: url('/assets/images/down.svg');
			transform: rotate(-180deg);
		}



		.withoutpadding {
			padding: .3em !important;
		}

		.text-underline {
			background-image: linear-gradient(to right, #575e6426 150px, transparent 150px);
			background-size: 600px 2px;
			background-position: 0 100%;
			background-repeat: no-repeat;
			font-weight: bold;
		}


		

		.myaccordion {
			box-shadow: 0 .46875rem 3rem rgba(4, 9, 20, .03), -2px 0rem 0rem rgba(4, 9, 20, .03), 0 .25rem .53125rem rgba(4, 9, 20, .05), 0 .125rem .1875rem rgba(4, 9, 20, .03);
			border-width: 0;
			transition: all .2s;
		}

		.myplaceholder {
      color: #4950577a !important; 
      opacity: 1 !important; 
    }


	.form-control::placeholder {
      color: #4950577a;
      opacity: 1;  
    }

    .form-control:focus::placeholder {
      color: #4950577a;
    }

	.select2-search__field::placeholder {
      color: #4950577a !important; 
      opacity: 1;  
    }


	.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field {
		min-width: 11rem !important;
		font-size: 1rem !important;
		margin-top: -3px;
	}

	</style>
@endsection
@section('scripts')

	<script>

		
			function showloader(){
				$('#waitTriagge').show();
				$('.allTable').hide();
				
			}

			function hideloader(){
				$('#waitTriagge').hide();
				$('.allTable').show();
				
			}

			

		$(document).ready(function() {
			if ($(window).width() < 768) { // Ajusta el tamaño según tus necesidades
				$('.myresponsive-text').removeClass('myaccordion-button');
				$('.myresponsive-text').removeClass('card-header-title');
			}


			
		});

		var isloaded = false;

		document.addEventListener("DOMContentLoaded", function(event) {

			var columna = "{{ ((null !== old('column_order') && Request::path() =='filtrarClientes' )?old('column_order'):null) }}"; 
			var direccion = "{{ ((null !== old('sort_direction') && Request::path() =='filtrarClientes' )?old('sort_direction'):null) }}";

			var table = $('#exampleClientes').DataTable({
				info: false,
                    paging: false,
                    responsive: true,
                    lengthMenu: [100],
                    columnDefs: [{
						"targets": [7,8],
						"orderable": false
					}],
                    language: {
                        "url": "/js/Spanish.json"
                    },
                    drawCallback: function(settings) {
                        $('.dataTables_wrapper').removeClass('form-inline');
                    },
					initComplete: function(settings, json) {
						
						isloaded = true;

						hideloader();
					}
                });

			table.columns().every(function() {
				var col = this.header().getAttribute('data-ordername');
				if (col === columna) {
					var idx = this.index();
					if (direccion === 'asc') {
						table.order([idx, 'asc']).draw();
					} else {
						table.order([idx, 'desc']).draw();
					}
				}
			});


			table.on('order', function() {
				if(isloaded){
					console.log("Se disparo order");
					var order = table.order();
					var columna = table.column(order[0][0]).header().getAttribute('data-ordername');
					var direccion = order[0][1];
					$('#column_order').val(columna);
					$('#sort_direction').val(order[0][1]);
					$('#frmFiltrarCliente').submit();
				}
				
			});

			table.on('order.dt', function() {
				if(isloaded){
					showloader()
				}
				
			});


			
			$('#id_tipo_cliente').on('change', function() {
				if ($(this).val() === "") {
				$(this).addClass('myplaceholder');
				} else {
				$(this).removeClass('myplaceholder');
				}
			});

			

		});
		

		$( document ).ready(function() {

			$(".mymultiselect-dropdown").select2({
					theme: "bootstrap4",
					placeholder: "Selecciona Provincias",
			});

			$('#exportCSV').click(function(event) {
				event.preventDefault();

				showGranOverlay();

				var url = "/exports/clientesCsv";
				$.ajax({
					url: url,
					type: 'GET',
					success: function(response) {
				
						downloadGetCSV("/exports/"+response.filename,response.filename);
					},
					error: function(xhr, status, error) {
						var errorMessage = xhr.responseJSON.mensaje; 
						alert(errorMessage);
					
					}

				});
			});


		});
	</script>


 

@endsection