@extends('donamarmita-admin')
@section('title', 'Novo Testemunho - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1>
                <i class="fas fa-star text-primary"></i> 
                Novo Testemunho
            </h1>
            <p class="text-muted">
                Adicionar novo testemunho de cliente da <strong>{{ $companyName ?? 'Donamarmita' }}</strong>
            </p>
        </div>
        <div class="title_right">
            <div class="btn-group pull-right" role="group">
                <a href="{{ route('admin.about.testimonial.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Voltar à Lista
                </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.about.testimonial.index') }}">
                            <i class="fas fa-star mr-1"></i> Testemunhos
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <i class="fas fa-plus-circle mr-1"></i> Novo Testemunho
                    </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>
                        Adicionar Novo Testemunho
                    </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.about.testimonial.store') }}" class="form-horizontal form-label-left">
                        @csrf

                        <div class="row">
                            <!-- Coluna da Esquerda - Autor e Classificação -->
                            <div class="col-md-6">
                                <!-- Card: Autor -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0">
                                            <i class="fas fa-user text-primary mr-2"></i>
                                            Autor
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="tes_author">
                                                <i class="fas fa-user mr-1"></i>
                                                Nome do Cliente <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" 
                                                   class="form-control @error('tes_author') is-invalid @enderror" 
                                                   id="tes_author" 
                                                   name="tes_author" 
                                                   value="{{ old('tes_author') }}"
                                                   placeholder="Ex: Maria Santos"
                                                   required>
                                            @error('tes_author')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Nome completo do cliente que fez o testemunho
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Card: Classificação -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0">
                                            <i class="fas fa-star text-warning mr-2"></i>
                                            Classificação
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary d-block">
                                                <i class="fas fa-star mr-1"></i>
                                                Número de Estrelas <span class="text-danger">*</span>
                                            </label>
                                            <div class="star-rating-input">
                                                @for($i = 1; $i <= 5; $i++)
                                                <div class="custom-control custom-radio custom-control-inline">
                                                    <input type="radio" 
                                                           id="star_{{ $i }}" 
                                                           name="tes_stars" 
                                                           value="{{ $i }}"
                                                           class="custom-control-input star-radio"
                                                           {{ old('tes_stars', 5) == $i ? 'checked' : '' }}
                                                           required>
                                                    <label class="custom-control-label" for="star_{{ $i }}">
                                                        {{ $i }} {{ $i == 1 ? 'Estrela' : 'Estrelas' }}
                                                    </label>
                                                </div>
                                                @endfor
                                            </div>
                                            <div class="mt-2 star-preview">
                                                @for($i = 1; $i <= 5; $i++)
                                                    <i class="fas fa-star fa-lg star-icon star-{{ $i }}" style="color: #ffc107; margin-right: 2px;"></i>
                                                @endfor
                                            </div>
                                            @error('tes_stars')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Selecione a classificação do cliente (1 a 5 estrelas)
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Coluna da Direita - Configurações -->
                            <div class="col-md-6">
                                <!-- 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="form-group">
                                            <label class="font-weight-bold text-primary d-block">
                                                <i class="fas fa-eye mr-1"></i>
                                                Estado do Testemunho
                                            </label>
                                            <div class="custom-control custom-switch mt-2">
                                                <input type="checkbox" 
                                                       class="custom-control-input" 
                                                       id="tes_visible" 
                                                       name="tes_visible" 
                                                       value="1" 
                                                       {{ old('tes_visible', 1) == 1 ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="tes_visible">
                                                    <span class="text-success font-weight-bold">Visível</span> no site
                                                </label>
                                            </div>
                                            <small class="form-text text-muted">
                                                Se ativo, o testemunho aparece na página de testemunhos
                                            </small>
                                        </div>
                                        
                                        <div class="form-group mt-4">
                                            <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>

                        <!-- Card: Testemunho em Português (obrigatório) -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-quote-left text-primary mr-2"></i>
                                    Testemunho (Português) <span class="text-danger">*</span>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label class="font-weight-bold text-primary" for="tes_text_pt">
                                        <i class="fas fa-edit mr-1"></i>
                                        Texto do Testemunho (PT)
                                    </label>
                                    <textarea id="editor_pt" 
                                              name="tes_text_pt" 
                                              class="form-control @error('tes_text_pt') is-invalid @enderror" 
                                              rows="6"
                                              placeholder="Escreva o testemunho do cliente em português...">{{ old('tes_text_pt') }}</textarea>
                                    @error('tes_text_pt')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        <i class="fas fa-info-circle mr-1"></i>
                                        <span id="counter_pt">0</span> caracteres
                                    </small>
                                </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">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="tes_text_en">
                                                <i class="flag-icon flag-icon-gb mr-1"></i>
                                                Testemunho (Inglês)
                                            </label>
                                            <textarea id="editor_en" 
                                                      name="tes_text_en" 
                                                      class="form-control @error('tes_text_en') is-invalid @enderror" 
                                                      rows="4"
                                                      placeholder="Write the customer testimonial in English...">{{ old('tes_text_en') }}</textarea>
                                            @error('tes_text_en')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                <span id="counter_en">0</span> caracteres
                                            </small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary" for="tes_text_es">
                                                <i class="flag-icon flag-icon-es mr-1"></i>
                                                Testemunho (Espanhol)
                                            </label>
                                            <textarea id="editor_es" 
                                                      name="tes_text_es" 
                                                      class="form-control @error('tes_text_es') is-invalid @enderror" 
                                                      rows="4"
                                                      placeholder="Escriba el testimonio del cliente en español...">{{ old('tes_text_es') }}</textarea>
                                            @error('tes_text_es')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                <span id="counter_es">0</span> caracteres
                                            </small>
                                        </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="tes_text_fr">
                                                <i class="flag-icon flag-icon-fr mr-1"></i>
                                                Testemunho (Francês)
                                            </label>
                                            <textarea id="editor_fr" 
                                                      name="tes_text_fr" 
                                                      class="form-control @error('tes_text_fr') is-invalid @enderror" 
                                                      rows="4"
                                                      placeholder="Rédiger le témoignage du client en français...">{{ old('tes_text_fr') }}</textarea>
                                            @error('tes_text_fr')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                <span id="counter_fr">0</span> caracteres
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Informação adicional -->
                        <div class="alert alert-warning mb-4" role="alert">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-lightbulb fa-2x mr-3 text-warning"></i>
                                <div>
                                    <strong>Dica:</strong> Preencha pelo menos o nome do cliente e o testemunho em português. Os restantes campos são opcionais.
                                </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>
                                    Adicionar Testemunho
                                </button>
                                <a href="{{ route('admin.about.testimonial.index') }}" 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;
}

textarea.form-control {
    min-height: 100px;
}

/* 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);
}

/* Star Rating Input */
.star-rating-input {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.custom-radio {
    margin-right: 10px;
}

.custom-radio .custom-control-label {
    font-weight: normal;
    color: #666;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label {
    color: #ffc107;
    font-weight: 600;
}

.star-preview {
    text-align: center;
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.star-icon {
    transition: all 0.2s ease;
}

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

.note-editor.note-frame .note-toolbar {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 6px 6px 0 0;
    padding: 8px;
}

/* Character Counter */
small .badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
}

/* Alerts */
.alert-warning {
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
    color: #856404;
    border-radius: 8px;
}

.alert-danger ul {
    margin-top: 10px;
    margin-bottom: 5px;
    padding-left: 20px;
}

/* 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;
    }
    
    .star-rating-input .custom-radio {
        display: block;
        margin-bottom: 8px;
    }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-pt-PT.min.js"></script>
<script>
$(document).ready(function() {

    var langs = ['pt', 'en', 'es', 'fr'];

    // Inicializar Summernote para cada idioma
    langs.forEach(function(lang) {
        $('#editor_' + lang).summernote({
            height: 150,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview']]
            ],
            callbacks: {
                onChange: function() { updateCounter(lang); },
                onPaste: function() { setTimeout(function(){ updateCounter(lang); }, 100); }
            }
        });
    });

    // Aplicar locale PT ao editor português
    if ($('#editor_pt').length) {
        $('#editor_pt').summernote('locale', 'pt-PT');
    }

    // Atualizar contadores iniciais
    langs.forEach(function(lang) {
        setTimeout(function() { updateCounter(lang); }, 500);
    });

    /* ============================================================
     | STAR RATING PREVIEW
     ============================================================ */
    $('.star-radio').on('change', function() {
        var stars = $(this).val();
        
        // Reset all stars
        $('.star-icon').removeClass('text-warning').addClass('text-muted');
        
        // Highlight selected stars
        for (var i = 1; i <= stars; i++) {
            $('.star-' + i).removeClass('text-muted').addClass('text-warning');
        }
    });

    // Trigger initial preview
    $('.star-radio:checked').trigger('change');

    /* ============================================================
     | CHARACTER COUNTER
     ============================================================ */
    function updateCounter(lang) {
       var $editor = $('#editor_' + lang);
        if (!$editor.length || !$editor.data('summernote')) return;

        var html = $editor.summernote('code') || '';
        var plain = html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').replace(/\s+/g, ' ').trim();
        var count = plain.length;

        $('#counter_' + lang).text(count);

        var $badge = $('#counter_' + lang).closest('small').find('.badge');
        if (!$badge.length) {
            $('#counter_' + lang).closest('small').append('<span class="badge badge-success ml-2">0/3000</span>');
            $badge = $('#counter_' + lang).closest('small').find('.badge');
        }

        $badge.text(count + '/3000')
              .removeClass('badge-success badge-warning badge-danger')
              .addClass(count > 3000 ? 'badge-danger' : count > 2900 ? 'badge-warning' : 'badge-success');
    }

    /* ============================================================
     | FORM SUBMIT
     ============================================================ */
    $('form').on('submit', function() {
        $('#dm-loader').fadeIn(200);
    });

    // Auto-hide alerts after 5 seconds
    setTimeout(function() {
        $('.alert-dismissible').fadeOut(500);
    }, 5000);
});
</script>
@endpush

@endsection