<?= $this->extend('estructura/header_dashboard'); ?>
<?= $this->section('content'); ?>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0"><?= $elementoSeleccionadoModulo ?></h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
								<li class="breadcrumb-item"><a href="javascript: void(0);">Inicio</a></li>
								<li class="breadcrumb-item active"><?= $breadcrumb ?></li>
							</ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <!--<div class="row g-4 mb-3">-->
            <!--    <div class="col-sm-auto">-->
            <!--        <div>-->
            <!--            <a href="apps-projects-create.html" class="btn btn-success"><i class="ri-add-line align-bottom me-1"></i> Add New</a>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--    <div class="col-sm">-->
            <!--        <div class="d-flex justify-content-sm-end gap-2">-->
            <!--            <div class="search-box ms-2">-->
            <!--                <input type="text" class="form-control" placeholder="Search...">-->
            <!--                <i class="ri-search-line search-icon"></i>-->
            <!--            </div>-->

            <!--            <div class="choices" data-type="select-one" tabindex="0" role="listbox" aria-haspopup="true" aria-expanded="false"><div class="choices__inner"><select class="form-control w-md choices__input" data-choices="" data-choices-search-false="" hidden="" tabindex="-1" data-choice="active">-->
            <!--                <option value="All">All</option>-->
            <!--                <option value="Today">Today</option>-->
            <!--                <option value="Yesterday" selected="">Yesterday</option>-->
            <!--                <option value="Last 7 Days">Last 7 Days</option>-->
            <!--                <option value="Last 30 Days">Last 30 Days</option>-->
            <!--                <option value="This Month">This Month</option>-->
            <!--                <option value="Last Year">Last Year</option>-->
            <!--            </select><div class="choices__list choices__list--single"><div class="choices__item choices__item--selectable" data-item="" data-id="3" data-value="Yesterday" aria-selected="true" role="option">Yesterday</div></div></div><div class="choices__list choices__list--dropdown" aria-expanded="false"><div class="choices__list" role="listbox"><div id="choices--9nsj-item-choice-1" class="choices__item choices__item--choice choices__item--selectable is-highlighted" role="option" data-choice="" data-id="1" data-value="All" data-select-text="Press to select" data-choice-selectable="" aria-selected="true">All</div><div id="choices--9nsj-item-choice-4" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="4" data-value="Last 7 Days" data-select-text="Press to select" data-choice-selectable="">Last 7 Days</div><div id="choices--9nsj-item-choice-5" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="5" data-value="Last 30 Days" data-select-text="Press to select" data-choice-selectable="">Last 30 Days</div><div id="choices--9nsj-item-choice-7" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="7" data-value="Last Year" data-select-text="Press to select" data-choice-selectable="">Last Year</div><div id="choices--9nsj-item-choice-6" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="6" data-value="This Month" data-select-text="Press to select" data-choice-selectable="">This Month</div><div id="choices--9nsj-item-choice-2" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="2" data-value="Today" data-select-text="Press to select" data-choice-selectable="">Today</div><div id="choices--9nsj-item-choice-3" class="choices__item choices__item--choice is-selected choices__item--selectable" role="option" data-choice="" data-id="3" data-value="Yesterday" data-select-text="Press to select" data-choice-selectable="">Yesterday</div></div></div></div>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->
            <div class="row g-4 d-flex">
				<div class="d-flex justify-content-end align-items-centerm-0 p-0 my-4 px-2">
				    <?php
					if (in_array("ADDLAN", $permisos)) 
					{
					?>
					<!--<a href="<?= $baseUrl ?>/nueva-landing" role="button" class="btn bg-sistema d-flex mx-1 color-white">-->
     <!--                       <i class="mdi mdi-plus-circle me-1" style="font-size: 14px;"></i> Agregar-->
     <!--               </a>-->
                    <button type="button" class="btn bg-sistema d-flex mx-1 color-white" data-bs-target="#agregarLanding" id="btnAgregarLanding">
						<i class="mdi mdi-plus-circle me-1" style="font-size: 14px;"></i> Agregar
					</button>
					<?php
					}
					?>
				</div>
			</div>
            <div class="row">
                <?php
                foreach($landings as $landing)
                {
                ?>
                <div class="col-xxl-3 col-lg-6">
                    <div class="card overflow-hidden blog-grid-card">
                        <div class="position-relative overflow-hidden">
                            <img src="<?= $baseUrl ?>/public/files/Landing/<?= date("Y", strtotime($landing['FechaCrea'])) ?>/<?= date("m", strtotime($landing['FechaCrea'])) ?>/<?= $landing['IDLanding'] ?>.<?= $landing['ExtensionImg'] ?>" alt="" class="blog-img object-fit-cover">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title"><a href="pages-blog-overview.html" class="text-reset"><?= $landing['Titulo'] ?></a></h5>
                            <p class="text-muted mb-2"><?= $landing['Observacion'] ?></p>
                            <a onclick="abrirModalLanding('<?= $landing['IDLanding'] ?>', '<?= $landing['ControladorRuta'] ?>')" class="link link-primary text-decoration-underline link-offset-1" style="cursor: pointer;">
                                Vista previa <i class="ri-arrow-right-up-line"></i>
                            </a>
                        </div>
                    </div>
                </div><!--end col-->
                <?php
                }
                ?>
            </div><!--end row-->

        </div>
        <!-- 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> &copy; 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-->

