@extends('layouts.admin')

@section('title', 'E-mail Marketing')

@section('content')
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Disparo de E-mail Marketing</h1>
    <a href="{{ route('admin.marketing.index') }}" class="btn btn-sm btn-secondary shadow-sm">
        <i class="bi bi-arrow-left text-white-50"></i> Voltar
    </a>
</div>

@if(session('success'))
    <div class="alert alert-success border-0 shadow-sm mb-4">{{ session('success') }}</div>
@endif

<div class="row">
    <div class="col-lg-8">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Compor E-mail Promocional</h6>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.marketing.email.send') }}" method="POST">
                    @csrf
                    
                    <div class="form-group mb-3">
                        <label class="font-weight-bold">Assunto do E-mail</label>
                        <input type="text" name="subject" class="form-control @error('subject') is-invalid @enderror" value="{{ old('subject') }}" placeholder="Ex: Oferta Especial: 20% de desconto em Notebooks!" required>
                        @error('subject') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label class="font-weight-bold">Mensagem</label>
                        <textarea name="message" id="editor" class="form-control @error('message') is-invalid @enderror" rows="10">{{ old('message') }}</textarea>
                        @error('message') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="font-weight-bold">Texto do Botão (Opcional)</label>
                                <input type="text" name="button_text" class="form-control" value="{{ old('button_text') }}" placeholder="Ex: Ver Oferta">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="font-weight-bold">URL do Botão (Opcional)</label>
                                <input type="url" name="button_url" class="form-control" value="{{ old('button_url') }}" placeholder="Ex: https://seusite.com/promo">
                            </div>
                        </div>
                    </div>

                    <hr>
                    
                    <div class="form-group mb-4">
                        <label class="font-weight-bold text-primary"><i class="bi bi-image me-1"></i> Incluir Imagem de Destaque (Opcional)</label>
                        <div class="row">
                            <div class="col-md-6">
                                <label class="small text-muted">Escolher um Produto:</label>
                                <select name="product_id" class="form-control form-control-sm mb-2">
                                    <option value="">Nenhum produto</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}">{{ $product->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="small text-muted">Ou escolher um Serviço:</label>
                                <select name="service_id" class="form-control form-control-sm mb-2">
                                    <option value="">Nenhum serviço</option>
                                    @foreach($services as $service)
                                        <option value="{{ $service->id }}">{{ $service->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <small class="text-muted">A imagem principal do item selecionado será enviada no topo do e-mail.</small>
                    </div>

                    <button type="submit" class="btn btn-primary btn-block py-3 fw-bold shadow-sm" onclick="return confirm('Deseja enviar este e-mail para todos os {{ $userCount }} clientes cadastrados?')">
                        <i class="bi bi-send me-1"></i> Disparar E-mail para {{ $userCount }} Clientes
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card shadow mb-4">
            <div class="card-header py-3 bg-light">
                <h6 class="m-0 font-weight-bold text-dark">Informações Importantes</h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info small border-0">
                    <i class="bi bi-info-circle me-1"></i> Os e-mails serão enviados para todos os usuários com o tipo "User" que possuem a preferência de e-mail ativada.
                </div>
                <h6 class="font-weight-bold small">Dicas para um bom e-mail:</h6>
                <ul class="small text-muted pl-3">
                    <li>Use um assunto curto e chamativo.</li>
                    <li>Vá direto ao ponto na mensagem.</li>
                    <li>Sempre inclua um botão de ação (CTA).</li>
                    <li>Evite e-mails muito longos com muitas imagens.</li>
                </ul>
                <hr>
                <p class="small text-center text-muted mb-0">Total de destinatários aptos: <br><strong>{{ $userCount }} clientes</strong></p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
@endpush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#editor').summernote({
            height: 300,
            tabsize: 2,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['view', ['fullscreen', 'codeview']]
            ]
        });

        // Garantir que apenas um select de imagem seja usado
        $('select[name="product_id"]').change(function() {
            if($(this).val() != "") $('select[name="service_id"]').val("");
        });
        $('select[name="service_id"]').change(function() {
            if($(this).val() != "") $('select[name="product_id"]').val("");
        });
    });
</script>
@endpush