@extends('donamarmita-admin')
@section('title', 'Nova Pergunta FAQ - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1>
                <i class="fas fa-question-circle text-primary"></i> 
                Nova Pergunta FAQ
            </h1>
            <p class="text-muted">
                Categoria: <strong>{{ $faq->faq_title_pt ?? $faq->faq_description_pt }}</strong>
            </p>
        </div>
        <div class="title_right">
            <div class="btn-group pull-right" role="group">
                <a href="{{ route('admin.marketing.faqs.questions.index', $faq->faq_id) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Voltar às Perguntas
                </a>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <!-- Breadcrumbs -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">
                            <i class="fas fa-home mr-1"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.marketing.faqs.index') }}">
                            <i class="fas fa-question-circle mr-1"></i> FAQs
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.marketing.faqs.edit', $faq->faq_id) }}">
                            {{ $faq->faq_title_pt ?? $faq->faq_description_pt }}
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.marketing.faqs.questions.index', $faq->faq_id) }}">
                            Perguntas
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <i class="fas fa-plus-circle mr-1"></i> Nova Pergunta
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Main Panel -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        <i class="fas fa-plus-circle mr-2"></i>
                        Criar Nova Pergunta
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <!-- Error Alerts -->
                    @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        <strong>Por favor, corrija os seguintes erros:</strong>
                        <ul class="mt-2 mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

                    <!-- Form -->
                    <form method="POST" action="{{ route('admin.marketing.faqs.questions.store', $faq->faq_id) }}" class="form-horizontal form-label-left">
                        @csrf

                        <!-- Card: Pergunta -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-question-circle text-primary mr-2"></i>
                                    Pergunta
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="fqq_question_pt">
                                                <i class="fas fa-tag mr-1"></i>
                                                Pergunta (Português) <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" 
                                                   class="form-control @error('fqq_question_pt') is-invalid @enderror" 
                                                   id="fqq_question_pt" 
                                                   name="fqq_question_pt" 
                                                   value="{{ old('fqq_question_pt') }}"
                                                   placeholder="Ex: Como posso cancelar a minha encomenda?"
                                                   required>
                                            @error('fqq_question_pt')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Card: Resposta -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-reply text-primary mr-2"></i>
                                    Resposta
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="fqq_answer_pt">
                                                <i class="fas fa-edit mr-1"></i>
                                                Resposta (Português) <span class="text-danger">*</span>
                                            </label>
                                            <textarea id="editor_pt" 
                                                      name="fqq_answer_pt" 
                                                      class="form-control @error('fqq_answer_pt') is-invalid @enderror" 
                                                      rows="8"
                                                      placeholder="Escreva a resposta detalhada à pergunta...">{{ old('fqq_answer_pt') }}</textarea>
                                            @error('fqq_answer_pt')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Utilize o editor para formatar a resposta
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Card: Traduções -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-language text-primary mr-2"></i>
                                    Traduções
                                </h5>
                            </div>
                            <div class="card-body">
                                <!-- Perguntas noutros idiomas -->
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-question-circle mr-2"></i>Pergunta noutros idiomas
                                </h6>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="fqq_question_en">
                                                <i class="flag-icon flag-icon-gb mr-1"></i>
                                                Pergunta (Inglês)
                                            </label>
                                            <input type="text" 
                                                   class="form-control @error('fqq_question_en') is-invalid @enderror" 
                                                   id="fqq_question_en" 
                                                   name="fqq_question_en" 
                                                   value="{{ old('fqq_question_en') }}"
                                                   placeholder="Ex: How can I cancel my order?">
                                            @error('fqq_question_en')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="fqq_question_es">
                                                <i class="flag-icon flag-icon-es mr-1"></i>
                                                Pergunta (Espanhol)
                                            </label>
                                            <input type="text" 
                                                   class="form-control @error('fqq_question_es') is-invalid @enderror" 
                                                   id="fqq_question_es" 
                                                   name="fqq_question_es" 
                                                   value="{{ old('fqq_question_es') }}"
                                                   placeholder="Ex: ¿Cómo puedo cancelar mi pedido?">
                                            @error('fqq_question_es')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="fqq_question_fr">
                                                <i class="flag-icon flag-icon-fr mr-1"></i>
                                                Pergunta (Francês)
                                            </label>
                                            <input type="text" 
                                                   class="form-control @error('fqq_question_fr') is-invalid @enderror" 
                                                   id="fqq_question_fr" 
                                                   name="fqq_question_fr" 
                                                   value="{{ old('fqq_question_fr') }}"
                                                   placeholder="Ex: Comment puis-je annuler ma commande?">
                                            @error('fqq_question_fr')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <!-- Respostas noutros idiomas -->
                                <h6 class="text-primary mb-3 mt-4">
                                    <i class="fas fa-reply mr-2"></i>Resposta noutros idiomas
                                </h6>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="editor_en">
                                                <i class="flag-icon flag-icon-gb mr-1"></i>
                                                Resposta (Inglês)
                                            </label>
                                            <textarea id="editor_en" 
                                                      name="fqq_answer_en" 
                                                      class="form-control @error('fqq_answer_en') is-invalid @enderror" 
                                                      rows="6"
                                                      placeholder="Write the answer...">{{ old('fqq_answer_en') }}</textarea>
                                            @error('fqq_answer_en')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="editor_es">
                                                <i class="flag-icon flag-icon-es mr-1"></i>
                                                Resposta (Espanhol)
                                            </label>
                                            <textarea id="editor_es" 
                                                      name="fqq_answer_es" 
                                                      class="form-control @error('fqq_answer_es') is-invalid @enderror" 
                                                      rows="6"
                                                      placeholder="Escriba la respuesta...">{{ old('fqq_answer_es') }}</textarea>
                                            @error('fqq_answer_es')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="editor_fr">
                                                <i class="flag-icon flag-icon-fr mr-1"></i>
                                                Resposta (Francês)
                                            </label>
                                            <textarea id="editor_fr" 
                                                      name="fqq_answer_fr" 
                                                      class="form-control @error('fqq_answer_fr') is-invalid @enderror" 
                                                      rows="6"
                                                      placeholder="Écrivez la réponse...">{{ old('fqq_answer_fr') }}</textarea>
                                            @error('fqq_answer_fr')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Card: Configurações -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-cog text-primary mr-2"></i>
                                    Configurações
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary d-block">
                                                <i class="fas fa-eye mr-1"></i>
                                                Estado da Pergunta
                                            </label>
                                            <div class="custom-control custom-switch mt-2">
                                                <input type="checkbox" 
                                                       class="custom-control-input" 
                                                       id="fqq_visible" 
                                                       name="fqq_visible" 
                                                       value="1" 
                                                       {{ old('fqq_visible', 1) == 1 ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="fqq_visible">
                                                    <span class="text-success font-weight-bold">Visível</span> no site
                                                </label>
                                            </div>
                                            <small class="form-text text-muted">
                                                Se ativo, a pergunta aparece nas FAQs do site
                                            </small>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary d-block">
                                                <i class="fas fa-sort mr-1"></i>
                                                Ordem de Exibição
                                            </label>
                                            <div class="alert alert-info py-2 px-3 mb-0">
                                                <i class="fas fa-info-circle mr-2"></i>
                                                A ordem será definida automaticamente após a criação
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-group row">
                            <div class="col-md-12 text-right">
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-save mr-2"></i>
                                    Criar Pergunta
                                </button>
                                <a href="{{ route('admin.marketing.faqs.questions.index', $faq->faq_id) }}" class="btn btn-secondary">
                                    <i class="fas fa-times mr-2"></i>
                                    Cancelar
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="dm-loader" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
    <img src="{{ asset('images/loader/dm-loader.svg') }}" width="60">
</div>

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/flag-icon-css/css/flag-icons.min.css" rel="stylesheet">
<style>
/* Card Styling */
.card {
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e4e7ed;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0 !important;
}

.card-header h5 {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.card-body {
    padding: 20px;
}

/* Form Labels */
label.font-weight-bold {
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

label.font-weight-bold i {
    font-size: 16px;
}

/* Form Controls */
.form-control {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
    height: auto;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #26B99A;
    box-shadow: 0 0 0 0.2rem rgba(38, 185, 154, 0.25);
}

.form-control.is-invalid {
    border-color: #dc3545;
}

/* Custom Switch */
.custom-switch .custom-control-label::before {
    border-radius: 1rem;
    border: 1px solid #e0e0e0;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745;
    border-color: #28a745;
}

/* Flag Icons */
.flag-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Summernote Custom */
.note-editor.note-frame {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

/* Responsive */
@media (max-width: 768px) {
    .card-body {
        padding: 15px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .text-right {
        text-align: left !important;
    }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Summernote for PT
    $('#editor_pt').summernote({
        height: 200,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],
        placeholder: 'Escreva a resposta detalhada à pergunta...',
        lang: 'pt-PT'
    });
    
    // Initialize Summernote for EN
    $('#editor_en').summernote({
        height: 150,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']]
        ],
        placeholder: 'Write the answer...'
    });
    
    // Initialize Summernote for ES
    $('#editor_es').summernote({
        height: 150,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']]
        ],
        placeholder: 'Escriba la respuesta...'
    });
    
    // Initialize Summernote for FR
    $('#editor_fr').summernote({
        height: 150,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']]
        ],
        placeholder: 'Écrivez la réponse...'
    });
    
    // Auto-hide alerts after 5 seconds
    setTimeout(function() {
        $('.alert-dismissible').fadeOut(500);
    }, 5000);
    
    // Loading overlay on form submit
    $('form').on('submit', function() {
        $('#dm-loader').fadeIn(200);
    });
});
</script>
@endpush

@endsection