@extends('layouts.app', [
    'namePage' => 'Table List',
    'class' => 'sidebar-mini',
    'activePage' => 'table',
  ])
<style>
 .panel-header {
        height: 260px;
        padding-top: 30px !important;
        padding-bottom: 30px !importan;
        background: #1099bb !important;
        background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
        position: relative;
        overflow: hidden;
    }
    
    .panel-header-sm {
        height: 70px !important;
    }
    .form {
        width: 80px !important;
        margin: 50 0;
        display: inline-block;
    }




/* Estilos para la lista de correos */
#email-list {
    max-width: 100%; /* Ajusta este valor según sea necesario */
    margin: auto;
}

.email-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background: #f5f5f5;
    padding: 21px;
    border-radius: 4px;
}

.email-checkbox {
    margin-right: 10px;
}

.email-input, .time-input {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    margin-right: 5px;
    outline: none;
}

.email-input {
    flex-grow: 1;
}

.time-input-group {
    display: flex;
    align-items: center;
}

.time-input {
    width: 50px; /* Ajustar ancho si es necesario */
    text-align: center;
}

.time-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 5px;
}

.time-change {
    background: none;
    border: none;
    cursor: pointer;
    width: 25px; /* Ajustar ancho si es necesario */
}

.time-up, .time-down {
    background: white;
    color: black;
    padding: 0;
    line-height: 1; /* Asegura que los botones no tengan espacio extra */
    border: 1px solid #ccc;
}

.time-up {
    border-radius: 3px 3px 0 0;
    border-bottom: none; /* Quita el borde entre los botones */
}

.time-down {
    border-radius: 0 0 3px 3px;
    border-top: none; /* Quita el borde entre los botones */
}

.remove-email, .add-email {
    padding: 5px 10px;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    border-radius: 4px;
}


.edit-email, .add-email {
    padding: 5px 10px;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    border-radius: 4px;
	background-color: #4CAF50;
}



.remove-email {
    background-color: #ff4d4d;
}

.add-email {
    background-color: #4CAF50;
    margin-right: 10px;
}

/* Alinea el separador de los inputs de tiempo */
.separator {
    margin: 0 5px;
    line-height: 1;
}

