@extends('layouts.app')

@section('title', 'Enviar Notificación a Vendedores')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark">
                <i class="fas fa-bell me-2 text-primary"></i>Enviar Notificación a Vendedores
            </h1>
            <p class="text-muted mb-0 small">Envíe notificaciones a un vendedor específico o a todos los vendedores activos</p>
        </div>
        <a href="{{ route('admin.sales.payment_verifications.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Volver
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-paper-plane me-2"></i>Nueva Notificación
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.sales.pwa_notifications.send') }}" id="notification-form">
                        @csrf

                        <div class="mb-4">
                            <label for="destinatario" class="form-label">Destinatario <span class="text-danger">*</span></label>
                            <select class="form-select @error('destinatario') is-invalid @enderror" 
                                    id="destinatario" name="destinatario" required>
                                <option value="">Seleccionar...</option>
                                <option value="all" {{ old('destinatario') == 'all' ? 'selected' : '' }}>Todos los Vendedores</option>
                                <option value="specific" {{ old('destinatario') == 'specific' ? 'selected' : '' }}>Vendedor Específico</option>
                            </select>
                            @error('destinatario')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-4" id="salesman-select-container" style="display: none;">
                            <label for="salesman_id" class="form-label">Vendedor <span class="text-danger">*</span></label>
                            <select class="form-select @error('salesman_id') is-invalid @enderror" 
                                    id="salesman_id" name="salesman_id">
                                <option value="">Seleccionar vendedor...</option>
                                @foreach($salesmen as $salesman)
                                    <option value="{{ $salesman->id }}" {{ old('salesman_id') == $salesman->id ? 'selected' : '' }}>
                                        {{ $salesman->first_name }} {{ $salesman->last_name }} ({{ $salesman->code ?? 'N/A' }})
                                    </option>
                                @endforeach
                            </select>
                            @error('salesman_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label for="title" class="form-label">Título <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                   id="title" name="title" 
                                   value="{{ old('title') }}" 
                                   placeholder="Ej: Recordatorio importante" 
                                   maxlength="100" required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Máximo 100 caracteres</small>
                        </div>

                        <div class="mb-4">
                            <label for="body" class="form-label">Mensaje <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('body') is-invalid @enderror" 
                                      id="body" name="body" 
                                      rows="5" 
                                      placeholder="Escriba el mensaje que recibirán los vendedores..." 
                                      maxlength="1000" required>{{ old('body') }}</textarea>
                            @error('body')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Máximo 1000 caracteres. <span id="char-count">0</span>/1000</small>
                        </div>

                        <div class="mb-4">
                            <label for="icon" class="form-label">Tipo de Notificación</label>
                            <select class="form-select @error('icon') is-invalid @enderror" 
                                    id="icon" name="icon">
                                <option value="info" {{ old('icon', 'info') == 'info' ? 'selected' : '' }}>
                                    ℹ️ Información
                                </option>
                                <option value="success" {{ old('icon') == 'success' ? 'selected' : '' }}>
                                    ✅ Éxito
                                </option>
                                <option value="warning" {{ old('icon') == 'warning' ? 'selected' : '' }}>
                                    ⚠️ Advertencia
                                </option>
                                <option value="danger" {{ old('icon') == 'danger' ? 'selected' : '' }}>
                                    ❌ Urgente
                                </option>
                            </select>
                            @error('icon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('admin.sales.payment_verifications.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-2"></i>Enviar Notificación
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Información
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6 class="alert-heading">¿Cómo funcionan las notificaciones?</h6>
                        <p class="mb-2">Las notificaciones aparecerán en la PWA móvil de los vendedores.</p>
                        <ul class="mb-0 small">
                            <li><strong>Todos los Vendedores:</strong> Se envía un mensaje broadcast que verán todos los vendedores activos.</li>
                            <li><strong>Vendedor Específico:</strong> Solo el vendedor seleccionado recibirá la notificación.</li>
                        </ul>
                    </div>

                    <div class="alert alert-warning">
                        <h6 class="alert-heading">Tipos de Notificación</h6>
                        <ul class="mb-0 small">
                            <li><strong>Información:</strong> Mensajes generales</li>
                            <li><strong>Éxito:</strong> Confirmaciones positivas</li>
                            <li><strong>Advertencia:</strong> Avisos importantes</li>
                            <li><strong>Urgente:</strong> Alertas críticas</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Mostrar/ocultar selector de vendedor según el destinatario
    $('#destinatario').on('change', function() {
        const destinatario = $(this).val();
        const container = $('#salesman-select-container');
        const select = $('#salesman_id');

        if (destinatario === 'specific') {
            container.slideDown();
            select.prop('required', true);
        } else {
            container.slideHide();
            select.prop('required', false);
            select.val('');
        }
    });

    // Inicializar estado si hay valor en old()
    if ($('#destinatario').val() === 'specific') {
        $('#salesman-select-container').show();
        $('#salesman_id').prop('required', true);
    }

    // Contador de caracteres
    $('#body').on('input', function() {
        const count = $(this).val().length;
        $('#char-count').text(count);
        
        if (count > 900) {
            $('#char-count').addClass('text-warning');
        } else {
            $('#char-count').removeClass('text-warning');
        }

        if (count >= 1000) {
            $('#char-count').addClass('text-danger');
        } else {
            $('#char-count').removeClass('text-danger');
        }
    });

    // Inicializar contador
    $('#body').trigger('input');

    // Validación del formulario
    $('#notification-form').on('submit', function(e) {
        const destinatario = $('#destinatario').val();
        const salesmanId = $('#salesman_id').val();

        if (destinatario === 'specific' && !salesmanId) {
            e.preventDefault();
            alert('Por favor seleccione un vendedor.');
            $('#salesman_id').focus();
            return false;
        }
    });
});
</script>
@endpush