<?= $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 d-flex">
				<div class="d-flex justify-content-end align-items-centerm-0 p-0 my-4 px-2">
				    <button type="submit" class="btn bg-success color-white px-2 py-1 mx-1" data-tooltip="tooltip" title="Registrar Landing" >
						<i class="mdi mdi-content-save m-0" style="font-size: 24px;"></i>
					</button>
					<a href="<?= $baseUrl.'/'.$previo ?>" class="btn bg-red-verisure color-white px-2 py-1 mx-1" data-tooltip="tooltip" title="Volver">
                        <i class="mdi mdi-arrow-left-circle color-white" style="font-size: 24px;"></i>
                    </a>
				</div>
			</div>
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body d-flex">
                            <div class="col-12 col-md-7 px-3">
                                <div class="mb-3">
                                    <label class="form-label" for="txtTituloLanding">Título Landing</label>
                                    <input type="text" class="form-control" id="txtTituloLanding" placeholder="Ingrese el título del Landing">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="txtRutaLanding">Controlador de Ruta Codeigniter</label>
                                    <input type="text" class="form-control" id="txtRutaLanding" placeholder="Ingrese el controlador de ruta del Landing">
                                </div>
                                <div class="mb-3">
                                
                                </div>
                            </div>
                            <div class="col-12 col-md-5 px-3 d-flex  align-items-center">
                                <div class="col-12">
                                    <label class="form-label" for="imgReferenciaLanding">Imagen de referencia</label>
                                    <input type="file" id="imgReferenciaLanding" class="filepond" name="imgReferenciaLanding" data-max-file-size="100MB" data-max-files="1" />
                                </div>
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->

                </div>
                <!-- end col -->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Privacy</h5>
                        </div>
                        <div class="card-body">
                            <div>
                                <label for="choices-privacy-status-input" class="form-label">Status</label>
                                <div class="choices" data-type="select-one" tabindex="0" role="listbox" aria-label="Status" aria-haspopup="true" aria-expanded="false"><div class="choices__inner"><select class="form-select choices__input" data-choices="" data-choices-search-false="" id="choices-privacy-status-input" hidden="" tabindex="-1" data-choice="active">
                                    <option value="Private" selected="">Private</option>
                                    <option value="Team">Team</option>
                                    <option value="Public">Public</option>
                                </select><div class="choices__list choices__list--single"><div class="choices__item choices__item--selectable" data-item="" data-id="1" data-value="Private" aria-selected="true" role="option">Private</div></div></div><div class="choices__list choices__list--dropdown" aria-expanded="false"><div class="choices__list" role="listbox"><div id="choices--choices-privacy-status-input-item-choice-1" class="choices__item choices__item--choice is-selected choices__item--selectable is-highlighted" role="option" data-choice="" data-id="1" data-value="Private" data-select-text="Press to select" data-choice-selectable="" aria-selected="true">Private</div><div id="choices--choices-privacy-status-input-item-choice-3" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="3" data-value="Public" data-select-text="Press to select" data-choice-selectable="">Public</div><div id="choices--choices-privacy-status-input-item-choice-2" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="2" data-value="Team" data-select-text="Press to select" data-choice-selectable="">Team</div></div></div></div>
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Tags</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="choices-categories-input" class="form-label">Categories</label>
                                <div class="choices" data-type="select-one" tabindex="0" role="listbox" aria-label="Categories" aria-haspopup="true" aria-expanded="false"><div class="choices__inner"><select class="form-select choices__input" data-choices="" data-choices-search-false="" id="choices-categories-input" hidden="" tabindex="-1" data-choice="active">
                                    <option value="Designing" selected="">Designing</option>
                                    <option value="Development">Development</option>
                                </select><div class="choices__list choices__list--single"><div class="choices__item choices__item--selectable" data-item="" data-id="1" data-value="Designing" aria-selected="true" role="option">Designing</div></div></div><div class="choices__list choices__list--dropdown" aria-expanded="false"><div class="choices__list" role="listbox"><div id="choices--choices-categories-input-item-choice-1" class="choices__item choices__item--choice is-selected choices__item--selectable is-highlighted" role="option" data-choice="" data-id="1" data-value="Designing" data-select-text="Press to select" data-choice-selectable="" aria-selected="true">Designing</div><div id="choices--choices-categories-input-item-choice-2" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="2" data-value="Development" data-select-text="Press to select" data-choice-selectable="">Development</div></div></div></div>
                            </div>

                            <div>
                                <label for="choices-text-input" class="form-label">Skills</label>
                                <div class="choices" data-type="text"><div class="choices__inner"><input class="form-control choices__input" id="choices-text-input" data-choices="" data-choices-limit="Required Limit" placeholder="Enter Skills" type="text" value="UI/UX, Figma, HTML, CSS, Javascript, C#, Nodejs" hidden="" tabindex="-1" data-choice="active"><div class="choices__list choices__list--multiple"><div class="choices__item choices__item--selectable" data-item="" data-id="1" data-value="UI/UX">UI/UX</div><div class="choices__item choices__item--selectable" data-item="" data-id="2" data-value=" Figma"> Figma</div><div class="choices__item choices__item--selectable" data-item="" data-id="3" data-value=" HTML"> HTML</div><div class="choices__item choices__item--selectable" data-item="" data-id="4" data-value=" CSS"> CSS</div><div class="choices__item choices__item--selectable" data-item="" data-id="5" data-value=" Javascript"> Javascript</div><div class="choices__item choices__item--selectable" data-item="" data-id="6" data-value=" C#"> C#</div><div class="choices__item choices__item--selectable" data-item="" data-id="7" data-value=" Nodejs"> Nodejs</div></div><input type="search" class="choices__input choices__input--cloned" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" aria-label="Skills" style="min-width: 1ch; width: 1ch;"></div><div class="choices__list choices__list--dropdown" aria-expanded="false"><div class="choices__list" aria-multiselectable="true" role="listbox"></div></div></div>
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Members</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="choices-lead-input" class="form-label">Team Lead</label>
                                <div class="choices" data-type="select-one" tabindex="0" role="listbox" aria-label="Team Lead" aria-haspopup="true" aria-expanded="false"><div class="choices__inner"><select class="form-select choices__input" data-choices="" data-choices-search-false="" id="choices-lead-input" hidden="" tabindex="-1" data-choice="active">
                                    <option value="Brent Gonzalez" selected="">Brent Gonzalez</option>
                                    <option value="Darline Williams">Darline Williams</option>
                                    <option value="Sylvia Wright">Sylvia Wright</option>
                                    <option value="Ellen Smith">Ellen Smith</option>
                                    <option value="Jeffrey Salazar">Jeffrey Salazar</option>
                                    <option value="Mark Williams">Mark Williams</option>
                                </select><div class="choices__list choices__list--single"><div class="choices__item choices__item--selectable" data-item="" data-id="1" data-value="Brent Gonzalez" aria-selected="true" role="option">Brent Gonzalez</div></div></div><div class="choices__list choices__list--dropdown" aria-expanded="false"><div class="choices__list" role="listbox"><div id="choices--choices-lead-input-item-choice-1" class="choices__item choices__item--choice is-selected choices__item--selectable is-highlighted" role="option" data-choice="" data-id="1" data-value="Brent Gonzalez" data-select-text="Press to select" data-choice-selectable="" aria-selected="true">Brent Gonzalez</div><div id="choices--choices-lead-input-item-choice-2" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="2" data-value="Darline Williams" data-select-text="Press to select" data-choice-selectable="">Darline Williams</div><div id="choices--choices-lead-input-item-choice-4" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="4" data-value="Ellen Smith" data-select-text="Press to select" data-choice-selectable="">Ellen Smith</div><div id="choices--choices-lead-input-item-choice-5" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="5" data-value="Jeffrey Salazar" data-select-text="Press to select" data-choice-selectable="">Jeffrey Salazar</div><div id="choices--choices-lead-input-item-choice-6" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="6" data-value="Mark Williams" data-select-text="Press to select" data-choice-selectable="">Mark Williams</div><div id="choices--choices-lead-input-item-choice-3" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="3" data-value="Sylvia Wright" data-select-text="Press to select" data-choice-selectable="">Sylvia Wright</div></div></div></div>
                            </div>

                            <div>
                                <label class="form-label">Team Members</label>
                                <div class="avatar-group">
                                    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" aria-label="Brent Gonzalez" data-bs-original-title="Brent Gonzalez">
                                        <div class="avatar-xs">
                                            <img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle img-fluid">
                                        </div>
                                    </a>
                                    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" data-bs-original-title="Sylvia Wright">
                                        <div class="avatar-xs">
                                            <div class="avatar-title rounded-circle bg-secondary">
                                                S
                                            </div>
                                        </div>
                                    </a>
                                    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" aria-label="Ellen Smith" data-bs-original-title="Ellen Smith">
                                        <div class="avatar-xs">
                                            <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle img-fluid">
                                        </div>
                                    </a>
                                    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" data-bs-original-title="Add Members">
                                        <div class="avatar-xs" data-bs-toggle="modal" data-bs-target="#inviteMembersModal">
                                            <div class="avatar-title fs-16 rounded-circle bg-light border-dashed border text-primary">
                                                +
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->
                </div>
                <!-- end col -->
            </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-->

<?= $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(); ?>