@extends('layouts.app')

@section('title', 'Nuevo Reporte Programado')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-plus me-2"></i>Nuevo Reporte Programado
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.reports.scheduled.store') }}" method="POST">
                        @csrf

                        @if($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Nombre del Reporte <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                           id="name" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="report_type" class="form-label">Tipo de Reporte <span class="text-danger">*</span></label>
                                    <select class="form-select @error('report_type') is-invalid @enderror" 
                                            id="report_type" name="report_type" required>
                                        <option value="">Seleccionar...</option>
                                        @foreach($reportTypes as $key => $label)
                                            <option value="{{ $key }}" {{ old('report_type') == $key ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('report_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="format" class="form-label">Formato <span class="text-danger">*</span></label>
                                    <select class="form-select @error('format') is-invalid @enderror" 
                                            id="format" name="format" required>
                                        @foreach($formats as $key => $label)
                                            <option value="{{ $key }}" {{ old('format', 'excel') == $key ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('format')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="frequency" class="form-label">Frecuencia <span class="text-danger">*</span></label>
                                    <select class="form-select @error('frequency') is-invalid @enderror" 
                                            id="frequency" name="frequency" required>
                                        @foreach($frequencies as $key => $label)
                                            <option value="{{ $key }}" {{ old('frequency', 'daily') == $key ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('frequency')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="schedule_time" class="form-label">Hora de Ejecución <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control @error('schedule_time') is-invalid @enderror" 
                                           id="schedule_time" name="schedule_time" value="{{ old('schedule_time', '09:00') }}" required>
                                    @error('schedule_time')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4" id="weekly-days-container" style="display: none;">
                                <div class="mb-3">
                                    <label class="form-label">Días de la Semana</label>
                                    @foreach($daysOfWeek as $key => $label)
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   name="schedule_days[]" value="{{ $key }}" 
                                                   id="day_{{ $key }}" {{ in_array($key, old('schedule_days', [])) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="day_{{ $key }}">
                                                {{ $label }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="col-md-4" id="monthly-day-container" style="display: none;">
                                <div class="mb-3">
                                    <label for="schedule_day_of_month" class="form-label">Día del Mes (1-31)</label>
                                    <input type="number" class="form-control" 
                                           id="schedule_day_of_month" name="schedule_day_of_month" 
                                           min="1" max="31" value="{{ old('schedule_day_of_month', 1) }}">
                                </div>
                            </div>

                            <div class="col-md-4" id="cron-container" style="display: none;">
                                <div class="mb-3">
                                    <label for="cron_expression" class="form-label">Expresión Cron</label>
                                    <input type="text" class="form-control" 
                                           id="cron_expression" name="cron_expression" 
                                           value="{{ old('cron_expression') }}" 
                                           placeholder="Ej: 0 9 * * *">
                                    <small class="form-text text-muted">Formato: minuto hora día mes día-semana</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="recipients" class="form-label">Destinatarios (Emails) <span class="text-danger">*</span></label>
                                    <div id="recipients-container">
                                        <div class="input-group mb-2">
                                            <input type="email" class="form-control recipient-email" 
                                                   name="recipients[]" placeholder="email@ejemplo.com" required>
                                            <button type="button" class="btn btn-danger remove-recipient">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-secondary mt-2" id="add-recipient">
                                        <i class="fas fa-plus me-2"></i>Agregar Destinatario
                                    </button>
                                    @error('recipients')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="description" class="form-label">Descripción</label>
                                    <textarea class="form-control" id="description" name="description" rows="3">{{ old('description') }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Activar reporte programado
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.reports.scheduled.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-2"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Guardar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        // Mostrar/ocultar campos según la frecuencia
        function toggleFrequencyFields() {
            const frequency = $('#frequency').val();
            $('#weekly-days-container').hide();
            $('#monthly-day-container').hide();
            $('#cron-container').hide();

            if (frequency === 'weekly') {
                $('#weekly-days-container').show();
            } else if (frequency === 'monthly') {
                $('#monthly-day-container').show();
            } else if (frequency === 'custom') {
                $('#cron-container').show();
            }
        }

        $('#frequency').on('change', toggleFrequencyFields);
        toggleFrequencyFields();

        // Agregar destinatario
        $('#add-recipient').on('click', function() {
            const container = $('#recipients-container');
            const newInput = `
                <div class="input-group mb-2">
                    <input type="email" class="form-control recipient-email" 
                           name="recipients[]" placeholder="email@ejemplo.com" required>
                    <button type="button" class="btn btn-danger remove-recipient">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
            container.append(newInput);
        });

        // Remover destinatario
        $(document).on('click', '.remove-recipient', function() {
            if ($('.recipient-email').length > 1) {
                $(this).closest('.input-group').remove();
            } else {
                alert('Debe haber al menos un destinatario.');
            }
        });
    });
</script>
@endpush
@endsection