<?= $this->extend('estructura/header_dashboard'); ?>
<?= $this->section('content'); ?>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<style>
    table {
      width: 100%;
    }

    /* Media query para pantallas pequeñas (móviles) */
    @media (max-width: 768px) {
      #ctnActaAsignacion {
        font-size: 9px!important; /* Ajusta el tamaño de la fuente en pantallas pequeñas */
        width: 100%!important;
      }
    
      table {
        width: 100%;
        font-size: 8px; /* Reduce el tamaño de la fuente en las tablas */
      }
    
      h2, h3, h4, h5 {
        font-size: 14px; /* Reduce el tamaño de los encabezados */
      }
    
      img {
        max-width: 100%;
        height: auto; /* Asegura que las imágenes no excedan el ancho de la pantalla */
      }
    
      td, th {
        padding: 3px; /* Reduce el padding de las celdas de la tabla */
      }
    
      /* Ajuste de la columna con imagen para que no se desborde */
      td[rowspan="2"] {
        width: 100%;
        text-align: center;
      }
    
      /* Ajusta la visualización de la firma y los botones */
      /*table, div {*/
      /*  margin-top: 10px;*/
      /*}*/
    
      /* Ajuste de las tablas para que se adapten mejor */
      table, th, td {
        /*border: 1px solid #ccc;*/
        text-align: center;
      }
    }
