@extends('adminlte::page')

@section('title', " $title ")

@section('content')
<div class="container-fluid">

    <div class="row pt-4">
        <div class="col-md-12">

            <form id="editForm" action="{{ route('autorization.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <!-- Modal Header -->
                <div class="modal-header bg-info">
                    <h4 class="modal-title">Autorizar distribuição e gerar O.S</h4>
                </div>
                <!-- Usado para edição, pois estou usando modal -->
                <input type="hidden" id="prospect_id" name="prospect_id" class="form-control" value="{{ $prospect_id ?? '' }}">
                <input type="hidden" id="customer_id" name="customer_id" class="form-control" value="{{ $customer_id ?? '' }}">
                <input type="hidden" name="autorization" class="form-control" value="{{ isset($autorization->id) ? $autorization->id : 1 }}">

                <!-- Modal body -->
                <div class="modal-body">

                    <div class="row mt-2">
                        <div class="col-md-12">
                            <label class="control-label">O.S</label>
                            <input type="text" name="same_autorization" class="form-control" placeholder='Informe se esse serviço vai para alguma A.S expecifica'>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-12">
                            <label class="control-label">* Promoção - <code>Faça o filtro ex: digite uma letra para o sistema buscar a promoção, assim que identificar, selecione ela, senão encontrar cadastre em: Cadastro Geral -> Promoção</code></label>

                            <input type="text" name="search" class="form-control" id="autocompletePromotion-input" value="{{ old('search') }}">

                            <ul id="autocompletePromotion-list" class="autocomplete-list"></ul>

                            <input type="hidden" name="promotion_id" class="form-control" id="promotion-id-input" value="{{ old('promotion_id') }}">

                            <script>
                                /*Autocomplete promoção*/
                                const autocompleteInputPromotion = document.getElementById('autocompletePromotion-input');
                                const autocompleteListPromotion = document.getElementById('autocompletePromotion-list');
                                const promotionIdInput = document.getElementById('promotion-id-input');
                                
                               

                                autocompleteInputPromotion.addEventListener('input', async (event) => {
                                    const queryPromotion = event.target.value;
                                    if (queryPromotion.length >= 1) {
                                        const promotions = await fetchPromotions(queryPromotion);
                                        updateAutocompletePromotion(promotions);
                                    } else {
                                        clearAutocompleteListPromotion();
                                    }
                                });

                                document.addEventListener('click', (event) => {
                                    if (!autocompleteInputPromotion.contains(event.target)) {
                                        clearAutocompleteListPromotion();
                                    }
                                });

                                async function fetchPromotions(queryPromotion) {
                                    const responsePromotion = await fetch(`/app/autorization/getPromotions?search=${queryPromotion}`);
                                    const dataPromotion = await responsePromotion.json();
                                    return dataPromotion;
                                }

                                function updateAutocompletePromotion(resultsPromotion) {
                                    clearAutocompleteListPromotion();

                                    resultsPromotion.forEach(promotion  => {
                                        const listItemPromotion = document.createElement('li');
                                        listItemPromotion.textContent = promotion.name;
                                        listItemPromotion.addEventListener('click', () => {
                                            autocompleteInputPromotion.value = promotion.name;
                                            promotionIdInput.value = promotion.id; // Atribuir o ID do cliente
                                            clearAutocompleteListPromotion();
                                        });
                                        autocompleteListPromotion.appendChild(listItemPromotion);
                                    });

                                    autocompleteListPromotion.style.display = 'block';
                                }

                                function clearAutocompleteListPromotion() {
                                    autocompleteListPromotion.innerHTML = '';
                                    autocompleteListPromotion.style.display = 'none';
                                }
                                
                                // Adiciona a verificação antes de enviar o formulário
                                document.getElementById('editForm').addEventListener('submit', (event) => {
                                    const promotionId = promotionIdInput.value.trim();
                                    if (!promotionId) {
                                        alert('Por favor, informe a promoção. ela deve existir no filtro para prosseguir com a autorização, se a mensagem persistir, cadastre a promoção em: Cadastro Geral -> Promoção');
                                        event.preventDefault(); // Evita o envio do formulário
                                    }
                                });

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

                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="control-label">* Validade</label>
                            <input type="text" name="validate" class="form-control" required="">
                        </div>

                        <div class="col-md-6">
                            <label class="control-label">Emitrir N/F?</label>
                            <select name="nf" class="form-control" required="">
                                <option value="Com N/F">Com N/F</option>
                                <option value="Sem N/F">Sem N/F</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="col-md-4 mt-2">
                        <div class="form-group">
                            <label for="exampleInputFile">Folheto <code>*selecione a Imagem</code></label>
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" name="image" class="custom-file-input" value="" id="exampleInputFile">
                                    <label class="custom-file-label" for="exampleInputFile">Selecione a imagem do folheto</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success shadow" id="saveChangesBtn">Autorizar Distribuição</button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        
        document.addEventListener('DOMContentLoaded', function () {
            let editButtons = document.querySelectorAll('.edit-btn');
            let editForm = document.getElementById('editForm');
            let prospect_id = document.getElementById('prospect_id'); // Renomeado para evitar conflitos
            let customer_id = document.getElementById('customer_id');

            let statusModal = new bootstrap.Modal(document.getElementById('autorization')); // Atualizado para 'status'

            editButtons.forEach(function (button) {
                button.addEventListener('click', async function () {
                    var dataId = this.getAttribute('data-id');
                    let response = await fetch('https://siglv.acessohost.com.br/app/material_perspective/' + dataId + '/edit');

                    if (response.ok) {
                        let data = await response.json();
                        prospect_id.value = data.id; // Preenche o input ID
                        customer_id.value = data.customer_id;
                        statusModal.show(); // Mostra o modal
                    } else {
                        console.error('Erro ao buscar os detalhes.');
                    }
                });
            });

            let saveChangesButton = document.getElementById('saveChangesBtn');
            saveChangesButton.addEventListener('click', function () {
                editForm.submit();
                statusModal.hide(); // Oculta o modal
            });
        });
    </script>

</div>
@stop