@extends('layout.app')

@section('content')
    <section class="content-header">
        <h1>
            {{ isset($schedule) ? 'Editar programación' : 'Crear programación' }}
        </h1>
    </section>

    <section class="content">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="row">
            <div class="col-md-6">
                <div class="box box-default">
                    <form method="POST"
                        action="{{ isset($schedule) ? route('schedule.update', $schedule->schedule_id) : route('schedule.store') }}">
                        @csrf
                        @if (isset($schedule))
                            @method('PUT')
                        @endif

                        <div class="box-body">
                            <div class="form-group">
                                <label>Nombre de la programación</label>
                                <input type="text" name="name" class="form-control"
                                    value="{{ isset($schedule) ? $schedule->name : '' }}"
                                    placeholder="Ingrese un nombre para esta programación">
                            </div>

                            <div class="form-group">
                                <label>Canal de Alimentación</label>
                                <select name="feed_channel_id" id="feed_channel_id" class="form-control">
                                    <option value="">Seleccionar canal RSS</option>
                                    @foreach ($channels as $channel)
                                        <option value="{{ $channel->feed_channel_id }}"
                                            {{ isset($schedule) && $schedule->feed_channel_id == $channel->feed_channel_id ? 'selected' : '' }}>
                                            {{ $channel->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label>Tipo de programación</label>
                                <select name="type" id="scheduleType" class="form-control">
                                    <option value="one-time"
                                        {{ isset($schedule) && $schedule->type == 'one-time' ? 'selected' : '' }}>
                                        Publicación única</option>
                                    <option value="recurring"
                                        {{ isset($schedule) && $schedule->type == 'recurring' ? 'selected' : '' }}>
                                        Recurrente</option>
                                </select>
                            </div>

                            <div id="recurringOptions"
                                style="display: {{ isset($schedule) && $schedule->type == 'recurring' ? 'block' : 'none' }}">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Hora general</label>
                                            <input type="time" id="general_time" class="form-control"
                                                placeholder="Establecer hora para todos los días">
                                        </div>
                                        <div class="col-md-6" style="padding-top: 24px;">
                                            <div class="input-group-btn">
                                                <button type="button" id="apply_general_time" class="btn btn-danger btn-block">Aplicar a
                                                    los días seleccionados</button>
                                            </div>
                                        </div>
                                    </div>
                                    <small class="text-muted">Establezca una hora y aplíquela a los días que desea programar</small>
                                </div>

                                <div class="form-group">
                                    <label>Días de la semana y hora:</label>
                                    <button type="button" id="select_all_days" class="btn btn-xs btn-danger mb-2 pull-right">Seleccionar todos los días</button>
                                    @php
                                        $selectedDays =
                                            isset($schedule) && isset($schedule->days)
                                                ? json_decode($schedule->days)
                                                : [];
                                        $dayTimes =
                                            isset($schedule) && isset($schedule->day_times)
                                                ? json_decode($schedule->day_times, true)
                                                : [];
                                    @endphp

                                    <div class="day-selection-container" style="margin-bottom: 15px;">
                                        <div class="card"
                                            style="border: 1px solid #ddd; border-radius: 5px; padding: 15px; margin-bottom: 15px; background-color: #f9f9f9;">
                                            <h4
                                                style="margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #555; border-bottom: 1px solid #eee; padding-bottom: 8px;">
                                                Entre semana                                     
                                            </h4>
                                            <div class="weekdays"
                                                style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px;">
                                                <div class="day-item"
                                                    style="background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; min-width: 150px; ">
                                                    <div style="margin-bottom: 8px; font-weight: bold;">
                                                        <input type="checkbox" id="monday-check" name="days[]"
                                                            value="monday" class="day-checkbox"
                                                            {{ in_array('monday', $selectedDays) ? 'checked' : '' }}>
                                                        <label for="monday-check">Lunes</label>
                                                    </div>
                                                    <input type="time" name="day_times[monday]"
                                                        class="form-control day-time" style="width: 100%;"
                                                        value="{{ isset($dayTimes['monday']) ? $dayTimes['monday'] : '' }}"
                                                        {{ !in_array('monday', $selectedDays) ? 'disabled' : '' }}>
                                                </div>

                                                <div class="day-item"
                                                    style="background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; min-width: 150px; ">
                                                    <div style="margin-bottom: 8px; font-weight: bold;">
                                                        <input type="checkbox" id="tuesday-check" name="days[]"
                                                            value="tuesday" class="day-checkbox"
                                                            {{ in_array('tuesday', $selectedDays) ? 'checked' : '' }}>
                                                        <label for="tuesday-check">Martes</label>
                                                    </div>
                                                    <input type="time" name="day_times[tuesday]"
                                                        class="form-control day-time" style="width: 100%;"
                                                        value="{{ isset($dayTimes['tuesday']) ? $dayTimes['tuesday'] : '' }}"
                                                        {{ !in_array('tuesday', $selectedDays) ? 'disabled' : '' }}>
                                                </div>

                                                <div class="day-item"
                                                    style="background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; min-width: 150px; ">
                                                    <div style="margin-bottom: 8px; font-weight: bold;">
                                                        <input type="checkbox" id="wednesday-check" name="days[]"
                                                            value="wednesday" class="day-checkbox"
                                                            {{ in_array('wednesday', $selectedDays) ? 'checked' : '' }}>
                                                        <label for="wednesday-check">Miércoles</label>
                                                    </div>
                                                    <input type="time" name="day_times[wednesday]"
                                                        class="form-control day-time" style="width: 100%;"
                                                        value="{{ isset($dayTimes['wednesday']) ? $dayTimes['wednesday'] : '' }}"
                                                        {{ !in_array('wednesday', $selectedDays) ? 'disabled' : '' }}>
                                                </div>

                                                <div class="day-item"
                                                    style="background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; min-width: 150px; ">
                                                    <div style="margin-bottom: 8px; font-weight: bold;">
                                                        <input type="checkbox" id="thursday-check" name="days[]"
                                                            value="thursday" class="day-checkbox"
                                                            {{ in_array('thursday', $selectedDays) ? 'checked' : '' }}>
                                                        <label for="thursday-check">Jueves</label>
                                                    </div>
                                                    <input type="time" name="day_times[thursday]"
                                                        class="form-control day-time" style="width: 100%;"
                                                        value="{{ isset($dayTimes['thursday']) ? $dayTimes['thursday'] : '' }}"
                                                        {{ !in_array('thursday', $selectedDays) ? 'disabled' : '' }}>
                                                </div>

                                                <div class="day-item"
                                                    style="background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; min-width: 150px; ">
                                                    <div style="margin-bottom: 8px; font-weight: bold;">
                                                        <input type="checkbox" id="friday-check" name="days[]"
                                                            value="friday" class="day-checkbox"
                                                            {{ in_array('friday', $selectedDays) ? 'checked' : '' }}>
                                                        <label for="friday-check">Viernes</label>
                                                    </div>
                                                    <input type="time" name="day_times[friday]"
                                                        class="form-control day-time" style="width: 100%;"
                                                        value="{{ isset($dayTimes['friday']) ? $dayTimes['friday'] : '' }}"
                                                        {{ !in_array('friday', $selectedDays) ? 'disabled' : '' }}>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="card"
                                            style="border: 1px solid #ddd; border-radius: 5px; padding: 15px; background-color: #f9f9f9;">
                                            <h4
                                                style="margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #555; border-bottom: 1px solid #eee; padding-bottom: 8px;">
                                                Fin de semana</h4>
                                            <div class="weekend" style="display: flex; flex-wrap: wrap; gap: 10px;">
                                                <div class="day-item"
                                                    style="background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; min-width: 150px; ">
                                                    <div style="margin-bottom: 8px; font-weight: bold;">
                                                        <input type="checkbox" id="saturday-check" name="days[]"
                                                            value="saturday" class="day-checkbox"
                                                            {{ in_array('saturday', $selectedDays) ? 'checked' : '' }}>
                                                        <label for="saturday-check">Sábado</label>
                                                    </div>
                                                    <input type="time" name="day_times[saturday]"
                                                        class="form-control day-time" style="width: 100%;"
                                                        value="{{ isset($dayTimes['saturday']) ? $dayTimes['saturday'] : '' }}"
                                                        {{ !in_array('saturday', $selectedDays) ? 'disabled' : '' }}>
                                                </div>

                                                <div class="day-item"
                                                    style="background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; min-width: 150px; ">
                                                    <div style="margin-bottom: 8px; font-weight: bold;">
                                                        <input type="checkbox" id="sunday-check" name="days[]"
                                                            value="sunday" class="day-checkbox"
                                                            {{ in_array('sunday', $selectedDays) ? 'checked' : '' }}>
                                                        <label for="sunday-check">Domingo</label>
                                                    </div>
                                                    <input type="time" name="day_times[sunday]"
                                                        class="form-control day-time" style="width: 100%;"
                                                        value="{{ isset($dayTimes['sunday']) ? $dayTimes['sunday'] : '' }}"
                                                        {{ !in_array('sunday', $selectedDays) ? 'disabled' : '' }}>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Fecha de Inicio</label>
                                        <input type="date" name="date_init" class="form-control"
                                            value="{{ isset($schedule) && $schedule->date_init ? date('Y-m-d', strtotime($schedule->date_init)) : '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6" id="endDateContainer"
                                    style="display: {{ isset($schedule) && $schedule->type == 'recurring' ? 'block' : 'none' }}">
                                    <div class="form-group">
                                        <label>Fecha de Finalización</label>
                                        <input type="date" name="date_finish" class="form-control"
                                            value="{{ isset($schedule) && $schedule->date_finish ? date('Y-m-d', strtotime($schedule->date_finish)) : '' }}">
                                    </div>
                                </div>
                            </div>

                            <!-- Campo de tiempo para publicación única -->
                            <div id="oneTimeOptions"
                                style="display: {{ isset($schedule) && $schedule->type == 'recurring' ? 'none' : 'block' }}">
                                <div class="form-group">
                                    <label>Hora</label>
                                    <input type="time" name="time" class="form-control"
                                        value="{{ isset($schedule) ? $schedule->time : '' }}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Canales Sociales</label>
                                <button type="button" id="select_all_channels" class="btn btn-xs btn-danger mb-2 pull-right">Seleccionar todos los canales</button>
                                <div id="social-channels-container" class="social-channels-checkbox"
                                    style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 10px;">
                                </div>
                            </div>
                        </div>

                        <div class="box-footer">
                            <div class="btn-group pull-right" role="group" aria-label="Basic example">
                                <a href="{{ route('schedule.list') }}" class="btn btn-default">Cancelar</a>
                                <button type="submit" class="btn btn-danger">
                                    {{ isset($schedule) ? 'Actualizar' : 'Guardar' }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
        <script>
            $(document).ready(function() {
                // Agregar indicadores de campo requerido con estilo
                $('input[name="name"], select[name="feed_channel_id"], input[name="date_init"]').each(function() {
                    const labelText = $(this).closest('.form-group').find('label').text();
                    $(this).closest('.form-group').find('label')
                        .html(labelText +
                            ' <span class="text-danger" style="font-size: 0.85em; font-weight: normal;">(requerido)</span>'
                            );
                });

                // Para campos condicionales (fecha fin)
                $('input[name="date_finish"]').closest('.form-group').find('label')
                    .append(
                        ' <span class="text-danger date-finish-required" style="font-size: 0.85em; font-weight: normal; display: none;">(requerido)</span>'
                        );

                // Cargar canales sociales según el canal de alimentación seleccionado
                function loadSocialChannels(feedChannelId) {
                    if (feedChannelId) {
                        $.ajax({
                            url: '/api/feed-channels/' + feedChannelId + '/social-channels',
                            type: 'GET',
                            dataType: 'json',
                            beforeSend: function() {
                                // Mostrar indicador de carga
                                $('#social-channels-container').html(
                                    '<div class="loading-indicator"><i class="fa fa-spinner fa-spin"></i> Cargando canales sociales...</div>'
                                    );
                            },
                            success: function(response) {
                                // Limpiar contenedor
                                $('#social-channels-container').empty();

                                if (response.length === 0) {
                                    $('#social-channels-container').html(
                                        '<div class="alert alert-info">No hay canales sociales disponibles para este canal de alimentación</div>'
                                        );
                                    return;
                                }

                                // Obtener los IDs de canales sociales ya seleccionados (para edición)
                                let selectedChannels = [];
                                @if (isset($schedule) && isset($schedule->social_channel_ids))
                                    selectedChannels = @json(json_decode($schedule->social_channel_ids, true), true);
                                @endif

                                // Agregar checkboxes para cada canal social
                                $.each(response, function(index, channel) {
                                    console.log(selectedChannels);
                                    console.log(channel.social_channel_id);
                                    channel.social_channel_id = String(channel.social_channel_id);
                                    const isChecked = selectedChannels.includes(channel
                                        .social_channel_id) ? 'checked' : '';
                                    console.log(isChecked);

                                    const checkbox = `
                                        <div class="checkbox-item" style="display: flex; align-items: center; background-color: #f8f9fa; padding: 8px 15px; border-radius: 6px; border: 1px solid #dee2e6;">
                                            <input type="checkbox" id="social_channel_${channel.social_channel_id}" name="social_channel_ids[]"
                                                value="${channel.social_channel_id}" style="margin-right: 8px;" ${isChecked}>
                                            <label for="social_channel_${channel.social_channel_id}" style="margin-bottom: 0; font-weight: normal;">${channel.name} | ${channel.social_network_name}</label>
                                        </div>
                                    `;

                                    $('#social-channels-container').append(checkbox);
                                });
                            },
                            error: function() {
                                $('#social-channels-container').html(
                                    '<div class="alert alert-danger">Error al cargar los canales sociales</div>'
                                    );
                            }
                        });
                    } else {
                        // Si no hay canal seleccionado, mostrar mensaje
                        $('#social-channels-container').html(
                            '<div class="alert alert-warning">Seleccione un canal de alimentación para ver los canales sociales disponibles</div>'
                            );
                    }
                }

                // Evento para cambio en el select de feed channel
                $('#feed_channel_id').change(function() {
                    const feedChannelId = $(this).val();
                    loadSocialChannels(feedChannelId);
                });

                // Cargar canales sociales al iniciar si ya hay un canal seleccionado
                const initialFeedChannelId = $('#feed_channel_id').val();
                if (initialFeedChannelId) {
                    loadSocialChannels(initialFeedChannelId);
                }

                $('#scheduleType').change(function() {
                    if ($(this).val() === 'recurring') {
                        $('#recurringOptions').show();
                        $('#oneTimeOptions').hide();
                        $('#endDateContainer').show();
                        $('.date-finish-required').show();
                    } else {
                        $('#recurringOptions').hide();
                        $('#oneTimeOptions').show();
                        $('#endDateContainer').hide();
                        $('.date-finish-required').hide();
                    }
                });

                // Inicializar estado según valor inicial
                $('#scheduleType').trigger('change');

                // Función para aplicar el tiempo general a los días seleccionados
                $('#apply_general_time').click(function() {
                    const generalTime = $('#general_time').val();
                    if (generalTime) {
                        $('.day-checkbox:checked').each(function() {
                            const timeInput = $(this).closest('.day-item').find('.day-time');
                            timeInput.val(generalTime);
                            timeInput.removeClass('is-invalid');
                        });
                    } else {
                        alert('Por favor, ingrese una hora general primero');
                    }
                });

                // Corrección para la habilitación/deshabilitación de los campos de hora por día
                $('.day-checkbox').change(function() {
                    // Busca el input de tiempo en el mismo contenedor day-item
                    var dayTimeInput = $(this).closest('.day-item').find('.day-time');
                    if ($(this).is(':checked')) {
                        dayTimeInput.prop('disabled', false);
                    } else {
                        dayTimeInput.prop('disabled', true);
                    }
                });

                // Asegurar que el estado inicial es correcto 
                $('.day-checkbox').each(function() {
                    var dayTimeInput = $(this).closest('.day-item').find('.day-time');
                    dayTimeInput.prop('disabled', !$(this).is(':checked'));
                });

                // Limpiar validaciones en tiempo real
                $('input, select').on('input change', function() {
                    $(this).removeClass('is-invalid');
                    if ($(this).hasClass('day-time') && $(this).val()) {
                        $(this).removeClass('is-invalid');
                    }
                });

                // Form validation
                $('form').on('submit', function(e) {
                    let isValid = true;
                    let errorMessages = [];

                    // Función para validar campo y mostrar error
                    function validateField(selector, message) {
                        const field = $(selector);
                        if (!field.val() || field.val().trim() === '') {
                            isValid = false;
                            errorMessages.push(message);
                            field.addClass('is-invalid');
                            return false;
                        } else {
                            field.removeClass('is-invalid');
                            return true;
                        }
                    }

                    // Validar campos obligatorios
                    validateField('input[name="name"]', 'El nombre de la programación es obligatorio');
                    validateField('select[name="feed_channel_id"]',
                    'Debe seleccionar un canal de alimentación');
                    validateField('input[name="date_init"]', 'La fecha de inicio es obligatoria');

                    // Validaciones específicas según el tipo de programación
                    if ($('#scheduleType').val() === 'recurring') {
                        // Para programaciones recurrentes

                        // Validar que se haya seleccionado al menos un día
                        if (!$('.day-checkbox:checked').length) {
                            isValid = false;
                            errorMessages.push('Debe seleccionar al menos un día de la semana');
                            // Destacar sección de días
                            $('#recurringOptions').addClass('has-error');
                        } else {
                            $('#recurringOptions').removeClass('has-error');
                        }

                        // Validar fecha de finalización (obligatoria para recurrentes)
                        validateField('input[name="date_finish"]',
                            'La fecha de finalización es obligatoria para programaciones recurrentes');

                        // Validar que la fecha de finalización sea posterior a la de inicio
                        if ($('input[name="date_init"]').val() && $('input[name="date_finish"]').val()) {
                            const dateInit = new Date($('input[name="date_init"]').val());
                            const dateFinish = new Date($('input[name="date_finish"]').val());

                            if (dateFinish <= dateInit) {
                                isValid = false;
                                errorMessages.push(
                                    'La fecha de finalización debe ser posterior a la fecha de inicio');
                                $('input[name="date_finish"]').addClass('is-invalid');
                            }
                        }

                        // Validar que cada día seleccionado tenga una hora
                        $('.day-checkbox:checked').each(function() {
                            const day = $(this).val();
                            const timeInput = $(`input[name="day_times[${day}]"]`);

                            if (!timeInput.val()) {
                                isValid = false;
                                errorMessages.push(
                                    `Debe especificar una hora para ${$(this).next('label').text()}`
                                    );
                                timeInput.addClass('is-invalid');
                            } else {
                                timeInput.removeClass('is-invalid');
                            }
                        });
                    } else {
                        // Para programaciones de una sola vez
                        validateField('input[name="time"]',
                            'La hora es obligatoria para programaciones de publicación única');
                    }

                    // Validar que se haya seleccionado al menos un canal social
                    if (!$('input[name="social_channel_ids[]"]:checked').length) {
                        isValid = false;
                        errorMessages.push('Debe seleccionar al menos un canal social');
                        $('.social-channels-section').addClass('has-error');
                    } else {
                        $('.social-channels-section').removeClass('has-error');
                    }

                    // Si la validación falla, mostrar errores y evitar el envío del formulario
                    if (!isValid) {
                        e.preventDefault();

                        // Mostrar mensajes de error con estilo mejorado
                        let errorHtml = `
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <h5><i class="fas fa-exclamation-triangle"></i> Por favor corrige los siguientes errores:</h5>
                                <ul class="mb-0">
                                    ${errorMessages.map(msg => `<li>${msg}</li>`).join('')}
                                </ul>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        `;

                        // Eliminar alertas existentes y agregar la nueva
                        $('.content > .alert-danger').remove();
                        $(errorHtml).insertAfter('.content-header');

                        // Scroll hacia arriba para ver los errores
                        $('html, body').animate({
                            scrollTop: 0
                        }, 'slow');
                    }
                });

                // Estilos adicionales para campos inválidos
                $('<style>\
                            .is-invalid { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }\
                            .has-error { border: 1px solid #f8d7da; padding: 10px; border-radius: 5px; background-color: #fff8f8; }\
                            .fade.show { opacity: 1; }\
                        </style>').appendTo('head');

                // Seleccionar/deseleccionar todos los días
                $('#select_all_days').click(function() {
                    const allChecked = $('.day-checkbox:checked').length === $('.day-checkbox').length;
                    
                    $('.day-checkbox').each(function() {
                        $(this).prop('checked', !allChecked);
                        
                        // Habilitar/deshabilitar los campos de tiempo
                        const dayTimeInput = $(this).closest('.day-item').find('.day-time');
                        dayTimeInput.prop('disabled', allChecked);
                    });
                    
                    // Actualizar texto del botón
                    $(this).text(allChecked ? 'Seleccionar todos los días' : 'Deseleccionar todos los días');
                });
                
                // Seleccionar/deseleccionar todos los canales sociales
                $('#select_all_channels').click(function() {
                    const allChecked = $('input[name="social_channel_ids[]"]:checked').length === $('input[name="social_channel_ids[]"]').length;
                    
                    $('input[name="social_channel_ids[]"]').each(function() {
                        $(this).prop('checked', !allChecked);
                    });
                    
                    // Actualizar texto del botón
                    $(this).text(allChecked ? 'Seleccionar todos los canales' : 'Deseleccionar todos los canales');
                });
            });
        </script>
    @endpush
@endsection