@extends('painel-admin.menu')
@section('title', 'Controles de Qualidade')
@section('content')
    @if(session('errors'))
            <div class="alert alert-danger">
                <ul>
                    @foreach(session('errors')->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    <form method="POST" id="formEnvioDados" action="{{route('ControleDeQualidade.update', $codigo)}}">
    @csrf
    @method('put')
        <div class="row">
            <div class="col-12 mt-3">
                <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center flex-wrap">
                    <h2 class="mb-3 mb-sm-0">Controles de Qualidade</h2>

                    <div class="d-flex flex-column flex-sm-row flex-wrap" style="gap: 5px;">
                        <a href="{{ route('ControleDeQualidade.index') }}" class="btn btn-danger">Voltar</a>
                        <button type="button" class="btn btn-primary" id="btnSalvar">Alterar</button>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        
        @php
            $respostasPorEmpresa = $respostas->groupBy('id_empresa');
        @endphp

        @foreach($respostasPorEmpresa as $idEmpresa => $respostasEmpresa)
            <div class="row">
                <div class="col-md-12 mb-3">
                    <label><strong>Empresa</strong></label>
                    @if (!empty($idEmpresa))
                        <a title="Visualizar Empresa" href="{{ route('empresas.edit', $idEmpresa) }}" target="_blank">
                            <i class="fas fa-eye ml-1"></i>
                        </a>
                    @endif
                    <select id="cliente" class="custom-select @error('cliente') is-invalid @enderror select2" name="id_empresa" autocomplete="cliente">
                        <option></option>
                        @foreach($empresas as $empresa)
                            <option  data-cnpj="{{ $empresa->CGCCliente }}" value="{{ $empresa->Codigo }}" {{ old('cliente', $idEmpresa) == $empresa->Codigo ? 'selected' : '' }}>
                                {{ $empresa->RazaoSocialCliente . ' - ' . $empresa->CGCCliente }}
                            </option>
                        @endforeach
                    </select>
                    @if ($errors->has('cliente'))
                        <p class="text-danger">{{ $errors->first('cliente') }}</p>
                    @endif
                </div>
            </div>
            @foreach($respostasEmpresa as $key => $resposta)
                @php
                    $pergunta = $perguntas->where('id', $resposta->id_pergunta)->first();
                @endphp
                <div class="row mt-2">
                    <div class="col-md-12 mb-3">
                        <label><strong>{{ $pergunta->pergunta ?? 'Pergunta não encontrada' }}</strong></label>
                        <textarea
                            name="respostas[{{ $resposta->id }}][resposta]"
                            class="form-control {{ $key === 0 ? 'primeira-resposta' : '' }}"
                        >{{ $resposta->resposta }}</textarea>
                        <input type="hidden" name="respostas[{{ $resposta->id }}][id]" value="{{ $resposta->id }}">
                    </div>
                </div>
            @endforeach
        @endforeach
    </form>


  
   
    <style>
        .scrollbar-horizontal {
            overflow-x: auto;
        }

        .select2-container {
            width: 100% !important;
        }

        .select2-selection--single {
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 6px 12px; 
            height: 38px !important;
            box-sizing: border-box;
        }

        .select2-selection__arrow {
            height: 36px;
            top: 1px;
        }

        .select2-selection__rendered {
            color: #495057;
            line-height: 28px; 
            padding-left: 4px; 
        }

        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #80bdff;
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 12px;
            color: #6c757d;
        }
    </style>
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/pt-BR.js"></script>   
    <script>
        var currentItemId = 'controles-link';

        document.getElementById('btnSalvar').addEventListener('click', function(event) {
            event.preventDefault();

            Swal.fire({
                title: 'Confirmação',
                text: 'Deseja realmente alterar esse Controle de Qualidade?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('formEnvioDados').submit();
                }
            });  
        });

        var $j = jQuery.noConflict();
        $j(document).ready(function() {
            var oldCliente = "{{ old('cliente') }}";

            if (oldCliente) {
                $j.ajax({
                    url: '/buscar-cliente-id',
                    dataType: 'json',
                    data: { id: oldCliente },
                    success: function(data) {
                        if (data) {
                            // Adiciona a opção manualmente ao select
                            var newOption = new Option(data.nome, data.id, true, true);
                            $j('#cliente').append(newOption).trigger('change');
                        }
                    }
                });
            }

            $j('#cliente').select2({
                theme: 'default',
                language: "pt-BR",
                width: '100%',
                ajax: {
                    url: '/buscar-cliente',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return { q: params.term };
                    },
                    processResults: function (data) {
                        return { results: data.results };
                    },
                    cache: true
                },
                minimumInputLength: 1,
                placeholder: 'Digite a razão social ou fantasia para buscar',
            });

            $j('#cliente').on('select2:select', function (e) { 
                var data = e.params.data;
            });
        });

        $j(document).ready(function () {
            $j('#cliente').select2();

            function atualizarPrimeiraRespostaComCNPJ() {
                let selectedOption = $('#cliente').find('option:selected');
                let cnpj = selectedOption.data('cnpj');
                $j('.primeira-resposta').val(cnpj);
            }

            $j('#cliente').on('select2:select', function (e) {
                atualizarPrimeiraRespostaComCNPJ();
            });

            atualizarPrimeiraRespostaComCNPJ();
        });


    </script>
@endsection