<?php
/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\Personal $persona
 */
?>

<div class="container mt-4 mb-4">
    <div class="row">
        <div class="col-md-10 offset-md-1">
            <!-- Alerta de permiso -->
            <?php if (!$this->Permisos->tiene('Personal', 'add')): ?>
                <div class="alert alert-danger" role="alert">
                    <i class="fas fa-lock"></i> No tienes permisos para registrar personal.
                </div>
            <?php else: ?>
                <?= $this->Form->create($persona, ['class' => 'row g-3']) ?>

                <!-- Título -->
                <div class="col-12 mb-4">
                    <h3 class="text-info"><i class="fas fa-user-tie"></i> Registrar Nuevo Personal</h3>
                </div>

                <!-- Nombre -->
                <div class="col-md-6 mb-3">
                    <?= $this->Form->control('nombre', [
                        'label'       => 'Nombre',
                        'class'       => 'form-control',
                        'placeholder' => 'Ej: Juan',
                        'required'    => true
                    ]) ?>
                </div>

                <!-- Apellido -->
                <div class="col-md-6 mb-3">
                    <?= $this->Form->control('apellido', [
                        'label'       => 'Apellido',
                        'class'       => 'form-control',
                        'placeholder' => 'Ej: Pérez',
                        'required'    => true
                    ]) ?>
                </div>

                <!-- Cargo -->
                <div class="col-md-6 mb-3">
                    <?= $this->Form->control('cargo', [
                        'label'       => 'Cargo',
                        'class'       => 'form-control',
                        'placeholder' => 'Ej: Desarrollador Backend',
                        'required'    => true
                    ]) ?>
                </div>

                <!-- Teléfono -->
                <div class="col-md-6 mb-3">
                    <?= $this->Form->control('telefono', [
                        'label'       => 'Teléfono',
                        'class'       => 'form-control',
                        'placeholder' => 'Ej: +51 999 888 777',
                        'type'        => 'tel'
                    ]) ?>
                </div>

                <!-- Email -->
                <div class="col-md-6 mb-3">
                    <?= $this->Form->control('email', [
                        'label'       => 'Correo Electrónico',
                        'class'       => 'form-control',
                        'placeholder' => 'Ej: personal@ejemplo.com',
                        'type'        => 'email'
                    ]) ?>
                </div>

                <!-- Porcentaje de pago -->
                <div class="col-md-6 mb-3">
                    <?= $this->Form->control('porcentaje_pago', [
                        'label'       => 'Porcentaje de Pago (%)',
                        'class'       => 'form-control',
                        'placeholder' => 'Ej: 20',
                        'type'        => 'number',
                        'step'        => '0.01',
                        'min'         => '0',
                        'max'         => '100'
                    ]) ?>
                </div>

                <!-- Botones -->
                <div class="col-12 text-center">
                    <?= $this->Form->button(__('Guardar Personal'), ['class' => 'btn btn-info', 'id' => 'submitButton']) ?>
                    <?= $this->Html->link(__('Cancelar'), ['action' => 'index'], ['class' => 'btn btn-secondary ms-2']) ?>
                </div>

                <?= $this->Form->end() ?>
            <?php endif; ?>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const form = document.querySelector("form");
        const btnGuardar = document.getElementById("submitButton");

        if (form && btnGuardar) {
            form.addEventListener("submit", function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    return;
                }
                btnGuardar.disabled = true;
                btnGuardar.innerText = "Guardando...";
            });
        }
    });
</script>
