<div>
    <div class="container-fluid">
        <div class="px-0 py-2 px-lg-5 py-lg-2">
            <!--********************************************************-->
            <!--**  PARA MOVIL                                        **-->
            <!--********************************************************-->
            <div class="d-block d-sm-none">
                <div class="py-2">
                    <h4 class="card-title text-muted pb-1">Registro&nbsp;{{ $registros[0]->codigo }}</h4>
                    <div>
                        <small>
                            <!--********************************************************-->
                            <!--**  LA COLUMNA IMPORTADO                              **-->
                            <!--********************************************************-->
                            @if ($status == 'N')
                                <strong class="alert alert-danger  p-1" role="alert">
                                    Sin pagos registrado
                                </strong>
                            @elseif ($status == 'P')
                                <strong class="alert alert-success  p-1 " role="alert">
                                    Pagado
                                </strong>
                            @elseif ($status == 'D')
                                <strong class="alert alert-warning  p-1" role="alert">
                                    Pagos parciales
                                </strong>
                            @endif
                            &nbsp;
                            <!--********************************************************-->
                            <!--**  LA COLUMNA IMPORTADO                              **-->
                            <!--********************************************************-->
                            @if ($activo == '1')
                                <strong class="alert alert-success p-1" role="alert">
                                    Activo
                                </strong>
                            @elseif ($activo == '2')
                                <strong class="alert alert-secondary p-1" role="alert">
                                    Desactivado
                                </strong>
                            @endif
                        </small>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="px-0 px-lg-3">
                        <!--********************************************************-->
                        <!--**  PARA PC                                           **-->
                        <!--********************************************************-->
                        <div class="d-none d-sm-block">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="card-title text-muted ">Registro&nbsp;{{ $registros[0]->codigo }}
                                    </h4>
                                </div>
                                <div>
                                    <!--********************************************************-->
                                    <!--**  LA COLUMNA IMPORTADO                              **-->
                                    <!--**  SE COLOCA UNA CONDICIO                            **-->
                                    <!--**  CUANDO EL VALOR VIENE EN 0 SIGNIFICA NO IMPORTADO **-->
                                    <!--**  PERO SI VIENE EN 1 SIGNIFICA QUE SI ES IMPORTADO  **-->
                                    <!--********************************************************-->
                                    @if ($status == 'N')
                                        <span class="alert alert-danger mx-1 p-2 h6" role="alert">
                                            Sin pagos registrado
                                        </span>
                                    @elseif ($status == 'P')
                                        <span class="alert alert-success mx-1 p-2 h6" role="alert">
                                            Pagado
                                        </span>
                                    @elseif ($status == 'D')
                                        <span class="alert alert-warning mx-1 p-2 h6" role="alert">
                                            Pagos parciales
                                        </span>
                                    @endif
                                    <!--********************************************************-->
                                    <!--**  LA COLUMNA IMPORTADO                              **-->
                                    <!--**  SE COLOCA UNA CONDICIO                            **-->
                                    <!--**  CUANDO EL VALOR VIENE EN 0 SIGNIFICA NO IMPORTADO **-->
                                    <!--**  PERO SI VIENE EN 1 SIGNIFICA QUE SI ES IMPORTADO  **-->
                                    <!--********************************************************-->
                                    @if ($activo == '1')
                                        <span class="alert alert-success mx-1 p-2 h6" role="alert">
                                            Activo
                                        </span>
                                    @elseif ($activo == '2')
                                        <span class="alert alert-secondary mx-1 p-2 h6" role="alert">
                                            Desactivado
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <h5 class="card-subtitle mb-2 text-muted">Datos del paciente</h5>
                        <div class="row">
                            <div class="col-12  col-lg-6">
                                <span class="text-muted">Nombre:</span>&nbsp;<span
                                    class="text-muted">{{ $nombres }}&nbsp;{{ $apellidos }}</span>
                            </div>
                            <div class="col-12  col-lg-6">
                                <span class="text-muted">Numero de documento:</span>&nbsp;<span
                                    class="text-muted">{{ $documento }}</span>
                            </div>
                            <div class="col-12  col-lg-6">
                                <span class="text-muted">Genero:</span>&nbsp;<span class="text-muted">
                                    @if ($genero == 'M')
                                        <span class="text-muted"><i class="fa-solid fa-mars"></i>&nbsp;Masculino</span>
                                    @elseif ($genero == 'F')
                                        <span class="text-muted"><i class="fa-solid fa-venus"></i>&nbsp;Femenino</span>
                                    @endif
                                </span>
                            </div>
                            <div class="col-12  col-lg-6">
                                <span class="text-muted">Fecha de nacimiento:</span>&nbsp;
                                <span class="text-muted">
                                    <?= date_format(date_create($fecha_nacimiento), 'd/m/Y') ?>&nbsp;<span
                                        class="text-muted">Edad:</span>&nbsp;{{ $edad }}</span>
                            </div>
                        </div>
                        <div>
                            <hr>
                            <h5 class="card-subtitle mb-2 text-muted">Datos de la intervencion</h5>

                            <div class="row">
                                <div class="col-12">
                                    <span class="text-muted">Intervencion:</span>&nbsp;<span
                                        class="text-muted">{{ $intervencion }}</span>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <span class="text-muted">Cirujano:</span>&nbsp;<span
                                        class="text-muted">{{ $cirujano }}</span>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <span class="text-muted">Anesteciologo:</span>&nbsp;<span
                                        class="text-muted">{{ $anestesiologo }}</span>
                                </div>
                                <div class="col-12 col-lg-6"> <span class="text-muted">Clinica:</span>&nbsp;<span
                                        class="text-muted">{{ $clinica }}</span></div>
                                <div class="col-12 col-lg-6">
                                    <span class="text-muted">Fecha de intervencion:</span>&nbsp;<span
                                        class="text-muted">&nbsp;<?= date_format(date_create($fecha_intervencion), 'd/m/Y') ?></span>
                                </div>
                            </div>
                            <hr>
                            <h5 class="card-subtitle mb-2 text-muted">Factura</h5>
                            <div class="row">
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">NRO Factura:&nbsp;{{ $nro_factura }}</span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Fecha
                                        factura:&nbsp;<?= date_format(date_create($fecha_factura), 'd/m/Y') ?></span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Responsable:&nbsp;{{ $responsable_pago }}</span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Tasa:&nbsp;{{ $tasa }} Bsf</span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Fecha
                                        tasa:&nbsp;<?= date_format(date_create($fecha_tasa), 'd/m/Y') ?></span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Hora&nbsp;{{ $hora_tasa }}</span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Monto:&nbsp;{{ $monto_factura }} Bsf</span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Monto en dolares:&nbsp;${{ $monto_factura }}</span>
                                </div>
                            </div>
                            <hr>
                            <h5 class="card-subtitle mb-2 text-muted">Honorario de anesteciologo</h5>
                            <div class="row">
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Honorarios:&nbsp;{{ $honorarios_anestesiologo }}
                                        Bsf</span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">15%:&nbsp;{{ $honorarios_anestesiologo_p }} Bsf</span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Total:&nbsp;{{ $honorarios_anestesiologo_total }}
                                        Bsf</span>
                                </div>
                            </div>
                            <hr>
                            <h5 class="card-subtitle mb-2 text-muted">Honorario de preanestesiologo</h5>
                            <div class="row">
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Honorarios:&nbsp;{{ $evaluacion_preanestesica }}
                                        Bsf</span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">15%:&nbsp;{{ $evaluacion_preanestesica_p }} Bsf</span>
                                </div>
                                <div class="col-12 col-lg-4">
                                    <span class="text-muted">Total:&nbsp;{{ $evaluacion_preanestesica_total }}
                                        Bsf</span>
                                </div>
                            </div>
                            <hr>
                            <h5 class="card-subtitle mb-2 text-muted">Pagos</h5>
                            @if ($count_pagos == 0)
                                <div class="w-100 p-4 alert-secondary text-secondary">
                                    <p>El registro no posee ningun pago asociado. para cargar un pago has <a
                                            class="text-link"
                                            href="{{ asset('registro/pagos/' . $id_vista_registro) }}">Clik aqui</a>
                                    </p>
                                </div>
                            @else
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th class="text-muted" scope="col">Tipo de pago</th>
                                            <th class="text-muted" scope="col">Fecha de pago</th>
                                            <th class="text-muted" scope="col">Monto</th>
                                            <th class="text-muted" scope="col">Tasa</th>
                                            <th class="text-muted" scope="col">Monto en $</th>
                                            <th class="text-muted" scope="col">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($pagos as $pago)
                                            <tr>
                                                <td class="text-muted">{{ $pago->nombre }}</td>
                                                <td class="text-muted">
                                                    <?= date_format(date_create($pago->fecha_reg), 'd/m/Y') ?></td>
                                                <td class="text-muted">{{ $pago->monto }}</td>
                                                <td class="text-muted">{{ $pago->monto_tasa }}</td>
                                                <td class="text-muted">
                                                    {{ round($pago->monto / $pago->monto_tasa, 2) }}
                                                </td>
                                                @if ($pago->activo == '1')
                                                    <td class="text-success"><strong>Activo</strong></td>
                                                @elseif ($pago->activo == '2')
                                                    <td class="text-secondary"><strong>Desactivado</strong></td>
                                                @endif
                                            </tr>
                                        @endforeach
                                        <tr>
                                            <td colspan="2"></td>
                                            <th colspan="2" class="text-muted">
                                                Total:&nbsp;{{ $registro_total_pagado }}&nbsp;Bsf</th>
                                            <th colspan="2" class="text-muted">
                                                Diferencia:&nbsp;{{ $registro_diferencia }} Bsf</th>
                                        </tr>
                                    </tbody>
                                </table>
                            @endif
                            <hr>
                            <h5 class="card-subtitle mb-2 text-muted">Comentarios</h5>
                            <div class="text-muted">
                                {{ $comentario }}</th>
                            </div>
                            <div class="text-muted">
                                Registrado el dia:&nbsp;<?= date_format(date_create($fecha_reg), 'd/m/Y') ?></span>
                            </div>
                            <hr>
                            <div class="d-flex flex-row bd-highlight mb-3">
                                <div>
                                    <a href="{{ asset('registro/actualizar/' . $id_vista_registro) }}"
                                        class="text-decoration-none text-info"> <i
                                            class="fa-solid fa-pen-to-square"></i>Editar registro</a>
                                    <a href="{{ asset('registro/pagos/' . $id_vista_registro) }}"
                                        class="text-decoration-none text-info"><i class="fa-solid fa-money-bill"></i>
                                        Agregar pago</a>
                                </div>
                                @if ($activo == '1')
                                    <button class="text-decoration-none text-info border-0 bg-white"
                                        data-bs-toggle="modal" data-bs-target="#modal_desactivar_registro"
                                        data-bs-placement='top' data-bs-toggle='tooltip' title="Activar registro"
                                        wire:click="seleccionar_registro('{{ $id_vista_registro }}')">
                                        <i class="fas fa-ban"></i> Desactivar registro
                                    </button>
                                @elseif ($activo == '2')
                                    <button class="text-decoration-none text-info border-0 bg-white"
                                        data-bs-toggle="modal" data-bs-target="#modal_activar_registro"
                                        data-bs-placement='top' data-bs-toggle='tooltip' title="Activar registro"
                                        wire:click="seleccionar_registro('{{ $id_vista_registro }}')">
                                        <i class="fa-solid fa-check"></i> Activar registro
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--************-->
    <!--** MODALS **-->
    <!--************-->
    <div>
        <!--****************************-->
        <!--** MODAL ACTIVAR REGISTRO **-->
        <!--****************************-->
        <x-modal.simple titulo="Activar registro" identificador="modal_activar_registro" msj="Activando registro"
            accion="activar_registro" preparar="seleccionar_registro" msjpreparar="Buscando registro"
            tipo="md">
            <x-slot name="body">
                <div wire:loading.remove>
                    <div align="center">
                        <h1> <i class="fa-solid fa-check text-success"></i></h1>
                        <div class="text-secondary"> Confirme si desea activar el registro numero: <strong
                                class="text-dark">{{ $codigo }}</strong> del
                            paciente: <strong
                                class="text-dark">{{ $nombres }}&nbsp;{{ $apellidos }}</strong>, Numero de
                            documento: <strong class="text-dark">{{ $documento }}</strong>,datos de la
                            intervencion: <strong class="text-dark">{{ $intervencion }}</strong> Cirujano:
                            <strong class="text-dark">{{ $cirujano }}</strong>
                            del dia: <strong class="text-dark">{{ $fecha_intervencion }}</strong>.
                        </div>
                        <small class="text-secondary">Si esta seguro pulsar Activar, si no desea activar el
                            registro pulse cancelar.</small>
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <div wire:loading.remove>
                    <!--****************************************************-->
                    <!--** BOTONES DEL MODAL                              **-->
                    <!--****************************************************-->
                    <div class="d-flex justify-content-end mt-0 mb-2 p-0">
                        <x-btn.cancelar accion='resetear'>Cancelar</x-btn.cancelar>
                        &nbsp;
                        <x-btn.guardar accion='activar_registro'>Activar</x-btn.guardar>
                    </div>
                </div>
            </x-slot>
        </x-modal.simple>
        <!--********************************************-->
        <!--** MODAL DESACTIVAR REGISTRO               **-->
        <!--********************************************-->
        <x-modal.simple titulo="Desactivar registro" identificador="modal_desactivar_registro"
            msj="Desactivando registro" accion="desactivar_registro" preparar="seleccionar_registro"
            msjpreparar="Buscando registro" tipo="md">
            <x-slot name="body">
                <div wire:loading.remove>
                    <div align="center">
                        <h1> <i class="fas fa-ban text-secondary"></i></h1>
                        <div class="text-secondary"> Confirme si desea desactivar el registro numero: <strong
                                class="text-dark">{{ $codigo }}</strong> del
                            paciente: <strong
                                class="text-dark">{{ $nombres }}&nbsp;{{ $apellidos }}</strong>, Numero de
                            documento: <strong class="text-dark">{{ $documento }}</strong>,datos de la
                            intervencion: <strong class="text-dark">{{ $intervencion }}</strong> Cirujano:
                            <strong class="text-dark">{{ $cirujano }}</strong>
                            del dia: <strong class="text-dark">{{ $fecha_intervencion }}</strong>.
                        </div>
                        <small class="text-secondary">Si esta seguro pulsar desactivar, si no desea activar el
                            registro pulse cancelar.</small>
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <div wire:loading.remove>
                    <!--****************************************************-->
                    <!--** BOTONES DEL MODAL                              **-->
                    <!--****************************************************-->
                    <div class="d-flex justify-content-end mt-0 mb-2 p-0">
                        <x-btn.cancelar accion='resetear'>Cancelar</x-btn.cancelar>
                        &nbsp;
                        <x-btn.guardar accion='desactivar_registro'>Desactivar</x-btn.guardar>
                    </div>
                </div>
            </x-slot>
        </x-modal.simple>
    </div>
</div>
