@extends('Templates/AdminLayout/AdminLayout')

@section('Main-content')

    @if (session('success'))
        <div class="content">

            <div class="alert alert-success" role="alert" id="alert-message-success" style="transition: opacity 1s;">
                {{ session('success') }}
            </div>
        </div>
        <script>
            setTimeout(function() {
                $('#alert-message-success').fadeOut('slow', function() {
                    $(this).remove();
                });
            }, 5000); // A mensagem desaparecerá após 5 segundos
        </script>
    @endif

    @if (session('danger'))
        <div class="content">
            <div class="alert alert-danger" role="alert" id="alert-message-danger" style="transition: opacity 1s;">
                {{ session('danger') }}
            </div>
        </div>
        <script>
            setTimeout(function() {
                $('#alert-message-danger').fadeOut('slow', function() {
                    $(this).remove();
                });
            }, 10000); // A mensagem desaparecerá após 10 segundos
        </script>
    @endif

    {{-- Todos dos Logs referentes ao Obra atual  --}}
    @if (!$receiveAllLogsProject->isEmpty())
        <div class="content pt-3">
            <div class="card card-danger collapsed-card">

                <div class="card-header clickable">
                    <h3 class="card-title" style="color:black">Logs do Template</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool collapse-button" data-card-widget="collapse"><i
                                class="fas fa-plus"></i></button>
                    </div>
                </div>

                <div class="card-body">

                    <!-- ANTIGO code ficava, esta no note -->
                    <div class="row">
                        <div class="col-sm">
                            @foreach ($receiveAllLogsProject as $log)
                                <div class="card card-danger collapsed-card">
                                    <div class="card-header clickable">
                                        <h3 class="card-title" style="color:black">{{ $log->excel_name }}</h3>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool collapse-button"
                                                data-card-widget="collapse">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        @php
                                            $logs = collect($log->excel_logs); // Aqui assumimos que excel_logs já é um array
                                            $groupedLogs = $logs->groupBy('typePendingLog');
                                        @endphp

                                        @foreach ($groupedLogs as $type => $typeLogs)
                                            <div class="card card-danger collapsed-card">
                                                <div class="card-header clickable">
                                                    <h3 class="card-title" style="color:black">
                                                        @switch($type)
                                                            @case(0)
                                                                Linhas com campos em falta (Nenhum dado criado)
                                                            @break

                                                            @case(1)
                                                                Linhas duplicadas no Excel (Criado pendentes)
                                                            @break

                                                            @case(2)
                                                                Referente a equipamentos ja existentes (Nenhum dado criado)
                                                            @break

                                                            @case(3)
                                                                Equipamentos Novos (Criado novos equipamentos)
                                                            @break
                                                        @endswitch
                                                    </h3>
                                                    <div class="card-tools">
                                                        <button type="button" class="btn btn-tool collapse-button"
                                                            data-card-widget="collapse">
                                                            <i class="fas fa-plus"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <ul>
                                                        @foreach ($typeLogs as $log)
                                                            <li>{{ $log['reason'] ?? 'No specific reason' }} (Line
                                                                {{ $log['line'] ?? $log['duplicate_line'] }})</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        @endforeach

                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>



                </div>

            </div>
        </div>
    @endif




    <input type="hidden" value="{{ $receiveDetailsProject->company_projects_id }}" id="receiveDetailsProject">


    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ $receiveDetailsProject->company_project_description }}</h1>
                    <input type="hidden" value="{{ $receiveDetailsProject->company_projects_id }}"
                        id="receiveDetailsProject">
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                        {{-- <li class="breadcrumb-item"><a href="{{ route('')}}./preparadas.html">Preparadas</a></li> --}}
                        <li class="breadcrumb-item active">{{ $receiveDetailsProject->company_project_description }}</li>
                    </ol>
                </div><!-- /.col -->
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content-header -->

    <fieldset class="content">
        <div class="container-fluid">

            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Articulado(Extra)</h3>
                </div>
                <!-- ./Card-header -->


                <div class="card-body">

                    {{-- Lugar para adicionar Manualmente ou selecionar se necessario --}}

                    <h5 style="color: #09255C;">Criar Pelo Template: (Equipamentos Extras)</h5>
                    <div class="card">
                        <div class="card-header" style="background-color: #EAF3F6;">
                            <form action="{{ route('processStep2') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="numberProject"
                                    value="{{ $receiveDetailsProject->company_projects_id }}">

                                <div class="row align-items-center">
                                    <div class="col-2 col-md-2 col-lg-1">
                                        <a href="{{ route('download', ['numberProject' => $receiveDetailsProject->company_projects_id]) }}"
                                            class="input-group-text border rounded-left"
                                            style="background-color: #ffffff; display: flex; align-items: center; justify-content: center;"
                                            data-toggle="tooltip" title="Baixar Template">
                                            <i class="fa-solid fa-download" style="color: #09255C;"></i>
                                        </a>
                                    </div>

                                    <div class="col-9 col-md col-lg">
                                        <div class="input-group">
                                            <span class="input-group-text border rounded-left"
                                                style="background-color: #ffffff;" data-toggle="tooltip"
                                                title="Seleciona o template que vai utilizar">
                                                <i class="fa-solid fa-file-arrow-up" style="color: #09255C;"></i>
                                            </span>
                                            <div class="custom-file border rounded-right"
                                                style="border-left: none; position: relative;">
                                                <input type="file" class="custom-file-input" id="exampleInputFile"
                                                    name="documento" accept=".xlsx, .xls"
                                                    style="opacity: 0; position: absolute; z-index: -1;">
                                                <label class="custom-file-label" for="exampleInputFile"
                                                    style="background-color: #ffffff; border: 1px solid #09255C; cursor: pointer; color: #09255C;">
                                                    Importar Articulado(Extra)
                                                </label>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-2 col-md-2 col-lg">
                                        <button type="submit" class="btn"
                                            style="background-color: #09255C; color: #ffffff;">Enviar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <script>
                        $(function() {
                            $('[data-toggle="tooltip"]').tooltip();
                        })
                    </script>

                    {{-- Pendente --}}
                    <div class="row">
                        <div class="form-group col-sm-4">
                            <a href='#' data-toggle='modal' data-target='#modal-pedingEquipments'>
                                <br>
                                <button class="btn btn-danger" style="color:black">
                                    Pendentes(Extras) -
                                    @if (isset($pendingEquipments))
                                        ({{ count($pendingEquipments) }})
                                    @endif
                                </button>
                            </a>
                        </div>
                    </div>


                    <div class="row text-center">

                        <div class="col-sm" id="card-receiveUnitsClientRelated">
                            <div class="form-group">
                                <label>Fábricas </label>

                                <select class="form-control" id="receiveUnitsClientRelated1"
                                    name="receiveUnitsClientRelated">
                                    <option value='#' selected>Mostrar Todos</option>
                                    @foreach ($checkUnits as $checkUnit)
                                        <option value="{{ $checkUnit->unit_id }}">
                                            {{ $checkUnit->unit_name }}
                                        </option>
                                    @endforeach
                                </select>

                            </div>
                        </div>

                        <div class="form-group col-sm">
                            <label>Tipo de Equipamento </label>
                            <select id="tipo_valvulasList" name="equipmentTypeId" class="form-control">
                                <option value='#' selected>Mostrar Todos</option>
                                @foreach ($typeEquipments as $typeEquipment)
                                    <option value="{{ $typeEquipment->equipment_type_id }}">
                                        {{ $typeEquipment->equipment_type_name }}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>
                    <!-- row text-center -->

                    <table id="showProjectEquipment" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>NªIspt</th>
                                <th>Tag</th>
                                <th>Descrição</th>
                                <th>Ambito</th>
                                <th>Fabrica</th>
                                <th>Tipo</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                    </table>
                    <!-- ./Card-danger -->
                </div>



                <div class="card-footer">
                    <div class="float-right">
                        {{-- <button type="submit" class="btn btn-primary">Guardar</button> --}}
                    </div>
                </div>

            </div>
            <!-- ./Card card-Primary  -->

            {{-- <a style="margin: 10px" href="{{ route('projectDetails_1', ['id' => $receiveDetailsProject->company_projects_id]) }}"
                class="btn btn-primary  float-left">Detalhes obra</a> --}}
            <a style="margin: 10px"
                href="{{ route('workStation_3', ['id' => $receiveDetailsProject->company_projects_id]) }}"
                class="btn btn-primary  float-right">Postos de Trabalho</a>

        </div>
        {{-- ./container-fluid --}}
    </fieldset>
    {{-- ./content --}}

    {{-- Verificar o porque colocar uma lista de equipamentos sendo que o yajra ja busca os mesmos  --}}
    @foreach ($listEquipmentsProjects as $equipment)
        <div class="modal fade" id="modal-confirmDeleteEquipmentInProject-{{ $equipment->equipment_id }}">
            <div class="modal-dialog">
                <!-- Conteúdo da modal -->
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title">Apagar Equipamento</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('deleteEquipmentInProject') }}" method="post">
                            @csrf
                            Tem certeza de que deseja apagar o equipamento : {{ $equipment->equipment_tag }}?
                            <br><br>
                            <input type="hidden" name="equipmentId" value="{{ $equipment->equipment_id }}">
                            <select class="form-control" name="deleteEquipmentProject" id="">
                                <option value="complete">Apagar Por Completo</option>
                                <option value="onlyProject">Apagar da Obra</option>
                            </select>

                            <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                                <button type="submit" class="btn btn-success">Apagar</button>
                            </div>

                        </form>

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

        <div class="modal fade" id="modal-changeAmbitEquipment-{{ $equipment->equipment_id }}">
            <div class="modal-dialog">
                <!-- Conteúdo da modal -->
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title">Trocar o Ambito, Equipamento : {{ $equipment->equipment_id }} </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('changeAmbitEquipment') }}" method="post">
                            @csrf
                            <p>Seleciona o ambito para qual deseja ser trocado.</p>
                            <input type="hidden" class="equipmentType_id"
                                value="{{ $equipment->equipment_type_id }}">
                            <input type="hidden" name="equipmentID" value="{{ $equipment->equipment_id }}">
                            <select class="form-control ambitsEquipments_list" name="receveAmbit" id="receveAmbit">
                            </select>
                            <br>
                            <button data-dismiss="modal" class="btn btn-danger float-left ">Sair</button>
                            <button class="btn btn-primary  float-right" type="submit">Trocar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    <div class="modal fade" id="modal-addingEquipmentToProject">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="table-responsive">

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


    {{-- modal-pedingEquipments --}}
    <div class="modal fade" id="modal-pedingEquipments">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <!--Codigo Novo -->
                <fieldset class="content">
                    <div class="container-fluid">
                        <h2 class="text-center">Equipamentos Pendentes de Criação:</h2>
                        @isset($pendingEquipments)
                            <ul class="list-group scrollable-list-xl">
                                {{-- @foreach ($pendingEquipments as $pendingEquipment)
                                    <li class="list-group-item align-items-center" aria-current="true">
                                        <div class="card card-primary collapsed-card" style="padding: 0;margin:0;">
                                            <div class="card-header clickable">
                                                <h3 class="card-title">Equipamento :
                                                    {{ $pendingEquipment->pending_equipment_tag }}</h3>
                                                <div class="card-tools">
                                                    <button type="button" class="btn btn-tool collapse-button"
                                                        data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                                                </div>
                                            </div>

                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-sm-8">

                                                    </div>
                                                    <div class="col-sm-4">
                                                        <ul class="text-center d-flex justify-content-around">
                                                            <a href="#" data-toggle="modal"
                                                                data-target="#modal-PendingEquipmentCreate-{{ $pendingEquipment->pending_equipment_id }}">
                                                                <i class="fa-solid fa-eye text-secondary"></i>
                                                            </a>
                                                            <a href="#" data-toggle="modal"
                                                                data-target="#modal-PendingEquipmentRemove-{{ $pendingEquipment->pending_equipment_id }}">
                                                                <i class="fa-solid fa-trash-alt text-danger"></i>
                                                            </a>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach --}}

                                @foreach ($pendingEquipments as $pendingEquipment)
                                    <li class="list-group-item align-items-center" aria-current="true">
                                        <div class="card card-primary collapsed-card" style="padding: 0;margin:0;">
                                            <div class="card-header clickable">
                                                <h3 class="card-title">Equipamento :
                                                    {{ $pendingEquipment->pending_equipment_tag }}</h3>
                                                <div class="card-tools">
                                                    <button type="button" class="btn btn-tool collapse-button"
                                                        data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                                                </div>
                                            </div>

                                            <div class="card-body">
                                                <div class="row">

                                                    <div class="col-sm-8">
                                                        @php
                                                            $logData = json_decode(
                                                                $pendingEquipment->pending_equipment_creation_log,
                                                                true,
                                                            );
                                                        @endphp
                                                        <div class="card-body">
                                                            <h5 class="card-title">Detalhes do Equipamento</h5>
                                                            <p class="card-text"><strong>Nome do Arquivo:</strong>
                                                                {{ $logData['excel_Name'] ?? 'Não disponível' }}</p>
                                                            <p class="card-text"><strong>Motivo:</strong>
                                                                {{ $logData['reason'] ?? 'Não disponível' }}</p>

                                                        </div>
                                                    </div>

                                                    <div class="col-sm-4">
                                                        <div class="text-center d-flex justify-content-around">
                                                            <!-- Botão Azul para visualizar detalhes -->
                                                            <button type="button" class="btn btn-primary"
                                                                data-toggle="modal"
                                                                data-target="#modal-PendingEquipmentCreate-{{ $pendingEquipment->pending_equipment_id }}">
                                                                <i class="fa-solid fa-eye"></i> Visualizar
                                                            </button>

                                                            <!-- Botão Vermelho para remover -->
                                                            <button type="button" class="btn btn-danger" data-toggle="modal"
                                                                data-target="#modal-PendingEquipmentRemove-{{ $pendingEquipment->pending_equipment_id }}">
                                                                <i class="fa-solid fa-trash-alt"></i> Remover
                                                            </button>
                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="row">

                                                    <div class="col-sm">
                                                        <div class="card">

                                                            <ul class="list-group list-group-flush">
                                                                <li class="list-group-item"><strong>Tag do
                                                                        Equipamento:</strong>
                                                                    {{ $pendingEquipment->pending_equipment_tag }}</li>
                                                                <li class="list-group-item"><strong>Descrição:</strong>
                                                                    {{ $pendingEquipment->pending_equipment_description }}
                                                                </li>
                                                                <li class="list-group-item"><strong>Tipo de
                                                                        Equipamento:</strong>
                                                                    {{ $pendingEquipment->equipmentType->equipment_type_name }}
                                                                </li>
                                                                <li class="list-group-item"><strong>Unidade:</strong>
                                                                    {{ $pendingEquipment->unit->unit_name }}</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </li>
                                @endforeach

                            </ul>
                        @else
                            <p colspan="9" class="text-center">Sem dados existentes !!!</p>
                        @endisset
                        <footer class="m-3">
                            <button class="btn btn-danger" data-toggle="modal"
                                data-target="#modal-confirmToExcludeAllPententEquipment">
                                Excluir Todos
                            </button>
                            <button data-dismiss="modal" class="btn btn-primary float-right mb-3">Sair</button>
                        </footer>
                    </div>
                </fieldset>

            </div>
            {{-- ./modal-content --}}
        </div>
    </div>
    {{-- ./modal-pedingEquipments --}}

    @if (isset($pendingEquipments))
        <!-- modal- confirmToExcludeAllPententEquipment  -->
        <div class="modal fade" id="modal-confirmToExcludeAllPententEquipment">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="card card-primary" style="padding: 0;margin:0;">
                        <div class="card-header ">
                            <h3 class="card-title">Confirmação de Exclusão Total</h3>
                        </div>

                        <div class="card-body">
                            <p>"Tem a certeza de que pretende eliminar todos os equipamentos pendentes desta obra? A ação é
                                irreversível."</p>
                            <form action="{{ route('deletePendingEquipments') }}" method="POST">
                                @csrf
                                @foreach ($pendingEquipments as $pendingEquipment)
                                    <input type="hidden" name="pendingEquipmentIds[]"
                                        value="{{ $pendingEquipment->pending_equipment_id }}">
                                @endforeach
                                <button type="submit" class="btn btn-danger float-right mb-3">Excluir Todos</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @foreach ($pendingEquipments as $pendingEquipment)
            <!-- modal-PendingEquipmentCreate  -->

            <div class="modal fade" id="modal-PendingEquipmentCreate-{{ $pendingEquipment->pending_equipment_id }}">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header bg-primary">
                            <h4 class="modal-title">Criar Equipamento</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">x</span>
                            </button>
                        </div>
                        <form
                            action="{{ route('CreateNewEquipmentFromPendingEquipment', $pendingEquipment->pending_equipment_id) }}"
                            method="POST">
                            @csrf

                            <div class="modal-body">
                                <p>Ao optar por criar o equipamento, este assumirá o nome já existente
                                    acrescido de <span class="badge badge-secondary">+1</span>
                                    para indicar o número da cópia e para diferenciá-lo como um equipamento individual em
                                    relação ao equipamento original de mesma TAG.</p>
                                <h4><b>Tag:</b> {{ $pendingEquipment->pending_equipment_tag }} <span
                                        class="badge badge-info">(Número da copia)</span></h4>
                                <h4><b>Descrição:</b> {{ $pendingEquipment->pending_equipment_description }} <span
                                        class="badge badge-info">(Número da copia)</span></h4>
                                {{-- <h4><b>Tipo de Equipamento:</b> {{ $pendingEquipment->equipmentType->equipment_type_name }}
                                </h4> --}}
                                <h4>{{ $pendingEquipment->pending_equipment_type_id }}({{ $pendingEquipment->equipmentType->equipment_type_name }})
                                </h4>

                                <select class="form-control mt-3 mb-4" name="EquipmentAmbit"
                                    id="AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}" required>
                                    <option value='' hidden>Selecionar Âmbitos...</option>
                                    <!-- adicionar opções dinamicamente -->
                                </select>
                            </div>

                            <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-outline-secondary"
                                    data-dismiss="modal">Fechar</button>
                                <button type="submit" class="btn btn-primary">Criar</button>
                            </div>
                        </form>

                    </div>
                    <!-- /.modal-content -->
                </div>
            </div>
            <!-- ./modal-PendingEquipmentCreate -->

            <!-- modal-PendingEquipmentRemove -->
            <div class="modal fade" id="modal-PendingEquipmentRemove-{{ $pendingEquipment->pending_equipment_id }}"
                tabindex="-1" role="dialog" aria-labelledby="modalLabelRemove" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg-primary text-white">
                            <h5 class="modal-title" id="modalLabelRemove">Remover Equipamento</h5>
                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p class="lead">Deseja realmente remover o equipamento?</p>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item"><strong>Tag:</strong>
                                    {{ $pendingEquipment->pending_equipment_tag }}</li>
                                <li class="list-group-item"><strong>Descrição:</strong>
                                    {{ $pendingEquipment->pending_equipment_description }}</li>
                                <li class="list-group-item"><strong>Tipo de Equipamento:</strong>
                                    {{ $pendingEquipment->equipmentType->equipment_type_name }}</li>
                            </ul>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <form action="{{ route('removeEquipment', $pendingEquipment->pending_equipment_id) }}"
                                method="POST" style="width:100%;">
                                @csrf
                                @method('DELETE')
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                <button type="submit" class="btn btn-danger">Remover</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ./modal-PendingEquipmentRemove -->
        @endforeach
    @endif