<!-- Modal Agregar Landing -->
<div class="modal fade zoomIn" id="agregarLanding" data-bs-backdrop="static" role="dialog" aria-labelledby="exampleagregarLanding" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content" style="border: none;">
			<div class="modal-header bg-sistema p-3">
				<h5 class="modal-title color-white" id="exampleagregarLanding">Agregar Landing</h5>
				<button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form id="formAgregarLanding" class="formularioAgregarLanding" action="<?= $baseUrl ?>/registrar-landing" method="POST" enctype="multipart/form-data" autocomplete="off" accept-charset="utf-8">
				<span class="respuesta"></span>
				<div class="row modal-body">
                    <div class="col-12 my-2 px-3 d-flex align-items-center justify-content-center">
                        <div class="col-9">
                            <input type="file" id="imgReferenciaLanding" class="filepond" name="imgReferenciaLanding" data-max-file-size="100MB" data-max-files="1" />
                        </div>
                    </div>
				    <div class="col-12 px-3 my-2">
                        <div>
                            <label class="form-label" for="txtTituloLanding">Título Landing</label>
                            <input type="text" class="form-control" id="txtTituloLanding" name="txtTituloLanding" placeholder="Ingrese el título del Landing">
                        </div>
                    </div>
				    <div class="col-12 px-3 my-2">
                        <div>
                            <label class="form-label" for="txtRutaLanding">Controlador de Ruta Codeigniter</label>
                            <input type="text" class="form-control" id="txtRutaLanding" name="txtRutaLanding" placeholder="Ingrese el controlador de ruta del Landing">
                        </div>
                    </div>
                    <div class="col-12 px-3 my-2">
						<div>
							<label for="txtObservacionLanding" class="form-label">Observación</label>
							<textarea class="form-control" id="txtObservacionLanding" name="txtObservacionLanding" rows="4"></textarea>
						</div>
					</div>
                    <div class="col-12 px-3 my-2">
                        <div class="col-xxl-12 col-md-12 col-12 bg-sistema color-white p-2 d-flex justify-content-between align-items-center" style="border-radius: 10px; font-size: 15px;">
    					    Parametros
    					    <button type="button" class="btn bg-success p-1 px-2 " onclick="return agregarParametrosLanding('ctnParametrosLanding');" data-tooltip="tooltip" aria-label="Agregar Adjunto">
                                <i class="mdi mdi-plus" style="font-size: 18px; color: #FFF"></i>
                            </button>
    					</div>
    				</div>
					<div class="col-12 px-3 my-2" id="ctnParametrosLanding">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn bg-danger d-flex justify-content-end align-items-center color-white" data-bs-dismiss="modal"><span class="mdi mdi-close-thick me-2" style="font-size: 14px;"></span>Cerrar</button>
					<button type="submit" class="btn bg-success d-flex justify-content-end align-items-center color-white"><i class="mdi mdi-content-save me-2 color-white" style="font-size: 14px;"></i>Guardar</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Modal Abrir Landing Parametros -->
<div class="modal fade zoomIn" id="modalParametrosLanding" data-bs-backdrop="static" role="dialog" aria-labelledby="examplemodalParametrosLanding" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content" style="border: none;">
			<div class="modal-header bg-sistema p-3">
				<h5 class="modal-title color-white" id="examplemodalParametrosLanding">Vista Previa Landing</h5>
				<button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
			    <h3 class="mb-3">Parámetros</h3>
			    <input type="hidden" id="txtControllerRuta_al">
				<div class="col-12 px-3 my-2" id="ctnParametrosLandingVistaPrevia">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn bg-danger d-flex justify-content-end align-items-center color-white" data-bs-dismiss="modal"><span class="mdi mdi-close-thick me-2" style="font-size: 14px;"></span>Cerrar</button>
				<button type="button" class="btn bg-success d-flex justify-content-end align-items-center color-white" id="btnAbrirLandingParametros"><i class="mdi mdi-content-save me-2 color-white" style="font-size: 14px;"></i>Ir a</button>
			</div>
		</div>
	</div>
</div>

<?= $this->section('js'); ?>
<script>
	$(function () {
	    pondIMGLanding = FilePond.create(
            document.querySelector("#imgReferenciaLanding"), {
                labelIdle: 'Arrastre y suelte la imagen asociada al landing o <span class="filepond--label-action">explore</span>',
                allowMultiple: false,
                instantUpload: true,
                allowProcess: true,
                acceptedFileTypes: ['image/*'],
                imagePreviewHeight: 170,  // Definir el alto de la previsualización
                imageCropAspectRatio: '1:1',  // Mantener las imágenes en un ratio 1:1 (cuadradas) si lo deseas
                onaddfile: (file) => {
                    return true; // Permitir el archivo
                },
                onremovefile: (file) => {
                    console.log("Archivo eliminado:", file);
                }
            }
        );
	});
</script>
<?php $this->endSection(); ?>

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