@extends('layouts.index')
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="content">
	<div class="card">
		<div class="card-header header-elements-inline">
			<h5 class="card-title">NUEVO SOCIO</h5>
			<div class="header-elements">
				<div class="list-icons">
				    <a class="list-icons-item" data-action="collapse"></a>
				</div>
			</div>
		</div>

		<div class="card-body">
			<form action="{{ route('socios.guardar_por_apm') }}" method="POST">
                @csrf
				<fieldset>
					<legend class="font-weight-semibold text-uppercase font-size-sm">
						<i class="icon-reading mr-2"></i>
						INFORMACIÓN PERSONAL
					</legend>
					<div class="show">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Ingrese el NIT:</label>
                                    <input type="text" class="form-control" name="nit" placeholder="Ingrese el NIT">
                                </div>
                                <div class="form-group">
                                    <label>Ingrese el DPI:</label>
                                    <input type="text" class="form-control" name="dpi" placeholder="Ingrese el DPI">
                                </div>
                                <div class="form-group">
                                    <label>Ingrese el teléfono:</label>
                                    <input type="text" class="form-control" name="telefono" placeholder="Ingrese el teléfono" >
                                </div>
                                <div class="form-group">
                                    <label>Ingrese el celular:</label>
                                    <input type="text" class="form-control" name="celular" placeholder="Ingrese el celular*" required>
                                </div>
                                <div class="form-group">
                                    <label>Número de colegiado:</label>
                                    <input type="number" class="form-control" name="colegiado" placeholder="Número de colegiado">
                                </div>
                                <div class="form-group">
                                    <label>Dirección*:</label>
                                    <input type="text" class="form-control" name="direccion" placeholder="Dirección*" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Primer nombre socio*:</label>
                                    <input type="text" class="form-control" name="primer_nombre" placeholder="Primer nombre socio*" required>
                                </div>
                                <div class="form-group">
                                    <label>Segundo nombre socio:</label>
                                    <input type="text" class="form-control" name="segundo_nombre" placeholder="Segundo nombre socio">
                                </div>
                                <div class="form-group">
                                    <label>Primer apellido socio:</label>
                                    <input type="text" class="form-control" name="primer_apellido" placeholder="Primer apellido socio">
                                </div>
                                <div class="form-group">
                                    <label>Segundo apellido socio:</label>
                                    <input type="text" class="form-control" name="segundo_apellido" placeholder="Segundo apellido socio">
                                </div>
                                <div class="form-group">
                                    <label>Nombre comercial*:</label>
                                    <input type="text" class="form-control" name="nombre_comercial" placeholder="Nombre comercial*" required>
                                </div>
                                <div class="form-group">
                                    <label for="">Especialidad</label>
                                    <select class="form-control" name="especialidad">
                                        @foreach ($especialidades as $especialidad)
                                            <option value="{{$especialidad['id']}}">{{$especialidad['descripcion_especialidad']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <legend class="font-weight-semibold text-uppercase font-size-sm">
                            <i class="icon-reading mr-2"></i>
                            INFORMACIÓN
                        </legend>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="hidden" id="id_codigo_postal" name="id_codigo_postal" value="0">
                                <input type="hidden" id="id_gira" name="id_gira" value="0">
                                <div class="form-group">
                                    <label for="">País</label>
                                    <select class="form-control" name="especialidad">
                                        @foreach ($pais as $paisN)
                                            <option value="{{$paisN['id']}}">{{$paisN['descripcion_pais']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="">Departamento</label>
                                    <select class="form-control" name="departamento" id="departamento">
                                        @foreach ($departamentos as $departamento)
                                            <option value="{{ $departamento->id }}">{{ $departamento->descripcion_departamento }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="">Municipio</label>
                                    <select class="form-control" name="municipio" id="municipio">
                                        @foreach ($municipios as $municipio)
                                            <option value="{{ $municipio->id }}">{{ $municipio->descripcion_municipio }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div style="display: none;" class="form-group">
                                    <label for="">Código Postal</label>
                                    <input type="text" class="form-control" id="codigo_Postal" name="codigo_Postal" placeholder="" readonly>
                                </div>
                                <div style="display: none;"  class="form-group">
                                    <label for="">Zona</label>
                                    <input type="text" class="form-control" id="zona" name="zona" placeholder="" readonly>
                                </div>
                                <div style="display: none;"  class="form-group">
                                    <label for="">Región</label>
                                    <input type="text" class="form-control" id="region" name="region" placeholder="" readonly>
                                </div>
                                <div style="display: none;"  class="form-group">
                                    <label for="">Gira</label>
                                    <input type="text" class="form-control" id="gira" name="gira" placeholder="" readonly>
                                </div>
                                <a style="display: none;" class="btn btn-success"  data-toggle="modal" data-target="#tablaCodigoArea">Buscar <i class="icon-search4 ml-2"></i></a>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Fecha cumpleaños:</label>
                                    <div class="input-group">
                                        <span class="input-group-prepend">
                                            <span class="input-group-text"><i class="icon-calendar22"></i></span>
                                        </span>
                                        <input type="text" class="form-control daterange-single" name="fecha_cumpleanos" value="">
                                    </div>
                                </div>
                                <div style="display: none;" class="form-group">
                                    <label for="">Hobby</label>
                                    <input type="text" class="form-control" name="hobby" placeholder="Hobby">
                                </div>
                                <div style="display: none;"  class="form-group">
                                    <label for="">Código Diamente</label>
                                    <input type="text" class="form-control" name="diamante" placeholder="Código Diamente">
                                </div>
                                <div style="display: none;"  class="form-group">
                                    <label for="">Código Elvis</label>
                                    <input type="text" class="form-control" name="elvis" placeholder="Código Elvis">
                                </div>
                                <div class="form-group">
                                    <label>Tipo de socio</label>
                                    <select class="form-control" name="tipo_socio">
                                        @foreach ($tipoSocio as $socio)
                                            <option value="{{$socio['id']}}">{{$socio['descripcion_tipo_socio']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Lista de precios</label>
                                    <select class="form-control" name="id_lista">
                                        @foreach ($listas as $lista)
                                            <option value="{{$lista['id']}}">{{$lista['nombre']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Clasificación</label>
                                    <select class="form-control" name="clasificación">
                                        @foreach ($clasificaciones as $clasificacion)
                                            <option value="{{$clasificacion['id']}}">{{$clasificacion['descripcion_clasificacion']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div style="display: none;"  class="form-group">
                                    <label>Seleccione las líneas</label>
                                    <select multiple="multiple" class="form-control select" name="lineas[]">
                                        @foreach ($lineas as $linea)
                                            <option value="{{$linea['id']}}">{{$linea['descripcion_linea']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
				</fieldset>

				<div class="text-right">
					<button type="submit" class="btn btn-primary">Guardar Socio<i class="icon-floppy-disk ml-2"></i></button>
				</div>
            </form>

		</div>
	</div>
</div>
<div class="modal fade" id="tablaCodigoArea" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table id="tablaJS" class="table">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>Departamento</th>
                            <th>Municipio</th>
                            <th class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script>
    jQuery( document ).ready(function() {

        var table =$('#tablaJS').DataTable( {
            "ajax": "{{ route('socios.codigos_area') }}",
            "columns": [
                { "data": "id" },
                { "data": "departamento.descripcion_departamento" },
                { "data": "municipio.descripcion_municipio" },
                { "defaultContent": "<button class='btn btn-success seleccionarCodigoArea'>Seleccionar</button>" }
            ]
        } );
        $('#tablaJS tbody').on('click', 'button',function(){
            var data = table.row( $(this).parents('tr') ).data();
            console.log(data);
            $('#departamento').val(data.departamento.descripcion_departamento);
            $('#municipio').val(data.municipio.descripcion_municipio);

        })
        $('.select').select2({
            minimumResultsForSearch: Infinity
        });
    });
</script>
@endsection