@extends('layouts.admin')

@section('estilos')
	<link rel="stylesheet" href="{{ asset('css/Dropzone/dropzone.min.css') }}">
	<style type="text/css">
      .borde-dropzone{
        border: 2px dashed #47a447 !important;
        border-radius: 5px !important;
        background: white !important;
       }
       .loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url({{ url('img/spinning-elipse.svg') }}) 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}
    </style>
@endsection

@section('breadcrumb', 'Cliente')

@section('contenido_principal')
<div id="mostrar_loading"></div>
	<div class="container-fluid">
		<div class="card">
			<div class="card-header">
				<i class="fa fa-align-justify"></i>Clientes
				<button type="button" class="btn btn-secundary" id="nuevo" data-toggle="modal" data-target="#ClienteModal" onclick="abrirModal('new')">
					<i class="icon-plus"></i>&nbsp;Nuevo
				</button>
			</div>
			<div class="card-body">
				<div class="form-group row">
					<div class="col-md-6">
						<div class="input-group">
							<select class="form-control col-md-3" name="" id="">
								<option value="nombre">Nombre</option>
								<option value="descripcion">Descripcion</option>
							</select>
							<input type="text" id="search" name="search" class="form-control col-md-6" placeholder="Texto a buscar">
							<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i>Buscar</button>
						</div>
					</div>
				</div>
				<div class="cargaData">
					@include('admin.cliente.partials.tabla')	
				</div>				
			</div>
		</div>
	</div>
	@include('admin.cliente.partials.clienteModal')    
	@include('admin.cliente.partials.imagenesModal')
@endsection

@section('scripts')
	<script src="{{ asset('js/scripts/Admin/clientes.js') }}"></script>
	<script src="{{ asset('js/Dropzone/dropzone.min.js') }}"></script>
	<script>
		
		// Init dropzone instance
		Dropzone.autoDiscover = false
		const myDropzone = new Dropzone('#my-awesome-dropzone', {
			autoProcessQueue: false,
			acceptedFiles: ".jpeg,.jpg,.png,.gif",
			addRemoveLinks: true
		})

		// Submit
		const $button = document.getElementById('submit-files')
		$button.addEventListener('click', function () {
			// Retrieve selected files
			const acceptedFiles = myDropzone.getAcceptedFiles()
			for (let i = 0; i < acceptedFiles.length; i++) {
				setTimeout(function () {
					myDropzone.processFile(acceptedFiles[i])
				}, i * 2000)
			}
		})

		function cleanImage(){
			myDropzone.removeAllFiles(true); 
			//$('div.dz-success').remove();
		}

		function subirIdImg(cliente_id){
			$('#cliente_id').val(cliente_id);
		}
	</script>
@endsection