@extends('layouts.index')
@section('contenido')
    <style>
        .datatable-basic tr p {
            padding-top: 19px;
        }

        .x-flex {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .xend-flex {
            display: flex;
            align-items: end;
            justify-content: end;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
    </script>
    <input type="hidden" id="c_logitud">
    <input type="hidden" id="c_latitud">
    <div class="content">
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session()->get('message') }}
            </div>
        @endif
        <div class="card">
            <div class="card-header header-elements-inline">
                <input id="id_visita" type="hidden" value="{{ $status_visita ?? '' }}">
                <h5 class="card-title">FICHA SOCIO: {{ $socio->primer_nombre_socio }} {{ $socio->segundo_nombre_socio }}
                    {{ $socio->primer_apellido_socio }} {{ $socio->segundo_apellido_socio }}</h5>
                <div class="header-elements">
                    @if ($visita == null)
                        @if ($status_visita)
                            <button id="empezarVisita" type="button" class="btn btn-success"><i
                                    class="icon-comment-discussion mr-2"></i> TERMINAR VISITA</button>
                        @else
                            <button id="empezarVisita" type="button" class="btn btn-danger"><i
                                    class="icon-comment-discussion mr-2"></i> EMPEZAR VISITA</button>
                        @endif
                    @else
                        @if ($visita->status == 1)
                            <button id="empezarVisita" type="button" class="btn btn-success"><i
                                    class="icon-comment-discussion mr-2"></i> TERMINAR VISITA</button>
                        @endif
                    @endif
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="card border-left-3 border-left-danger rounded-left-0">
                    <div class="card-body">
                        <div class="d-sm-flex align-item-sm-center flex-sm-nowrap">
                            <div>
                                <ul class="list list-unstyled mb-0">
                                    <li>Dirección</li>
                                    <li>DPI</li>
                                    <li>NIT</li>
                                    <li>Teléfono</li>
                                    <li>Celular</li>
                                    <li>Especialidad</li>
                                </ul>
                            </div>

                            <div class="text-sm-right mb-0 mt-3 mt-sm-0 ml-auto">
                                <ul class="list list-unstyled mb-0">
                                    <li>{{ $socio->direccion }}</li>
                                    <li>{{ $socio->dpi }}</li>
                                    <li>{{ $socio->nit_socio }}</li>
                                    <li>{{ $socio->telefono_oficina_socio }}</li>
                                    <li>{{ $socio->telefono_movil_socio }}</li>
                                    <li>{{ $socio->especialidad['descripcion_especialidad'] }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer d-sm-flex justify-content-sm-between align-items-sm-center">
                        <span>
                            <span class="badge badge-mark border-danger mr-2"></span>
                            Inscripción:
                            <span class="font-weight-semibold">{{ $socio->created_at }}</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card border-left-3 border-left-danger rounded-left-0">
                    <div class="card-body">
                        <div class="d-sm-flex align-item-sm-center flex-sm-nowrap">
                            <div>
                                <ul class="list list-unstyled mb-0">
                                    <li>Fecha cumpleaños</li>
                                    <li>Hobby</li>
                                    <li>Clasificación</li>
                                    <li>Tipo de socio</li>
                                    <li>Nombre comercial</li>
                                    <li>Colegiado</li>
                                </ul>
                            </div>

                            <div class="text-sm-right mb-0 mt-3 mt-sm-0 ml-auto">
                                <ul class="list list-unstyled mb-0">
                                    <li>