</style>
<div class="main-content">
	<div class="page-content">
		
		<div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card mt-n4 mx-n4">
                        <div class="bg-sistema color-white">
                            <div class="card-body pb-0">
                                <div class="row">
                                    <div class="col-md">
                                        <div class="row align-items-center px-3">
                                            <div class="col-md">
                                                <h4 class="fw-semibold color-white" id="ticket-title">#<?= $idInforme ?> - <?= $informacionInforme['AsuntoInforme'] ?></h4>
                                                <div class="hstack gap-3 flex-wrap">
                                                    <div class="text-muted color-white">Creador: <span id="ticket-client"><?= ucwords(mb_strtolower($informacionInforme['NombresUsuarioInforme'])).' '.ucwords(mb_strtolower($informacionInforme['ApellidosUsuarioInforme'])) ?></span></div>
                                                    <div class="vr"></div>
                                                    <div class="text-muted color-white">Fecha Informe: <span class="fw-medium"><?= date("d-m-Y", strtotime($informacionInforme['FechaInforme'])) ?></div>
                                                    <div class="vr"></div>
                                                    <div class="text-muted color-white">Fecha de Devolución: <span class="fw-medium"><?= date("d-m-Y", strtotime($informacionInforme['FechaDevolucion'])) ?></span></div>
                                                    <!--<div class="text-muted">Due Date : <span class="fw-medium" id="due-date">29 Dec, 2021</span></div>-->
                                                    <!--<div class="vr"></div>-->
                                                </div>
                                            </div>
                                            <!--end col-->
                                        </div>
                                        <!--end row-->
                                    </div>
                                    <!--end col-->
                                    <div class="col-md-auto mt-md-0 mt-4 d-flex justify-content-end align-items-center">
                                        <div class="hstack gap-1 flex-wrap">
                                            <?php 
                                            // if($informacionDevolucion['FechaRegistroFirma'] != '' && $informacionDevolucion['FechaRegistroFirma'] != null)
                                            // {
                                            ?>
                                            <button type="button" class="btn bg-warning px-2 py-1" data-id="<?= $idInforme ?>" data-cod="0" data-accion="download" id="btnDescargarPDFInformeDevolucion" data-toggle="tooltip" data-placement="top" title="Descargar PDF Informe Devolución" aria-label="Descargar PDF Informe Devolución">
            									<i class="mdi mdi-file-pdf-box" style="font-size: 18px; color: #FFF"></i>
            								</button>
            								<?php
            								// }
            								?>
                                            <a href="<?= $baseUrl.'/'.$previo ?>" class="btn btn-danger px-2 py-1" data-tooltip="tooltip" title="Volver">
                                                <i class="mdi mdi-arrow-left-circle" style="font-size: 18px; color: #FFF"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <!--end col-->
                                </div>
                                <!--end row-->
                                <ul class="nav nav-tabs-custom border-bottom-0 mt-2" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active fw-semibold" data-bs-toggle="tab" href="#informeDevolucion" role="tab" aria-selected="true">
                                            Informe de Devolución
                                        </a>
                                    </li>
                                    <!--<li class="nav-item" role="presentation">-->
                                    <!--    <a class="nav-link fw-semibold" data-bs-toggle="tab" href="#detalleElementos" role="tab" aria-selected="false" tabindex="-1" data-informe="<?= $idInforme ?>">-->
                                    <!--        Detalle de Elementos-->
                                    <!--    </a>-->
                                    <!--</li>-->
                                </ul>
                            </div><!-- end card body -->
                        </div>
                    </div><!-- end card -->
                </div><!-- end col -->
            </div><!-- end row -->

            <div class="row">
                <div class="col-xxl-9">
                    <div class="tab-content text-muted">
                        <div class="tab-pane fade show active" id="informeDevolucion" role="tabpanel">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Informe de Devolución</h5>
                                </div>
                                <div class="card-body">
                                    <div class="px-2 d-flex justify-content-center">
                                        <?= $informeDevolucion ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <div class="col-xxl-3">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Información General</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive table-card">
                                <table class="table table-borderless align-middle mb-0">
                                    <tbody>
                                        <tr>
                                            
                                            <td class="fw-medium"># Devolución</td>
                                            <td>#<?= $idInforme ?></td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Creador de Informe</td>
                                            <td id="t-client" class="d-flex align-items-center">
                                                <?= ucwords(mb_strtolower($informacionInforme['NombresUsuarioInforme'])).' '.ucwords(mb_strtolower($informacionInforme['ApellidosUsuarioInforme'])) ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Matrícula Creador</td>
                                            <td id="t-client" class="d-flex align-items-center">
                                                <?= $informacionInforme['MatriculaUsuarioInforme'] ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Dirección Informe</td>
                                            <td id="t-client" class="d-flex align-items-center">
                                                <?= $informacionInforme['DireccionInforme'] ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Área Informe</td>
                                            <td id="t-client" class="d-flex align-items-center">
                                                <?= $informacionInforme['AreaInforme'] ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Subárea Informe</td>
                                            <td id="t-client" class="d-flex align-items-center">
                                                <?= $informacionInforme['SubareaInforme'] ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Cargo Creador Informe</td>
                                            <td id="t-client" class="d-flex align-items-center">
                                                <?= $informacionInforme['CargoInforme'] ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Fecha Informe</td>
                                            <td id="t-client" class="d-flex align-items-center">
                                                <?= date("d-m-Y", strtotime($informacionInforme['FechaInforme'])) ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Acta devolución asociado</td>
                                            <td id="t-client" class="d-flex align-items-center">
                                                # <?= $informacionInforme['IDDevolucion'] ?>
                                                <a href="<?= $baseUrl ?>/detalle-acta-devolucion/<?= $informacionInforme['IDDevolucion'] ?>/<?= $informacionInforme['TokenActaDevolucion'] ?>" target="_blank" class="badge bg-sistema border-0 p-2 mx-1 ms-auto" data-tooltip="tooltip" data-toggle="tooltip" data-placement="top" aria-label="Ver Detalle de Devolución">
                                                    <i class="mdi mdi-file-sign align-bottom" style="font-size: 15px; color: #FFF;"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                    
                </div>
                <!--end col-->
            </div>
            <!--end row-->

        </div><!-- container-fluid -->
		<span class="respuesta_global"></span>
		<!-- container-fluid -->
	</div>
	<!-- End Page-content -->
	<footer class="footer">
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-6">
					<script>document.write(new Date().getFullYear())</script> © Verisure Peru.
				</div>
				<div class="col-sm-6">
					<div class="text-sm-end d-none d-sm-block">
						Desarrollado por <a href="https://www.verisure.pe/">Verisure Peru</a>
					</div>
				</div>
			</div>
		</div>
	</footer>
</div>
<!-- end main content-->

<?= $this->section('js'); ?>
<script>
	$(function () 
	{
       
	});
</script>
<?php $this->endSection(); ?>

<?php $this->endSection(); ?>