/* Asegúrate de que todos los botones tengan un tamaño uniforme */
button {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-primary{
    background:#1099bb !important;
}
</style>
@section('content')
<div class="panel-header panel-header-sm"></div>

<div class="container mt-5 mb-5">
    <div class="row">
        @if (session('success'))
        <div class="col-12">
            <div class="alert alert-success" role="alert">
                {{ session('success') }}
            </div>
        </div>
        @endif
    </div>
</div>

<div class="content">
    <div class="d-flex justify-content-between mb-4">
        <button class="btn btn-primary" style="background:#EAE012 !important;" onclick="window.location.href='{{ route("mapa") }}'">
            Mapa
        </button>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title text-center"><b>Horarios de Planificación Correo Envio</b></h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('save.email.schedules') }}">
    @csrf
    <div id="email-list" class="container">
        @foreach ($emailSchedules as $schedule)
        <!-- Email Schedule Item -->
        <div class="email-item row mb-3 align-items-center">
            <!-- Estado -->
            <div class="col-12 col-md-2 text-center">
                <label style="margin-top:20px !important;">
                    <b style="margin-top:20px !important;">Estado:</b>
                </label>
                <!-- Campo oculto para garantizar que siempre se envíe un valor "off" si no está marcado -->
                <input type="hidden" name="selected[{{ $loop->index }}]" value="off">
                <input type="checkbox" value="on" name="selected[{{ $loop->index }}]" class="form-check-input" {{ $schedule->enabled == 1 ? 'checked' : '' }}>
            </div>
            <!-- Email -->
            <div class="col-12 col-md-4">
                <label><b>Email:</b></label>
                <input type="email" name="emails[]" class="form-control email-input" value="{{ $schedule->email }}" placeholder="email@prueba.com" required>
            </div>
            <!-- Tiempo -->
            <div class="col-12 col-md-4">
                <label><b>Tiempo:</b></label>
                <div class="d-flex">
                    <input type="number" class="form-control text-center hour-input me-2" name="hours[]" value="{{ $schedule->hour }}" placeholder="HH" required>
                    <span class="separator">:</span>
                    <input type="number" class="form-control text-center minute-input ms-2" name="minutes[]" value="{{ $schedule->minute }}" placeholder="MM" required>
                </div>
            </div>
            <!-- Eliminar -->
            <div class="col-12 col-md-2 text-center">
                <button type="button" class="btn btn-danger remove-email">X</button>
            </div>
        </div>
        @endforeach
    </div>
    <!-- Añadir nuevo registro -->
    <div class="text-start mt-3">
        <button type="button" id="add-email" class="btn btn-success">Añadir Registro</button>
    </div>
    <!-- Guardar -->
    <div class="text-end mt-3">
        <button type="submit" class="btn btn-primary" style="background:#EAE012 !important;">Guardar horarios</button>
    </div>
</form>

                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Cambios exclusivos para teléfonos */
    /* Cambios exclusivos para teléfonos */
@media (max-width: 767px) {
    .email-item {
        flex-direction: column; /* Cambia la disposición a vertical */
        text-align: left; /* Asegura alineación a la izquierda */
    }
    .email-item > div {
        margin-bottom: 15px; /* Espacio entre cada sección */
    }
    .email-item > div:last-child {
        margin-bottom: 0; /* Eliminar espacio extra del último elemento */
    }

    /* Ajustar el bloque de Estado */
    .email-item .form-check-input {
        display: block;
        margin: 0 auto; /* Centra el checkbox debajo del texto */
    }
    .email-item label {
        display: block;
        text-align: center; /* Ajusta el texto para el bloque de checkbox */
        margin-bottom: 5px; /* Añade un pequeño espacio entre el texto y el checkbox */
    }

    /* Inputs */
    .email-item .form-control {
        width: 100%; /* Inputs ocupan todo el ancho */
    }
    .email-item .d-flex {
        flex-direction: column; /* Inputs de tiempo apilados */
    }
    .email-item .hour-input,
    .email-item .minute-input {
        margin: 5px 0; /* Separación entre los inputs */
    }
}
</style>

<script>
    // Lógica de JavaScript no cambia para escritorio ni móvil
    document.getElementById('add-email').addEventListener('click', function () {
        const emailList = document.getElementById('email-list');
        const newEmailItem = `
        <div class="email-item row mb-3 align-items-center">
            <!-- Estado -->
            <div class="col-12 col-md-2 text-center">
                <label><b>Estado:</b></label>
                <input type="checkbox" name="selected[]" class="form-check-input">
            </div>
            <!-- Email -->
            <div class="col-12 col-md-4">
                <label><b>Email:</b></label>
                <input type="email" name="emails[]" class="form-control email-input" placeholder="email@prueba.com" required>
            </div>
            <!-- Tiempo -->
            <div class="col-12 col-md-4">
                <label><b>Tiempo:</b></label>
                <div class="d-flex">
                    <input type="number" class="form-control text-center hour-input me-2" name="hours[]" placeholder="HH" required>
                    <span class="separator">:</span>
                    <input type="number" class="form-control text-center minute-input ms-2" name="minutes[]" placeholder="MM" required>
                </div>
            </div>
            <!-- Eliminar -->
            <div class="col-12 col-md-2 text-center">
                <button type="button" class="btn btn-danger remove-email">X</button>
            </div>
        </div>`;
        emailList.insertAdjacentHTML('beforeend', newEmailItem);

        const removeButtons = document.querySelectorAll('.remove-email');
        removeButtons.forEach(button => {
            button.addEventListener('click', function () {
                this.closest('.email-item').remove();
            });
        });
    });
    


</script>








<script>
document.addEventListener('DOMContentLoaded', function () {
    const emailList = document.getElementById('email-list');

    // Agregar una nueva fila
   /* document.getElementById('add-email').addEventListener('click', function () {
        const newEmailItem = `
        <div class="email-item row mb-3 align-items-center">
            <div class="col-12 col-md-2 text-center">
                <label><b>Estado:</b></label>
                <input type="checkbox" name="selected[]" class="form-check-input">
            </div>
            <div class="col-12 col-md-4">
                <label><b>Email:</b></label>
                <input type="email" name="emails[]" class="form-control email-input" placeholder="email@prueba.com">
            </div>
            <div class="col-12 col-md-4">
                <label><b>Tiempo:</b></label>
                <div class="d-flex">
                    <input type="text" class="form-control text-center hour-input me-2" name="hours[]" placeholder="HH">
                    <span class="separator">:</span>
                    <input type="text" class="form-control text-center minute-input ms-2" name="minutes[]" placeholder="MM">
                </div>
            </div>
            <div class="col-12 col-md-2 text-center">
                <button type="button" class="btn btn-warning edit-email">Editar</button>
                <button type="button" class="btn btn-danger remove-email">X</button>
            </div>
        </div>`;
        emailList.insertAdjacentHTML('beforeend', newEmailItem);
    });*/

    // Evento delegación para remover, editar y actualizar horarios
    emailList.addEventListener('click', function (e) {
        const target = e.target;

        if (target.classList.contains('remove-email')) {
            // Eliminar fila
            target.closest('.email-item').remove();
        }

        if (target.classList.contains('edit-email')) {
            // Activar edición
            const emailRow = target.closest('.email-item');
            const emailInput = emailRow.querySelector('.email-input');
            const hourInput = emailRow.querySelector('.hour-input');
            const minuteInput = emailRow.querySelector('.minute-input');

            emailInput.disabled = !emailInput.disabled;
            hourInput.disabled = !hourInput.disabled;
            minuteInput.disabled = !minuteInput.disabled;

            target.textContent = emailInput.disabled ? 'Editar' : 'Guardar';
        }
    });
});
</script>

@endsection