<?= $this->extend('estructura/header_dashboard'); ?>
<?= $this->section('content'); ?>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content" style="background-color: transparent;">

    <div class="page-content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-lg-12">
                    <div class="card mt-n4 mx-n4 mb-n5">
                        <div class="<?= $estadosSolicitud[$solicitud['Estado']]['FONDO'] ?> color-white">
                            <div class="card-body pb-4 mb-5">
                                <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">#<?= $solicitud['IDSolicitudReposicion'] ?> - <?= $solicitud['TipoEquipo'].' | '.$solicitud['Marca'].' - '.$solicitud['Modelo'].' - '.$solicitud['Serie'] ?></h4>
                                                <div class="hstack gap-3 flex-wrap">
                                                    <div class="text-muted color-white"><span id="ticket-client"><?= ucwords(mb_strtolower($solicitud['NombresSolicitante'].' '.$solicitud['ApellidosSolicitante'])) ?></span></div>
                                                    <div class="vr"></div>
                                                    <div class="text-muted color-white">Fecha de creación : <span class="fw-medium"><?= date("d-m-Y H:i:s", strtotime($solicitud['FechaCrea'])) ?></span></div>
                                                    <div class="vr"></div>
                                                    <div class="text-muted color-white">Último cambio : <span class="fw-medium"><?= date("d-m-Y H:i:s", strtotime($solicitud['FechaEstado'])) ?></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($autorizado && $solicitud['Estado'] == "CREA")
                                            {
                                            ?>
                                                <button type="button" class="btn bg-asig px-2 py-1" onclick="return confirmarEstadoSolicitudReposicion('<?= $solicitud['IDSolicitudReposicion'] ?>', 'RECI');" data-tooltip="tooltip" title="Registrar recepción de elementos">
                                                    <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tooltip osdsfdsdop" class="<?= $estadosSolicitud["RECI"]['ICONO'] ?>" style="font-size: 24px; color: #FFF"></i>
                                                </button>
                                            <?php
                                            }
                                            
                                            if($autorizado && ($solicitud['Estado'] == "CREA" || $solicitud['Estado'] == "RECI"))
                                            {
                                            ?>
                                                <button type="button" class="btn bg-inic px-2 py-1" onclick="return confirmarEstadoSolicitudReposicion('<?= $solicitud['IDSolicitudReposicion'] ?>', 'INIC');" data-tooltip="tooltip" title="Registrar inicio de evaluación">
                                                    <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tooltip osdsfdsdop" class="<?= $estadosSolicitud["INIC"]['ICONO'] ?>" style="font-size: 24px; color: #FFF"></i>
                                                </button>
                                                
                                            <?php
                                            }
                                            
                                            if($autorizado && $solicitud['Estado'] == "INIC") 
                                            {
                                            ?>
                                                <button type="button" class="btn bg-comp px-2 py-1" data-bs-target="#completarSolicitudReposicion" data-tooltip="tooltip" title="Registrar finalización de evaluación" id="btnFinalizarEvaluacionReposicion">
                                                    <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Tooltip osdsfdsdop" class="<?= $estadosSolicitud["COMP"]['ICONO'] ?>" style="font-size: 24px; 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: 24px; color: #FFF"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <!--end col-->
                                </div>
                                <!--end row-->
                            </div><!-- end card body -->
                        </div>
                    </div><!-- end card -->
                </div><!-- end col -->
            </div><!-- end row -->

            <div class="row">
                <div class="col-xxl-9">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="timeline">
                                        <?php
                                        foreach($timeline as $key => $value)
                                        {
                                            $position = ($key % 2) == 0 ? "left" : "right";
                                            $icon = $estadosSolicitud[$value['Estado']]['ICONO'];
                                            $colorIcon = $estadosSolicitud[$value['Estado']]['COLOR'];
                                            $fondoeEstado = $estadosSolicitud[$value['Estado']]['FONDO'];
                                        ?>
                                        <div class="timeline-item <?= $position ?>">
                                            <i class="icon <?= $icon ?> <?= $colorIcon ?>"></i>
                                            <!--<i class="icon ri-stack-line"></i>-->
                                            <div class="date <?= $colorIcon ?>"><?= date("d-m-Y", strtotime($value['Fecha'])) ?><br><?= date("H:i:s", strtotime($value['Fecha'])) ?></div>
                                            <div class="content fw-bold">
                                                <div class="d-flex">
                                                    <div class="flex-grow-1 ms-3">
                                                        <h5 class="fs-17"><?= ucwords(mb_strtolower($value['NombresUsuarioEstado'].' '.$value['ApellidosUsuarioEstado'])) ?><small class="fs-14 fw-normal mx-3"><?= $value['CargoModifica'] ?></small></h5>
                                                        <p class="mb-2"><?= $value['Comentario'] ?></p>
                                                        <div class="hstack gap-2">
                                                            <small class="text-muted fs-14 fw-normal"><?= $value['DireccionModifica'].' | '.$value['AreaModifica'].' | '.$value['SubareaModifica'] ?></small> 
                                                            <span class="badge <?= $fondoeEstado ?> color-white border-0">
                												<?= $estadosSolicitud[$value['Estado']]['PASADO'] ?>
                											</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <?php
                                        }
                                        ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end col-->
                <div class="col-xxl-3">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Información de Solicitud</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">Solicitud</td>
                                            <td>#<?= $solicitud['IDSolicitudReposicion'] ?></td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Área Encargada</td>
                                            <td>
                                                <?= $solicitud['AreaEncargada'] ?>
                                            </td>
                                        </tr>
                                        <tr class="bg-sistema-50 color-white">
                                            <td class="fw-medium">Elemento</td>
                                            <td><?= $solicitud['TipoEquipo'].' | '.$solicitud['Marca'].' - '.$solicitud['Modelo'].' - '.$solicitud['Serie'] ?></td>
                                        </tr>
                                        <tr class="bg-sistema-50 color-white">
                                            <td class="fw-medium">Motivo</td>
                                            <td><?= $motivosDevolucion[$solicitud['MotivoReposicion']] ?></td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Usuario Solicitante</td>
                                            <td id="t-client"><?= $solicitud['MatriculaSolicitante'].' | '.ucwords(mb_strtolower($solicitud['NombresSolicitante'].' '.$solicitud['ApellidosSolicitante'])) ?></td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Usuario Adjudicado</td>
                                            <td id="t-client"><?= $solicitud['MatriculaAdjudicado'].' | '.ucwords(mb_strtolower($solicitud['NombresAdjudicado'].' '.$solicitud['ApellidosAdjudicado'])) ?></td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Observación</td>
                                            <td>
                                                <?= $solicitud['Observacion'] ?>
                                            </td>
                                        </tr>
                                        <!--<tr>-->
                                        <!--    <td class="fw-medium">Delegación Solicitante</td>-->
                                        <!--    <td id="t-client"></td>-->
                                        <!--</tr>-->
                                        <tr>
                                            <td class="fw-medium">Fecha de creación</td>
                                            <td id="c-date"><?= date("d-m-Y H:i:s", strtotime($solicitud['FechaCrea'])) ?></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                    <?php
                    if($solicitud['IDDetalleDevolucion'] != null && $solicitud['IDDetalleDevolucion'] != '')
                    {
                    ?>
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title fw-semibold mb-0">Devolución asociada.</h6>
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center border border-dashed p-2 rounded mb-2">
                                <div class="flex-shrink-0 avatar-sm">
                                    <div class="avatar-title bg-light rounded">
                                        <i class="mdi mdi-text-box-outline fs-20 text-primary"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1"><a>Acta de Devolución | Hoja de desvinculación</a></h6>
                                    <!--<small class="text-muted">3.2 MB</small>-->
                                </div>
                                <div class="hstack gap-3 fs-16">
                                    <a href='<?= base_url().'/detalle-acta-devolucion/'.$solicitud['IDDevolucion'].'/'.$solicitud['TokenDevolucion'] ?>' class="text-muted" target="_blank"><i class="mdi mdi-open-in-new"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php
                    }
                    if($solicitud['IDDetalleReposicion'] != null && $solicitud['IDDetalleReposicion'] != '')
                    {
                    ?>
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title fw-semibold mb-0">Descuento-Reposición asociado.</h6>
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center border border-dashed p-2 rounded mb-2">
                                <div class="flex-shrink-0 avatar-sm">
                                    <div class="avatar-title bg-light rounded">
                                        <i class="mdi mdi-text-box-outline fs-20 text-primary"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1"><a>Acta de Reposición | Autorización de descuento</a></h6>
                                    <!--<small class="text-muted">3.2 MB</small>-->
                                </div>
                                <div class="hstack gap-3 fs-16">
                                    <a href='<?= base_url().'/detalle-acta-reposicion/'.$solicitud['IDReposicion'].'/'.$solicitud['TokenReposicion'] ?>' class="text-muted" target="_blank"><i class="mdi mdi-open-in-new"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php
                    }
                    ?>
                </div>
                <!--end col-->
            </div>
            <!--end row-->

        </div><!-- container-fluid -->
        
		<span class="respuesta_global"></span>
    </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 () {
        $('#txtMotivoReposicionReal').select2({
            dropdownParent: $('#completarSolicitudReposicion .modal-body')
        });
        
        $('#chkGeneraReposicion_i').change(function() {
            if(this.checked)
            {
                $('#ctnCobroReposicionInformacion').removeClass("d-none");
                $('#txtMotivoReposicionReal').val('').trigger('change');
                $('input[type="radio"].chkTipoDescuentoReposicion[value="TOTAL"]').prop('checked', true);
                $('#txtMontoParcialReposicion').val("1");
                $('#txtMontoParcialReposicion').attr("disabled", "disabled");
            }
            else
            {
                $('#ctnCobroReposicionInformacion').addClass("d-none");
            }
            
        });
    
        $('.chkTipoDescuentoReposicion').change(function() {
            let cantidad = $(this).val();
            if(cantidad == "TOTAL")
            {
                $('#txtMontoParcialReposicion').val("1");
                $('#txtMontoParcialReposicion').attr("disabled", "disabled");
            }
            else
            {
                $('#txtMontoParcialReposicion').removeAttr("disabled");
            }
            
        });
	});
