ispt4.0_laravel/resources/views/projectsClients/createProject.blade.php

@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"
                                            @required(true)>
                                            {{-- <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>Selecione um gestor...</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}" required>
                        </div>
                    `);
                }
            });
        });
    </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() {
            function updateSubmitButtonState() {
                // Verifica se os inputs e os selects são válidos
                var inputsValid = $('.valid-input').length === 2;
                var selectsValid = $('#company_select').val() !== '#' &&
                    $('#user_id').val() !== '#' &&
                    $('#installationSelect').val() !== '#';

                // Habilita ou desabilita o botão de envio com base na validade dos inputs e selects
                $('#submitButton').prop('disabled', !(inputsValid && selectsValid));
            }

            // Verifica mudanças nos inputs especificados
            $('input[name="n_project_ispt"], input[name="project_company_number"]').on('input', function() {
                var number = $(this).val();
                var type = $(this).data('type');

                if (number.length > 0) {
                    $.ajax({
                        url: '{{ route('checkProjectIsptNumber') }}',
                        type: 'GET',
                        data: {
                            number: number,
                            type: type
                        },
                        success: function(response) {
                            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 {
                                $(this).css('border', '2px solid green').removeClass(
                                    'invalid-input').addClass('valid-input');
                                $('#project-number-exists-' + type).text('');
                            }
                            updateSubmitButtonState();
                        }.bind(this)
                    });
                } else {
                    $(this).css('border', '1px solid #ced4da').removeClass('valid-input invalid-input');
                    $('#project-number-exists-' + type).text('');
                    updateSubmitButtonState();
                }
            });

            // Verifica mudanças nos selects
            $('#company_select, #user_id, #installationSelect').on('change', function() {
                updateSubmitButtonState();
            });
        });
    </script>

    {{-- <script>
        $(document).ready(function() {
            var installationSelect = $('#installationSelect');

            // Inicializa o select de instalações com a opção placeholder e a opção para criar nova instalação
            installationSelect.empty();
            installationSelect.append('<option value="#">Selecione uma instalação...</option>');
            installationSelect.append('<option value="new_install">Criar instalação</option>');
            $('#new_company_div').hide();

            var userManagerSelect = $('#user_id');
            var newCompanyDiv = $('#new_company_div');

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

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

                $('#companyProjectManager').show();
                $('#installationField').show();

                userManagerSelect.empty();
                userManagerSelect.append('<option value="#">Selecione um usuário...</option>');

                // Apenas limpa e adiciona a opção placeholder se uma empresa válida for selecionada
                installationSelect.empty();
                installationSelect.append('<option value="#">Selecione uma instalação...</option>');
                installationSelect.append('<option value="new_install">Criar instalação</option>');

                $.get('/api/installations?company_id=' + companyId, function(response) {
                    response.users.forEach(function(user) {
                        userManagerSelect.append('<option value="' + user.user_id + '">' +
                            user.user_name + '</option>');
                    });

                    response.installations.forEach(function(plant) {
                        installationSelect.append('<option value="' + plant.plant_id +
                            '">' + plant.plant_name + '</option>');
                    });
                });
            });

            $('#installationSelect').change(function() {
                var selectedValue = $(this).val();
                if (selectedValue === 'new_install') {
                    $('#localization_installation_client').hide();
                    $('#new_company_div').show();
                } else {
                    $('#localization_installation_client').show();
                    $('#new_company_div').hide();
                }
            });

        });
    </script> --}}


    <script>
        $(document).ready(function() {
            var installationSelect = $('#installationSelect');
            var userManagerSelect = $('#user_id');
            var newCompanyDiv = $('#new_company_div');
    
            // Inicializa com o select de instalações e esconde o div para nova instalação
            installationSelect.append('<option value="#">Selecione uma instalação...</option>');
            installationSelect.append('<option value="new_install">Criar instalação</option>');
            newCompanyDiv.hide();
    
            $('#company_select').change(function() {
                var companyId = $(this).val();
    
                if (companyId === '#' || companyId === '') {
                    $('#companyProjectManager').hide();
                    $('#installationField').hide();
                    newCompanyDiv.hide();
                    return;
                }
    
                $('#companyProjectManager').show();
                $('#installationField').show();
    
                userManagerSelect.empty();
                userManagerSelect.append('<option value="#">Selecione um usuário...</option>');
    
                installationSelect.empty();
                installationSelect.append('<option value="#">Selecione uma instalação...</option>');
                installationSelect.append('<option value="new_install">Criar instalação</option>');
    
                $.get('/api/installations?company_id=' + companyId, function(response) {
                    response.users.forEach(function(user) {
                        userManagerSelect.append('<option value="' + user.user_id + '">' +
                            user.user_name + '</option>');
                    });
    
                    response.installations.forEach(function(plant) {
                        installationSelect.append('<option value="' + plant.plant_id + '">' + plant.plant_name + '</option>');
                    });
                });
            });
    
            $('#installationSelect').change(function() {
                var selectedValue = $(this).val();
                if (selectedValue === 'new_install') {
                    newCompanyDiv.show();
                    // Adiciona o atributo 'required' para os inputs dentro de #new_company_div
                    $('#new_company_div input[type="text"], #new_company_div select').attr('required', true);
                } else {
                    newCompanyDiv.hide();
                    // Remove o atributo 'required' quando não é a opção de nova instalação
                    $('#new_company_div input[type="text"], #new_company_div select').removeAttr('required');
                }
            });
        });
    </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