@extends('layouts.index')
@section('contenido')
<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') }}" 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">
                                    <input type="text" class="form-control" name="nit" placeholder="Ingrese el NIT">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="dpi" placeholder="Ingrese el DPI">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="telefono" placeholder="Ingrese el teléfono">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="celular" placeholder="Ingrese el celular">
                                </div>
                                <div class="form-group">
                                    <input type="number" class="form-control" name="colegiado" placeholder="Número de colegiado">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="direccion" placeholder="Dirección">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="primer_nombre" placeholder="Primer nombre socio">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="segundo_nombre" placeholder="Segundo nombre socio">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="primer_apellido" placeholder="Primer apellido socio">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="segundo_apellido" placeholder="Segundo apellido socio">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="nombre_comercial" placeholder="Nombre comercial">
                                </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 MERCAFARMA
                        </legend>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="hidden" id="id_codigo_postal" name="id_codigo_postal" value="0">
                                <div class="form-group">
                                    <label for="">País</label>
                                    <input type="text" class="form-control" id="pais" name="pais" placeholder="" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="">Departamento</label>
                                    <input type="text" class="form-control" id="departamento" name="departamento" placeholder="" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="">Municipio</label>
                                    <input type="text" class="form-control" id="municipio" name="municipio" placeholder="" readonly>
                                </div>
                                <div 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 class="form-group">
                                    <label for="">Zona</label>
                                    <input type="text" class="form-control" id="zona" name="zona" placeholder="" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="">Región</label>
                                    <input type="text" class="form-control" id="region" name="region" placeholder="" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="">Gira</label>
                                    <input type="text" class="form-control" id="gira" name="gira" placeholder="" readonly>
                                </div>
                                <a 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">
                                    <input type="text" class="form-control" name="diamante" placeholder="Código Diamente">
                                </div>
                                <div class="form-group">
                                    <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>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 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>Código Postal</th>
                            <th>País</th>
                            <th>Departamento</th>
                            <th>Municipio</th>
                            <th>Zona</th>
                            <th>Región</th>
                            <th>Gira</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": "descripcion_zona_codigo_postal" },
                { "data": "pais.descripcion_pais" },
                { "data": "departamento.descripcion_departamento" },
                { "data": "municipio.descripcion_municipio" },
                { "data": "zona.descripcion_zona" },
                { "data": "region.descripcion_region" },
                { "data": "gira.descripcion_gira" },
                { "defaultContent": "<button class='btn btn-success seleccionarCodigoArea'>Seleccionar</button>" }
            ]
        } );
        $('#tablaJS tbody').on('click', 'button',function(){
            var data = table.row( $(this).parents('tr') ).data();
            $('#pais').val(data.pais.descripcion_pais);
            $('#departamento').val(data.departamento.descripcion_departamento);
            $('#municipio').val(data.municipio.descripcion_municipio);
            $('#codigo_Postal').val(data.descripcion_zona_codigo_postal);
            $('#zona').val(data.zona.descripcion_zona);
            $('#region').val(data.region.descripcion_region);
            $('#gira').val(data.gira.descripcion_gira);
            $('#id_codigo_postal').val(data.id);
            $('#tablaCodigoArea').modal('hide');
        })
        $('.select').select2({
            minimumResultsForSearch: Infinity
        });
    });
</script>
@endsection