@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-6">
                                        <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>

                                    <!-- 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"
                                            placeholder="{{ __('messages.createProject.ispt_project_number') }}&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>

                                    <!-- Gestor de Projeto da Empresa  -->
                                    <div class="form-group col-sm-6">
                                        <label>{{ __('messages.createProject.compan_project_manager') }} <b
                                                style="color:red">*</b></label>
                                        <input type="text" name="responsible_project_company" class="form-control"
                                            placeholder="{{ __('messages.createProject.compan_project_manager') }}&hellip;"
                                            required>
                                    </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="user_id" id="company_select">
                                            <option>{{ __('messages.createProject.select_plant.plant') }} ...</option>
                                            <option value="new_company">Criar Empresa ...</option>
                                            @foreach ($companies as $company)
                                                <option value="{{ $company->user_id }}">{{ $company->user_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Instalação -->
                                    <div class="form-group col-sm" id="installationField" hidden>
                                        <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 -->

                                {{-- Criar uma nova instalacao / Empresa  --}}
                                <div class="row" id="new_company_div">
                                    {{-- Vai ser a criacao do Projecto  --}}
                                    <div class="form-group col-sm" id="new_company_input">
                                        <label>Nova Empresa</label>
                                        <input type="text" class="form-control" name="new_company"
                                            placeholder="Nova Empresa&hellip;">
                                    </div>

                                    <!-- Selecionar ou criar instalacoes -->
                                    <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>

                                    <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> <!-- /Row -->


                                <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"
                                            placeholder="{{ __('messages.createProject.company_project_number') }}&hellip;"
                                            required>
                                    </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>
                                        </div>
                                        <!-- /.input group -->
                                    </div>


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

                                <div class="card-footer">
                                    <div class="float-right">
                                        <button type="submit"
                                            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() {

            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>
        $(document).ready(function() {
            // Esconde os elementos no carregamento da página
            $('#localization_installation_client').hide();
            $('#new_company_div').hide();
            $('#installationField').attr('hidden', '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;
                }

                $.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');
                });
            });

            $('#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