@extends('layouts.publicador.novo_padrao')

@section('content')
    <div class="card shadow-sm">
        <div class="card-body">
            <h3 class="card-title mb-4">
                {{ isset($sugestao) ? 'Editar Sugestão' : 'Nova Sugestão' }}
            </h3>

            <form
                action="{{ isset($sugestao) ? route('publicador.sugestoes.update', $sugestao->id) : route('sugestao.orcamento.salvar') }}"
                method="POST" id="formSugestao">
                @csrf

                @if (isset($sugestao))
                    @method('POST')
                @endif

                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="nome_completo" class="form-label">Nome Completo</label>
                        <input type="text" class="form-control @error('nome_completo') is-invalid @enderror"
                            id="nome_completo" name="nome_completo"
                            value="{{ old('nome_completo', $sugestao->nome_completo ?? '') }}" required>
                        @error('nome_completo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="email" class="form-label">E-mail</label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                            name="email" value="{{ old('email', $sugestao->email ?? '') }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="telefone" class="form-label">Telefone</label>
                        <input type="text" class="form-control @error('telefone') is-invalid @enderror" id="telefone"
                            name="telefone" value="{{ old('telefone', $sugestao->telefone ?? '') }}" required>
                        @error('telefone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="cidade" class="form-label">Cidade</label>
                        <input type="text" class="form-control @error('cidade') is-invalid @enderror" id="cidade"
                            name="cidade" value="{{ old('cidade', $sugestao->cidade ?? '') }}" required>
                        @error('cidade')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12">
                        <label for="sugestao" class="form-label">Sugestão</label>
                        <textarea class="form-control @error('sugestao') is-invalid @enderror" id="sugestao" name="sugestao" rows="5"
                            required>{{ old('sugestao', $sugestao->sugestao ?? '') }}</textarea>
                        @error('sugestao')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 text-center mt-4">
                        <button type="submit" class="btn btn-primary px-5">
                            {{ isset($sugestao) ? 'Atualizar' : 'Salvar' }}
                        </button>
                        <a href="{{ route('publicador.sugestoes.index') }}"
                            class="btn btn-secondary px-5 ms-2">Cancelar</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery.mask@1.14.16/dist/jquery.mask.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        .card {
            border-radius: 15px;
            border: none;
        }

        .form-control {
            border-radius: 8px;
            border: 1px solid #ced4da;
            padding: 0.5rem 1rem;
        }

        .form-control:focus {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
        }

        .btn {
            border-radius: 8px;
            padding: 0.5rem 2rem;
        }

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

        h3.card-title {
            color: #333;
            text-align: center;
            font-weight: 600;
        }

        .form-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .invalid-feedback {
            font-size: 0.875rem;
        }
    </style>

    <script>
        $(document).ready(function() {
            // Máscara para telefone
            $('#telefone').mask('(00) 00000-0000');

            // Validação do formulário antes do envio
            $('#formSugestao').on('submit', function(e) {
                e.preventDefault();

                const formData = {
                    nome_completo: $('#nome_completo').val(),
                    email: $('#email').val(),
                    telefone: $('#telefone').val(),
                    cidade: $('#cidade').val(),
                    sugestao: $('#sugestao').val()
                };

                // Confirmar envio com SweetAlert2
                Swal.fire({
                    title: 'Confirmar dados',
                    html: `
                        <div class="text-start">
                            <p><strong>Nome:</strong> ${formData.nome_completo}</p>
                            <p><strong>Email:</strong> ${formData.email}</p>
                            <p><strong>Telefone:</strong> ${formData.telefone}</p>
                            <p><strong>Cidade:</strong> ${formData.cidade}</p>
                            <p><strong>Sugestão:</strong> ${formData.sugestao}</p>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.submit();
                    }
                });
            });

            // Validação básica de email
            $('#email').on('blur', function() {
                const email = $(this).val();
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

                if (!emailRegex.test(email)) {
                    Swal.fire({
                        title: 'E-mail inválido',
                        text: 'Por favor, insira um e-mail válido',
                        icon: 'error',
                        confirmButtonColor: '#3085d6'
                    });
                    $(this).val('');
                }
            });

            // Validação de nome completo
            $('#nome_completo').on('blur', function() {
                const nome = $(this).val().trim();
                if (nome && nome.split(' ').length < 2) {
                    Swal.fire({
                        title: 'Nome inválido',
                        text: 'Por favor, insira seu nome completo',
                        icon: 'error',
                        confirmButtonColor: '#3085d6'
                    });
                    $(this).val('');
                }
            });
        });
    </script>
@endsection