@extends('Templates/templateAdmin')


<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js">
</script>
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css">

@section('Main-content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="row justify-content-center">
                <div class="card-body">
                    <!-- Progressbar -->
                    <ul id="progressbar" class="nav nav-pills d-flex flex-sm-row justify-content-center">
                        <li class="@if ($step == 1) active @endif flex-sm-fill"></li>
                        {{-- Project details --}}
                        <li class="@if ($step == 2) active @endif flex-sm-fill"></li>
                        {{-- Articulated --}}
                        <li class="@if ($step == 3) active @endif flex-sm-fill"></li>
                        {{-- Workstation --}}
                    </ul>
                </div>
            </div>

            <fieldset class="content">
                <div class="container-fluid">
                    <div class="card card-primary" id="CardDetalhes">
                        <div class="card-header bg-primary text-white">
                            <h3 class="card-title mb-0">{{ __('messages.createProject.project_work_details') }}</h3>
                        </div>

                        <div class="card-body">

                            <form method="POST" action="{{ route('processStep1') }}" id="idDoFormulario">

                                @csrf

                                <div class="row">
                                    <!-- Identificação do projecto -->
                                    <div class="form-group col-sm">
                                        <label>{{ __('messages.createProject.project_identification') }}<b
                                                style="color:red">*</b></label>
                                        <input type="text" name="description_project" class="form-control"
                                            placeholder="{{ __('messages.createProject.project_identification') }}&hellip;"
                                            required>
                                    </div>


                                </div> <!-- /Row -->

                                <div class="row">

                                    <!-- Gestor de Projeto ISPT -->
                                    <div class="form-group col-sm-6">
                                        <label>{{ __('messages.createProject.ispt_project_manager') }} <b
                                                style="color:red">*</b></label>
                                        <input type="text" name="responsible_project_ispt" class="form-control"
                                            placeholder="{{ __('messages.createProject.ispt_project_manager') }}&hellip;"
                                            required>
                                    </div>

                                    <!-- Número do Projeto ISPT -->
                                    <div class="form-group col-sm-6">
                                        <label>{{ __('messages.createProject.ispt_project_number') }}<b
                                                style="color:red">*</b></label>
                                        <input type="number" name="n_project_ispt" class="form-control" data-type="ispt"
                                            placeholder="{{ __('messages.createProject.ispt_project_number') }}&hellip;"
                                            required>
                                        <div id="project-number-exists-ispt"></div>
                                    </div>


                                </div> <!-- /Row -->

                                <div class="row">

                                    <!-- Empresa Contratante -->
                                    <div class="form-group col-sm" id="companyField">
                                        <label>{{ __('messages.createProject.select_company.contracting_company') }} <b
                                                style="color:red">*</b></label>
                                        <select class="form-control" name="company_select" id="company_select">
                                            {{-- <option>{{ __('messages.createProject.select_plant.plant') }} ...</option> --}}
                                            <option value="#">Selecione Uma Empresa &hellip;</option>
                                            {{-- <option value="new_company">Criar Empresa &hellip;</option> --}}
                                            @foreach ($companies as $company)
                                                <option value="{{ $company->company_id }}">{{ $company->company_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>

                                <div class="row">

                                    <!-- Gestor de Projeto da Empresa  -->
                                    <div class="form-group col-sm" id="companyProjectManager">
                                        <label for="user_id">{{ __('messages.createProject.compan_project_manager') }}<b style="color:red">*</b></label>
                                        <select class="form-control" name="user_id" id="user_id" required>
                                            <option value="#" disabled selected>Select a manager</option>
                                               <!-- As opções de instalação serão preenchidas dinamicamente -->
                                        </select>
                                    </div>
                                    
                                    <!-- Instalação -->
                                    <div class="form-group col-sm" id="installationField">
                                        <label>{{ __('messages.createProject.select_plant.plant') }} <b
                                                style="color:red">*</b></label>
                                        <select class="form-control" name="installation_id" id="installationSelect"   required>
                                            <!-- As opções de instalação serão preenchidas dinamicamente -->
                                        </select>
                                    </div>

                                </div> <!-- /Row -->

                                <div class="card card-danger" id="new_company_div">
                                    <div class="card-header">
                                        <h3 class="card-title">Nova Instalação</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <!-- Nome Nova Instalação -->
                                            <div class="form-group col-sm">
                                                <label>{{ __('messages.createProject.select_plant.new_plant') }} :</label>
                                                <input type="text" id="new_company_name" class="form-control"
                                                    name="new_company_name"
                                                    placeholder="{{ __('messages.createProject.select_plant.new_plant') }}&hellip;">
                                            </div>

                                            <!-- Morada Nova Instalação -->
                                            <div class="form-group col-sm">
                                                <label>{{ __('messages.createProject.select_plant.plant_address') }}</label>
                                                <input type="text" class="form-control" name="new_company_address"
                                                    placeholder="{{ __('messages.createProject.select_plant.plant_address') }}&hellip;">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-sm">
                                                <label>Selecione Qtn Fábricas:</label>
                                                <select id="selectFactoryCount" class="form-control">
                                                    <option value="">Selecione a quantidade</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <!-- Adicione mais opções conforme necessário -->
                                                </select>
                                            </div>
                                        </div>
                                        <!-- Container para os inputs dinâmicos -->
                                        <div id="factoriesInputsContainer"></div>
                                    </div>
                                </div>


                                <div class="row">

                                    <!-- Número do Projeto da Empresa -->
                                    <div class="form-group col-sm-6">
                                        <label>{{ __('messages.createProject.company_project_number') }}<b
                                                style="color:red">*</b></label>
                                        
                                        <input type="number" name="project_company_number" class="form-control"
                                            data-type="company"
                                            placeholder="{{ __('messages.createProject.company_project_number') }}&hellip;"
                                            required>
                                        <div id="project-number-exists-company"></div>
                                    </div>

                                    <!-- Data de Início do Projeto -->
                                    <div class="form-group col-sm-6">
                                        <label>{{ __('messages.createProject.project_start_date') }} : <b style="color:red">*</b></label>
                                        <div class="input-group">
                                            <input name="date_started" type="datetime-local" class="form-control float-right" required min="{{ now()->format('Y-m-d\TH:i') }}">
                                        </div>
                                        <!-- /.input group -->
                                    </div>


                                </div> <!-- /Row -->

                                <div class="card-footer">
                                    <div class="float-right">
                                        <button type="submit" id="submitButton"
                                            class="btn btn-primary">{{ __('messages.buttons.save') }}</button>
                                    </div>
                                </div>
                            </form>

                        </div>
                        {{-- /.card-body --}}

                    </div>
                </div>


                {{-- Verificar se realmente tem funcionalidade ir para a segunda parte a partir daqui, lembrando que se tirar do argumento vai dar erro, pois para a route :2 espera receber um ID --}}
                {{-- <a href="{{ route('articulated_2') }}" class="btn btn-primary next float-right">Next</a> --}}

                {{-- /.card card-primary --}}
            </fieldset>

        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#selectFactoryCount').change(function() {
                var numberOfFactories = $(this).val(); // Quantidade selecionada
                var container = $('#factoriesInputsContainer');
                container.empty(); // Limpa os inputs anteriores

                // Gera novos inputs com base na quantidade selecionada
                for (var i = 1; i <= numberOfFactories; i++) {
                    container.append(`
                        <div class="form-group">
                            <label for="factoryName${i}">Nome da Fábrica ${i}</label>
                            <input type="text" id="factoryName${i}" name="factoryNames[]" class="form-control" placeholder="Nome da Fábrica ${i}">
                        </div>
                    `);
                }
            });
        });
    </script>


    {{-- <script>
        $(document).ready(function() {

            var installationsData; // Esta variável irá armazenar as informações das instalações

            $('#company_select').change(function() {
                var user_id = $(this).val();

                if (user_id == '#') {
                    $('#installationField').attr('hidden', 'hidden');
                    $('#localization_installation_client').hide();
                    $('#new_company_div').hide();
                    return;
                }

                $.get('/api/installations?user_id=' + user_id, function(data) {

                    var select = $('#installationSelect');
                    select.empty();

                    // Adicione as opções fixas aqui
                    select.append('<option value="#">Selecione uma instalação...</option>');
                    select.append(
                        '<option value="new_install">Criar uma nova Instalação ?</option>');

                    // Agora você pode adicionar suas opções dinâmicas.

                    $.each(data, function(index, installation) {

                        select.append('<option value="' + installation.plant_id +
                            '">' +
                            installation.plant_name + '</option>');
                    });
                    // Armazene os dados em installationsData
                    installationsData = data;

                    $('#installationField').removeAttr('hidden');
                });
            });
            // Adicione este código para lidar com a mudança na seleção da instalação
            // $('#installationSelect').change(function() {

            //     var selectedValue = $(this).val();

            //     if (this.value == 'new_install') {
            //         $('#new_company_div').show();
            //         $('#localization_installation_client').hide();
            //         return;
            //     }
            //     $('#new_company_div').hide();
            //     $('#localization_installation_client').show();

            //     if (this.value == '#') {
            //         $('#new_company_div').hide();
            //         $('#localization_installation_client').hide();
            //         return;
            //     }

            //     // Verifique se installationsData está definido
            //     if (installationsData) {
            //         // Encontre a instalação selecionada nos dados da instalação
            //         var selectedInstallation = installationsData.find(function(installation) {
            //             return installation.plant_id == this.value;
            //         }.bind(this));

            //         if (selectedInstallation) {
            //             // Preencha o valor do campo de endereço com o endereço da instalação selecionada
            //             $('#localization_installation_client input').val(selectedInstallation
            //                 .plant_address);
            //         }
            //     }
            // });

            $('#installationSelect').change(function() {
                var selectedValue = $(this).val();

                // Esconde os campos por padrão
                $('#new_company_div').hide();
                $('#localization_installation_client').hide();
                $('#new_company_input')
            .show(); // Mostra por padrão, será escondido conforme condição abaixo

                if (selectedValue == 'new_install') {
                    $('#new_company_div').show(); // Mostra a div com os inputs
                    $('#new_company_input').hide(); // Esconde o input para nova empresa
                    $('#localization_installation_client').hide(); // Esconde outro conteúdo
                } else if (selectedValue != '#') {
                    $('#localization_installation_client')
                .show(); // Mostra conteúdo relacionado a instalação existente
                }

                // Verifique se installationsData está definido
                if (installationsData) {
                    // Encontre a instalação selecionada nos dados da instalação
                    var selectedInstallation = installationsData.find(function(installation) {
                        return installation.plant_id == selectedValue;
                    });

                    if (selectedInstallation) {
                        // Preencha o valor do campo de endereço com o endereço da instalação selecionada
                        $('#localization_installation_client input').val(selectedInstallation
                        .plant_address);
                    }
                }
            });


            $('#localization_installation_client').hide();
            $('#new_company_div').hide();
        });
    </script> --}}

    <script>
        // Função para atualizar o estado do botão de envio com base na validade dos inputs
        function updateSubmitButtonState() {
            // Verifica se ambos os inputs possuem a classe 'valid-input', o que indica que são válidos
            var allValid = $('.valid-input').length === 2;
            // Habilita ou desabilita o botão de envio ('#submitButton') com base na validade dos inputs
            $('#submitButton').prop('disabled', !allValid);
        }

        // Aguarda o documento HTML estar completamente carregado para executar o script
        $(document).ready(function() {
            // Adiciona um ouvinte de evento 'input' para cada input especificado
            $('input[name="n_project_ispt"], input[name="project_company_number"]').on('input', function() {
                // Armazena o valor atual do input
                var number = $(this).val();
                // Armazena o tipo do input, determinado pelo atributo 'data-type'
                var type = $(this).data('type');

                // Verifica se o input não está vazio
                if (number.length > 0) {
                    // Realiza uma requisição AJAX para verificar se o número já existe no banco de dados
                    $.ajax({
                        url: '{{ route('checkProjectIsptNumber') }}',
                        type: 'GET',
                        data: {
                            number: number,
                            type: type
                        },
                        success: function(response) {
                            // Se o número já existir, marca o input como inválido
                            if (response.exists) {
                                $(this).css('border', '2px solid red').removeClass(
                                    'valid-input').addClass('invalid-input');
                                $('#project-number-exists-' + type).text('Número já existe')
                                    .css('color', 'red');
                            } else {
                                // Se o número não existir, marca o input como válido
                                $(this).css('border', '2px solid green').removeClass(
                                    'invalid-input').addClass('valid-input');
                                $('#project-number-exists-' + type).text('');
                            }
                            // Chama a função para atualizar o estado do botão de envio
                            updateSubmitButtonState();
                        }.bind(
                            this
                        ) // Garante que 'this' se refere ao input dentro da função de sucesso
                    });
                } else {
                    // Se o input estiver vazio, remove qualquer marcação de validade/invalidade
                    $(this).css('border', '1px solid #ced4da').removeClass('valid-input').removeClass(
                        'invalid-input');
                    $('#project-number-exists-' + type).text('');
                    // Atualiza o estado do botão de envio
                    updateSubmitButtonState();
                }
            });
        });
    </script>


    {{-- <script>
        $(document).ready(function() {

            // Esconde os elementos no carregamento da página
            $('#companyProjectManager').hide();
            $('#installationField').hide();

            $('#localization_installation_client').hide();
            $('#new_company_div').hide();

            $('#company_select').change(function() {
                var companyId = $(this).val();
                var userManagerSelect = $('#user_id'); // Define a variável corretamente

                // Se a seleção é '#', esconde os elementos e retorna
                if (companyId === '#' || companyId === '') {
                    $('#companyProjectManager').hide();
                    $('#installationField').hide();
                    return;
                }

                // Se a seleção é válida (diferente de '#'), mostra os elementos
                $('#companyProjectManager').show();
                $('#installationField').show();

                // Limpa o select antes de adicionar novas opções
                userManagerSelect.empty();
                userManagerSelect.append('<option value="#">Selecione um usuário...</option>');

                // Busca dados combinados de gestores e instalações
                $.get('/api/installations?company_id=' + companyId, function(response) {
                    console.log(response);
                    response.users.forEach(function(user) {
                        userManagerSelect.append('<option value="' + user.user_id + '">' +
                            user.user_name + '</option>');
                    });
                });
            });
        });
    </script> --}}


    <script>
        $(document).ready(function() {
            // Esconde os elementos no carregamento da página
            $('#companyProjectManager').hide();
            $('#installationField').hide();
            $('#localization_installation_client').hide();
            $('#new_company_div').hide();

            $('#company_select').change(function() {
                var companyId = $(this).val();
                var userManagerSelect = $('#user_id'); // Define a variável corretamente
                var installationSelect = $(
                '#installationSelect'); // Define a variável para o select de instalações

                // Se a seleção é '#', esconde os elementos e retorna
                if (companyId === '#' || companyId === '') {
                    $('#companyProjectManager').hide();
                    $('#installationField').hide();
                    $('#localization_installation_client').hide();
                    $('#new_company_div').hide();
                    return;
                }

                // Se a seleção é válida (diferente de '#'), mostra os elementos
                $('#companyProjectManager').show();
                $('#installationField').show();

                // Limpa o select antes de adicionar novas opções
                userManagerSelect.empty();
                userManagerSelect.append('<option value="#">Selecione um usuário...</option>');

                // Adiciona a opção de 'Criar instalação'
                installationSelect.empty(); // Garante que o select de instalações esteja vazio
                installationSelect.append(
                '<option value="#">Selecione uma instalação...</option>'); // Opção placeholder
                installationSelect.append(
                '<option value="new_install">Criar instalação</option>'); // Opção para criar nova instalação

                // Busca dados combinados de gestores e instalações
                $.get('/api/installations?company_id=' + companyId, function(response) {

                    response.users.forEach(function(user) {
                        userManagerSelect.append('<option value="' + user.user_id + '">' +
                            user.user_name + '</option>');
                    });
                });
            });

            // Trata a mudança de seleção no select de instalações
            $('#installationSelect').change(function() {
                var selectedValue = $(this).val();

                // Se a opção selecionada é 'Criar instalação'
                if (selectedValue === 'new_install') {
                    $('#localization_installation_client').hide();
                    $('#new_company_div').show(); // Mostra o div para criar nova instalação
                } else {
                    $('#localization_installation_client')
                .show(); // Caso contrário, mostra os demais elementos relevantes
                    $('#new_company_div').hide();
                }
            });
        });
    </script>







    {{-- <script>
        $(document).ready(function() {

            // $('#installationField').attr('hidden', 'hidden');

            // Esconde os elementos no carregamento da página
            $('#companyProjectManager').hide();
            $('#installationField').hide();

            $('#localization_installation_client').hide();
            $('#new_company_div').hide();

            $('#company_select').change(function() {
                var companyId = $(this).val();

                // Se a seleção é '#', esconde os elementos e retorna
                if (companyId === '#' || companyId === '') {
                    $('#companyProjectManager').hide();
                    $('#installationField').hide();
                    return;
                }

                // Se a seleção é válida (diferente de '#'), mostra os elementos
                $('#companyProjectManager').show();
                $('#installationField').show();

                // Limpa o select antes de adicionar novas opções
                userManagerSelect.empty();
                userManagerSelect.append('<option value="#">Selecione um usuário...</option>');


                // Busca dados combinados de gestores e instalações
                $.get('/api/installations?company_id=' + companyId, function(response) {
                    console.log(response);
                    response.users.forEach(function(user) {
                        userManagerSelect.append('<option value="' + user.user_id + '">' +
                            user.user_name + '</option>');
                    });
                });
                // $.get('/api/installations?company_id=' + companyId, function(response) {

                // var select = $('#installationSelect');
                // select.empty();
                // // Adicione as opções fixas aqui
                // select.append('<option value="#">Selecione uma instalação...</option>');
                // select.append(
                //     '<option value="new_install">Criar uma nova Instalação ?</option>');
                // // Agora você pode adicionar suas opções dinâmicas.
                // $.each(data, function(index, installation) {
                //     select.append('<option value="' + installation.plant_id + '">' +
                //         installation.plant_name + '</option>');
                // });
                // // Armazene os dados em installationsData
                // installationsData = data;
                // $('#installationField').removeAttr('hidden');
                // });
            });

            // $('#company_select').change(function() {
            //     var user_id = $(this).val();

            //     // Se a seleção é 'Criar Empresa ...'
            //     if (user_id === 'new_company') {
            //         $('#new_company_div').show();
            //         $('#installationField').attr('hidden', 'hidden');
            //         $('#localization_installation_client').hide();
            //         return;
            //     } else {
            //         $('#new_company_div').hide();
            //     }

            //     // Se a seleção é o placeholder ou '#'
            //     if (user_id == '#' || user_id === '') {
            //         $('#installationField').attr('hidden', 'hidden');
            //         $('#localization_installation_client').hide();
            //         $('#new_company_div').hide();
            //         return;
            //     }


            // });

            $('#installationSelect').change(function() {
                var selectedValue = $(this).val();

                if (selectedValue == 'new_install') {
                    $('#new_company_div').show();
                    $('#localization_installation_client').hide();
                    $('#new_company_input').hide(); // Esconde o input para nova empresa
                    return;
                } else {
                    $('#new_company_div').hide();
                    $('#localization_installation_client').show();
                    $('#new_company_input').show(); // Mostra o input para nova empresa
                }

                if (selectedValue == '#' || selectedValue === '') {
                    $('#new_company_div').hide();
                    $('#localization_installation_client').hide();
                    return;
                }

                // Verifique se installationsData está definido
                if (installationsData) {
                    // Encontre a instalação selecionada nos dados da instalação
                    var selectedInstallation = installationsData.find(function(installation) {
                        return installation.plant_id == selectedValue;
                    });

                    if (selectedInstallation) {
                        // Preencha o valor do campo de endereço com o endereço da instalação selecionada
                        $('#localization_installation_client input').val(selectedInstallation
                            .plant_address);
                    }
                }
            });
        });
    </script> --}}

    <script type="text/javascript">
        let formSubmitted = false;

        document.addEventListener('DOMContentLoaded', (event) => {
            const form = document.getElementById('idDoFormulario');
            if (form) {
                form.addEventListener('submit', function() {
                    formSubmitted = true;
                });

                form.addEventListener('input', function() {
                    addBeforeUnload();
                });
            } else {
                console.error('Formulário não encontrado!');
            }
        });

        function addBeforeUnload() {
            window.addEventListener('beforeunload', function(e) {
                if (!formSubmitted) {
                    const message = 'Você tem alterações não salvas. Se você sair, perderá essas alterações.';
                    e.returnValue = message;
                    return message;
                }
            });
        }
    </script>
@endsection