</script>
<?php $this->endSection(); ?>

<!-- Modal Completar Solicitud Reposición -->
<div class="modal fade zoomIn" id="completarSolicitudReposicion" tabindex="-1" role="dialog" aria-labelledby="examplecompletarSolicitudReposicion" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md" role="document">
		<div class="modal-content" style="border: none;">
			<div class="modal-header bg-sistema d-flex justify-content-start align-items-center p-3">
				<h5 class="modal-title color-white" id="examplecompletarSolicitudReposicion">Registrar finalización de evaluación</h5>
				<button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form id="formCompletarSolicitudReposicion" class="formulario" autocomplete="off" action="<?= $baseUrl ?>/cambio-estado-solicitud-reposicion/<?= $solicitud['IDSolicitudReposicion'] ?>" method="POST">
				<span class="respuesta"></span>
				<div class="modal-body">
					<input type="hidden" id="txtEstadoSolicitudReposicion_i" name="txtEstadoSolicitudReposicion_i" value="COMP">
					<div class="row col-12 m-0 p-0 mb-0 d-flex">
				        <div class="alert alert-info border-0" role="alert">
                            <h5 class="text-center">Por favor, detallar la información obtenida de la evaluación realizada al dispositivo.</h5>
                        </div>
				    </div>
					<div class="row">
						<div class="col-xxl-12 col-md-12 col-12 mb-3">
							<div>
								<label for="txtDescargoEvaluacion_i" class="form-label">Descargo de evaluación</label>
								<textarea class="form-control" id="txtDescargoEvaluacion_i" name="txtDescargoEvaluacion_i" rows="6"></textarea>
							</div>
						</div>
						<div class="col-xxl-12 col-md-12 col-12 bg-sistema color-white p-2 m-0 d-flex justify-content-between align-items-center" style="border-radius: 10px;">
						    <h5 class="color-white m-0">¿La evaluación amerita cobro de reposición?</h5>
						    <div class="form-check form-switch form-switch-lg d-flex justify-content-start align-items-center">
								<input class="form-check-input form-check-input-green" type="checkbox" role="switch" name="chkGeneraReposicion_i" id="chkGeneraReposicion_i" checked >
								<label class="form-check-label" for="chkGeneraReposicion_i"></label>
							</div>
						</div>
						<div class="col-xxl-12 col-md-12 col-12 mb-3" id="ctnCobroReposicionInformacion">
						    <div class="col-xxl-12 col-md-12 col-12 p-0 m-0 my-3">
    						    <div>
                                    <label for="txtMotivoReposicionReal" class="form-label">Motivo de reposición real</label>
                                    <select class="form-select validarNextTab" aria-label="Motivo" id="txtMotivoReposicionReal" name="txtMotivoReposicionReal">
                                        <option selected="" value="">Seleccione una opción</option>
                                        <option value="ROB">ROBO</option>
                                        <option value="PER">PÉRDIDA</option>
                                        <option value="NOD">NO DEVOLUCIÓN</option>
                                        <option value="FAL">FALLA</option>
                                        <option value="REN">RENOVACIÓN</option>
                                    </select>
                                </div>
    						</div>
    						<h5 class="p-0 m-0 my-3">Cantidad a descontar</h5>
        				    <div class="col-xxl-12 col-md-12 col-12 d-flex p-0 m-0 my-3">
        				        <div class="row col-6 m-0 p-0">
        							<div class="form-check form-switch form-switch-lg">
        								<input class="form-check-input form-check-input-orange chkTipoDescuentoReposicion" type="radio" role="switch" name="rdbtnTipoDescuentoReposicion" value="TOTAL" id="chkDescuentoTotalReposicion" checked>
        								<label class="form-check-label" for="chkDescuentoTotalReposicion">Total</label>
        							</div>
        						</div>
        				        <div class="row col-6 m-0 p-0">
        							<div class="form-check form-switch form-switch-lg">
        								<input class="form-check-input form-check-input-orange chkTipoDescuentoReposicion" type="radio" role="switch" name="rdbtnTipoDescuentoReposicion" value="PARCIAL" id="chkDescuentoParcialReposicion">
        								<label class="form-check-label" for="chkDescuentoParcialReposicion">Parcial</label>
        							</div>
        						</div>
        				    </div>
                    		<div class="col-xxl-12 col-md-12 col-12 p-0 m-0 my-3">
                    		    <label class="form-label">Monto parcial:</label>
                    			<div class="input-group">
                                    <span class="input-group-text">S/ </span>
                                    <input type="number" class="form-control" id="txtMontoParcialReposicion" name="txtMontoParcialReposicion" step="0.01" min="1" value="1" disabled>
                                </div>
                    		</div>
        				    
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
					<button type="submit" class="btn btn-success color-white"><i class="mdi mdi-content-save"></i> Guardar</button>
				</div>
			</form>
		</div>
	</div>
</div>

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