@extends('crm.master.master')
@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mt-2">
                <div class="col-lg-6">
                    <div class="page-title"><i class="fas fa-user-clock m-2"></i> Cadastrar Nova Demanda Externa <i
                            class="bi bi-plus-circle"></i> <span class="subtitulo">Etapa 1/2</span></div>
                </div>
                <div class="col-lg-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('crm.dashboard') }}" title="Painel de Controle">Painel
                                de Controle</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('crm.demands.index') }}" title="Demandas">Demandas</a>
                        </li>
                        <li class="breadcrumb-item active">Cadastrar Nova Demanda</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>



    <!-- Main content -->
    <div class="content">
        <div class="row">
            <div class="card-body">
                <div class="col-md-12">
                    <div class="tab-content" id="myTabContent">

                        @if ($errors->any())
                            @foreach ($errors->all() as $error)
                                <div class="alert alert-danger alert-dismissible">
                                    <h5 class="pt-2"><i class="icon fas fa-exclamation-triangle"></i>
                                        {{ $error }}</h5>
                                </div>
                            @endforeach
                        @endif

                        @if ($errors->any() || session()->exists('success.message'))
                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    alertify.set('notifier', 'position', 'bottom-right');
                                    // Exibe erros de validação
                                    @if ($errors->any())
                                        @foreach ($errors->all() as $error)
                                            alertify.error("{{ $error }}");
                                        @endforeach
                                    @endif

                                    // Exibe mensagem de sucesso
                                    @if (session()->exists('success.message'))
                                        alertify.success("{{ session()->get('success.message') }}");
                                    @endif
                                });
                            </script>
                        @endif

                        <div class="card-header bg-success">
                            <h5 class="header-title text-white m-0">Pesquise por um Munícipe ou Cadastre Novo</h5>
                        </div>

                        <form action="#" id="form-client" method="post">
                            @csrf

                            <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
                            <style>
                                table {
                                    width: 100%;
                                    border-collapse: collapse;
                                    margin-top: 20px;
                                    vertical-align: middle;
                                }

                                table,
                                th,
                                td {
                                    border: 1px solid #ddd;
                                }

                                th,
                                td {
                                    padding: 10px;
                                    text-align: left;
                                }

                                /* Estilo padrão para o input type radio */
                                input[type='radio'] {
                                    appearance: none;
                                    -webkit-appearance: none;
                                    -moz-appearance: none;
                                    width: 23px;
                                    height: 23px;
                                    border-radius: 50%;
                                    border: 2px solid green;
                                    /* Borda verde */
                                    outline: none;
                                    cursor: pointer;
                                    margin-top: 5px;
                                }

                                /* Estilo quando o input type radio está marcado */
                                input[type='radio']:checked {
                                    background-color: green;
                                    /* Preenchimento verde */
                                }
                            </style>

                            <div class="col-md-12 mt-3">
                                <div class="row">

                                    <div class="col-md-7 mb-3">
                                        <div class="d-flex">
                                            <div class="form-floating w-100">
                                                <input type="text" id="search" name="search"
                                                    placeholder="Nome completo" class="form-control text-uppercase"
                                                    onkeyup="searchClients()">
                                                <label for="">Pesquise o munícipe por um nome, cpf, telefone fixo ou
                                                    celular</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-5 mb-3">
                                        <div class="d-flex btn-group">
                                            <a href="#" class="btn btn-info btn-lg btn-block" id="toggleButton">
                                                <i class="bi bi-plus-circle"></i> Abrir Formulário Cadastro Novo Munícipe
                                            </a>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <!-- Resultado da Pesquisa -->
                            <div id="result" class="text-uppercase"></div>

                            <style>
                                #content.hidden {
                                    display: none;
                                }
                            </style>
                            <style>
                                .hidden {
                                    display: none;
                                }
                            </style>

                        </form>

                        <!-- Formulário Cadastrar Novo client  -->
                        @include('crm.demands.includes.add_client')

                    </div>
                </div>
            </div>
        </div>
    </div>



    <script>
        $(document).ready(function() {
            // Evento de clique no botão "Abrir Formulário Cadastro Novo Munícipe"
            $("#toggleButton").click(function(e) {
                e.preventDefault();

                // Limpar os campos do formulário
                resetForm();

                // Adiciona ou remove a classe 'hidden' para mostrar ou ocultar a DIV
                $("#content").toggleClass("hidden");

                // Altera o texto do botão apenas quando a div estiver visível
                if (!$("#content").hasClass("hidden")) {
                    $("#toggleButton").html(
                        '<i class="bi bi-dash-circle"></i> Fechar Formulário de Cadastro');
                } else {
                    $("#toggleButton").html(
                        '<i class="bi bi-plus-circle"></i> Abrir Formulário Cadastro Novo Munícipe');
                }
            });

            // Função para redefinir os valores dos campos do formulário
            function resetForm() {
                // Limpar os campos do formulário
                $("#name, #cpf, #birthday, #genre_id, #cell_phone, #phone_message, #phone, #email, #zip_code, #street, #number, #complement, #district, #city, #state, #observation")
                    .val("");

                // Limpar a div de resultados
                $("#result").html("");
            }
        });

        function searchClients() {
            var searchValue = $("#search").val();

            // Iniciar a pesquisa apenas quando o comprimento do texto for maior ou igual a três
            if (searchValue.length >= 3) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('clients.search') }}", // Rota Laravel
                    data: {
                        _token: '{{ csrf_token() }}', // Token CSRF para segurança
                        search: searchValue
                    },
                    success: function(response) {
                        console.log(response); // Para verificar a estrutura dos dados retornados
                        var resultHtml = "";

                        if (response.length > 0) {
                            resultHtml += "<table>";
                            resultHtml +=
                                "<tr><th width='10'></th><th>Nome</th><th>CPF</th><th>Endereço</th><th>Telefones</th></tr>";

                            response.forEach(function(client) {
                                console.log(client); // Para verificar se 'client.id_client' existe
                                resultHtml += "<tr>";
                                resultHtml +=
                                    "<td><label class='radio-label'><input type='radio' name='id' value='" +
                                    client.id + "'></label></td>";

                                resultHtml += "<td>" + client.name + "</td>";
                                resultHtml += "<td>" + client.cpf + "</td>";
                                resultHtml += "<td>" + client.street + ", " + client.number;

                                if (client.complement) {
                                    resultHtml += " - " + client.complement;
                                }

                                resultHtml += " - " + client.district + " - " + client.city + "/" +
                                    client.state + "</td>";
                                resultHtml += "<td>";

                                if (client.phone) {
                                    resultHtml += "Telefone Fixo: " + client.phone + "<br>";
                                }
                                if (client.cell_phone) {
                                    resultHtml += "Celular: " + client.cell_phone + "<br>";
                                }
                                if (client.phone_message) {
                                    resultHtml += "Celular Recado: " + client.phone_message;
                                }

                                resultHtml += "</td></tr>";
                            });

                            resultHtml += "</table>";
                        } else {
                            resultHtml = "Nenhum resultado encontrado.";
                        }

                        $("#result").html(resultHtml);
                    },

                    error: function(xhr, status, error) {
                        console.log("Erro na requisição AJAX:", status, error);
                    }
                });
            } else {
                // Limpar os resultados se o comprimento for menor que três
                $("#result").html("");
            }
        }
    </script>

    <script>
        $(document).ready(function() {
            $("#search").keypress(function(event) {
                if (event.which === 13) {
                    event.preventDefault(); // Impede o envio do formulário
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // Detecta a seleção de qualquer radio button
            $(document).on('change', 'input[type=radio][name=id]', function() {
                // Chama a função redirectToPage passando o input selecionado
                redirectToPage(this);
            });
        });

        function redirectToPage(input) {
            // Verifica se o input radio está marcado
            if (input.checked) {
                // Obtém o valor do input radio
                var id = input.value;

                // Log do valor do id para verificar se está sendo capturado corretamente
                console.log("ID capturado: ", id);

                // Verifica se o id existe e é válido
                if (id) {
                    // URL base para redirecionamento
                    var url = "{{ url('crm/demands/create') }}?client_id=" + id;

                    // Redireciona para a URL final
                    window.location.href = url;
                } else {
                    console.error("ID inválido ou não encontrado.");
                }
            }
        }
    </script>

@endsection