@extends('layouts.admin')

@section('content')
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-11 col-md-12">

            <!-- Encabezado de la Sección -->
            <div class="row mb-3 align-items-center">
                <div class="col-md-6">
                    <h1 class="m-0 font-weight-bold text-dark" style="font-size: 1.75rem;">
                        <i class="bi bi-hospital-fill text-primary mr-2"></i> Configuración de la Clínica
                    </h1>
                    <p class="text-muted mb-0 small">Datos institucionales, logotipo y parámetros generales del sistema</p>
                </div>
                <div class="col-md-6 text-md-right mt-3 mt-md-0">
                    <a href="#seccionSeguridadClave" class="btn btn-warning text-dark font-weight-bold shadow-sm mr-2 btn-sm">
                        <i class="bi bi-key-fill mr-1"></i> Cambiar Clave / Recuperar
                    </a>
                    <a href="{{ route('admin.facturacion.configuracion') }}" class="btn btn-outline-info shadow-sm mr-2 btn-sm">
                        <i class="bi bi-receipt mr-1"></i> Facturación SRI
                    </a>
                    <a href="{{ route('admin.puntos_emision.index') }}" class="btn btn-outline-primary shadow-sm mr-2 btn-sm">
                        <i class="bi bi-geo-alt-fill mr-1"></i> Puntos de Emisión
                    </a>
                    @if($configuraciones->isEmpty())
                        <a href="{{ url('admin/configuraciones/create') }}" class="btn btn-primary shadow-sm btn-sm">
                            <i class="bi bi-plus-circle mr-1"></i> Registrar Configuración
                        </a>
                    @endif
                </div>
            </div>

            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
                    <i class="bi bi-exclamation-triangle-fill mr-2"></i>
                    <b>Por favor verifique los siguientes campos:</b>
                    <ul class="mb-0 mt-1 pl-3">
                        @foreach($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if(session('mensaje'))
                <div class="alert alert-{{ session('icono') == 'success' ? 'success' : (session('icono') == 'error' ? 'danger' : 'info') }} alert-dismissible fade show shadow-sm" role="alert">
                    <i class="bi bi-check-circle-fill mr-2"></i> {{ session('mensaje') }}
                    @if(session('enlace_recuperacion'))
                        <div class="mt-2 pt-2 border-top">
                            <small class="d-block font-weight-bold mb-1">Enlace directo de restablecimiento de contraseña generado:</small>
                            <a href="{{ session('enlace_recuperacion') }}" class="btn btn-sm btn-light font-weight-bold text-primary border">
                                <i class="bi bi-shield-lock-fill mr-1"></i> Abrir Enlace para Restablecer Clave Ahora
                            </a>
                        </div>
                    @endif
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if($configuraciones->isNotEmpty())
                @php $clinica = $configuraciones->first(); @endphp
                <!-- Panel Principal: Tarjeta de la Clínica -->
                <div class="card card-outline card-primary shadow-sm mb-4">
                    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                        <h5 class="card-title font-weight-bold text-primary m-0">
                            <i class="bi bi-info-circle-fill mr-2"></i> Información de la Clínica
                        </h5>
                        <div class="card-tools">
                            <a href="{{ url('/admin/configuraciones/' . $clinica->id . '/edit') }}" class="btn btn-success btn-sm shadow-sm mr-1">
                                <i class="bi bi-pencil-square mr-1"></i> Editar Configuración
                            </a>
                            <a href="{{ url('/admin/configuraciones/' . $clinica->id) }}" class="btn btn-info btn-sm shadow-sm">
                                <i class="bi bi-eye mr-1"></i> Ver Ficha
                            </a>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="row align-items-center">
                            <!-- Columna 1: Logotipo y Nombre -->
                            <div class="col-md-4 text-center border-right mb-3 mb-md-0 pr-md-4">
                                <div class="bg-light p-3 rounded border mb-2 d-inline-block shadow-xs" style="max-width: 220px; width: 100%;">
                                    <img src="{{ url('storage/' . $clinica->logo) }}" alt="Logo Clínica" class="img-fluid" style="max-height: 120px; object-fit: contain;">
                                </div>
                                <h4 class="font-weight-bold text-dark mt-2 mb-1" style="font-size: 1.3rem;">{{ $clinica->nombre }}</h4>
                                <span class="badge badge-primary px-3 py-1 font-weight-bold" style="font-size: 0.9rem;">
                                    <i class="bi bi-card-heading mr-1"></i> RUC: {{ $clinica->ruc }}
                                </span>
                            </div>

                            <!-- Columna 2: Datos de Contacto y Ubicación -->
                            <div class="col-md-5 border-right mb-3 mb-md-0 px-md-4">
                                <div class="mb-2">
                                    <span class="text-muted small text-uppercase font-weight-bold d-block">
                                        <i class="bi bi-geo-alt-fill text-danger mr-1"></i> Dirección:
                                    </span>
                                    <span class="text-dark font-weight-500">{{ $clinica->direccion }}</span>
                                </div>
                                <div class="mb-2">
                                    <span class="text-muted small text-uppercase font-weight-bold d-block">
                                        <i class="bi bi-telephone-fill text-success mr-1"></i> Teléfono:
                                    </span>
                                    <span class="text-dark font-weight-500">{{ $clinica->telefono }}</span>
                                </div>
                                <div class="mb-2">
                                    <span class="text-muted small text-uppercase font-weight-bold d-block">
                                        <i class="bi bi-envelope-fill text-info mr-1"></i> Correo Electrónico:
                                    </span>
                                    <span class="text-dark font-weight-500">{{ $clinica->correo }}</span>
                                </div>
                                <div>
                                    <span class="text-muted small text-uppercase font-weight-bold d-block">
                                        <i class="bi bi-patch-check-fill text-warning mr-1"></i> Autorización MSP:
                                    </span>
                                    <span class="badge badge-secondary px-2 py-1">{{ $clinica->autorizacion }}</span>
                                </div>
                            </div>

                            <!-- Columna 3: Parámetros Correlativos -->
                            <div class="col-md-3 text-center pl-md-4">
                                <div class="p-2 mb-2 bg-light rounded border">
                                    <span class="text-muted small text-uppercase font-weight-bold d-block">Inicio Historia Clínica</span>
                                    <div class="text-primary font-weight-bold mt-1" style="font-size: 1.4rem;">
                                        <i class="bi bi-hash"></i> {{ $clinica->inicio_historia_clinica ?? 1 }}
                                    </div>
                                </div>

                                <div class="p-2 bg-light rounded border">
                                    <span class="text-muted small text-uppercase font-weight-bold d-block">Inicio Recetas Médicas</span>
                                    <div class="text-success font-weight-bold mt-1" style="font-size: 1.4rem;">
                                        <i class="bi bi-receipt"></i> {{ $clinica->inicio_receta ?? 1 }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabla Detallada con contenedor responsive -->
                <div class="card card-outline card-secondary shadow-sm">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h6 class="card-title font-weight-bold text-dark m-0">
                            <i class="bi bi-table mr-2 text-secondary"></i> Registros de Configuración
                        </h6>
                        <span class="badge badge-light border">Total: {{ $configuraciones->count() }}</span>
                    </div>

                    <div class="card-body p-3">
                        <div class="table-responsive">
                            <table id="example1" class="table table-bordered table-hover table-striped table-sm mb-0 align-middle">
                                <thead style="background-color: #343a40; color: #fff;">
                                    <tr>
                                        <th style="width: 40px; text-align: center;">#</th>
                                        <th>Clínica</th>
                                        <th>RUC</th>
                                        <th>Contacto</th>
                                        <th>Dirección</th>
                                        <th style="text-align: center;">Autorización</th>
                                        <th style="text-align: center;">H.C. / Receta</th>
                                        <th style="width: 110px; text-align: center;">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $contador = 1; @endphp
                                    @foreach($configuraciones as $configuracione)
                                        <tr>
                                            <td class="text-center font-weight-bold">{{ $contador++ }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    @if($configuracione->logo)
                                                        <img src="{{ url('storage/' . $configuracione->logo) }}" alt="Logo" class="rounded mr-2 border" width="40" height="40" style="object-fit: contain;">
                                                    @endif
                                                    <span class="font-weight-bold">{{ $configuracione->nombre }}</span>
                                                </div>
                                            </td>
                                            <td><span class="badge badge-light border font-weight-bold">{{ $configuracione->ruc }}</span></td>
                                            <td>
                                                <small class="d-block"><i class="bi bi-telephone text-success mr-1"></i> {{ $configuracione->telefono }}</small>
                                                <small class="d-block text-muted"><i class="bi bi-envelope text-info mr-1"></i> {{ $configuracione->correo }}</small>
                                            </td>
                                            <td><small class="text-muted">{{ Str::limit($configuracione->direccion, 35) }}</small></td>
                                            <td class="text-center"><span class="badge badge-secondary">{{ $configuracione->autorizacion }}</span></td>
                                            <td class="text-center">
                                                <span class="badge badge-primary px-2" title="Inicio Historia Clínica"><i class="bi bi-hash"></i> {{ $configuracione->inicio_historia_clinica ?? 1 }}</span>
                                                <span class="badge badge-success px-2" title="Inicio Recetas"><i class="bi bi-receipt"></i> {{ $configuracione->inicio_receta ?? 1 }}</span>
                                            </td>
                                            <td class="text-center">
                                                <div class="btn-group" role="group">
                                                    <a href="{{ url('admin/configuraciones/' . $configuracione->id) }}" class="btn btn-info btn-xs" title="Ver"><i class="bi bi-eye"></i></a>
                                                    <a href="{{ url('/admin/configuraciones/' . $configuracione->id . '/edit') }}" class="btn btn-success btn-xs" title="Editar"><i class="bi bi-pencil"></i></a>
                                                    <a href="{{ url('/admin/configuraciones/' . $configuracione->id . '/confirm-delete') }}" class="btn btn-danger btn-xs" title="Eliminar"><i class="bi bi-trash"></i></a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            @else
                <div class="card card-outline card-warning shadow-sm mb-4">
                    <div class="card-body text-center py-5">
                        <i class="bi bi-exclamation-triangle-fill text-warning fa-3x mb-3 d-block"></i>
                        <h4 class="font-weight-bold">No hay configuración de clínica registrada</h4>
                        <p class="text-muted">Debe registrar la información institucional de la clínica para el correcto funcionamiento del sistema.</p>
                        <a href="{{ url('admin/configuraciones/create') }}" class="btn btn-primary">
                            <i class="bi bi-plus-circle mr-1"></i> Registrar Configuración
                        </a>
                    </div>
                </div>
            @endif

            <!-- SECCIÓN SEGURIDAD DE ACCESO DE LA CLÍNICA: CAMBIAR CLAVE Y RECUPERAR POR CORREO -->
            <div class="row mt-4" id="seccionSeguridadClave">
                <!-- Columna 1: Cambiar Contraseña y Correo de Acceso -->
                <div class="col-lg-7 mb-4">
                    <div class="card card-outline card-primary shadow-sm h-100">
                        <div class="card-header bg-white py-3">
                            <h5 class="card-title font-weight-bold text-primary m-0">
                                <i class="bi bi-shield-lock-fill mr-2"></i> Cambiar Clave de Acceso de la Clínica
                            </h5>
                        </div>
                        <form action="{{ route('admin.configuraciones.cambiar_clave') }}" method="POST">
                            @csrf
                            <div class="card-body">
                                <p class="text-muted small mb-3">
                                    Actualice su contraseña de acceso o el correo electrónico con el que inicia sesión en su clínica.
                                </p>
                                <div class="row">
                                    <div class="col-md-6 form-group">
                                        <label class="font-weight-bold">Correo de Acceso (Login) *</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="bi bi-envelope-fill text-primary"></i></span>
                                            </div>
                                            <input type="email" name="email_acceso" class="form-control" value="{{ old('email_acceso', Auth::user()->email ?? '') }}" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6 form-group">
                                        <label class="font-weight-bold">Contraseña Actual *</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="bi bi-unlock-fill text-secondary"></i></span>
                                            </div>
                                            <input type="password" name="password_actual" class="form-control" placeholder="Ingrese su clave actual" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6 form-group mb-0">
                                        <label class="font-weight-bold">Nueva Contraseña *</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="bi bi-key-fill text-success"></i></span>
                                            </div>
                                            <input type="password" name="password" class="form-control" placeholder="Mínimo 6 caracteres" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6 form-group mb-0">
                                        <label class="font-weight-bold">Confirmar Nueva Contraseña *</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="bi bi-check2-circle text-success"></i></span>
                                            </div>
                                            <input type="password" name="password_confirmation" class="form-control" placeholder="Repita la nueva clave" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer bg-white text-right">
                                <button type="submit" class="btn btn-primary font-weight-bold shadow-sm">
                                    <i class="bi bi-save mr-1"></i> Actualizar Clave de Acceso
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Columna 2: Recuperar Clave mediante Correo Electrónico -->
                <div class="col-lg-5 mb-4">
                    <div class="card card-outline card-info shadow-sm h-100">
                        <div class="card-header bg-white py-3">
                            <h5 class="card-title font-weight-bold text-info m-0">
                                <i class="bi bi-envelope-check-fill mr-2"></i> Recuperar Clave mediante Correo
                            </h5>
                        </div>
                        <form action="{{ route('admin.configuraciones.recuperar_clave_correo') }}" method="POST">
                            @csrf
                            <div class="card-body">
                                <p class="text-muted small mb-3">
                                    ¿Olvidó su clave actual o desea restablecerla por correo? Envíe un enlace seguro de recuperación al correo electrónico registrado de la clínica.
                                </p>

                                <div class="form-group">
                                    <label class="font-weight-bold">Correo Electrónico para Recuperación *</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="bi bi-send-check-fill text-info"></i></span>
                                        </div>
                                        <input type="email"
                                               name="email_recuperacion"
                                               class="form-control"
                                               value="{{ old('email_recuperacion', ($configuraciones->first()->correo ?? (Auth::user()->email ?? ''))) }}"
                                               placeholder="correo@clinica.com"
                                               required>
                                    </div>
                                    <small class="text-muted d-block mt-1">
                                        Cuenta actual: <b>{{ Auth::user()->email ?? '' }}</b>
                                    </small>
                                </div>

                                <div class="custom-control custom-checkbox mt-2">
                                    <input type="checkbox" class="custom-control-input" id="chkSyncCorreo" name="actualizar_correo_usuario" value="1" checked>
                                    <label class="custom-control-label small text-muted" for="chkSyncCorreo">
                                        Establecer este correo como mi correo oficial de recuperación y acceso
                                    </label>
                                </div>
                            </div>
                            <div class="card-footer bg-white text-right">
                                <button type="submit" class="btn btn-info font-weight-bold shadow-sm">
                                    <i class="bi bi-envelope-paper-fill mr-1"></i> Enviar Enlace de Recuperación
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

    @if($configuraciones->isNotEmpty())
        <script>
            $(function () {
                $("#example1").DataTable({
                    "pageLength": 10,
                    "language": {
                        "emptyTable": "No hay información",
                        "info": "Mostrando _START_ a _END_ de _TOTAL_ Configuraciones",
                        "infoEmpty": "Mostrando 0 a 0 de 0 Configuraciones",
                        "infoFiltered": "(Filtrado de MAX total Configuraciones)",
                        "infoPostFix": "",
                        "thousands": ",",
                        "lengthMenu": "Mostrar _MENU_ registros",
                        "loadingRecords": "Cargando...",
                        "processing": "Procesando...",
                        "search": "Buscar:",
                        "zeroRecords": "Sin resultados encontrados",
                        "paginate": {
                            "first": "Primero",
                            "last": "Último",
                            "next": "Siguiente",
                            "previous": "Anterior"
                        }
                    },
                    "responsive": true,
                    "lengthChange": true,
                    "autoWidth": false,
                    "buttons": [
                        {
                            extend: 'collection',
                            text: '<i class="bi bi-download mr-1"></i> Exportar',
                            buttons: ['copy', 'excel', 'pdf', 'print']
                        },
                        {
                            extend: 'colvis',
                            text: '<i class="bi bi-layout-three-columns mr-1"></i> Columnas'
                        }
                    ]
                }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
            });
        </script>
    @endif
@endsection