@extends('Templates/AdminLayout/AdminLayout')

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

                <section class="content-header">
                    <div class="container-fluid">
                        <div class="row mb-2 align-items-center">
                            <!-- Título da página à esquerda -->
                            <div class="col-sm-6">
                                <h1 class="text-left">{{ $projects->company_project_description }} - Detalhes da Obra</h1>
                            </div>
                            <!-- Breadcrumb alinhado à direita -->
                            <div class="col-sm-6">
                                <ol class="breadcrumb float-sm-right">
                                    <li class="breadcrumb-item">
                                        <a href="{{ route('viewProjectsList', ['orderProjectID' => 1]) }}">Em Planeamento</a>
                                    </li>
                                    <li class="breadcrumb-item active">{{ $projects->company_project_description }}</li>
                                    <li class="breadcrumb-item active">1 - Detalhes da Obra</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- @dd($projects) --}}

                <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">Detalhes da Obra</h3>
                        </div>

                        <div class="card-body">
                            <form method="POST" action="{{ route('EditprocessStep1') }}" id="idDoFormulario">

                                @csrf

                                <input type="hidden" name="projectId" value="{{ $projects->company_projects_id }}">
                                <input type="hidden" name="statusProject" value="edit">

                                <div class="row">
                                    <div class="form-group col-sm-6">
                                        <label>Descrição da obra</label>
                                        <input type="text" name="description_project" class="form-control"
                                            placeholder="Descrição da obra"
                                            value="{{ $projects->company_project_description }}">
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label>Nº. obra ISPT</label>

                                        {{-- <input type="text" name="n_project_ispt" class="form-control" data-type="ispt"
                                            placeholder="Nº. obra ISPT…" value="{{ $projects->project_ispt_number }}"> --}}

                                        <input type="text" name="n_project_ispt" class="form-control" data-type="ispt"
                                            placeholder="{{ __('messages.createProject.ispt_project_number') }}&hellip;"
                                            value="{{ $projects->project_ispt_number }}" required>

                                        <div id="project-number-exists-ispt"></div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-sm-6">
                                        <label>Responsável obra ISPT</label>
                                        <input type="text" name="responsible_project_ispt" class="form-control"
                                            placeholder="Responsável obra ISPT&hellip;"
                                            value="{{ $projects->project_ispt_responsible }}">
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label>Responsável obra Empresa</label>

                                        <select class="form-control" name="responsible_project_company"
                                            id="responsible_project_company">
                                            <!-- Opção para mostrar o gestor atual, sempre como a primeira opção se existir -->
                                            @if ($projects->NameCompanyManager)
                                                <option value="{{ $projects->NameCompanyManagerID }}">
                                                    {{ $projects->NameCompanyManager }}</option>
                                            @endif

                                            <!-- Opção para não ter gestor atribuído, apenas se NameCompanyManagerID não for null -->
                                            @if ($projects->NameCompanyManagerID !== null)
                                                <option value="undefined">Gestor da empresa ainda não atribuído...</option>
                                            @endif

                                            <!-- Lista todos os gestores disponíveis, exceto o atual -->
                                            @foreach ($receiveAllCompanyManager as $companyManager)
                                                @if ($companyManager->user_id != $projects->NameCompanyManagerID)
                                                    <option value="{{ $companyManager->user_id }}">
                                                        {{ $companyManager->user->user_name }}</option>
                                                @endif
                                            @endforeach
                                        </select>



                                    </div>
                                </div>

                                <div class="row">

                                    <div class="form-group col-sm-6" id="companyField">
                                        <label>Empresa Obra</label>
                                        <input type="text" name="user_id" class="form-control"
                                            value="{{ $projects->userName }}" readonly>

                                    </div>

                                    <div class="form-group col-sm-6" id="">
                                        <label>Instalação Obra</label>
                                        <input type="text" name="plant_id_present" class="form-control"
                                            value="{{ $projects->plantName }}" readonly>
                                    </div>

                                </div>

                                <div class="row" id="new_company_div">

                                    <div class="form-group col-sm-6">
                                        <label>Nova Instalação :</label>
                                        <input type="text" id="new_company_name" class="form-control"
                                            name="new_company_name" placeholder="Digite o nome da nova empresa">
                                    </div>

                                    <div class="form-group col-sm-6">
                                        <label>Nova Localização</label>
                                        <input type="text" class="form-control" name="new_company_address"
                                            placeholder="Localização...">
                                    </div>
                                </div>


                                <div class="form-group" id="localization_installation_client">
                                    <label>Localização</label>
                                    <input type="text" class="form-control" placeholder="Localização" readonly>
                                </div>


                                <div class="row">
                                    <div class="form-group col-sm-6">
                                        <label>Nome da obra. Empresa</label>
                                        <input type="text" name="project_company_name" class="form-control"
                                            data-type="company" placeholder="Nº. de obra cliente…"
                                            value="{{ $projects->project_company_name }}">
                                        <div id="project-number-exists-company"></div>
                                    </div>

                                    <!-- Date -->
                                    <div class="form-group col-sm-6">
                                        <label>Data inicio prevista da obra:</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="far fa-calendar-alt"></i>
                                                </span>
                                            </div>
                                            <input type="text" class="form-control "
                                                value="{{ \Carbon\Carbon::parse($projects->date_started)->format('d/m/Y H:i:s') }}"
                                                readonly>
                                            <input type="hidden" name="date_started_present"
                                                value="{{ $projects->date_started }}">
                                        </div>
                                    </div>

                                    <div class="form-group col-sm-6">
                                        <label>Nova data inicio obra:</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="far fa-calendar-alt"></i>
                                                </span>
                                            </div>
                                            <input name="date_started" type="datetime-local"
                                                class="form-control float-right" min="{{ now()->format('Y-m-d\TH:i') }}">
                                        </div>
                                        <!-- /.input group -->
                                    </div>

                                </div>
                                <!-- /.card-body -->

                                <div class="card-footer">
                                    <div class="float-right">
                                        <button type="submit" class="btn btn-primary" id="submitButton">Gravar</button>
                                    </div>
                                </div>
                            </form>

                            {{-- Model --}}
                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h2 class="modal-title fs-5" id="exampleModalLabel">Confirmação de eliminação
                                                da obra</h2>
                                        </div>
                                        <div class="modal-body">
                                            <form
                                                action="{{ route('deleteProject', ['projectId' => $projects->company_projects_id]) }}">
                                                @csrf
                                                <input type="hidden" name="">
                                                <p>
                                                    Ao proceder com a eliminação, estará a excluir a obra atual, o que
                                                    implicará também a remoção dos postos de trabalho associados e a
                                                    desvinculação dos equipamentos relativos à obra em questão. No entanto,
                                                    os equipamentos gerados a partir desta não serão eliminados.
                                                </p>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-primary">Apagar</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- /.card-body --}}

                    </div>
                    <a style="margin: 10px" data-bs-toggle="modal" data-bs-target="#exampleModal"
                        class="btn btn-danger next float-left mt-3">Apagar Obra</a>

                    <a style="margin: 10px"" href="{{ route('articulated_2', ['projectID' => $projects]) }}"
                        class="btn btn-primary next float-right mt-3">2 - Criar Articulado</a>
                </div>
                {{-- /.card card-primary --}}
            </fieldset>

        </div>
    </div>

    <!-- SCript para verificar se Numeros ->obra ISPT e obra Empresa, nao podem ser repetidos -->
    {{-- <script>
        function updateSubmitButtonState() {
            // Verifica se existe algum input inválido
            var anyInvalid = $('.invalid-input').length > 0;
            // Desabilita o botão se houver algum inválido, habilita se não houver
            $('#submitButton').prop('disabled', anyInvalid);
        }

        $(document).ready(function() {
            // Define um ouvinte de evento para quando o valor dos inputs muda
            $('input[name="n_project_ispt"], input[name="project_company_name"]').on('input', function() {
                var number = $(this).val();
                var type = $(this).data('type');
                var projectId = $('input[name="projectId"]').val();

                // Verifica se o input não está vazio
                if (number.length > 0) {
                    $.ajax({
                        url: '{{ route('checkProjectIsptNumber') }}' + (projectId ? '/' +
                            projectId : ''),
                        type: 'GET',
                        data: {
                            number: number,
                            type: type
                        },
                        success: function(response) {
                            // Se o número já existir e não for do projeto atual, marca como inválido
                            if (response.exists && !response.isCurrentProjectNumber) {
                                $(this).css('border', '2px solid red').addClass('invalid-input')
                                    .removeClass('valid-input');
                                $('#project-number-exists-' + type).text('Número já existe')
                                    .css('color', 'red');
                            } else {
                                // Se o número não existir ou for do projeto atual, marca como válido
                                $(this).css('border', '2px solid green').addClass('valid-input')
                                    .removeClass('invalid-input');
                                $('#project-number-exists-' + type).text('');
                            }
                            updateSubmitButtonState(); // Atualiza o estado do botão
                        }.bind(this)
                    });
                } else {
                    // Se o campo for limpo, remove qualquer marcação e atualiza o estado do botão
                    $(this).css('border', '1px solid #ced4da').removeClass('invalid-input').removeClass(
                        'valid-input');
                    $('#project-number-exists-' + type).text('');
                    updateSubmitButtonState();
                }
            });
        });
    </script> --}}


    <script>
        $(document).ready(function() {
            function updateSubmitButtonState() {
                var inputsValid = $('.valid-input').length === 2;
                var selectsValid = $('#company_select').val() !== '#' &&
                    $('#user_id').val() !== '#' &&
                    $('#installationSelect').val() !== '#';

                $('#submitButton').prop('disabled', !(inputsValid && selectsValid));
            }

            var projectId = $('input[name="projectId"]').val();

            $('input[name="n_project_ispt"]').on('input', function(e) {
                var inputValue = $(this).val();
                // Permite apenas números e hífens, remove outros caracteres
                var validValue = inputValue.replace(/[^0-9-]/g, '');
                $(this).val(validValue); // Atualiza o campo com o valor válido

                var type = $(this).data('type');

                if (validValue.length > 0) {
                    $.ajax({
                        url: '{{ route('checkProjectIsptNumber') }}' + (projectId ? '/' +
                            projectId : ''),
                        type: 'GET',
                        data: {
                            number: validValue, // Envia o valor como o usuário digitou, incluindo hífens
                            type: type
                        },
                        success: function(response) {
                            // Se o número já existir e não for do projeto atual, marca como inválido
                            if (response.exists && !response.isCurrentProjectNumber) {
                                $(this).css('border', '2px solid red').addClass('invalid-input')
                                    .removeClass('valid-input');
                                $('#project-number-exists-' + type).text('Número já existe')
                                    .css('color', 'red');
                            } else {
                                // Se o número não existir ou for do projeto atual, marca como válido
                                $(this).css('border', '2px solid green').addClass('valid-input')
                                    .removeClass('invalid-input');
                                $('#project-number-exists-' + type).text('');
                            }
                            updateSubmitButtonState(); // Atualiza o estado do botão
                        }.bind(this)
                    });
                } else {
                    $(this).css('border', '1px solid #ced4da').removeClass('valid-input invalid-input');
                    $('#project-number-exists-' + type).text('');
                    updateSubmitButtonState();
                }
            });


            // Para input[name="project_company_name"]
            $('input[name="project_company_name"]').on('input', function() {
                var inputValue = $(this).val();
                var type = $(this).data('type');

                if (inputValue.length > 0) {
                    $.ajax({
                        url: '{{ route('checkProjectIsptNumber') }}' + (projectId ? '/' +
                            projectId : ''),
                        type: 'GET',
                        data: {
                            number: inputValue,
                            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();
                }
            });

            $('#company_select, #user_id, #installationSelect').on('change', function() {
                updateSubmitButtonState();
            });
        });
    </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() {
                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);
                    }
                }
            });

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




    {{-- <script>
        // Atribua a URL ao atributo formaction do botão
        document.getElementById('btn-download-template').setAttribute('formaction', downloadUrl);

        (function() {
            const tabelaExcel1 = document.getElementById('tabelaExcel1');

            function handleFormSubmit(event) {
                event.preventDefault(); // Previne o comportamento padrão do formulário
                const inputFile = document.getElementById('inputDocumento').files[0];
                const reader = new FileReader();
                reader.readAsBinaryString(inputFile);
                reader.onload = function() {
                    const fileData = reader.result;
                    const workbook = XLSX.read(fileData, {
                        type: 'binary'
                    });
                    const worksheet1 = workbook.Sheets[workbook.SheetNames[0]];
                    const tableData1 = XLSX.utils.sheet_to_json(worksheet1);
                    const tabelaHtml1 = criarTabelaHtml(tableData1);
                    const tabelaExcel1 = document.getElementById('tabelaExcel1');
                    if (tabelaExcel1 !== null) {
                        tabelaExcel1.innerHTML = tabelaHtml1;
                    }
                };
            }

            function criarTabelaHtml(dados) {

                const colunasObj = dados[2];
                const colunasheader = Object.keys(colunasObj).map(key =>
                    colunasObj[key]);

                console.log(dados);

                const colunasHtml = colunasheader.map(coluna => `<th>${coluna}</th>`).join('');

                const colunas = Object.keys(dados[2]);

                const linhasHtml = dados
                    .slice(3)
                    .map(linha => {
                        const celulasHtml = colunas.map(coluna => {
                            const valor = linha[coluna] !== undefined ? linha[coluna] : 'NULL';
                            return `<td>${valor}</td>`;
                        }).join('');
                        return `<tr>${celulasHtml}</tr>`;
                    })
                    .join('');

                // console.log()
                return `
                    <table class="table table-bordered">
                    <thead>
                        <tr>${colunasHtml}</tr>
                    </thead>
                    <tbody>
                        ${linhasHtml}
                    </tbody>
                    </table>
                    `;
            }

            const form = document.querySelector('form');
            form.addEventListener('submit', handleFormSubmit);
        })();
    </script> --}}
@endsection