@endsection


@section('scriptsTemplateAdmin')
    <script>
        var dataTable;
        $(document).ready(function() {

            dataTable = $('#showProjectEquipment').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('getDataEquipment') }}',
                    type: 'GET',
                    data: function(d) {
                        d.numberProject = $('#receiveDetailsProject').val();
                        d.checkUnits = $('#receiveUnitsClientRelated1').val();
                        d.tipo_valvulasList = $('#tipo_valvulasList').val();
                        //O typePage vai referenciar qual a pagina de 'Planeamento' Normal ou Extra.  
                        d.typePage = 2;
                    }
                },
                columns: [{
                        data: 'ispt_number',
                        name: 'ispt_number'
                    },
                    {
                        data: 'equipment_tag',
                        name: 'equipment_tag'
                    },
                    {
                        data: 'equipment_description',
                        name: 'equipment_description'
                    },
                    {
                        data: 'ambit',
                        name: 'ambit'
                    },
                    {
                        data: 'unit_name',
                        name: 'unit_name'
                    },
                    {
                        data: 'equipment_type_name',
                        name: 'equipment_type_name'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
            });
        });

        $('#receiveUnitsClientRelated1, #receiveDetailsProject, #tipo_valvulasList').on('change', function() {
            dataTable.ajax.reload();
        });
    </script>

    {{-- <script type="text/javascript">
    $(document).ready(function() {
        // $('#card-receiveUnitsClientRelated').hide();

        // Evento de mudança para o campo onde numberProject é selecionado
        $('#receiveDetailsProject').on('change', function() {
            
            var numberProject = $(this).val();

            if (numberProject) {
                $.ajax({
                    url: '/api/receiveUnits/' +  numberProject,
                    type: 'GET',
                    success: function(data) {
                        // Supondo que 'data' é um array de objetos com 'id' e 'name'
                        var options = "<option value='#' selected>Mostrar Todos</option>";
                        $.each(data, function(index, item) {
                            options += "<option value='" + item.id + "'>" + item
                                .name + "</option>";
                        });

                        $('#receiveUnitsClientRelated').html(options);
                    },
                    error: function() {
                        // Tratamento de erro
                        console.log('Erro ao carregar dados');
                    }
                });
            }
        });
    });
    </script> --}}


    {{-- Nao vai precisar de scritp, pois este filtro nao vai precisar ser altera. --}}
    {{-- <script type="text/javascript">
    $(document).ready(function() {
        $('#receiveDetailsProject').on('change', function() {
            var numberProject = $(this).val();

            if (numberProject) {
                $.ajax({
                    url: '/api/receiveUnits/' + numberProject,
                    type: 'GET',
                    success: function(data) {
                        console.log(data);
                        var options = "<option value='#' selected>Mostrar Todos</option>";
                        $.each(data, function(index, item) {
                            options += "<option value='" + item.id + "'>" + item
                                .name + "</option>";
                        });

                        $('#receiveUnitsClientRelated').html(options);
                    },
                    error: function() {
                        console.log('Erro ao carregar dados');
                    }
                });
            }
        });
    });
    </script> --}}

    {{-- Receber os Ambitos para criacao de equipamento manual --}}
    <script>
        $(document).ready(function() {
            $('#equipmentType_id_listManual').on('change', function() {
                var equipmentTypeID = $(this).val();
                if (equipmentTypeID) {
                    $.ajax({
                        url: '/api/ambits/' + equipmentTypeID,
                        type: 'GET',
                        success: function(data) {
                            $('#AmbitsEquipments_listManual')
                                .empty(); // Limpar o select de ambits
                            $('#AmbitsEquipments_listManual').append(
                                '<option value="" hidden>Selecionar Tipo de Âmbito...</option>'
                            );
                            $.each(data, function(key, value) {
                                $('#AmbitsEquipments_listManual').append(
                                    '<option value="' +
                                    value.ambits_id + '">' + value
                                    .ambits_description + '</option>');
                            });
                        }
                    });
                } else {
                    $('#AmbitsEquipments_listManual')
                        .empty(); // Limpar o select de ambits se não há tipo de equipamento selecionado
                    $('#AmbitsEquipments_listManual').append(
                        '<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                }
            });
        });
    </script>

    {{-- <script>
        $(document).ready(function() {
            // Asumindo que você tenha um mecanismo para obter o equipmentTypeID a partir de outra parte do seu formulário/modal
            // Por exemplo, você pode ter um campo oculto que armazena o equipmentTypeID
            var equipmentTypeID =
            '{{ $pendingEquipment->pending_equipment_type_id }}'; // Usando Blade para inserir o valor

            if (equipmentTypeID) {
                $.ajax({
                    url: '/api/ambits/' + equipmentTypeID,
                    type: 'GET',
                    success: function(data) {
                        var selectId =
                            "AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}"; // Corrigido para usar o ID dinâmico
                        $('#' + selectId).empty(); // Limpar o select de ambits
                        $('#' + selectId).append(
                            '<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                        $.each(data, function(key, value) {
                            $('#' + selectId).append('<option value="' + value.ambits_id +
                                '">' + value.ambits_description + '</option>');
                        });
                    }
                });
            } else {
                var selectId =
                "AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}"; // Corrigido para usar o ID dinâmico
                $('#' + selectId).empty(); // Limpar o select de ambits se não há tipo de equipamento selecionado
                $('#' + selectId).append('<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
            }
        });
    </script> --}}

    {{-- esse script serve para receber o Ambito das Pendentes ? --}}
    <script>
        $(document).ready(function() {
            @isset($pendingEquipment)
                // Se $pendingEquipment está definido, executa o AJAX
                var equipmentTypeID =
                    '{{ $pendingEquipment->pending_equipment_type_id }}'; // Usando Blade para inserir o valor

                var selectId =
                    "AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}"; // Usando Blade para inserir o valor


                if (equipmentTypeID) {
                    $.ajax({
                        url: '/api/ambits/' + equipmentTypeID,
                        type: 'GET',
                        success: function(data) {
                            $('#' + selectId).empty(); // Limpar o select de ambits
                            $('#' + selectId).append(
                                '<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                            $.each(data, function(key, value) {
                                $('#' + selectId).append('<option value="' + value.ambits_id +
                                    '">' + value.ambits_description + '</option>');
                            });
                        }
                    });
                } else {
                    $('#' + selectId)
                        .empty(); // Limpar o select de ambits se não há tipo de equipamento selecionado
                    $('#' + selectId).append('<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                }
            @endisset
        });
    </script>

    {{-- <script>
        $(document).ready(function() {
            @isset($pendingEquipment)
                // Substituído por leitura do input hidden
                var equipmentTypeID = $('#pendingEquipmentTypeID').val(); // Lê o valor do input oculto
                var selectId = "AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}"; // Mantém como estava
    
                if (equipmentTypeID) {
                    $.ajax({
                        url: '/api/ambits/' + equipmentTypeID,
                        type: 'GET',
                        success: function(data) {
                            $('#' + selectId).empty(); // Limpa o select de âmbitos
                            $('#' + selectId).append('<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                            $.each(data, function(key, value) {
                                $('#' + selectId).append('<option value="' + value.ambits_id + '">' + value.ambits_description + '</option>');
                            });
                        }
                    });
                } else {
                    $('#' + selectId).empty(); // Limpa o select de âmbitos se não houver tipo de equipamento selecionado
                    $('#' + selectId).append('<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                }
            @endisset
        });
    </script> --}}




    {{-- Script para trocas de ambito --}}
    <script>
        $(document).ready(function() {
            $('.equipmentType_id').each(function() {
                var equipmentTypeInput = $(this);
                var equipmentTypeID = equipmentTypeInput.val();
                var ambitsSelect = equipmentTypeInput.closest('.modal-body').find('.ambitsEquipments_list');

                if (equipmentTypeID) {
                    $.ajax({
                        url: '/api/ambits/' + equipmentTypeID,
                        type: 'GET',
                        success: function(data) {
                            ambitsSelect.empty();
                            ambitsSelect.append(
                                '<option value="" hidden>Selecionar Tipo de Âmbito...</option>'
                            );
                            $.each(data, function(key, value) {
                                ambitsSelect.append('<option value="' + value
                                    .ambits_id + '">' + value.ambits_description +
                                    '</option>');
                            });
                        }
                    });
                } else {
                    ambitsSelect.empty();
                    ambitsSelect.append('<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                }
            });
        });
    </script>


    <script>
        $(function() {
            $('#new_unit_div').hide(); // inicialmente ocultamos a div
            $('#new_unit_name').prop('required', false); // inicialmente removemos o requisito

            $('#unit_select').change(function() { // evento quando o valor do select muda
                if ($(this).val() == 'new') { // se a opção selecionada é "new"
                    $('#new_unit_div').show(); // mostramos a div
                    $('#new_unit_name').prop('required', true); // adicionamos o requisito
                } else {
                    $('#new_unit_div').hide(); // senão, ocultamos a div
                    $('#new_unit_name').prop('required', false); // removemos o requisito
                }
            });
        });
    </script>


    {{-- <script>
        $(function() {
            $('#psv_card').hide();
            $('#isv_card').hide();
            $('#cv_card').hide();

            $('#equipmentType_id_list').change(function() {
                // esconde todos os cards
                $('#psv_card').hide();
                $('#isv_card').hide();
                $('#cv_card').hide();

                // desabilita todos os inputs
                $('.card_inputs').prop('disabled', true);


                switch ($(this).val()) {
                    case '1':
                        $('#cv_card').show();
                        $('#cv_card .card_inputs').prop('disabled', false);
                        break;
                    case '2':
                        $('#isv_card').show();
                        $('#isv_card .card_inputs').prop('disabled', false);
                        break;
                    case '3':
                        $('#psv_card').show();
                        $('#psv_card .card_inputs').prop('disabled', false);
                        break;
                }
            });
        });
    </script> --}}

    <script>
        $(function() {
            // Esconde todos os cards inicialmente
            $('#psv_card').hide();
            $('#isv_card').hide();
            $('#cv_card').hide();

            // Evento de mudança no select de tipos de equipamento
            $('#equipmentType_id_listManual').change(function() {
                // Esconde todos os cards
                $('#psv_card').hide();
                $('#isv_card').hide();
                $('#cv_card').hide();

                // Desabilita todos os inputs nos cards
                $('.card_inputs').prop('disabled', true);

                // Mostra o card baseado na opção selecionada e habilita seus inputs
                switch ($(this).val()) {
                    case '1': // Se for CV
                        $('#cv_card').show();
                        $('#cv_card .card_inputs').prop('disabled', false);
                        break;
                    case '2': // Se for ISV
                        $('#isv_card').show();
                        $('#isv_card .card_inputs').prop('disabled', false);
                        break;
                    case '3': // Se for PSV
                        $('#psv_card').show();
                        $('#psv_card .card_inputs').prop('disabled', false);
                        break;
                }
            });
        });
    </script>


    <script>
        $(document).ready(function() {
            $('.fa-eye').parent().click(function(event) {
                event.preventDefault(); // Isso impede que o link seja seguido
                var id = $(this).data('id');
                $('#card-' + id).toggle(); // Isso mostra ou oculta o cartão correspondente
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('.show-card').click(function(e) {
                e.preventDefault(); // Para evitar que o link execute a ação padrão

                var id = $(this).data('id'); // Obtém o id do elemento clicado

                // Alterna a visibilidade do cartão correspondente
                $('#card-' + id).toggle();
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#modal-remover').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                console.log(button); // Log do objeto button para verificar se é o correto
                var id = button.attr('data-id'); // 
                console.log(id);
                var form = $(this).find('form');
                var action = form.attr('action');
                form.attr('action', action.replace(':ID', id));
                $('#equipament_id').val(id);
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            var selectedTasks = []; // Esta variável armazena todas as tarefas selecionadas

            $('.open-modal').click(function(e) {
                e.preventDefault();

                // Limpar os campos de input para cada equipamento 
                $('input[name^="attributes"]').val('');

                // Limpa todos os checkboxes ao abrir a modal
                $('input[name^="ordemTasks"]').prop('checked', false);

                var equipmentId = $(this).data('equipment-id');

                console.log($(this).data());

                $.ajax({
                    url: '/api/equipment/' + equipmentId,
                    method: 'GET',
                    success: function(data) {
                        data.attributes.forEach(function(item) {
                            // Procura o input com name igual a general_attributes_equipment_id e preenche com specific_attributes_value
                            $('input[name="attributes[' + item
                                .general_attributes_equipment_id + ']"]').val(item
                                .specific_attributes_value);
                        });

                        // Limpa o array de tarefas selecionadas
                        selectedTasks = [];

                        data.OrdemTasks.forEach(function(item) {
                            // Procura o checkbox com name igual a elemental_tasks_id e marca como checked
                            var checkbox = $('input[name="ordemTasks[' + item
                                .elemental_tasks_id + ']"]');
                            checkbox.prop('checked', true);

                            // Encontra o objeto correspondente em data.allElementalTasks
                            var correspondingTask = data.allElementalTasks.find(
                                function(task) {
                                    return task.elemental_tasks_id == item
                                        .elemental_tasks_id;
                                });

                            // Verifica se encontrou o objeto correspondente
                            if (correspondingTask) {
                                // Adiciona a tarefa ao array de tarefas selecionadas
                                selectedTasks.push(correspondingTask
                                    .elemental_tasks_code);
                            }
                        });
                        // console.log(selectedTasks);

                        // Limpa o select
                        $('#ArrayListElementsTasks').empty();

                        // Adiciona as opções ao select na ordem correta
                        $.each(selectedTasks, function(index, value) {
                            $('#ArrayListElementsTasks').append(new Option(value,
                                value));
                        });

                        // Abre a modal
                        $('#modal-showEquipment').modal('show');
                    }
                });

                $('#modal-showEquipment').on('hide.bs.modal', function() {
                    // Desmarca todos os checkboxes
                    $('input[name^="ordemTasks"]').prop('checked', false);

                    // Limpa o array de tarefas selecionadas
                    selectedTasks = [];

                    // Limpa o select
                    $('#ArrayListElementsTasks').empty();
                });
            });

            // Monitora mudanças em todos os checkboxes
            $('input[name^="ordemTasks"]').change(function() {
                var taskNumberMatch = this.name.match(/\d+$/);
                if (taskNumberMatch !== null) {
                    var taskName = 'TE' + taskNumberMatch[0];

                    if (this.checked) {
                        // Adiciona a tarefa no array e ordena
                        selectedTasks.push(taskName);
                        selectedTasks.sort();
                    } else {
                        // Remove a tarefa do array
                        var index = selectedTasks.indexOf(taskName);
                        if (index > -1) {
                            selectedTasks.splice(index, 1);
                        }
                    }

                    // Limpa o select
                    $('#ArrayListElementsTasks').empty();

                    // Adiciona as opções ao select na ordem correta
                    $.each(selectedTasks, function(index, value) {
                        $('#ArrayListElementsTasks').append(new Option(value, value));
                    });
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // Detecta quando qualquer checkbox é selecionado ou desmarcado
            $('input[name^="ordemTasks"]').change(function() {
                // Obtém o valor do checkbox (TE1, TE2, etc.)
                var taskValue = $(this).parent().prev().prev().text();

                if (this.checked) {
                    // Adiciona uma nova opção ao select
                    $('#ArrayListElementsTasks').append($('<option>', {
                        value: taskValue,
                        text: taskValue
                    }));
                } else {
                    // Remove a opção do select
                    $("#ArrayListElementsTasks option[value='" + taskValue + "']").remove();
                }
            });

            // Adiciona as opções que já estão marcadas ao carregar a página
            $('input[name^="ordemTasks"]:checked').each(function() {
                var taskValue = $(this).parent().prev().prev().text();

                // Adiciona uma nova opção ao select
                $('#ArrayListElementsTasks').append($('<option>', {
                    value: taskValue,
                    text: taskValue
                }));
            });
        });
    </script>

    <script>
        $(function() {
            $('#descriptionAdditionalTask').hide();

            $('#checkboxAddicionalTask').change(function() {
                if ($('#checkboxAddicionalTask').is(':checked')) {
                    $('#descriptionAdditionalTask').fadeIn();
                } else {
                    $('#descriptionAdditionalTask').hide();
                }
            });
        })
    </script>

    {{-- DataTables puro --}}
    <script>
        $(function() {
            $("#ProjectEquipmentTable").DataTable({
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
            }).buttons().container().appendTo('#ProjectEquipmentTable_wrapper .col-md-6:eq(0)');
        });
    </script>

    {{-- DataTables Yajra --}}
    <script>
        $(document).ready(function() {
            $('#tableSelectEquipements').DataTable({
                autoWidth: false,
                processing: true,
                serverSide: true,
                // Alterar esta parte para a nova forma.
                ajax: {
                    // url: '/api/receiveAllInstallationEquipment/' + $('#receiveDetailsProject').val()
                    url: '{{ route('api_receiveAllInstallationEquipment') }}',
                    type: 'GET',
                    data: function(d) {
                        d.receiveDetailsProject = $('#receiveDetailsProject').val();
                    }
                },
                columns: [{
                        data: 'equipment_tag',
                        name: 'equipment_tag'
                    },
                    {
                        data: 'equipment_description',
                        name: 'equipment_description'
                    },
                    {
                        data: 'equipment_type',
                        name: 'equipment_type'
                    },
                    {
                        data: 'unit',
                        name: 'unit'
                    },
                    {
                        data: 'equipment_id',
                        name: 'equipment_id',
                        render: function(data, type, row) {
                            return '<input type="checkbox" class="equipment-checkbox" value="' +
                                data + '">';
                        },
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            // var selectedEquipments = [];
            // $(document).on('click', '.equipment-checkbox', function() {
            //     var equipmentId = $(this).val();

            //     if ($(this).is(':checked')) {
            //         // Adiciona o equipmentId ao array se a checkbox está marcada
            //         selectedEquipments.push(equipmentId);
            //     } else {
            //         // Remove o equipmentId do array se a checkbox está desmarcada
            //         var index = selectedEquipments.indexOf(equipmentId);
            //         if (index > -1) {
            //             selectedEquipments.splice(index, 1);
            //         }
            //     }
            // });

            // $(document).on('click', '#select-all', function() {
            //     var isChecked = $(this).is(':checked');

            //     // Seleciona ou desseleciona todas as checkboxes
            //     $('.equipment-checkbox').prop('checked', isChecked);

            //     // Adiciona ou remove todos os IDs de equipamento do array selectedEquipments
            //     if (isChecked) {
            //         $('.equipment-checkbox').each(function() {
            //             var equipmentId = $(this).val();
            //             if ($.inArray(equipmentId, selectedEquipments) === -1) {
            //                 selectedEquipments.push(equipmentId);
            //             }
            //         });
            //     } else {
            //         selectedEquipments = [];
            //     }
            // });



            // $(document).on('click', '.equipment-checkbox', function() {
            //     var equipmentId = $(this).val();

            //     if ($(this).is(':checked')) {
            //         // Adiciona o equipmentId ao array se a checkbox está marcada
            //         if ($.inArray(equipmentId, selectedEquipments) === -1) {
            //             selectedEquipments.push(equipmentId);
            //         }
            //     } else {
            //         // Remove o equipmentId do array se a checkbox está desmarcada
            //         var index = selectedEquipments.indexOf(equipmentId);
            //         if (index > -1) {
            //             selectedEquipments.splice(index, 1);
            //         }

            //         // Desmarca a checkbox "selecionar todos"
            //         $('#select-all').prop('checked', false);
            //     }
            // });
            // $(document).on('click', '#addingEquipmentToProject', function() {
            //         // Faça uma solicitação AJAX para a rota desejada
            //         $.ajax({
            //             url: '/api/getEquipmentDetails/' + selectedEquipments, // Substitua por sua rota
            //             method: 'GET',
            //             success: function(response) {
            //                 console.log(response);
            //             },
            //         });
            //     });


            var selectedEquipments = [];

            $(document).on('click', '.equipment-checkbox', function() {
                var equipmentId = $(this).val();

                if ($(this).is(':checked')) {
                    // Adiciona o equipmentId ao array se a checkbox está marcada
                    if ($.inArray(equipmentId, selectedEquipments) === -1) {
                        selectedEquipments.push(equipmentId);
                    }
                } else {
                    // Remove o equipmentId do array se a checkbox está desmarcada
                    var index = selectedEquipments.indexOf(equipmentId);
                    if (index > -1) {
                        selectedEquipments.splice(index, 1);
                    }

                    // Desmarca a checkbox "selecionar todos"
                    $('#select-all').prop('checked', false);
                }
            });

            $(document).on('click', '#select-all', function() {
                var isChecked = $(this).is(':checked');

                // Seleciona ou desseleciona todas as checkboxes
                $('.equipment-checkbox').prop('checked', isChecked);

                // Adiciona ou remove todos os IDs de equipamento do array selectedEquipments
                if (isChecked) {
                    $('.equipment-checkbox').each(function() {
                        var equipmentId = $(this).val();
                        if ($.inArray(equipmentId, selectedEquipments) === -1) {
                            selectedEquipments.push(equipmentId);
                        }
                    });
                } else {
                    selectedEquipments = [];
                }
            });

            $(document).on('click', '#addingEquipmentToProject', function() {
                // Faça uma solicitação AJAX para a rota desejada
                $.ajax({
                    url: '/api/getEquipmentDetails/' + selectedEquipments, // Substitua por sua rota
                    method: 'GET',

                    success: function(response) {

                        $('#modal-addingEquipmentToProject .table-responsive').empty();

                        var form = $(
                            '<form action="{{ route('receiveEquipmentToAssociateTasks') }}" method="post"></form>'
                        );
                        // Ira receber o Número da obra atualmente relacionada
                        var receiveDetailsProject = $('<input>', {
                            type: 'hidden',
                            name: 'receiveDetailsProject',
                            value: $('#receiveDetailsProject').val()
                        });

                        form.append(receiveDetailsProject);

                        form.append('{{ csrf_field() }}');

                        var table = $(
                                '<table class="table table-bordered table-striped"></table>')
                            .addClass('table');
                        var thead = $(
                            '<thead><tr><th>Id</th><th>Tag</th><th>Description</th><th>Unit ID</th><th>Type ID</th><th>Ambits</th></tr></thead>'
                        );
                        table.append(thead);

                        var tbody = $('<tbody></tbody>');

                        response.forEach(function(equipment, index) {


                            var row = $('<tr></tr>');

                            row.append($('<td></td>').text(equipment.equipment_id)
                                .append($('<input>', {
                                    type: 'hidden',
                                    name: 'equipment[' + index +
                                        '][equipment_id]',
                                    value: equipment.equipment_id
                                })));
                            row.append($('<td></td>').text(equipment.equipment_tag)
                                .append($('<input>', {
                                    type: 'hidden',
                                    name: 'equipment[' + index +
                                        '][equipment_tag]',
                                    value: equipment.equipment_tag
                                })));
                            row.append($('<td></td>').text(equipment
                                    .equipment_description)
                                .append($('<input>', {
                                    type: 'hidden',
                                    name: 'equipment[' + index +
                                        '][equipment_description]',
                                    value: equipment.equipment_description
                                })));
                            row.append($('<td></td>').text(equipment.unit_id)
                                .append($('<input>', {
                                    type: 'hidden',
                                    name: 'equipment[' + index +
                                        '][unit_id]',
                                    value: equipment.unit_id
                                })));
                            row.append($('<td></td>').text(equipment.equipment_type_id)
                                .append($('<input>', {
                                    type: 'hidden',
                                    name: 'equipment[' + index +
                                        '][equipment_type_id]',
                                    value: equipment.equipment_type_id
                                })));


                            // Adiciona um select para cada linha com os ambits do equipamento
                            var select = $(
                                '<select class="form-control" name="equipment[' +
                                index + '][ambit_id]">');
                            Object.values(equipment.ambits).forEach(function(ambit) {
                                var option = new Option(ambit
                                    .ambits_description, ambit.ambits_id);
                                select.append(option);
                            });
                            row.append($('<td></td>').append(select));
                            tbody.append(row);
                        });

                        table.append(tbody);

                        // Adiciona um botão de enviar ao formulário
                        form.append(table);
                        form.append(
                            '<button type="submit" class="btn btn-primary">Adicionar a Obra</button>'
                        );

                        $('#modal-addingEquipmentToProject .table-responsive').append(form);
                        $('#modal-addingEquipmentToProject').modal('show');
                    }


                });
            });

        });
    </script>

    <script>
        $(document).ready(function() {
            $('#exampleInputFile').on('change', function() {
                // Obtendo o nome do arquivo
                var fileName = $(this).val().split('\\').pop();

                // Substituindo o texto do rótulo
                $(this).next('.custom-file-label').html(fileName);
            })
        });
    </script>


    {{-- Script para devolver os Ambitos de acordo com o tipo, para equipamentos pendentes --}}
    <script>
        $(document).ready(function() {
            $('[id^="modal-PendingEquipmentCreate-"]').on('show.bs.modal', function(e) {
                // Pega o id do equipamento pendente do id da modal
                var pendingEquipmentID = e.target.id.split('-').pop();

                // Pega o valor do tipo de equipamento do elemento h4
                var equipmentTypeID = $(this).find('h4').last().text();

                // Realiza a chamada AJAX
                if (equipmentTypeID) {
                    $.ajax({
                        url: '/api/ambits/' + equipmentTypeID,
                        type: 'GET',
                        success: function(data) {
                            $('#AmbitsEquipments_list-' + pendingEquipmentID).empty();
                            $('#AmbitsEquipments_list-' + pendingEquipmentID).append(
                                '<option value="" hidden>Selecionar Tipo de Âmbito...</option>'
                            );
                            $.each(data, function(key, value) {
                                $('#AmbitsEquipments_list-' + pendingEquipmentID)
                                    .append('<option value="' +

                                        value.ambits_id + '">' + value
                                        .ambits_description + '</option>');
                            });
                        }
                    });
                } else {
                    $('#AmbitsEquipments_list-' + pendingEquipmentID).empty();
                    $('#AmbitsEquipments_list-' + pendingEquipmentID).append(
                        '<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                }
            });
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.clickable').on('click', function(e) {
                // Verifica se o clique não foi no botão
                if (!$(e.target).is('.collapse-button') && !$(e.target).is('.collapse-button *')) {
                    $(this).find('.collapse-button').trigger('click');
                }
            });
        });
    </script>
@endsection